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
Similar Messages
-
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. -
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. -
In landscape view Firefox browser not visible, need to make browser window NOT ZOOM or STRETCH!
Screen goes to black when tablet (ASUS Eee Pad Tablet) is turned to the landscape view I need to make the browser Window on the Android Firefox Browser NOT ZOOM or STRETCH to fill the Screen! [email protected]
Yes we know that Android improperly suggests using zoom for Firefox mobile. Firefox 9 has a specific tablet UI that will correct this issue. It will be in the Android Market as Firefox beta around Nov 10th.
https://ianbarlow.wordpress.com/2011/09/30/firefox-for-tablets-lands-in-aurora/ -
I have an iPhone 6 with IOS 8.1.3. When I go to the landscape view in Safari, the bookmark page appears and takes up one half of the screen. How can I get rid of the bookmark page so I can use the whole screen to what I am browsing?
OOPS! Too quick on the trigger to ask that question without trying anything. Sorry. Solved it by touching the bookmark icon.
-
How do i turn off the feature that browses album art work in landscape view?
How do I turn off the feature that browses album art work in landscape view? My videos will not play full screen since I updated my phone to iOS 7.1.
I don't believe that feature can be turned off.
I'm not experiencing any problem with full-screen video play on IOS 7.1 on an iPhone 5. -
"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 -
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. -
Broadcast live to android browser
Hello
i have a web internet live cams aplication and i am using adobe media server 5
i succeed to broadcast http live from web cam to web browser on apple devices using this url:
http://localhost/hds-live/livepkgr/_definst_/liveevent/livestream.f4m
my question is about android browser:
is it possible to broadcast http live from web cam to android web browser using adobe media server 5?
and if so what is the url?
and if not although adobe took off the possibility to download from here site
flash player for android is there any other web page where users able to download adobe flash player for android browser?
or we are in a situation that its not possible to broadcast live from web cam to android browser
from both http or rmtp?Mr.Dave big thanks for your reply
if nobody from adobe is giving reasonable reply at this pathetic forum at list someone do...
i paid a lot of money for adobe media server....
the minimum support i will expect from adobe is to get back a serious professional forum...
Mr.Dave cen you please clarify to me little point:
you said you use this url:
http://FMS.domain.net/livestream.m3u8
what about all the other stuff in apple url:
http://server IP/hls-live/livepkgr/_definst_/liveevent/livestream.m3u8
i meen:
hls-live/livepkgr/_definst_/liveevent/
unlike to broadcast to safari browser to chrom browser you do not have to use them?
Another thing i must tell you
i thought about cheking if the android browser viewer have flash or not and if yes broadcast to him in normal RTMP
so i asked this question in this forum:
http://forums.adobe.com/thread/1109660
you must read the whole discussion its even more "sad" and "hard going" then this one...
maybe you cen give me a good reply there?
big thans again
cheinan -
Below is an example of a media query I created via the Media Queries window. I have placed this line of code (plus the preceding meta tag), on pages I specifically designed for viewing on mobile devices:
<meta name="Viewport" content="width=device-width" />
<link rel="stylesheet" media="screen and (max-width:480px)" href="/styles/mobile_480.css" />
Is it necessary to also address the orientation issue of these devices (portrait/landscape) in the code string, and, if so, what is the proper syntax for doing so? The Media Queries window only allows me to designate width and height, but no other parameters. Do these "other parameters" have to be manually coded?
I also want to add code later for tablet devices, which are also viewable in either orientation. This is my test run using media queries, so I am hoping I am doing all of this correctly. Gradually I am getting the hang of this. Thanks for anyone's insight.
PS: I am assuming that I have correctly written the code mentioned above. If not, where have I gone wrong?
Tks.Below is an example of a media query I created via the Media Queries window. I have placed this line of code (plus the preceding meta tag), on pages I specifically designed for viewing on mobile devices:
<meta name="Viewport" content="width=device-width" />
<link rel="stylesheet" media="screen and (max-width:480px)" href="/styles/mobile_480.css" />
Is it necessary to also address the orientation issue of these devices (portrait/landscape) in the code string, and, if so, what is the proper syntax for doing so? The Media Queries window only allows me to designate width and height, but no other parameters. Do these "other parameters" have to be manually coded?
I also want to add code later for tablet devices, which are also viewable in either orientation. This is my test run using media queries, so I am hoping I am doing all of this correctly. Gradually I am getting the hang of this. Thanks for anyone's insight.
PS: I am assuming that I have correctly written the code mentioned above. If not, where have I gone wrong?
Tks. -
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 -
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
> -
Does IOS7 support Media Queries
Hi,
I have developed a html5 page which i want to fit to the size of IPAD(ios7) device.
Using the safari browser when i run the URL it is not able to take the shape of device orientation.
we are using media Queries to fit the size of the device. It seems media queries does not support IOS7 ?
Pls suggest.
Thanks
vijayAgain, not sure what is is you are trying to achieve. Media Queries define CSS style sections for certain criteria only.
In the case of an iPad a Media query like this would target the iPad in Landscape mode, as well as any other device who's browser supports the media query.
@media screen and(orientation:landscape)
while this would target it in Portrait mode.
@media screen and(orientation:portrait)
its up to your CSS in those sections to adjust your website to those dimensions or present different things depending on orientation.
For instance this HTML and CSS code will show which orientation the device is in by showing and hiding a div through a media query that detects orientation.
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile Device Orientation with Media Queries</title>
<style type="text/css">
div.orientl
background-color:#f2f2f2;
padding:10px;
font-family:Arial,"sans serif";
display:none;
div.orientp
background-color:#464646;
padding:10px;
font-family:Arial,"sans serif";
color:#ffffff;
display:none;
@media screen and(orientation:portrait)
div.orientp
display:block
div.desktop
display: none;
@media screen and(orientation:landscape)
div.orientl
display:block
div.desktop
display: none;
</style>
</head>
<body>
<div class="orientl">
<h1>Landscape</h1>
</div>
<div class="orientp">
<h1>Portrait</h1>
</div>
<div class="desktop">
<h1>Desktop Browser or no Orientation determined</h1>
</div>
</body>
<html> -
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.
AlexFor 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. -
Media Queries Adjustable full height div
Hi Everyone,
I am building a website using media queries but I want to know if it is possible to have an initial div that automatically fits the full width and height of the screen in which it is viewed. Obviously then scale down once the browser window is scaled.
If it can be done can anyone point me to a tutorial or give me the answer here.
Thank You.
Kind Regards,
AlexForget last post, try this: (change 'yourBackgroundImage.jpg' to the name of YOUR image)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="charset=UTF-8">
<title>Untitled Document</title>
<style>
html,
body {
height: 100%;
body {
margin: 0;
padding: 0;
#bgCover {
height: 100%;
width: 100%;
top: 0;
left: 0;
bottom: 0;
background-image: url('yourBackgroundImage.jpg');
background-position: center top;
background-attachment: scroll;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 1;
#navigation {
position: fixed;
width: 100%;
background-color: #000;
color: #fff;
padding: 20px 0;
text-align: center;
z-index: 2;
font-size: 20px;
#pageTitle {
color: #000;
font-size: 70px;
text-align: center;
margin: 0 auto;
padding-top: 300px;
#pageContent p {
padding: 20px 40px;
margin: 0;
</style>
</head>
<body>
<div id="navigation">
Navigation goes here
</div>
<div id="bgCover">
<div id="pageTitle">Headline Goes Here</div>
</div>
<div id="pageContent">
<p>Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.</p>
ere. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.</p>
</div>
</body>
</html>
Maybe you are looking for
-
Is it possible to connect a 2011, 13' MacBook to 2 external displays?
Is it possible to connect 2 external monitors to a Mac Book 2011 (has Thunderbolt port). I was using a Matrox Dual Head 2 Go DP Edition adaptor but it crashed after installing Yosemite 10.10 Is there another work around available?
-
Hiding options in the web gallery in iWeb?
How do I hide the options in the web gallery in my iWeb? I want people to see my images but dont want to show the Download or the Subscribe buttons. Is there anyway to turn these off. I'm using iWeb 8 and have a mobileme account
-
Workflow: check multiline container element for emptiness
Hi! Please suggest how to check multiline workflow-container element for emptiness in condition block. Regards, Maxim.
-
I have the newest version of iTunes and my computer has all the latest updates etc and when I try to download songs they stop and I get this error message "error 3259 Network connection has timed out". I paid for these songs and can't get them to dow
-
Restricting GL master change at account group level
Hi Experts, Requirement To control GL MAster field layout per company code or per account group and per activity. To restrict GL master change, for certain fields, at account group level. Let us say, I have activated "Post Auto" in a GL Account durin