DWcs6 Fluid Grid. Added "none" to display but crashing desktop

Hi,
I am using DW Cs6 fluid grid. I did my desktop version first and I'm trying to add a mobile navigation and remove the desk top version.
I set the display to "none" in the css layout and it removes it in desktop and loads the mobile version when shrunk. That's great but for some reason its making the desktop crash. It adds a border around the site and pops the content below where the footer should be: Here
Any help is highly appreciated!!
Thank you.

What is this for?
@media only screen and (min-width: 769px) {
/**special conditions for desktop layout**/
#divName {display:none}
Also you're missing a second closing curly bracket in your media queries. Without the double set of brackets, media queries don't work. Which is why I highly recommend using a separate style sheet for content styles and special conditions. FluidGrid.css is best reserved for LAYOUT only.
@media only screen and (min-width: 769px) {
/**special conditions for desktop layout**/
#divName {display:none}
Nancy O.

Similar Messages

Dreamweaver CC fluid grid controls disappearing and other info

Hi All,
I have finally completed my first commercial fluid grid design in Dreamweaver CC and it was a bit of a mission.
One disconcerting thing about the program is that the fluid grid controls keep disappearing. You know, the ones where you can hide the div, duplicate it, move it up or down, or delete it.
I have found that when this happens, I need to close the html file I am working on in DW CC and then open it again. The controls then appear again, so you can rearrange your various layouts as demonstrated in those breezy demo videos about DW CC fluid grid layouts.
So don't just conclude you have broken the code when these controls disappear, try closing and opening the file again first.
Also you need to insert all the divs you need for all layouts in the mobile phone layout, as that is the main layout, governing all the others because of the way the media queries are set up in the CSS file that is created when you start your fluid grid layout.
I could not work out how to reorder divs in the different layouts, this may not be possible at the moment. Instead I created divs in the phone layout to cover all of the divs needed in the three layout sizes and switched them off and on in the various layouts. This works really well, but I found that DW behaved strangely if I switched a div off in the mobile layout and then tried to style it in one of the other layouts. So I suggest styling all of the divs first for all the layouts before switching any of them off in the mobile layout.
Also you can't copy the contents of one div and put them in another without freaking the program out, especially if you are working in a div that is hidden in the mobile layout.
I suggest saving regularly as you add new divs and style them and view live in a browser immediately, as the preview in DW CC is not reliable. It can't show rounded div corners or shadows for example.
Keep an eye on the code as it is built by your use of the CSS Properties panel. If it starts going wrong, close the html file without saving it or the attached CSS file. Then go back in and try what you want to do again.
If you save weird code errors, your work could be so compromised that you need to start all over again. So quit out without saving if you notice this.
After much experimentation I now insert images into a div, rather than make them a background image, as the background image will not completely show if the content of the div is not long enough. This may require a rethink of your design.
Doing any absolute sizes in a div will make the responsive design very hard to style and possibly break the code, so I don't suggest it.
Adding padding to a div can make it stick out of right edge of the design, I am not sure why this is the case and could not work out how to stop it. So use low pixel numbers in the padding of a div.
Also control z seems to be a sudden death move, so I stopped doing that.
So my first job has been a bit of a ride, but I seem to be nearly there on my first design.
I think DW CC is still a work in progress and I look forward to further updates of the software.

Hi Top Ten,
You can't get them back once they go. You now need to edit the css code manually to do the same thing.
For instance if you want divs to sit beside each other you put this in the css for that div:
clear: none;
This css means that div will allow other divs to sit beside it.
Then put in a width in percentages. For example if you have three divs that need to sit beside each other put:
width: 33%;
in each of them. Or maybe:
width: 31%;
margin-right: 2%;
Fortunately in DWCC it is now robust enough for you to do those code changes by hand. My original question in this thread was posed when DW CC fluid grid had just come out and crashed easily. A year later all is well, so you can do those changes in the css code without problems now.
Regards,
Mary

Fluid grid layouts do not work in IE 7/8

Hello,
I just created a simple fluid grid layout with Dreamweaver CS6, but there is a problem in Internet Explorer.
IE 9 shows it right.
When I start IE 9, I press F12 to get to the developer panel. When I switch to IE 7 / 8, the layout crashes. There are no background colors and text styles anymore.
Later I will upload some screenshots.
All other browser work fine.
Where is the problem here?

When I resize layout in Firefox, the background colors disappear in mobile portrait, mobile landscape, and tablet portrait.
Reason: You added styles to your FluidGrid Desktop but not mobile & tablet.
In order for FluidGridLayouts to work, you must build your mobile styles first because everything else is based on that.
I find it's much safer to use a separate style sheet for content. When you start adding stuff to FluidGridLayout.css, things can get screwed up in a hurry.
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
Nancy O.

Fluid Grid Layout- HTML5 video buttons become gray squares Android

I am attempting to use Fluid Grid layouts for a simple smartphone/tablet acessible video page. I am in Dreamweaver CS6 Cloud (updated). The buttons for play and full screen mode are shown as gray squares on my Android phone. It works fine in other browsers (OS:Windows 7, Chrome, FireFox and IE. I have not tested iOS or iPhones). I spent a day trying variations trying to get it to work properly on the Android and finally built a whole new HTML5 (non Fluid Grid) and it works. But that has issues with formatting, where comes in small and has text not filling the page for Android. I am trying to avoid people having to zoom in and out to see the page. The Fluid Grid brings the page in the way that I want it. My guess is that the Fluid Grid boilerplate or the respond.min.js is causing the conflict. As this is a touchy new venture into Adaptive Design I have left these files alone.
Here is the fluid grid (stripped of formatting) http://www.oha-edu.org/Video/v1.html
Here is the HTML5 video page where the buttons show up. http://www.oha-edu.org/Video/2.html
Dumping my Droid Razr Maxx (Android Version 4.04, System version 6.16.211.xt912.Verizon.en.US) is not a solution. I wish to make this work for as many devices as possible.

Fluid grid layout won't open

I simply create a new fluid grid layout.. name and save the default css file ...name and save the default first page and upload to my server.
Everything works fine and I am able to work on the page in dreamweaver cc as a fluid grid layout.
But when i close down dream weaver, (even if i do no more than save the two files and dont edit anything else) and reopen dreamweaver cc i can no longer work in fluid grid layout, dreamweaver doesnt recognise the page (default) as fluid grid layout and i cannot see the little button that toggles fluid grid layout on and off.
I have not edited the css file or the page in anyway.
someone suggested i go to visual aids and enable fluid grid guides .... but this does not exist and there is no longer a fluid grid button next to the live view button.
I really need to get this working, fluid grid layouts are useless if you cant edit them after creating them
Here is the default code
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="/test2.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">Use Insert Panel for additional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div></div>
</body>
</html>
Thanks in advance for any replies

I defined the site, when i imported the site as business catalyst site.
It is there, i have checked all the details are correct and can edit and work on the site as a normal site, I just can't get it to recognise any pages i've created as a fluid grid page after closing and reopening the page.
Yeah I watched the video and that is what im doing, create new page as fluid grid layout, save the css to the root, save the html page to the root, all works fine and i can edit in the fluid grid, the grids there, the little buttons there, the handles to adjust fluid grid propertys there.
But at any point if i close the page and open it again i lose the handles, the fluid grid and the little button and can only edit as a normal dreamweaver page.
I tried to phone adobe support yesterday but gave up after 2 hours of waiting
Cry

Is it possible to use HTML5 tags within fluid grid layouts?

Hello,
I want to build my future websites with fluid grid layouts and Dreamweaver CS6 but I don't find any help by searching the internet how I could use the HTML5 tags like "header" "nav" "footer" etc. within the fluid grid layouts automaticly. If I do anything manually it's more error-prone. Or is just the best way to stay with the "normal" div-tags???
Thank you in advance, best regards ... Björn

Those tags are equal to a normal DIV and can be used just the same, they are just not built into CS6.
Mylenium

More than one container in fluid grid

Is it possible to have more than one container in the fluid grid? I need to do it (I think) to be able to make a movie file scale properly using seperate code somebody else suggested to me. The idea is to have the header in one regular container, then the supplied movie container, then a regular container containing the footer. Any other ideas more than welcome, please help!

Thank you Nancy.
You have shown me how it can look very nice, so I appreciate your feedback.
The issue I had was the way in which the frame scales. First it has the black frame at the sides and then at the top and bottom. I was hoping the frame could scale with the film itself. I started with a larger movie than your example and more square in dimensions, so by the time it reached the smallest mobile screen there was a very long empty space before the film was visible. That would be very annoying if viewed on a phone. I had a back button below it, also a very long way down, so it became a real issue. I also tried it with embedded FLVs and hoped it would scale like any image file, but it does the same but with a white frame (looks even worse).
Someone here gave me some code that did make the frames scale (http://forums.adobe.com/message/5280331#5280331), but it's own grid reacted imperfectly with the fluid grid, thats why I wanted to put it in between two fluid grids. I tried it but perhaps due to lack of knowledge it failed miserably. I gave up and have decided to link to 3 pages with different sized movies, the frame issue will still exist but me much less prominent.
In my opinion Adobe should update the way the movie frames scale to match the image frames, otherwise the fluid grid is very flawed.
Thanks again though.

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
>

I downloaded Dreamweaver CC 2014.1, started using it but cannot find Show Fluid Grid Layout Guides button, Resize LI.link sizing handle and 'move up a Row' arrow. Where can I find them?

I downloaded Dreamweaver CC 2014.1, started using it but cannot find Show Fluid Grid Layout Guides button, Resize LI.link sizing handle and 'move up a Row' arrow. Where can I find them?

You have the latest version (CC 2014.1 or 2014.1.1) in which the interface condenses Design View with Live View buttons in normal layouts. See screenshot.
However, in FGLayouts, Live View is the only option which poses some editing problems and has been highly criticized.
Is there any way to display the Design View in fluid grid pages?
New Features in CC 2014.1 October Release
http://helpx.adobe.com/dreamweaver/using/whats-new.html
New Features in CC 2014.1.1 February Release
https://helpx.adobe.com/dreamweaver/using/whats-new.html#Enhancements%20to%20Live%20View%2 0editing
You can disable this restriction by adding an X to the FGLayout CSS.
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:      X 4;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    25;
=====================================
Having said that, it might just be simpler to revert to an earlier version. Log-in to Creative Cloud Desktop app. Go to Filters & Versions > Previous Version. See screenshot.
Nancy O.

Using fluid grid cs6 but changing content between screens?

hey guys ive just started looking into fluid grid with dreamweaver cs6 and its good but there doesnt seem to be alot of video on the net teaching alot about it.
The one thing I cant find info on is how to remove content from the mobile page because its too much but still have it showing in the and desktop view?
all the tutroials i find show how to get started and how css works between the 3 displays but alot of finished examples show content relocating on the page, changing or disappearing completely from one type of screen to the next such as in this Greg Rewis video http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
How can I control which elemnts show on one screen and not the other?
thanks
Dave

Below is a working example of what you want.
http://alt-web.com/FluidGrid/Fluid1.html
In my custom Content.css file, I have some divs set to display:none wrapped inside a mobile media query like this.
/* Special Rules for Mobiles */
@media only screen and (max-width: 481px) {
/**hide some divs**/
#LayoutDiv5, #LayoutDiv6, #LayoutDiv7 { display: none }
Nancy O.

Is there any way to display the Design View in fluid grid pages?

After upgrading to the newest version of DW CC 2014, I noticed that the Design View is disabled in Fluid Grid pages. You can only use the Live View to edit those pages. The Design/Live button displays on non-fluid pages.
I'm wondering if there is a work-around to allow Design View editing on fluid pages. It is a major hassle to try to edit some things in the Live View. It would nice to have a choice.

Have you actually tried using is? Try this?
1) Create a new Responsive Layout. We’ll call it demo.php, fluid.css and the usual accompanying DW files.
2) Enter demo.php and progress is normal. Everything works. You can choose to view both Live and Display and edit accordingly.
3) Close down DW.
4) Open DW and open demo.php
5) There is NO LONGER a Display View option and Live View does not EDIT. (at least it doesn't for me)
6) I can ONLY edit work in CODE view.
Thus, on brand new files, all is fine. The moment DW is closed and the files becomes “old” it can no longer be seen or edited properly.
How am I supposed to provide support to clients? How can I access a Responsive site I built last week when Live View will not edit and Display will not display?
I feel this is a programming error, not a purposeful act.

Div options toolbar not displayed correctly in fluid grid layout

When I select an inserted element in fluid grid layout, the options to hide, duplicate or delete the Div are not displayed. I only have the 'move up a row' arrow displayed. How do get the other options to display on the mini toolbar? My DW CS6 version is V12.0 Build 5861.

It is called as the 'Smart HUD' and was made available in 12.2 CCM (Creative Cloud) update. Your version is 12.0 which looks like a regular non-cloud license.
Are you actually a Creative Cloud subscriber? If not, you'll have to wait for a perpetual license upgrade in order to see/ use this feature.

Fluid Grid not displaying correctly in Chrome

I'm laying out a simple 3 column design using fluid grids in CS6.
I want only one colum to show in mobile, with the other two hidden. Two columns should show in tablet, with the third hidden and all three columns should be visable in desktop mode.
I'm currently only testing between chrome and safari as I just want to get the hang of the feature.
When I preview in safari, everything works as it should but when I preview in chrome, the browser seems to ignore the desktop settings and shows a large version of the two column tablet design.
I'm using 4, 8 and 12 columns respectivly in my fluid grids.
Has anyone else had this issue? I haven't been able to find any references to a similar problem.

Has anyone else had this issue?
Nope. You're the only one.
Please show us your code. My guess is that your media queries are messed up.
How exactly are you defining the divs to show or not show?
Nancy O.

MBP shows VGA display, but none connected

I am facing a quite strange problem. My MBP shows an external VGA display but there is none connected. I can see it in the display preferences. I already checked the hardware but there is nothing wrong with it. I connected a real display via dvi to vga and it works fine. Anyone who knows this problem and knows what to do about it?

Found a possible solution.
Do you have bootcamp installed?
I restarted into windows xp and checked my nvidia settings and made it was set to "Use One Monitor"
Then restarted and Voila!
Hope it can help

Design option missing for Fluid Grid layouts (was:In dreamweaver CC, I created a new fluid grid page, but the options to edit the page...)

Hi, in dreamweaver CC, I created a new fluid grid page, but the options to edit the page are limited to code / split / live. The design optin is missing and I need it to move around the fluid grid to position my elements that I have created.
Thanks

Hi Raymi,
Like Ben suggested, you can vote for the feature using the link provided. From what I understand, the product team is collecting feedback on the limitations of Live View for FG layouts and improving experience on that front. It would help if you could provide a list of limitations with the current workflow.
Thanks,
Preran

DWcs6 Fluid Grid. Added "none" to display but crashing desktop

Similar Messages

Maybe you are looking for