Media Queries: Make a div dissapear in some?

I'm using media queries to try and make my site more mobile/ tablet friendly.
I have two headers, one for desktop, one for mobile.
They are in two seperate divs, how can I make only the desired div show up osing the css?
I tried,
.header
width:0px;
height:0px;
overflow: hidden;
but, on browsers pulled to a small screen it looks fine.
On an actual phone, it shows both headers!
Any ideas?

Display:none = nothing in that region is displayed.
http://www.w3schools.com/css/css_display_visibility.asp
Visbility:hidden = content is hidden but the space allocated for it remains in view.
http://www.w3schools.com/cssref/pr_class_visibility.asp
Nancy O.

Similar Messages

  • IPhone Not Recognizing Media Queries

    http://www.sandiegohomegrown.com/testSDTG/
    This is my first RWD site and is a work in progress.  I have been testing it on emulators, google's "view responsive layouts", ipad, and it all works - albeit it's not done.  I tried it finally on my iPhone and it seems to not be recognizing my media queries.  I can dsplay:none in the media queries and it makes no difference.  This has to be an easy fix!  I have viewport set up and again it works on iPad just fine as well on desktops when you minimize the screen but on the actual iPad it shows a horrible version of the full site.
    Thanks for taking a look at this!
    Gary
    PS:  I will clean up the code - this is a work in progress.

    I figured out a few things but not all.  It seems to work on iPhone 5 but not with new Galaxy or my older iPhone.  I can guess that the issue with the iPhone is similar to why it doesn't render correctly on my old iPad but works fine with my new one, but baffled why the Galaxy doesn't recognize the media queries and viewport.  Will do some research on this but if anyone knows post it here!

  • Im trying to reorder divs when in the mobile version of my site, is it possible to do it with media queries?

    Im trying to reorder divs when in the mobile version of my site, is it possible to do it with media queries? Here is the layout in desktop view, red being what would be images. And when i rescale, the content stacks together to place two of the same boxes together, like so;
    Is it possible to apply a rule so when scaled the boxes reorder to show red, black, red, black, red, black?

    <div class="productcontainer3">
    <div class="product3"></div>
    </div>
    <div class="productcontainer4">
    <div class="product4"><h6>Manta Soledo</h6><p1>In here will be the Manta blurb! Not too much technical info, save that for product page. Make it sleek and elegant. </p1></div>
    </div>
    <div class="productcontainer1">
    <div class="product1"><h6>Manta Soledo</h6><p1> In here will be the Manta blurb! Not too much technical info, save that for product page. Make it sleek and elegant.</p1> </div>
    </div>
    <div class="productcontainer2">
    <div class="product2"></div>
    </div>
    <div class="productcontainer5">
    <div class="product5"></div>
    </div>
    <div class="productcontainer6">
    <div class="product6"><h6>Manta Soledo</h6><p1>In here will be the Manta blurb! Not too much technical info, save that for product page. Make it sleek and elegant. </p1></div>
    .productcontainer1 {
      float: left;
      clear: both;
      max-width: 604px;
      width: 49%;
      margin-right: 1%;
      margin-bottom: 4%;
      margin-top: 1%;
    @media all and (max-width: 600px) {
    .productcontainer1 {
      width: 100%;
    .productcontainer2 {
      float: left;
      max-width: 604px;
      width: 49%;
      margin-bottom: 4%;
      margin-top: 1%;
    @media all and (max-width: 600px) {
    .productcontainer2 {
      width: 100%;
    .productcontainer3 {
      float: left;
      clear: both;
      max-width: 604px;
      width: 49%;
      margin-right: 1%;
      margin-bottom: 4%;
    @media all and (max-width: 600px) {
    .productcontainer3 {
      width: 100%;
    .productcontainer4 {
      float: left;
      max-width: 604px;
      width: 49%;
      margin-bottom: 4%;
    @media all and (max-width: 600px) {
    .productcontainer4 {
      width: 100%;
    .productcontainer5 {
      float: left;
      clear: both;
      max-width: 604px;
      width: 49%;
      margin-right: 1%;
    @media all and (max-width: 600px) {
    .productcontainer5 {
      width: 100%;
    .productcontainer6 {
      float: left;
      max-width: 604px;
      width: 49%;
    @media all and (max-width: 600px) {
    .productcontainer6 {
      width: 100%;
    .product1 {
      Width: 100%;
      padding-bottom: 50%;
      float: left;
      background-position: center;
        background-size: cover;
        background-repeat: none;
    .product2:hover {
      background-image:url(../Graphics/iMod-rollover.jpg);
    .product2 {
      Width: 100%;
      background-image:url(../Graphics/iModindex.jpg);
      padding-bottom: 50%;
      float: left;
      background-position: center;
        background-size: cover;
        background-repeat: none;
      -webkit-transition: background-image .8s ease-in-out;
      -moz-transition: background-image .8s ease-in-out;
      -ms-transition: background-image .8s ease-in-out;
      -o-transition: background-image .8s ease-in-out;
      transition: background-image .8s ease-in-out;
    .product3 {
      Width: 100%;
      padding-bottom: 50%;
      float: left;
      background-position: center;
        background-size: cover;
        background-repeat: none;
      background-image:url(../Graphics/Ilanoindex.jpg);
      -webkit-transition: background-image .8s ease-in-out;
      -moz-transition: background-image .8s ease-in-out;
      -ms-transition: background-image .8s ease-in-out;
      -o-transition: background-image .8s ease-in-out;
      transition: background-image .8s ease-in-out;
    .product4 {
      Width: 100%;
      padding-bottom: 50%;
      float: left;
      background-position: center;
        background-size: cover;
        background-repeat: none;
    .product3:hover {
      background-image:url(../Graphics/Ilano-rollover.jpg);
    .product5 {
      Width: 100%;
      background-image:url(../Graphics/Soledoindex.jpg);
      padding-bottom: 50%;
      float: left;
      background-position: center;
        background-size: cover;
        background-repeat: none;
      -webkit-transition: background-image .8s ease-in-out;
      -moz-transition: background-image .8s ease-in-out;
      -ms-transition: background-image .8s ease-in-out;
      -o-transition: background-image .8s ease-in-out;
      transition: background-image .8s ease-in-out;
    .product5:hover {
      background-image: url(../Graphics/Soledorollover.jpg);
    .product6 {
      Width: 100%;
      padding-bottom: 50%;
      float: left;
      background-position: center;
        background-size: cover;
        background-repeat: none;

  • I am using media queries and div will not centre on desktop version

    Hi,
    I am building a site for the first time using media queries. My problem is that I cannot get the header div (#layoutDiv1) to centre on the desktop version.
    I have pasted my code below, am I missing something?
    Any help would be great.
    Thanks, Alex.
    /* Mobile Layout: 480px and below. */
    .gridContainer {
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      color: #FFF;
      background-color: #000;
    #LayoutDiv1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 90%;
      display: block;
      padding-top: 20px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
    @media only screen and (min-width: 481px) {
    .gridContainer {
      width: 100%;
    #LayoutDiv1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 90%;
      display: block;
      padding-top: 20px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
    /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
    @media only screen and (min-width: 769px) {
    .gridContainer {
      width: 100%;
      text-align: left;
    #LayoutDiv1 {
      width: 1000px;
      padding: 20px;
      margin-right: auto;
      margin-left: auto;

    Because you don't have max-width to constrain the responsive design attributes from the tablet and phone are also then applied to the desktop because they are true.  Have you tried either setting a max-width or setting the clear and float to none in the desktop CSS?

  • Media Queries Adjustable full height div

    Hi Everyone,
    I am building a website using media queries but I want to know if it is possible to have an initial div that automatically fits the full width and height of the screen in which it is viewed. Obviously then scale down once the browser window is scaled.
    If it can be done can anyone point me to a tutorial or give me the answer here.
    Thank You.
    Kind Regards,
    Alex

    Forget last post, try this: (change 'yourBackgroundImage.jpg' to the name of YOUR image)
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="charset=UTF-8">
    <title>Untitled Document</title>
    <style>
    html,
    body {
    height: 100%;
    body {
    margin: 0;
    padding: 0;
    #bgCover {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    background-image: url('yourBackgroundImage.jpg');
    background-position: center top;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
    #navigation {
        position: fixed;
        width: 100%;
        background-color: #000;
        color: #fff;
        padding: 20px 0;
        text-align: center;
        z-index: 2;
        font-size: 20px;
    #pageTitle {
    color: #000;
    font-size: 70px;
    text-align: center;
    margin: 0 auto;
    padding-top: 300px;
    #pageContent p {
        padding: 20px 40px;
        margin: 0;
    </style>
    </head>
    <body>
    <div id="navigation">
    Navigation goes here
    </div>
    <div id="bgCover">
    <div id="pageTitle">Headline Goes Here</div>
    </div>
    <div id="pageContent">
        <p>Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.</p>
    ere. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.</p>
    </div>
    </body>
    </html>

  • Media queries keep overwriting eachother

    I have a created two media queries. However when I edit one, the other is over written with the previous media query's properties. I have noticed that the primary html div holds the class of whatever the most recently edited media query is.  Can someone please give me some idea of what is happening?
    Here is an example of the html:
    <div class="mainGraphic">
    <img src="images/home_scholarship.jpg" alt="" class="mainGraphic" /></div>
    <div class="mainContent">
    <div class="bannerHome"><img src="images/banner_iphone6.png" alt="" class="bannerSmall750" /></div>
    <div class="bannerHome"><img src="images/banner_tv.png" alt="" class="bannerSmall750-2" /></div>
    <div class="bannerHome"></div>
    <div class="bannerHome"><img src="images/banner_internet.png" alt="" class="bannerSmall750-3" /></div>
    <div class="bannerHome"><img src="images/banner_tvonmyside.png" alt="" class="bannerSmall750-4" /></div>
      </div>
    Here is an example of the CSS:
    @media screen and (max-width:750px){
    .mainContent {
      padding-top: 5px;
    .bannerSmall750 {
      width: 182px;
      margin-left: -15px;
    .bannerSmall750-2 {
      width: 172px;
      margin-left: -10px;
    .bannerSmall750-3 {
      width: 177px;
      margin-left: -15px;
    .bannerSmall750-4 {
      width: 173px;
      margin-left: -15px;
    .mainBanner750 {
      width: 750px;
    #container {
      width: 750px;
      height: auto;
      margin-top: 1px;
      margin-right: auto;
      margin-left: auto;
      text-align: left;
      padding-left: 1px;
      background-color: rgba(255,255,255,1.00);
      -webkit-box-shadow: 0px 0px 18px hsla(0,0%,14%,1.00);
      box-shadow: 0px 0px 18px hsla(0,0%,14%,1.00);
    .mainGraphic {
      width: 750px;
      height:
    @media only screen and (max-width:480px){
    .mainContent {
      padding-top: 5px;
    .mainBanner480 {
      width: 380px;
      height:170px;
    #container {
      width: 480px;
      height: 780px;
      margin-top: 1px;
      margin-right: auto;
      margin-left: auto;
      text-align: left;
      padding-left: 1px;
      background-color: rgba(255,255,255,1.00);
      -webkit-box-shadow: 0px 0px 18px hsla(0,0%,14%,1.00);
      box-shadow: 0px 0px 18px hsla(0,0%,14%,1.00);
    .headerLogo {
      margin-bottom: 10px;
      margin-top: -16px;
      padding-left: 113px;
      padding-top: px;
      padding-bottom: 15px;
    .headerLinks a {
      text-decoration: none;
      color: rgba(208,208,208,1.00);
      padding-left: 0px;
      font-size: 14px;
      font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
      padding-right: 34px;
      right: -69px;
      bottom: -92px;
      position: relative;
      margin-right: 7px;
      margin-left: -42px;
    .mainGraphic {
      width: 480px;
      height:
    .mainContent .bannerHome img1 {
    .mainContent .bannerHome img2 {
      width: 200px;
      margin-left: 50px;
    .mainContent .bannerHome img3 {
        width: 200px;
      margin-left: 20px;
    .mainContent .bannerHome img4 {
    width: 200px;
      height:286px;
      margin-left: 40px;
    .smallBanner480-1 {
      width: 200px;
      height:296px;
      margin-left: 30px;

    Wow, had I known I wouldn’t have updated either. I always thought updates were good.
    Okay, so I already have my overall html codes and divs completed.
    So I go to the CSS Designer panel, select my primary css file under ‘Sources’. 
    I select the ‘@Media panel and select the ‘plus’ sign to add new media queries. I define my media queries of screen and (max-width:768px) and screen and(max-width:480px).
    Once that’s done and they show up under the  ‘@Media’ panel, I go back to select my primary css file under the ‘Sources’ panel. Select ‘global’ under the ‘@Media’ panel and choose the selector I want to target.
    I select .mainGraphic and right click to select ‘Duplicate into media query’ then choose my first target of ‘screen and  (max-width:768px)
    Once I see that selector in my ‘screen and (max-width:768px) query I begin to apply different properties to it to make it adjust as desired.
    I follow the same procedure with duplicating into the ‘screen and (max-width:480px)’ query and adjusting to properties as desired.
    This is when I notice from switching back to my first designed query that the changes made in the 480px are now on the 768px query and vice versa.

  • Where is the mobile style sheet for media queries?

    When I create a new document in Dreamweaver CC, I get the following @media queries:
    GLOBAL
    only screen and (min-width : 481px)
    only screen and (min-width : 769px)
    Where is the mobile style sheet?
    I thought the fluid grid layout option in DW would create 3 screen sizes.
    Do I have to create another special style sheet to only apply to the mobile version?
    When I click on the mobile icon at the bottom of Dreamweaver's CC screen, I see the mobile page with the 4 column grid.
    But how do I make changes to just one screen size, say mobile?
    When I have the mobile view on my screen, and have GLOBAL @Media selected, the changes I make go across all screen sizes. I want some styling to only be applied to mobile. I don't understand how to do this. Could somone please claify if I am missing a @Media sheet and how to create it if needed. Thanks.

    FGLayouts are built on the mobile first scheme.  There's nothing you have to do.
    Nancy O.

  • Media Queries:  Works on Mac but not Windows

    http://www.sandiegohomegrown.com/testSDTG/
    I have been coding this site on my Mac and it works with Firefox, Safari, and Chrome.  I fired up the old Windows machine and it doesn't work with Safari, Firefox, or IE10.  It just ignores the media queries completely.  This has to be something really simple but I am baffled.  Help!!  Gary

    Alt attributes on images are not significant for rendering.  Did you fix the duplicate ID problems? Those are important.
    Windows OS doesn't ignore media queries but some browsers will if they see code errors they can't reconcile.
    Make sure IE is NOT running in Compatibility Mode which is practically the same as IE7.
    If you want to ensure IE always opens in standards mode, add this meta tag to the <head> of your HTML pages.
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    Nancy O.

  • Using media queries?

    Ive designed the layout for my website and want to make it user friendly for other devices, desktop, tablet, ipad, mobiles (smartphones and iphones). Ive got the basic layout ready and thought this would be the best time to tackle the media queries before i start to add all the content. Im not sure if the layout i currently have is ready/suitable to apply the media queries to?
    Appreciate any help.
    This is the code, you can aslo view the page here - www.milesfunerals.com/index2.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    <title>Untitled Document</title>
    <style type="text/css"&gt;
    body {
              background-image: url(Images/Background.jpg);
    </style>
    <link href="style sheet.css" rel="stylesheet" type="text/css" /&gt;
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"&gt;</script&gt;
    <script src="scripts/jquery-1.6.min.js" type="text/javascript"&gt;</script&gt;
    <script src="scripts/jquery.cycle.all.js" type="text/javascript"&gt;</script&gt;
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /&gt;
    </style>
    <style type="text/css"&gt;
    /* BeginOAWidget_Instance_2559022: #slideshow_2 */
                                  #slideshow_2 {
              padding: 0px;
              margin-right: auto;
              margin-left: auto;
              height: 200px;
              width: 1000px;
              margin-top:0;
                                  #slideshow_2 img, #slideshow_2 div { 
                                      padding: 0px;
                                      background-color: #EEE;
                                            -webkit-border-radius: 0px;
                                            -moz-border-radius: 0px;
                                            border-radius: 0px;
                                      margin: 0;
                                            position: absolute;
    /* EndOAWidget_Instance_2559022 */
    </style>
    <script type="text/xml"&gt;
    <!--
    <oa:widgets&gt;
      <oa:widget wid="2559022" binding="#slideshow_2" /&gt;
    </oa:widgets&gt;
    -->
    </script>
    </script>
    <style type="text/css"&gt;
    <!-- Start PureCSSMenu.com STYLE --&gt;
    <style>
    #pcm{display:none;}
    ul.pureCssMenu ul{
              display:none;
    ul.pureCssMenu li:hover&gt;ul{
              display:block;
              height:auto;
    ul.pureCssMenu ul{
              position: absolute;
              left:100%;
              top:-1px;
              padding-right: 0px;
    ul.pureCssMenu ul ul{
              position: absolute;left:98%;top:-2px;
    ul.pureCssMenu,ul.pureCssMenu ul {
              margin:0px;
              list-style:none;
              height: auto;
              padding-top: 0px;
              padding-right: 0px;
              padding-left: 0px;
              width: 350px;
              margin-top: 120px;
              margin-left: 8px;
              background-image:url(Images/button.jpg);
              background-repeat:no-repeat;
    ul.pureCssMenu table {border-collapse:collapse
    ul.pureCssMenu {
              display:block;
              zoom:1;
              _width:auto;
              float: left;
              z-index: 3;
    ul.pureCssMenu ul{
              margin-top: 0px;
    ul.pureCssMenu li{
              display:block;
    ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
              outline-style:none;
    ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
              display:block;
              zoom:1;
              border-color:#;
              text-align:left;
              text-decoration:none;
              padding-bottom:14px;
              padding-top:10px;
              padding-left:12px;
              text-decoration:none;
              cursor:default;
              font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
              font-size: 18px;
              font-weight: bold;
              color: #000;
              text-shadow: 1px 1px 1px #FFF;
              background-image:url(Images/button.jpg);
              background-repeat:no-repeat;
    ul.pureCssMenu span{
              overflow:hidden;
    ul.pureCssMenu ul li {
              float:none;
    ul.pureCssMenu ul a {
              text-align:left;
              white-space:nowrap;
    ul.pureCssMenu li.sep{
              text-align:left;
              padding:0px;
              line-height:0;
    ul.pureCssMenu li.sep span{
              float:none;
              width:100%;
              height:3;
              display:inline-block;
    ul.pureCssMenu li:hover{
              position:relative;
              z-index: 3;
    ul.pureCssMenu li:hover&gt;a{
              border-color:#;
              text-decoration:none;
              font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    ul.pureCssMenu li a:hover{
              position:relative;
              border-color:#;
              color: #956221;
              text-decoration:none;
              font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
              font-size: 18px;
              font-weight: bold;
    ul.pureCssMenu li.dis a {
              color: #000000 !important;
    ul.pureCssMenu img {
              border: none;
              float:left;
              _float:none;
              margin-right:4px;
    ul.pureCssMenu ul img {
    ul.pureCssMenu img.over{display:none}
    ul.pureCssMenu li.dis a:hover img.over{display:none !important}
    ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
    ul.pureCssMenu li:hover &gt; a img.def  {display:none}
    ul.pureCssMenu li:hover &gt; a img.over {display:inline}
    ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover img.over{display:inline}
    ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover a:hover img.def{display:none}
    ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover a:hover ul{
              display:block;
    ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul,ul.pureCssMenu a:hover a:hover a:hover ul ul,ul.pureCssMenu a:hover a:hover a:hover a:hover ul ul,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover ul ul,ul.pureCssMenu a:hover a:hover a:hover a:hover a:hover a:hover ul ul{display:none}
    ul.pureCssMenu span{
              display:block;
              background-image:url(Images/arrow_sub1.gif);
              background-repeat: no-repeat;
              background-position:right center;
              background-repeat: no-repeat;
       padding-right:15px;}
    ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{
              background-image:url(Images/arrow_sub1.gif)
    </style>
    <!-- End PureCSSMenu.com STYLE --&gt;
    </head>
    <body>
    <LINK REL="SHORTCUT ICON" HREF="http://www.milesmemorials.com/favicon.ico"&gt;
    <div class="#container">
    <div id="bannerDiv" class="bannerStyle"&gt;
        <img src="Images/banner.jpg" width="1000" height="168" alt="banner"/&gt;
         </div>
      <div id="navbar" class="navbarRule"&gt;
        <ul id="MenuBar1" class="MenuBarHorizontal"&gt;
          <li&gt;<a href="index.html"&gt;Home</a&gt;</li&gt;
          <li&gt;<a href="about-us.html"&gt;About us</a&gt;</li&gt;
          <li&gt;<a href="why-us.html"&gt;Why choose us</a&gt;</li&gt;
          <li&gt;<a href="contact.html"&gt;Contact us</a&gt;</li&gt;
          <li&gt;<a href="request.html"&gt;Request a brochure</a&gt;</li&gt;
        </ul&gt;
      </div>
      <div id="slideshow2"&gt;<script type="text/javascript"&gt;
    // BeginOAWidget_Instance_2559022: #slideshow_2
                               slideshow_2AddCaption=false;
    $(document).ready(function() {
              $('#slideshow_2').cycle({
                        after:                              slideshow_2OnCycleAfter, //the function that is triggered after each transition
                        autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                        fx:                                        'fade,',// name of transition effect
                        pause:                              false,     // true to enable pause on hover
                        randomizeEffects:          true,  // valid when multiple effects are used; true to make the effect sequence random
                        speed:                              4000,  // speed of the transition (any valid fx speed value)
                        sync:                              true,     // true if in/out transitions should occur simultaneously
                        timeout:                    3000,  // milliseconds between slide transitions (0 to disable auto advance)
                        fit:                              false,
                        height:                       '200px',
                        width:         '1000px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
    function slideshow_2OnCycleAfter() {
              if (slideshow_2AddCaption==true){
                                  $('#slideshow_2-caption').html(this.title);
    // EndOAWidget_Instance_2559022
      </script>
        <div id="slideshow_2"&gt;
          <!--All elements inside this will become slides-->
         <img src="Images/ssimage1.jpg" width="1000" height="200" alt="image1" /&gt;<img src="Images/ssimage2.jpg" width="1000" height="200" alt="image2" /&gt;<img src="Images/ssimage3.jpg" width="1000" height="200" alt="image3" /&gt;
        </div>
        <div id="mainContent" class="mainText"&gt;
          <h1>A memory is a lasting tribute that acknowledged the life of your loved one ...let us help you to design a memorial that is every bit as special as that person. </h1>
          <ul class="pureCssMenu pureCssMenum"&gt;
            <li&gt;<a  href="cemetery-memorials.html"&gt;Churchyard memorials<![if gt IE 6]&gt;</a&gt;</li&gt;
                <li&gt;<a href=""&gt;Churchyard memorials<![if gt IE 6]&gt;</a&gt;</li&gt;
                <li&gt;<a  href=""&gt;Cremation memorials<![if gt IE 6]&gt;</a&gt;</li&gt;
           <li&gt;<a  href="" &gt;<span&gt;Vases</span&gt;<![if gt IE 6]&gt;</a&gt;<![endif]&gt;<!--[if lte IE 6]&gt;<table&gt;<tr&gt;<td&gt;<![endif]--&gt;
              <ul&gt;
                <li&gt;<a  href=""&gt;Italian marble vases</a&gt;</li&gt;
                <li&gt;<a  href=""&gt;Granite vases</a&gt;</li&gt;
              </ul&gt;
            <!--[if lte IE 6]&gt;</td&gt;</tr&gt;</table&gt;</a&gt;<![endif]--&gt;</li&gt;
            <li&gt;<a  href="" &gt;<span&gt;Colour guides</span&gt;<![if gt IE 6]&gt;</a&gt;<![endif]&gt;<!--[if lte IE 6]&gt;<table&gt;<tr&gt;<td&gt;<![endif]--&gt;
              <ul&gt;
                <li&gt;<a  href=""&gt;Italian marble & churchyard memorial</a&gt;</li&gt;
                <li&gt;<a  href=""&gt;Granite colour guide</a&gt;</li&gt;
              </ul&gt;
            <!--[if lte IE 6]&gt;</td&gt;</tr&gt;</table&gt;</a&gt;<![endif]--&gt;</li&gt;
            <li&gt;<a  href="" &gt;Home & garden memorials</a&gt;</li&gt;
            <li&gt;<a  href=""&gt;Inscription & vases</a&gt;</li&gt;
            <li&gt;<a  href=""&gt;Engraved designs</a&gt;</li&gt;
            <li&gt;<a  href="" &gt;Sand blasted designs</a&gt;</li&gt;
            <li&gt;<a  href="" &gt;Photos,plaques,etc</a&gt;</li&gt;
            <li&gt;<a  href=""&gt;Italian marble figurines</a&gt;</li&gt;
            <li&gt;<a  href="" &gt;Bronze figurines & accessories</a&gt;</li&gt;
            <li&gt;<a  href="" &gt;Memorial garden plaques</a&gt;</li&gt;
      </ul&gt;
      </div>
    </div>
    <script type="text/javascript"&gt;
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
        </script>
    </body>
    </html>

    So i have inserted several media queries to my page and this is what appears at the top of the code -
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Home page</title>
    <style type="text/css">
    body {
              background-image: url(Images/Background.jpg);
    </style>
    <link href="style sheet.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.cycle.all.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!-- desktop -->
    <link href="desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:1224px)" />
    <!-- smartphones -->
    <link href="smartphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width:320px) and (max-width:480px)" />
    <!-- ipad -->
    <link href="ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width:760px) and (max-width:1024px)" />
    <!-- iphone -->
    <link href="iphone.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)" />
    </style>
    I now want to apply the style rules to each of the files (desktop.css, smartphone.css, ipad.css, iphone.css). I just dont know where to start with this as im still new to dreamweaver. 
    www.milesmemorials.com/index2.html

  • Dreamweaver CC How to edit styles across media queries and sizes

    I am creating a fulid grid/responsive website, using the standard Media queries offered by Dreamweaver CC when I start a new document.
    I have creative several DIVs to sturcture my page.
    I don't understand how to apply changes between the various media queries.
    Frist, I see you can drag the width of the boxes to adust how wide you want the portions to be. That I get. But what I don't understand is to apply different formatting/styles in the different screen sizes. There used to be a box that would pop up when you wanted to create a new class. Now I can't figure out which version of the screen to work in and how to make changes ONLY to one screen size.
    Here's an example of what I want to do:
    The main portion of my website has 4 categories, that I would like the user to be able to choose from to click on.
    On the mobile view, I want the image align left, text to the right of that, aligned left, and for the  background of each category to be the same color so that it looks like one big button on mobile.
    On tablet and desktop view, I want the image centered within the DIV, then the text centered under each image. I want the graphic image (which is in a circle) to stand out on a white background.
    In the tablet view, I have it organized by 2 rows and 2 columns.
    In the tablet view, I have it organized by 1 row and 4 columns.
    I hope this make sense.
    How do I signifyand create these changes? I have tried entering it in the code. That just seems to center it every image in every DIV (remember I want it aligned left in mobile) Or I tired entering it on the code in another way and that centered the image across the whole page, not just the DIV. HOw do I work around these problems? Do I need to make them all a class instead of a DIV? I am really confused....
    Please be nice as I am obviously a bit of a beginner and struggling with this basic concept. I appreciate any guidance or help that anyone has to offer.

    #1 Build mobile first.  Everything else is based on that primary layout.  Don't worry so much about content yet.  Just get your mobile layout in order.  Then build tablet and finally desktop.
    #2 Do not tamper with code in your FluidGrid.css or Boilerplate.css files.  These files are temperamental.  Use a separate external style sheet for your content styles.   That way if you do something wrong, it won't break the whole layout.
    #3 Keep your layout structure simple and uncomplicated.  No tables, no positioned elements.
    #4 Everything needs to be inside the <gridContainer> div.  If it's not, it won't be responsive.
    Nancy O.

  • Responsive Design and @media queries

    I thought my HTML/CSS guns were loaded and good to go; and then I started reading about responsive web design!
    If I have a rule declared in the main body of my CSS and add a media query what happens to the existing rule?
    It looks to me with my experimenting so far that if I take a style in the main section and duplicate that with some edits for a smaller width, I have to then remove it from the original and replicate it in another @media query.  Is that correct? 
    So if I have this:
    header {
        background: url("images/headerhand.png") no-repeat scroll left top transparent;
        height: 300px;
        margin: 40px auto 0;
        min-height: 300px;
        text-align: left;
        width: 100%;
    I need to put this in a @media query for the below break point:
    header {
        background: none;
        height: 300px;
        margin: 40px auto 0;
        min-height: 300px;
        text-align: left;
        width: 100%;
    I then take the rule out of the main section of my style sheet and put that in another media query for the above break point.
    So if I have a header element with background image and color, and border-radius and whatever but only want to lose the background image at a certain break point, I then need two @media queries one for below the break point and one for above and then remove the whole rule from the main section of the site?
    Oh my, that was so complicated, I am not sure I even understand my own question!
    Martin
    PS "Mobile First" is starting to make a lot of sense!

    osgood_ wrote:
    pziecina wrote:
    Hi Os
    As an example, (using Jennys Chocolate Cookies) would it not make more sense to design a mobile only web site, complete with geolocation that shows the nearest outlet selling the cookies?
    So you are saying forget the desktop monster (assign that to the bin) and convince the client mobile is the way to go? Even if that is the case it still seems that you're going to need two or three different design set ups to satifsy the majority of devices, which means more expense, right? Plus from what I've seen the information all crushed into a 400px wide screen looks a bit shite, no?
    Reply -
    No I am saying that one should offer the type of site/service that best suits the clients needs, be this a desktop, responsive or mobile only web site, or even telling the client that an advert in yellow pages would be better.
    pziecina wrote:
    The same may also apply to a restaurants web page, after all it is often the directions to the restaurant, and its proximity to oneself that are important when one is looking for somewhere to go out for a meal, is it not?
    Can't see what location or direction has to do with anything or proximity to oneself. I look in yellow pages if I need a restaurant or I identify it on the computer before I go out........but then again I'm old so maybe younger people do all this whilst they are out. So we come down to demographics - cut out whatever section of society at your own peril. I guess a nightclub would be a better example, can't see many 50 plus year olds wanting to know where one of those are on the move.
    Reply -
    So you are out and about, or driving home and suddenly decide that you would like to go for an Indonesian meal, do you now get the yellow pages out?
    BTW - I am over 60.
    pziecina wrote:
    As for testing on mobile devices, a good testing set-up now costs less than £400, ($600) and most items one will already own.
    They are -
    1  A smartphone, (most people have one now and a good budget smartphone can be purchased for under £70.00)
    2. A tablet device, (An budget android device now cost about £120.00, and can also be used as an e-reader)
    3. A iPod-Touch (If it works on this it will also work exactly the same on the iPhone)
    Well I guess you have to factor in the cost of getting connected to the net on these mobile devices to check everything. I dunno if anyone in the UK offers a reasonable monthly package whereby you can be connected to all these devices 24/7 and not rack up any additional charge per minute.
    Reply -
    Use Shadow and your home wifi network, extra cost nothing.
    PZ

  • "Add media queries" button disabled

    Hi,
    I've downloaded the pack and everything else seems to work fine, but when I enter in the multiscreen preview window, the add media queries button is disabled (the viewport sizes is active) and I can't find any other way to bring up the menu for the css selection based on screen width.
    Am I  missing something? Or is there some  incompatibility when using the pack in English while having the main software in Spanish?
    Thanks.

    The HTML5 Pack should work fine with the Spanish version of DW.  What OS are you using?  What language is your OS (English, Spanish)?
    There is a known issue where the Add Media Queries button is sometimes disabled if you are in Live View and the URL in the Browser Navigation toolbar Address field starts with "http://".  If you close the file and then re-open it a few times, the Add Media Queries button should eventually become enabled.  It's kind of a random problem.
    Please let us know if this helps or not to enable the Add Media Queries button.
    Thanks,
    David Alcala
    Dreamweaver QE

  • "SHOW FONTS" button NOT dissapears with some title selections?

    Re: Titles- Why does the "SHOW FONTS" button dissapears with some title selections? It is there in the upper left of the window where you make titles, but after making some titles it won't show again? The only info that might be helpful is that the button seems not to appear on the titles that have fonts other than the default offerings. But I have no idea how they were assigned those odd fonts. I believed I was only selecting from those default fonts. Thanks!

    There are certain titles that do not allow you to edit the Fonts. You can’t change the style of some animated titles, such as Pixie Dust and Lens Flare, or themed titles, which are represented by gold title bars.
    Interestingly, if you have Final Cut Pro X, you can edit these titles, including the fonts, but not in iMovie.
    For more see this portion of Help.
    http://help.apple.com/imovie/#mov3a621837

  • Fluid grid with added media queries not working with {display: none}

    Fluid grid layout using added media queries to fix break points will not use {display:none} properly. When I try to hide a div in moble view it hides the div in all views. I was able to hide the div using width: 0% which works in all browsers except for Safari.
    Here is the css
    @charset "utf-8";
    /* Simple fluid media
       Note: Fluid media requires that you remove the media's height and width attributes from the HTML
       http://www.alistapart.com/articles/fluid-images/
    img, object, embed, video {
      max-width: 100%;
    hr {
      color: #e1e1e1;
      width: 90%;
      text-align: center;
    td {
      color:#7d7e7f;
    element.style {
        width: 150px;
      color:#7d7e7f;
      margin-right:20px;
    /* Top Talent subscribe to email */
    .inputTTemail {
      width: 130px;
      height: 35px;
      background-image: url(file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/images/submitArrow.png) ;
      background-repeat: no-repeat;
      background-position: right center;
      background-color: #ec8423;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      text-align: left;
      color: #FFF;
      border: none;
      padding-top: 5px;
    #ttEnewsletter {
      width:250px;
      background-color:#FFF;
      padding:10px;
    input[type="text"],input[type="email"] {
      width:200px;
      font-family:Tahoma, Geneva, sans-serif;
      font-size:1em;
      color:#7d7e7f;
      margin-bottom:1em;
      padding-left:15px;
    /* IE 6 does not support max-width so default to width 100% */
    .ie6 img {
      width:100%;
    span.dropt {border-bottom: thin dotted;}
    span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; }
    span.dropt span {position: absolute; left: -9999px;
      margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
      border-style:solid; border-color:#7d7e7f; border-width:1px; z-index: 6;}
    span.dropt:hover span {left: 2%; background: #ffffff;}
    span.dropt span {position: absolute; left: -9999px;
      margin: 4px 0 0 0px; padding: 5px 5px 5px 5px;
      border-style:solid; border-color:#7d7e7f; border-width:1px;}
    span.dropt:hover span {margin: 20px 0 0 170px; background: #ffffff; z-index:6;}
      Dreamweaver Fluid Grid Properties
      dw-num-cols-mobile: 6;
      dw-num-cols-tablet: 10;
      dw-num-cols-desktop: 14;
      dw-gutter-percentage: 25;
      Inspiration from "Responsive Web Design" by Ethan Marcotte
      http://www.alistapart.com/articles/responsive-web-design
      and Golden Grid System by Joni Korpi
      http://goldengridsystem.com/
    /* Mobile Layout: 480px and below. *************************************************************************/
    .gridContainer {
      margin-left: auto;
      margin-right: auto;
      width: 87.9666%;
      padding-left: 1.5166%;
      padding-right: 1.5166%;
      background-color:#FFF;
    #LayoutDiv1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
      background-color:#FFF;
    #logo {
      clear: both;
      float: left;
      margin-left: 0;
      margin-bottom:0px;
      padding-top:10px;
      padding-bottom:10px;
      width: 100%;
      display: block;
      background-color:#FFF;
      text-align:center;
    #phone {
      clear: none;
      float: left;
      margin-left:0px;
      width: 100%;
      display: block;
      text-align:center;
      padding-top:10px;
      padding-bottom:10px;
      padding-right:10px;
    #login {
      clear: none;
      float: right;
      margin-left:-2000px;
      margin-top:-2500px;
      width: 31.0344%;
      display: block;
      text-align:center;
    .redBody {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color: #bd2137;
      line-height: 1.23em;
    .orangeBody {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color: #ec8423;
      line-height: 1.23em;
    .purpleBody {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color: #643f99;
      line-height: 1.23em;
    .RedHeader {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      color: #bd2137;
      font-weight: bold;
    .OrangeHeader {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      color: #ec8423;
      font-weight: bold;
    .PurpleHeader {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      color: #643f99;
      font-weight: bold;
    a.redBodylink {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color: #bd2137;
      line-height: 1.23em;
    .redBodylink:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color:#ec8423;
      line-height: 1.23em;
    a.orangeBodylink {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color: #ec8423;
      line-height: 1.23em;
    .orangeBodylink:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color:#bd2137;
      line-height: 1.23em;
    a.purpleBodylink {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color: #643f99
      line-height: 1.23em;
    .purpleBodylink:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color:#ec8423;
      line-height: 1.23em;
    #mobile{
      width: 100%;
      background-color: #bd2137;
      display: block;
      float: left;
    #mobileHP{
      width: 100%;
      background-color: #FFFFFF;
      display: block;
      float: left;
      color: #bd2137;
    a.mobileMenuhpHP {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      color:#bd2137;
      text-align:center;
      padding-top:10px;
      padding-bottom:10px;
      text-decoration:none;
    a.mobileMenuhpHP:hover {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      color:#ec8423;
      text-align:center;
      padding-top:10px;
      padding-bottom:10px;
      text-decoration:none;
    a.mobileMenuhp {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      color:#FFF;
      text-align:center;
      padding-top:10px;
      padding-bottom:10px;
      text-decoration:none;
    a.mobileMenuhp:hover {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      color:#ec8423;
      text-align:center;
      padding-top:10px;
      padding-bottom:10px;
      text-decoration:none;
    #topnav {
      clear: both;
      float: left;
      margin-left: -1000px;
      width: 100%;
      display: block;
    #midnav {
      clear: both;
      float: left;
      margin-left:-1000px;
      width: 100%;
      display: block;
    #MenuBar1 > li:hover > a {
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
    #bodycontent {
      clear: both;
      float: left;
      margin-left: 10px;
      margin-right: 30px;
      margin-top: -135px;
      margin-bottom: auto;
      width: 95%;
      display: block;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
    .GreyHeader {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      color: #58595b;
      font-weight: bold;
    .BodyCopy {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1em;
      line-height: 1.5em;
      color: #58595b;
      padding-right:20px;
    .BodyItal {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-style:italic;
      font-size:.85em;
      line-height:1.5em;
      color: #58595b;
    a.redLink {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      line-height:1.5em;
      color:#bd2137;
    .redLink:hover {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      line-height:1.5em;
      color:#ec8423;
    a.orangeLink {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      line-height:1.5em;
      color:#ec8423;
    .orangeLink:hover {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      line-height:1.5em;
      color:#bd2137;
    a.purpleLink {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      line-height:1.5em;
      color:#643f99;
    .purpleLink:hover {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      line-height:1.5em;
      color:#ec8423;
    a.Lrg-redLink {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: .9em;
      line-height: 1.5em;
      color: #bd2137;
    .Lrg-redLink:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: .9em;
      line-height: 1.5em;
      color: #ec8423;
    #blogroll {
      clear: both;
      float: left;
      margin-right:-2500px;
      width: 100%;
      display: block;
    #footer {
      clear: both;
      float: left;
      margin-left:0px;
      width: 100%;
      display: block;
    a.viewSite {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1em;
      color: #bd2137;
      text-decoration: underline;
    a.viewSite:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1em;
      color: #ec8423;
      text-decoration: underline;
    #socialMediaMobile {
      float: right;
      width: 45%;
      height:auto;
      padding-top:5px;
      padding-bottom:5px;
      margin-top:0px;
      margin-right:0px;
      text-align:right;
      line-height:35px;
    #mobile-menu {
      clear: none;
      float:left;
      margin-left:3%;
      width:31.0344%;
      display: block;
      text-align: center;
      background-color: #bd2137;
      color: #FFF;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      padding-top: 10px;
      padding-bottom: 10px;
      border-right-width: thin;
      border-left-width: thin;
      border-right-style: solid;
      border-left-style: solid;
      border-right-color: #FFF;
      border-left-color: #FFF;
    #mobile-backHP {
      clear: both;
      float: left;
      margin-left: 0;
      width: 31.0344%;
      display: block;
      text-align: center;
      background-color: #FFF;
      color: #bd2137;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      padding-top: 10px;
      padding-bottom: 10px;
    #mobile-loginHP {
      clear: none;
      float: right;
      margin-left: 0%;
      width: 31.0344%;
      display: block;
      text-align: center;
      background-color: #FFFFFF;
      color: #bd2137;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      padding-top: 10px;
      padding-bottom: 10px;
    #mobile-back {
      clear: both;
      float: left;
      margin-left: 0;
      width: 31.0344%;
      display: block;
      text-align: center;
      background-color: #bd2137;
      color: #FFF;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      padding-top: 10px;
      padding-bottom: 10px;
    #mobile-login {
      clear: none;
      float: right;
      margin-left: 0%;
      width: 31.0344%;
      display: block;
      text-align: center;
      background-color: #bd2137;
      color: #FFF;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      padding-top: 10px;
      padding-bottom: 10px;
    #missionStatement {
      clear: both;
      float: left;
      margin-left:0px;
      margin-top: 10px;
      width: 100%;
      display: block;
      background-color: #7d7e7f;
      padding: 0px;
    .missionStatement {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.1em;
      color: #FFF;
      text-align: center;
      font-style: italic;
    #footerCopy {
      float: left;
      width: 100%;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 0.85em;
      text-align:center;
      color: #bd2137;
    #footerCopyMobile {
      float: left;
      width: 100%;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 0.85em;
      text-align:center;
    #connectUs {
      float: right;
      width: 100%;
      text-align: center;
      margin-top: 10px;
      margin-bottom: 10px;
    #social-media {
      width: 100%;
      float:left;
      text-align:center;
    #smicon {
      width: 100%;
      float:left;
      text-align:center;
      margin-bottom:10px;
    #column1 {
      width:100%;
      float:left;
    #column2 {
      width: 100%;
      float:left;
    #column3 {
      width:100%;
      float:left;
    #column4 {
      margin: 0px;
      padding: 0px;
      float: left;
      width: 100%;
      margin-top:-20px;
    #column5 {
      float:left;
      width: 100%;
      margin: 0px;
      padding: 0px;
      margin-top:-20px;
    #rowColumns {
      float: left;
      width: 100%;
      margin-bottom: 20px;
    #rowClmn1 {
      float: left;
      width: 100%;
      margin-left: 10px;
    #rowClmn2 {
      width: 100%;
      margin-left: 10px;
      float: left;
    #rowClmn3 {
      float: left;
      width: 100%;
      margin-left: 10px;
    #newsletter {
      width:200px;
      height: auto;
      margin-right: 20px;
      padding: 5px;
      float: left;
      text-align: center;
      border: thin groove #CCCCCC;
      background-color: #EFEFEF;
    #corpBuild {
      background-image: url(file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/images/building-tab.jpg );
      background-repeat: no-repeat;
      background-position: left top;
      float: left;
      width: 100%;
      height: 136px;
      padding-bottom:20px;
    #corpBuildLin {
      background-image: url(file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/images/lincoln-office-p ic.jpg);
      background-repeat: no-repeat;
      background-position: left top;
      float: left;
      width: 100%;
      height: 136px;
      padding-bottom:30px;
    #mobileContactPg {
      margin-bottom:0px;
      padding: 0px;
      float: left;
      width: 100%;
      height:auto;
      text-align:center;
      line-height:50px;
    #desktopContactPg {
      margin-top:-5000px;
      padding: 0px;
      float: left;
      width: 100%;
    #icons {
      text-align: center;
      float: left;
      width: 0%;!important
    #ptBoarder {
      padding-right:15px;
      padding-bottom:15px;
      float:left;
      width: 50%;
      margin-top:20px;
      margin-bottom:20px;
    #eoq {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #eoq1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #eoq2 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #SafetyTip {
      clear: both;
      float: left;
      margin-left: 0;
      width: 90%;
      display: block;
      padding: 10px;
      border: thin solid #CCC;
    #NationalRates {
      clear: both;
      float: left;
      margin-left: 0;
      margin-bottom:25px;
      width: 100%;
      display: block;
    #metroRates {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #tables {
      margin: 0px;
      padding: 0px;
      float: left;
      height:auto;
      width: 100%;
    #charts {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #chart1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #chart2 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    /* Tablet Layout: 592px. Inherits styles from: Mobile Layout. *************************************/
    @media only screen and (min-width: 592px) {
    .gridContainer {
      width: 91.14%;
      padding-left: 0.93%;
      padding-right: 0.93%;
      background-color:#FFF;
    #LayoutDiv1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 69.3877%;
      display: block;
      background-color:#FFF;
    #logo {
      clear: both;
      float: left;
      margin-left: 0;
      margin-bottom:10px;
      width: 59.1836%;
      display: block;
    #login {
      clear: none;
      float: right;
      margin-left: 2.0408%;
      margin-bottom:10px;
      margin-right:20px;
      margin-top:50px;
      width: 18.3673%;
      display: block;
      text-align:right;
    a.login {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.6em;
      color: #bd2137;
      text-decoration: none;
      text-align:right;
    a.login:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.6em;
      color: #ec8423;
      text-decoration: none;
      text-align:right;
    .redBody {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color: #bd2137;
      line-height: 1.23em;
    .orangeBody {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color: #ec8423;
      line-height: 1.23em;
    .purpleBody {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color: #643f99;
      line-height: 1.23em;
    #topnav {
      clear: both;
      float: left;
      margin-left: 0;
      margin-bottom:10px;
      width: 100%;
      display: block;
    #tl {
      height: auto;
      width: 14.2857142857143%;
      padding-top: 10px;
      float: left;
      text-align:center;
      font-size:1em;
    a.topnav {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      color: #58595b;
      padding-top: 0px;
      padding-right:0px;
      padding-bottom: 0px;
      padding-left: 0px;
      margin-left:0px;
      margin-right:0px;
      text-decoration: none;
    .topnav:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      color: #bd2137;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left:0px;
      margin-left:0px;
      margin-right: 0px;
      text-decoration: none;
      text-align: right;
    .topnav:visited {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      color: #58595b;
      padding-top: 0px;
      padding-right:0px;
      padding-bottom: 0px;
      padding-left: 0px;
      margin-left:0px;
      margin-right:0px;
      text-decoration: none;
    #midnav {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      height:100%;
      display: block;
    #MenuBar1 > li:hover > a {
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
    #isbtn-findAjob {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #bd2137;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-findAjob:hover {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #bd2137;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-findAjob:active {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #bd2137;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-findTalent {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #ec8423;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-findTalent:hover {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #ec8423;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-forEmployees {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #643f99;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
    padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-forEmployees:hover {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #643f99;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #bodycontent {
      clear: both;
      float: left;
      margin-left:20px;
      margin-right:20px;
      width: 95%;
      display: block;
      margin-top: 10px;
      margin-bottom: 10px;
      padding: 0px 0px opx 0px;
    .GreyHeader {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      color: #58595b;
      font-weight: bold;
    .RedHeader {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      color: #bd2137;
      font-weight: bold;
    .BodyCopy {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1em;
      line-height: 1.5em;
      color: #58595b;
    .BodyItal {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-style:italic;
      font-size:.85em;
      line-height:1.5em;
      color: #58595b;
    a.redLink {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      line-height:1.5em;
      color:#bd2137;
    .redLink:hover {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      line-height:1.5em;
      color:#ec8423;
    a.Lrg-redLink {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: .9em;
      line-height: 1.5em;
      color: #bd2137;
    .Lrg-redLink:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: .9em;
      line-height: 1.5em;
      color: #ec8423;
    #blogroll {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #footer {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #mobile{
      width: 100%;
      background-color: #bd2137;
      display: block;
      float: left;
      margin-left:-5000px;
    #mobile-menu {
      clear: both;
      float: left;
      margin-left: -1000px;
      width: 18.3673%;
      display: block;
    #mobile-back {
      clear: both;
      float: left;
      margin-left:-1000px;
      width: 31.0344%;
      display: block;
      text-align:center;
    #mobile-login {
      clear: none;
      float: left;
      margin-left: -1000px;
      width: 31.0344%;
      display: block;
      text-align: center;
      border-right-width: thin;
      border-right-style: solid;
      border-right-color: #F66;
      background-color: #bd2137;
      color: #FFF;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
    #missionStatement {
      clear: both;
      float: left;
      margin-left: 0px;
      width: 100%;
      display: block;
      background-color: #7d7e7f;
      padding:0px;
    .missionStatement {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.1em;
      color: #FFF;
      text-align: center;
      font-style: italic;
    a.viewSite {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1em;
      color:#FFF;
      text-decoration: underline;
    a.viewSite:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1em;
      color: #ec8423;
      text-decoration: underline;
    #footerCopy {
      float: left;
      width: 50%;
      text-align:left;
    #connectUs {
      float: right;
      width: 100%;
      text-align: right;
    #social-media {
      width: 50%;
      float: right;
      text-align: right;
    #social-mediaHP {
      width: auto;
      float: right;
      text-align: right;
      padding-right: 0px;
      padding-top: 0px;
      margin-top: 10px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
    #smicon {
      width: 100%;
      float: right;
      text-align: right;
    #desktopContact {
      float: left;
      width: 100%;
    #column1 {
      width:45%;
      float:left;
      margin-right:30px;
    #column2 {
      width:45%;
      float:left;
    #column3 {
      width:45;
      float:left;
    #column4 {
      margin: 0px;
      padding: 0px;
      float: left;
      width: 70%;
    #column5 {
      float: right;
      width: 25%;
      margin: 0px;
      padding: 0px;
    #column6 {
      width: 30%;
      float: left;
      margin-right: 20px;
    #column7 {
      width: 30%;
      float: left;
      margin-left: 0px;
    #column8 {
      width: 30%;
      float: left;
      text-align: left;
      margin-left: 10px;
      margin-right: 0px;
    #newsletter {
      width: 160px;
      height: auto;
      padding: 5px;
      float: left;
      text-align: center;
      border: thin groove #CCCCCC;
      background-color: #EFEFEF;
    #corpBuild {
      background-image: url(file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/images/building-tab.jpg );
      background-repeat: no-repeat;
      background-position: left top;
      float: left;
      width: 100%;
      height: 136px;
      padding-bottom:20px;
    #mobileContactPg {
      margin-left:-5000px;
      padding: 0px;
      float: left;
      width: 100%;
    #desktopContactPg {
      margin: 0px;
      padding: 0px;
      float: left;
      width: 100%;
    #icons {
      text-align: right;
      float: left;
      width: 100%;
    #ptBoarder {
      padding-right:15px;
      padding-bottom:15px;
      float:left;
      width: 35%;
      margin-top:20px;
      margin-bottom:20px;
    #eoq {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #eoq1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #eoq2 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #SafetyTip {
      clear: both;
      float: left;
      margin-left: 0;
      width: 97%;
      display: block;
      padding: 10px;
      border: thin solid #CCC;
    #NationalRates {
      clear: both;
      float: left;
      margin-left: 0;
      margin-bottom:25px;
      width: 100%;
      display: block;
    #metroRates {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #tables {
      margin: 0px;
      padding: 0px;
      float: left;
      height: auto;
      width: 100%;
    #charts {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #chart1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #chart2 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    /* Tablet Layout: 768px. Inherits styles from: Mobile Layout. *************************************/
    @media only screen and (min-width: 768px) {
    .gridContainer {
      width: 91.14%;
      padding-left: 0.93%;
      padding-right: 0.93%;
      background-color:#FFF;
    #LayoutDiv1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
      background-color:#FFF;
    #logo {
      clear: both;
      float: left;
      margin-left: 0;
      margin-bottom:10px;
      width: 59.1836%;
      display: block;
      text-align:left;
    #login {
      clear: none;
      float: right;
      margin-left: 2.0408%;
      margin-bottom:10px;
      margin-right:20px;
      margin-top:50px;
      width: 18.3673%;
      display: block;
      text-align:right;
    a.login {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.6em;
      color: #bd2137;
      text-decoration: none;
      text-align:right;
    a.login:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.6em;
      color: #ec8423;
      text-decoration: none;
      text-align:right;
    .redBody {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color: #bd2137;
      line-height: 1.23em;
    .orangeBody {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color: #ec8423;
      line-height: 1.23em;
    .purpleBody {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color: #643f99;
      line-height: 1.23em;
    #topnav {
      clear: both;
      float: left;
      margin-left: 0;
      margin-bottom:10px;
      width: 100%;
      display: block;
    #tl {
      height: auto;
      width: 14.2857142857143%;
      padding-top: 10px;
      float: left;
      text-align:center;
      font-size:1em;
    a.topnav {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      color: #58595b;
      padding-top: 0px;
      padding-right:0px;
      padding-bottom: 0px;
      padding-left: 0px;
      margin-left:0px;
      margin-right:0px;
      text-decoration: none;
    .topnav:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      color: #bd2137;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left:0px;
      margin-left:0px;
      margin-right: 0px;
      text-decoration: none;
      text-align: right;
    .topnav:visited {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      color: #58595b;
      padding-top: 0px;
      padding-right:0px;
      padding-bottom: 0px;
      padding-left: 0px;
      margin-left:0px;
      margin-right:0px;
      text-decoration: none;
    #midnav {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      height:100%;
      display: block;
    #MenuBar1 > li:hover > a {
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
    #isbtn-findAjob {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #bd2137;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-findAjob:hover {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #bd2137;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-findAjob:active {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #bd2137;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
    padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-findTalent {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #ec8423;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-findTalent:hover {
      font-family: "Century Gothic";
      font-size:1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #ec8423;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-forEmployees {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #643f99;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
    padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-forEmployees:hover {
      font-family: "Century Gothic";
      font-size:1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #643f99;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
    padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #bodycontent {
      clear: both;
      float: left;
      margin-left:20px;
      margin-right:20px;
      width: 95%;
      display: block;
      margin-top: 10px;
      margin-bottom: 10px;
      padding: 0px 0px opx 0px;
    .GreyHeader {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      color: #58595b;
      font-weight: bold;
    .RedHeader {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      color: #bd2137;
      font-weight: bold;
    .OrangeHeader {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      color: #ec8423;
      font-weight: bold;
    .PurpleHeader {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      color: #643f99;
      font-weight: bold;
    .BodyCopy {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1em;
      line-height: 1.5em;
      color: #58595b;
    .BodyItal {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-style:italic;
      font-size:.85em;
      line-height:1.5em;
      color: #58595b;
    a.redLink {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      line-height:1.5em;
      color:#bd2137;
    .redLink:hover {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      line-height:1.5em;
      color:#ec8423;
    a.Lrg-redLink {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: .9em;
      line-height: 1.5em;
      color: #bd2137;
    .Lrg-redLink:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: .9em;
      line-height: 1.5em;
      color: #ec8423;
    #blogroll {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #footer {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #mobile{
      width: 100%;
      background-color: #bd2137;
      display: block;
      float: left;
      margin-left:-5000px;
    #mobile-menu {
      clear: both;
      float: left;
      margin-left: -1000px;
      width: 18.3673%;
      display: block;
    #mobile-back {
      clear: both;
      float: left;
      margin-left:-1000px;
      width: 31.0344%;
      display: block;
      text-align:center;
    #mobile-login {
      clear: none;
      float: left;
      margin-left: -1000px;
      width: 31.0344%;
      display: block;
      text-align: center;
      border-right-width: thin;
      border-right-style: solid;
      border-right-color: #F66;
      background-color: #bd2137;
      color: #FFF;
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
    #missionStatement {
      clear: both;
      float: left;
      margin-left: 0px;
      width: 100%;
      display: block;
      background-color: #7d7e7f;
      padding:0px;
    .missionStatement {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.1em;
      color: #FFF;
      text-align: center;
      font-style: italic;
    a.viewSite {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1em;
      color:#FFF;
      text-decoration: underline;
    a.viewSite:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1em;
      color: #ec8423;
      text-decoration: underline;
    #footerCopy {
      float: left;
      width: 50%;
      text-align:left;
    #connectUs {
      float: right;
      width: 100%;
      text-align: right;
    #social-media {
      width: 50%;
      float: right;
      text-align: right;
    #smicon {
      width: 100%;
      float: right;
      text-align: right;
    #desktopContact {
      float: left;
      width: 100%;
    #column1 {
      width:45%;
      float:left;
      margin-right:30px;
    #column2 {
      width:45%;
      float:left;
    #column3 {
      width:45;
      float:left;
    #newsletter {
      width: 165px;
      height: auto;
      padding: 5px;
      float: left;
      text-align: center;
      border: thin groove #CCCCCC;
      background-color: #EFEFEF;
    #corpBuild {
      background-image: url(file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/images/building-tab.jpg );
      background-repeat: no-repeat;
      background-position: left top;
      float: left;
      width: 100%;
      height: 136px;
      padding-bottom:20px;
    #mobileContactPg {
      margin-left:-5000px;
      padding: 0px;
      float: left;
      width: 100%;
    #desktopContactPg {
      margin: 0px;
      padding: 0px;
      float: left;
      width: 100%;
    #column4 {
      padding: 0px;
      float: left;
      width: 70%;
      margin-top: -20px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
    #column5 {
      float: right;
      width: 25%;
      padding: 0px;
      margin-top: -20px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
    #column6 {
      width: 50%;
      float: left;
      margin-right: 50px;
    #column7 {
      width: 30%;
      float: left;
      margin-left: 50px;
    #column8 {
      width: 20%;
      float: right;
      text-align: left;
      margin-left: 0px;
      margin-right: 100px;
    #rowColumns {
      float: left;
      width: 100%;
      margin-bottom: 20px;
    #rowClmn1 {
      float: left;
      width: 25%;
      margin-left: 20px;
    #rowClmn2 {
      width: 25%;
      margin-left: 10px;
      float: left;
    #rowClmn3 {
      float: left;
      width: 25%;
      margin-left: 10px;
    #icons {
      text-align: right;
      float: left;
      width: 100%;
    #ptBoarder {
      padding-right:10px;
      padding-bottom:15px;
      float:left;
      width: 35%;
      margin-top:20px;
      margin-bottom:20px;
    #eoq {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #eoq1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 27.5362%;
      display: block;
    #eoq2 {
      clear: none;
      float: left;
      margin-left: 1.4492%;
      width: 71.0144%;
      display: block;
    #SafetyTip {
      clear: both;
      float: left;
      margin-left: 0;
      width: 98%;
      display: block;
      padding: 10px;
      border: thin solid #CCC;
    #NationalRates {
      clear: both;
      float: left;
      margin-left: 0px;
      width: 100%;
      display: block;
      margin-bottom: 25px;
      padding: 0px;
    #metroRates {
      clear: both;
      float: left;
      margin-left: 0px;
      width: 100%;
      display: block;
    #tables {
      margin: 0px;
      padding: 0px;
      float: left;
      height: auto;
      width: 100%;
    #charts {
      clear: both;
      margin-left: 0;
      width: 100%;
      display: block;
    #chart1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 40%;
      display: block;
      margin-bottom: 0px;
    #chart2 {
      clear: both;
      margin-left: 0;
      width: 45%;
      display: block;
      float: right;
    /* Tablet Layout: 1000px. Inherits styles from: Mobile Layout. *************************************/
    @media only screen and (min-width: 1000px) {
    .gridContainer {
      width: 91.14%;
      padding-left: 0.93%;
      padding-right: 0.93%;
      background-color:#FFF;
    #LayoutDiv1 {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
      background-color:#FFF;
    #logo {
      clear: both;
      float: left;
      margin-left: 0;
      margin-bottom:10px;
      width: 59.1836%;
      display: block;
      text-align:left;
    #login {
      clear: none;
      float: right;
      margin-left: 2.0408%;
      margin-bottom:10px;
      margin-right:20px;
      margin-top:50px;
      width: 18.3673%;
      display: block;
      text-align:right;
    a.login {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.6em;
      color: #bd2137;
      text-decoration: none;
      text-align:right;
    a.login:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.6em;
      color: #ec8423;
      text-decoration: none;
      text-align:right;
    .redBody {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color: #bd2137;
      line-height: 1.23em;
    .orangeBody {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color: #ec8423;
      line-height: 1.23em;
    .purpleBody {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.23em;
      color: #643f99;
      line-height: 1.23em;
    #topnav {
      clear: both;
      float: left;
      margin-left: 0;
      margin-bottom:10px;
      width: 100%;
      display: block;
    #tl {
      height: auto;
      width: 14.2857142857143%;
      padding-top: 10px;
      float: left;
      text-align:center;
      font-size:1em;
    a.topnav {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      color: #58595b;
      padding-top: 0px;
      padding-right:0px;
      padding-bottom: 0px;
      padding-left: 0px;
      margin-left:0px;
      margin-right:0px;
      text-decoration: none;
    .topnav:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      color: #bd2137;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left:0px;
      margin-left:0px;
      margin-right: 0px;
      text-decoration: none;
      text-align: right;
    .topnav:visited {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      color: #58595b;
      padding-top: 0px;
      padding-right:0px;
      padding-bottom: 0px;
      padding-left: 0px;
      margin-left:0px;
      margin-right:0px;
      text-decoration: none;
    #midnav {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      height:100%;
      display: block;
    #MenuBar1 > li:hover > a {
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
    #isbtn-findAjob {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #bd2137;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-findAjob:hover {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #bd2137;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom: 10px;
      padding-left: 0px;
    #isbtn-findAjob:active {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #bd2137;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-findTalent {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #ec8423;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-findTalent:hover {
      font-family: "Century Gothic";
      font-size:1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #ec8423;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-forEmployees {
      font-family: "Century Gothic";
      font-size: 1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #643f99;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgBtns.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #isbtn-forEmployees:hover {
      font-family: "Century Gothic";
      font-size:1.8em;
      color: #FFF;
      text-decoration: none;
      background-color: #643f99;
      background-image:url("file:///U|/dev2.celebritystaff.com/new-design_copy(10)/design/image s/inside-page-icons/arrow-insidePgbtns-hover.png");
      background-repeat: no-repeat;
      background-position: right center;
      height: 35px;
      text-align: center;
      padding-top: 20px;
      padding-right: 0px;
      padding-bottom:10px;
      padding-left: 0px;
    #bodycontent {
      clear: both;
      float: left;
      margin-left:20px;
      margin-right:20px;
      width: 95%;
      display: block;
      margin-top: 10px;
      margin-bottom: 10px;
      padding: 0px 0px opx 0px;
    .GreyHeader {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      color: #58595b;
      font-weight: bold;
    .RedHeader {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      color: #bd2137;
      font-weight: bold;
    .OrangeHeader {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      color: #ec8423;
      font-weight: bold;
    .PurpleHeader {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1.5em;
      color: #643f99;
      font-weight: bold;
    .BodyCopy {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 1em;
      line-height: 1.5em;
      color: #58595b;
    .BodyItal {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-style:italic;
      font-size:.85em;
      line-height:1.5em;
      color: #58595b;
    a.redLink {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      line-height:1.5em;
      color:#bd2137;
    .redLink:hover {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size:1em;
      line-height:1.5em;
      color:#ec8423;
    a.Lrg-redLink {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: .9em;
      line-height: 1.5em;
      color: #bd2137;
    .Lrg-redLink:hover {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: .9em;
      line-height: 1.5em;
      color: #ec8423;
    #blogroll {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #footer {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
    #mobile{
      width: 100%;
      background-color: #bd2137;
      display: block;
      float: left

    Thanks!
    "Nancy O." <[email protected]> wrote:
    Nancy O.  created the discussion
    "Fluid grid with added media queries not working with "
    To view the discussion, visit: https://forums.adobe.com/message/6496730#6496730
    >

  • Retina adaptive images and css3 media queries

    retina adaptive images and css3 media queries
    see below QUESTIONs....
    http://css-tricks.com/snippets/css/retina-display-media-query/
    For including high-res graphics, but only for screens that can make use of them. "Retina" being "2x":
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Retina-specific stuff here */
    QUESTIONS
    If serve a resolution 2x bkgd image in resolution 1.5x mobile device display or in 1x display what should happen? In other words image resol is bigger than display resol... Image to appear in display resol or...?
    Then in image edit software , also, for 2x resolution image creation.... how ppi must be in adobe FW or PS?  2x pixel ratio is retina... tell and for retina.
    Another way(is it valid?) is serve an image width eg 600px with img css attr width:300px and and for high resol like tablets use media query to do img css attr width:600px (do normal)... in this way pixel ratio must be the same in both cases phone <> tablet???

    I have tried it on two separate Windows 7 machines running Firefox 9.0.1. Disabling add-ons had no effect. The media queries work fine in all other browsers on the same machines. The styles in the media queries cause the site to display differently based on how wide the browser is, but in FF9, there is no change when the browser changes width.

Maybe you are looking for