Media Queries Layout
Hi Guys,
I am trying to build the below image using media queries.
I can easily get the layout working but I have a problem.
How do you get the Left 'Green' section to always be fixed and always full height of the screen in which it is viewed on?
Just to be clear these colours arent the actual colours being used.
Any help would be much appreciated.
Thank you.
Alex
For equal height CSS Columns, use display:table properties. See example below. View source in browser to see the code.
Responsive Equal Height CSS Columns
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!
-
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. -
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?
-
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</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" />
</style>
<style type="text/css">
/* 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">
<!--
<oa:widgets>
<oa:widget wid="2559022" binding="#slideshow_2" />
</oa:widgets>
-->
</script>
</script>
<style type="text/css">
<!-- Start PureCSSMenu.com STYLE -->
<style>
#pcm{display:none;}
ul.pureCssMenu ul{
display:none;
ul.pureCssMenu li:hover>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>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 > a img.def {display:none}
ul.pureCssMenu li:hover > 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 -->
</head>
<body>
<LINK REL="SHORTCUT ICON" HREF="http://www.milesmemorials.com/favicon.ico">
<div class="#container">
<div id="bannerDiv" class="bannerStyle">
<img src="Images/banner.jpg" width="1000" height="168" alt="banner"/>
</div>
<div id="navbar" class="navbarRule">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About us</a></li>
<li><a href="why-us.html">Why choose us</a></li>
<li><a href="contact.html">Contact us</a></li>
<li><a href="request.html">Request a brochure</a></li>
</ul>
</div>
<div id="slideshow2"><script type="text/javascript">
// 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">
<!--All elements inside this will become slides-->
<img src="Images/ssimage1.jpg" width="1000" height="200" alt="image1" /><img src="Images/ssimage2.jpg" width="1000" height="200" alt="image2" /><img src="Images/ssimage3.jpg" width="1000" height="200" alt="image3" />
</div>
<div id="mainContent" class="mainText">
<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">
<li><a href="cemetery-memorials.html">Churchyard memorials<![if gt IE 6]></a></li>
<li><a href="">Churchyard memorials<![if gt IE 6]></a></li>
<li><a href="">Cremation memorials<![if gt IE 6]></a></li>
<li><a href="" ><span>Vases</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">Italian marble vases</a></li>
<li><a href="">Granite vases</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="" ><span>Colour guides</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">Italian marble & churchyard memorial</a></li>
<li><a href="">Granite colour guide</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="" >Home & garden memorials</a></li>
<li><a href="">Inscription & vases</a></li>
<li><a href="">Engraved designs</a></li>
<li><a href="" >Sand blasted designs</a></li>
<li><a href="" >Photos,plaques,etc</a></li>
<li><a href="">Italian marble figurines</a></li>
<li><a href="" >Bronze figurines & accessories</a></li>
<li><a href="" >Memorial garden plaques</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
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. -
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: leftThanks!
"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
> -
Hi, how are you all this weekend?
I am getting more comfortable with the DW CC Fluid Grid Layout. I really like it! I just am a bit confused with the media queries. It, by default has two. One set for min-width 481px and one set for 769px. That seems fine to me. I noticed though, when you come down to the icons of smartphone, tablet, and desktop. I click smartphone first and notice that it is set to smart phone 480px, so it will not display min-width 481px and when I click the 481px media query to begin work, I naturally will click the smart phone icon again and it displays 480, not showing me my completed work because it is not reaching the min-width of 481. Same thing occurs with the 768px.
Should I change the media queries to 480px and 769px? Or should I change the icon sizes to match the media queries. Just a bit off that it is one pixel larger than the default icons.
Thanks.FGL is a mobile first framework. Everything that you place in the general section of the stylesheet will apply to all screen sizes ranging from mobile through to large screens.
If you want to change the look of the page in larger than mobile phone screens, you start using media queries. In FGL, the first larger screen size takes effect at a minimum width of 481px (tablets), the next takes effect at a minimum width of 769px (desktops). This is exactly what the icons depict, hence no adjustment is required. -
Site Media Queries in Dreamweaver CS 5.5
I need some insight on creating site media queries in Dreamweaver CS 5.5.
With there being so many different tablets and smartphones, how many different .css files do I need so my website renders properly on all smartphones and tablets?Responsive web design requires a re-build.
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
You can either build the layouts yourself manually. Or, if you have a Creative Cloud subscription, you could use FGLayouts in CS6 or CC or use Adobe Edge Reflow and import it into DW.
Fluid Grid Layouts in CS6
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
Adobe Edge Reflow
http://tv.adobe.com/watch/adobe-edge-reflow/introduction-to-reflow/
Or, you could use any of the freely available Responsive Frameworks below.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's FREE Bootstrap Extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Nancy O. -
Change the order of boxes in different media queries
How can I change the order of boxes in different media queries?
Is the only work around to copy one box to the other order position and switch the Display attribute in the different media queries?Hi, thanks for your question. Reflow follows the rules of CSS and HTML. There is not a way to swap or move objects in the DOM without using something like Javascript. We've avoided that, and only focus on CSS and HTML with Reflow.
Yes, you can use multiple boxes in different places and change their display as needed. But I might caution against doing this as it may add work for both you and anyone else that may take this design and put it into production. I might take a look at why you want to move the boxes around, and maybe find a simpler or more efficient design pattern to follow to get a result you would be happy with. Hope that doesn't sound preachy, you should try it if you want and don't listen to me. Either way, let me know how it goes! -
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!! GaryAlt 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. -
Android Browser Landscape View Media Queries in Dreamweaver CS5.5
Hey Guys !!!!!
I Have a Problem
In regards to the media queries working on android browser. I Use Dreamweaver CS5.5. When I tested there was no change .
When I tested in landscape view it takes the default web browser screen width it is not device screen width.HI
Thanks for your Kind Reply.
But there is No device Issue.
I m Using ONE HTML (ONE URL) For Web View and Mobile View. ( Multi Screen View Feature In Dreamweaver CS 5.5 )
It is look Fine in Multi Screen View Preview in Dreamweaver CS 5.5.
My media query is simple :
For Desktop :
<link href="style/desktop.css" rel="stylesheet" type="text/css">
For Mobile :
<link href="style/phone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)">
And My Meta Tag is :
<meta name="viewport" content="width=device-width">
when my phone device is in vertical position it is called the phone.css But When my phone device rotate in horizontal ( landscape View ) it is called desktop.css -
Upgraded to v10 and now media queries aren't working.
I upgraded to version 10 and the media queries are not working on a new site I'm working on . They worked fine on 9.01 and still are working fine on another machine that has 9.01. But not in 10.0.
It doesn't matter if its a <link> Media query or a @media screen. They are not working!
I tried to reinstall and I'm getting the same result.I have test my site and queries in all the browsers and Firefox is the only one acting up. It worked in v 9. It's like they are being ignored. Here's an example of a media query.
I'm testing by resizing the browser window and also by loading a site through an iframe.
@media screen and (max-width: 800px) {
body { background: #ddd; }
Can someone please get this fixed. Mobile designs rely heavily on css media queries. -
"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
Maybe you are looking for
-
How to parameterize the schema name in APEX
Hi, How to parameterize the schema name in APEX , in order to access different tables from the respective schema. For example:- select NAME display_value, CODE return_value from paramSchema.DESC_LIST WHERE SELECTION_FLG = 'Y' order by 1 in the above
-
Can't delete layer in photoshop
Sorry this was the closest forum I could find. I added a layer in a photoshop to change the skin tone of a photo slightly. However, I am not happy with it, but when I delete the layer nothing changes. It seems I can delete the layer, but the actual e
-
Installing Flash Pro error: Media_db
Hi, While installing Flash Pro from Creative Cloud, I encountered an error "Camera Profiles Installer 8.0.0.13 {539AEF15-3A2B-4A31-A587-7E90F7D9C700}' information not found in Media_db". What could be the cause? Regards.
-
How do I get ColdFusion 10 extensions for Dreamweaver CS6?
I can't find the ColdFusion 10 tags extension for Dreamweaver CS6 on Adobe's update website. I replaced my computer and would like to install them on my new computer. Do they still exist? If so, where do I go to download them? Thanks for your help.
-
With the new offer of $9.99 for CC and Lightroom 5, can I cancel at the end of year without penalty?
After reviewing the current offer of $9.99 for C.C. and Lightroom 5 can I cancel my subscription after the 12 months without penalty before the renewal at a different rate?