Media query

Hi everyone
I m having a little program with a website which I m putting together. The site is at this url address. http://www.dreamaustraliastudytours.com.au/Test/index102/index.html. '
So far I have built up the following media query: @media only screen and (max-width:320px). The problem I m struggling to remedy is when I view the site on my iphone 5 the width does beyond the container.
body {
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
font-size: 13px;
.wrapper {
width: 100%;
max-width: 320px;
Any thoughts what I'm missing???
Also is there a way to hide the body background image when the site is being viewed in a mob phone or tablet device???
Thank you in advcance

At and below a width of 320px, the style rules within the media query function as they should, i.e. the menu-bar stacks as in
At widths greater than 320px, the rest of the style rules kick in. This is what you are seeing on your iPhone because the iPhone has a width greater than 320px. That the menu-bar is squashed is because of the lack of real-estate in smaller screens.
If you do not wish to use a framework like bootstrap, may I suggest that you start your layout off with the iPhone in mind, that is for mobile devices and consequently use media queries to cater for larger screen sizes. I think that you will find that this is a lot easier that the way that you have gone about it, desktop first.

Similar Messages

  • Media query does not work on my iPad (Was: media query question)

    I am coding a site for mobile/tablet/desktop and while my desktop and iphone respond to the CSS, my ipad does not. The changes I make to the tablet in dreamweaver take, but when they go live the ipad does not respond. Obviously my media query must be incorrect but I cannot figure out the issue. Any help is much appreciated.
    http://gbetza.mydomain.com/webservice2/test/KathrynFee/2014/profile.html
    Thank you.

    Yes.  That's inevitable because smart phones are getting bigger while tablets are getting smaller & bigger.  There is always going to be some crossover.   Think of it this way, when a tablet behaves like a mobile device, it takes on the mobile layout.  When tablet behaves more like a desktop, it takes the desktop layout.
    Similarly, a wide smartphone in landscape mode is apt to look like your tablet layout.
    See FluidGrid Example below:
    http://alt-web.com/FluidGrid/Fluid2.html
    Desktop = 4-col layout
    Tablet = 2-col layout
    Mobile = 1-col layout
    For illustration purposes, I added a thick gold border to the Tablet layout only.
    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
    @media only screen and (min-width: 481px) and (max-width:768px) {
    .gridContainer {width: 92%; border: 16px solid gold}
    Nancy O.

  • Media Query does not work from GoDaddy redirect?

    Website is set up and all looks good, except when the page is loaded from the redirect host name setup in Godaddy, the mobile media queries don't work. I'm not sure why?? The page loads ok, but will not apply the phone.css on a mobile device. However, if I use the local host url all works great. Thank you if you have any recommendations!

    Thank you again for taking time to look at this. I failed to mention I had adjusted the media query to 360px. Although, both urls above call up the same web page it seems the first url is wrapping the source into a frame.
    Source code from Firefox:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <title>O'Krent </title>
    </head>
    <frameset rows="100%,*" border="0">
      <frame src="http://www.accu-print.org/okrentgolf" frameborder="0" />
      <frame frameborder="0" noresize />
    </frameset>
    <!-- pageok -->
    <!-- 02 -->
    <!-- -->
    </html>

  • Cannot get Firefox 16 min-resolution dppx media query to work on retina MacBook Pro

    I'm trying to use the new min-resolution dppx media query support in Firefox 16 to work with my retina MacBook Pro, however when targetting the dppx with min-resolution it's not being supported by the browser. Is this actually correctly supported by Firefox now, or is it still outstanding?
    Test case is here - I've set it to 1dppx, so as far as I understand the text should be red on any screen (not just a retina one): http://mjw.in/firefox/test1.html

    I don't think that 2dppx works in Firefox 16 because a search on MXR with mozilla-release doesn't give any results (1dppx may work).
    *http://mxr.mozilla.org/mozilla-release/search?string=2dppx
    The current Nightly build may work in case you want to test this.
    *http://mxr.mozilla.org/mozilla-central/search?string=2dppx
    *http://www.mozilla.org/en-US/firefox/channel/
    See this article about how to install multiple versions on Mac OS X:
    * http://www.businessinsider.com/how-to-run-firefox-4-and-3-simultaneously-in-mac-os-x-with-multiple-firefox-profiles-2011-3

  • Media query issues in fluid grid layout (take a look at this code)

    how to make adjustments in specific device views without screwing everything up in other views. I know in the css designer when I click global it makes changes to all views which is great. But when I click one of the little icons at the button of the screen (like the smartphone icon or tabet etc) the changes I make in the view dont stay in that view but affect all views. So I'm coming to understand ( maybe wrongly) that those icon have no design power other than to show you what thing look like in that view. I'm starting to focus on clicking the stlye sheet dreamweaver cc created (not the boilerplate one) clicking the media query for the screen size I want to adjust and finding the selector I want to tweek (ITS RIGHT HERE THE HICKUP I'M HAVING IS AT - i CANT ADJUST  IMAGES THAT I HAVE SPECIFICALLY IN THE CORRESPONDING VIEW WITHOUT SCREWING EVERYTHING EVERYWHERE UP IN THE OTHER VIEWS) Can anybody invision what I'm trying to do and what happening and give me a fix????
    Idealy I would like to simply click the view icon of the screen size I want to tweak and drag handle bars to resize images and the adjustment stay only in that sceen size range, but this is not happening. This why I say that those (may wrongly I might be doing something wrong) icons have no design power other than to give you a view of things. But either way whether I can click icons and rag handle handle bars or in I have to use css designer I cant specifically work in one view without affecting all the others.
    Below is css code for media queries that are in my style sheet. It might not be the cleanest bit I want you to focus on two main aspsects of the code
         1) The media queries, particularly the smartphone 480 and below. ( but all media queries if need be)
         2) In the header and in the list iteams I have images. Its these images that I'm trying to resize - but only specific changes in specific views
    Take a look:
    /* Mobile Layout: 480px and below. */
    .gridContainer {
              margin-left: auto;
              margin-right: auto;
              width: 100%;
              padding-left: 0;
              padding-right: 0;
              clear: none;
              float: none;
    #div1 {
    #mainheader {
              margin-left: 0;
              position: static;
              height: auto;
              width: 100%;
    #navbarone {
    #navbartwo {
    #listiteams {
              color: #FFFFFF;
              text-align: center;
              background-color: #9DC5D3;
    #listiteamstwo {
              text-align: center;
              background-color: #9DC5D3;
              color: #FFFFFF;
    #navbutton {
    width: 100%;
    #li1 {
    width: 100%;
    clear: both;
    margin-left: 0;
    #li2 {
    width: 100%;
    clear: both;
    margin-left: 0;
    #navbuttontwo {
    width: 100%;
    #li3 {
    width: 100%;
    clear: both;
    margin-left: 0;
    #li4 {
              width: 100%;
              clear: both;
              margin-left: 0;
    #flads {
    .zeroMargin_mobile {
    margin-left: 0;
    .hide_mobile {
    display: none;
    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
    @media only screen and (min-width: 481px) {
    .gridContainer {
              width: 100%;
              padding-left: 0;
              padding-right: 0;
              clear: none;
              float: none;
              margin-left: auto;
    #div1 {
    #mainheader {
              position: static;
              height: auto;
              width: 100%;
              margin-left: 0;
    #navbarone {
    #navbartwo {
    #listiteams {
    #listiteamstwo {
    #navbutton {
    width: 32.2033%;
    #li1 {
    width: 32.2033%;
    clear: none;
    margin-left: 0;
    #li2 {
    width: 32.2033%;
    clear: none;
    margin-left: 0;
    #navbuttontwo {
    width: 32.2033%;
    #li3 {
    width: 32.2033%;
    clear: none;
    margin-left: 0;
    #li4 {
    width: 32.2033%;
    clear: none;
    margin-left: 0;
    #flads {
    .hide_tablet {
    display: none;
    .zeroMargin_tablet {
    margin-left: 0;
    /* 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%;
              max-width: 2000px;
              padding-left: 0;
              padding-right: 0;
              margin: auto;
              clear: none;
              float: none;
              margin-left: auto;
    #div1 {
    #mainheader {
              position: static;
              height: auto;
              width: 100%;
              margin-left: 0;
    #navbarone {
    #navbartwo {
    #listiteams {
    #listiteamstwo {
    #navbutton {
    width: 32.7731%;
    #li1 {
    width: 32.7731%;
    margin-left: 0;
    clear: none;
    #li2 {
    width: 32.7731%;
    margin-left: 0;
    clear: none;
    #navbuttontwo {
    width: 32.7731%;
    #li3 {
    width: 32.7731%;
    margin-left: 0;
    clear: none;
    #li4 {
    width: 32.7731%;
    margin-left: 0;
    clear: none;
    #flags {
    .zeroMargin_desktop {
    margin-left: 0;
    .hide_desktop {
    display: none;

    By default, image height and width are 100% in FluidGrid Layouts.  You'll find it near the top of your CSS code.
    @charset "utf-8";
    img, object, embed, video {
    max-width: 100%;
    .ie6 img {
    width:100%;
    That's so they can re-scale to fit the various layouts.  If you need to assign explicit height & width values to certain elements, you can override that CSS rule by using the height & width attributes in your HTML code like this. 
    <img src="some_image.jpg" height="xxx"  width="xxx">
    Or, you can give your image a class name and target that class with CSS Media Queries.  For an example, copy & paste this code into a new, blank document.  SaveAs test.hml and preview in browsers at different screen widths.
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    /**FLUID GRID DEFAULT**/
    img, object, embed, video{
    max-width: 100%;
    .ie6 img {
    width:100%;
    /* Special Rules for mobiles */
    @media only screen and (max-width: 480px) {
    .nav {width:320px; height:74px; }
    /* Special Rules for Tablets */
    @media only screen and (min-width: 482px) and (max-width: 1024px) {
    .nav {width: 480px; height: 148px;}
    /* Special Rules for Desktops */
    @media only screen and (min-width: 1025px) and (max-width: 1230px) {
    .nav {width: 1000px; height: 225px;}
    </style>
    </head>
    <body>
    <h3>This image naturally rescales to layout</h3>
    <img src="http://placehold.it/1000x225" alt="some description">
    <h3>This image has a .nav class &amp; rescales to set media query break points.</h3>
    <img class="nav" src="http://placehold.it/1000x225" alt="some description">
    </body>
    </html>
    Does this make sense now?
    Nancy O.

  • Media query issues

    Hi,
    After following all procedures of setting up the pages, the folders, etc. I want to INSERT or MODIFY the only one Media Query which is inside a CSS file. I use the one of almost default settings. I just have changed in the phone layout, 6 columns instead of 5.
    When I go to Insert or Modify > Media query, a messagge shows up:
    "The administrator of media query is not compatible with the fluid grid design." (It is translation from the spanish)
    WHat does it mean? I tried updating the software but there are just Action scripts updating, I guess nothing to do with DW and media queries. Any help? I am using Dreamweaver CS6.
    Thx a lot.
    MARIO V.

    In the English version of Dreamweaver CS6, the message you're seeing says "The Media Query Manager is not currently compatible with Fluid Grid Layouts". Selecting Insert > Media Queries opens the Media Query Manager, which creates a site-wide media query file.
    The Fluid Grid Layouts create all the media queries in the main style sheet, whereas a site-wide media query file imports separate style sheets like this:
    /* Desktop */
    @import url("main.css");
    /* Phone */
    @import url("phone.css") only screen and (max-width:480px);
    /* Tablet */
    @import url("tablet.css") only screen and (min-width:481px) and (max-width:768px);
    As the message says, they're not compatible. In fact, the Media Query Manager and site-wide media query files have been removed from Dreamweaver CC. You now control media queries through the @Media pane in the CSS Designer (which is not available in Dreamweaver CS6).
    To insert or modify a media query in a fluid grid layout in Dreamweaver CS6, you need to edit the style sheet manually. It's one of the main drawbacks of the way fluid grid layouts were implemented in CS6.

  • Media Query not working...

    My media query for screen size of a minimum of 480 px is not working.  The Global CSS takes over.  I can't find the reason why.
    It seems the brackets are in place correctly.  Can anyone see where the problem might be?  All the other queries work.
    thanks
    ____________________  sorry, it is a long CSS file
    @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 {
    /* IE 6 does not support max-width so default to width 100% */
    .ie6 img {
        width:100%;
        Dreamweaver Fluid Grid Properties
        dw-num-cols-mobile:        5;
        dw-num-cols-tablet:        9;
        dw-num-cols-desktop:    13;
        dw-gutter-percentage:    20;
        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/
    .fluid {
        position: relative;
    .fluidList {
        list-style: none;
        list-style-image: none;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    /* Mobile Layout: 480px and below. */
    .gridContainer {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        clear: none;
        float: none;
    #top {
        float: left;
        text-align: left;
    .tagline {
        width: 100%;
        clear: both;
        margin-left: 0;
        /* [disabled]margin-top: 50px; */
        /* [disabled]top: 50px; */
        position: static;
        display: block;
        float: left;
        text-align: left;
        font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
        font-style: italic;
    #mainNav {
        width: 100%;
        float: left;
        display: block;
        background-color: #30434D;
    #navMenu {
        clear: none;
        margin-left: 0;
        position: static;
        background-color: #30434D;
        font-style: normal;
        font-weight: 400;
        font-family: questrial;
        font-size: 18px;
    #menuChoices {
    .menuItem {
        color: #FFFFFF;
        font-family: questrial;
        font-size: 24px;
        font-weight: 400;
        padding-top: 0px;
        padding-bottom: 0px;
        width: 100%;
        clear: both;
        margin-left: 0;
        display: block;
        font-style: normal;
        height: 40px;
        line-height: 40px;
        float: left;
    #SEHCMbutton a:link {
        background-color: #FC6719;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
    #SEHCMbutton {
        float: left;
        background-color: #FC6719;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 30px;
        text-align: center;
        margin-bottom: 30px;
        display: block;
        width: 95%;
    #SEHCMbutton a:visited {
        background-color: #FC6719;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
    #SCVHpdfList {
        float: none;
    .fluid.SCVHsubMenuItems a:link {
        color: #303E48;
        background-color: #CED1D3;
        display: block;
        height: 30px;
        line-height: 30px;
        text-decoration: none;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
    .fluid.SCVHsubMenuItems a:hover {
        color: #FFFFFF;
        background-color: #303E48;
        display: block;
        height: 30px;
        line-height: 30px;
        text-decoration: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    #div2 {
        display: block;
        clear: both;
        position: relative;
        float: left;
        width: 100%;
        background-color: #FC6719;
    #SubHead {
        clear: both;
        float: left;
        position: relative;
        width: 100%;
        background-repeat: repeat-x;
        background-color: #FC6719;
        text-align: center;
    #mainSubHead {
        text-align: center;
        width: 100%;
        clear: none;
        margin-left: 0;
        position: static;
        color: #FFFFFF;
        font-style: normal;
        font-weight: 400;
        font-family: questrial;
        font-size: 25px;
    #div3 {
    width: 100%;
    #div4 {
    clear: both;
    margin-left: 0;
    width: 100%;
    #mainContent {
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        font-size: 15px;
        text-align: left;
        width: 65%;
        float: left;
        clear: both;
        padding-left: 25px;
        padding-right: 0px;
        padding-bottom: 0px;
        margin-bottom: 25px;
        margin-top: 0px;
        padding-top: 25px;
    .content {
    .contentStyle {
        padding-left: 30px;
        width: 85%;
        padding-right: 20px;
        margin-left: 0;
    #mainAside {
        clear: none;
        position: static;
        height: auto;
        margin-left: auto;
        float: none;
        margin-right: auto;
    #mainFooter {
        float: left;
        clear: both;
        background-color: #06A7E2;
        display: block;
        position: relative;
        width: 100%;
    #footerLogo {
        padding-top: 15px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    #footerInfo {
        float: none;
        clear: none;
        color: #FFFFFF;
        font-style: normal;
        font-weight: 200;
        font-family: source-sans-pro;
        margin-left: auto;
        margin-right: auto;
        padding-top: 15px;
        text-align: center;
        font-size: 12px;
    #asideBrochure {
        width: 100%;
        margin-left: 0;
        clear: both;
        text-align: center;
    #asideVideo {
        width: 100%;
        margin-left: 0;
        text-align: center;
    .lightLinks {
        color: #FFFFFF;
        font-style: normal;
        font-weight: 400;
        font-family: questrial;
        font-size: 18px;
        text-align: center;
        text-decoration: none;
    .lightLinks a:link{
        color: #FFFFFF;
        font-style: normal;
        font-weight: 400;
        font-family: questrial;
        font-size: 18px;
        text-decoration: none;
    .lightLinks a:hover{
        color: #3192D8;
        font-style: normal;
        font-weight: 400;
        font-family: questrial;
        font-size: 18px;
        text-decoration: none;
        text-align: center;
    #thermalDiffLabel {
    #thermDiffLabel {
        color: #30434D;
        font-style: normal;
        font-weight: 400;
        font-family: source-sans-pro;
        padding-top: 10px;
        padding-bottom: 0px;
        font-size: 16px;
    #thermDiffPict {
    #atuLabel {
        color: #30434D;
        font-style: normal;
        font-weight: 400;
        font-family: source-sans-pro;
        font-size: 16px;
        padding-top: 10px;
    #atuPict {
    #digitalLabel {
        color: #30434D;
        font-style: normal;
        font-weight: 400;
        font-family: source-sans-pro;
        font-size: 16px;
        padding-top: 10px;
    #digitalPict {
    #navChoices {
    #navList {
        float: left;
        clear: both;
    #PAnav {
        background-color: #30434D;
        width: 100%;
        display: block;
        clear: none;
    #PAchoices {
    #PAList {
        float: left;
        background-color: #30434D;
        color: #FFFFFF;
        font-style: normal;
        font-weight: 400;
        font-family: questrial;
        font-size: 18px;
        text-align: center;
        position: relative;
        width: 100%;
    .PAmenuItem {
        display: block;
        height: 35px;
        line-height: 35px;
        letter-spacing: 0.3px;
    .PAmenuItem a:link {
        display: block;
        height: 35px;
        line-height: 35px;
        color: #FFFFFF;
        text-decoration: none;
    .PAmenuItem a:visited {
        display: block;
        height: 35px;
        line-height: 35px;
        color: #FFFFFF;
        text-decoration: none;
    .PAmenuItem a:hover {
        display: block;
        height: 35px;
        line-height: 35px;
        color: #FFFFFF;
        text-decoration: none;
        background-color: #06A7E2;
    .PAmenuItem a:active {
        display: block;
        height: 35px;
        line-height: 35px;
        color: #FFFFFF;
        text-decoration: none;
        background-color: #06A7E2;
    .SubPageContentArea {
        color: #FFFFFF;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        font-size: 14px;
        text-align: left;
        letter-spacing: 0.06em;
    #topContent {
        width: 100%;
        color: #30434D;
        font-style: normal;
        font-weight: 200;
        font-family: source-sans-pro;
        font-size: 14px;
    #pageContent {
        width: 100%;
        display: block;
        clear: both;
    #asideNavArea {
        color: #FCFDFF;
        width: 30%;
        float: left;
        clear: right;
        padding-left: 15px;
        margin-left: 5px;
        margin-top: 25px;
        margin-bottom: 15px;
        background-color: #CED1D3;
    #bottomContentArea {
        background-image: url(/images/grayTexture2.png);
        background-repeat: repeat;
        width: 100%;
        display: block;
        clear: both;
    .bottomContent {
        color: #FFFFFF;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        font-size: medium;
        padding-left: 15px;
        display: block;
    #aboutPict {
    #sectionPict {
        width: 100%;
    #sideNavHolder {
        width: 200px;
        height: 300px;
        background-color: #B6C4CE;
        -webkit-box-shadow: 3px 3px 5px #303E48;
        box-shadow: 3px 3px 5px #303E48;
    #bottomContentText {
    #sectionPict img {
        width: 100%;
    #greenMemLog img {
    #indexContentArea {
        float: left;
        width: 100%;
        display: block;
    #asideArea {
        width: 100%;
        float: left;
        background-color: #CED1D3;
        height: 200px;
        clear: both;
    #mainAnim {
        width: 100%;
        display: block;
        float: left;
        clear: both;
        height: 200px;
        margin-bottom: 15px;
    #slideShow {
        width: 100%;
    #bottomContent {
        clear: none;
        background-image: url(images/grayTexture2.png);
        background-repeat: repeat;
        display: block;
        width: 100%;
        padding-top: 25px;
        padding-bottom: 25px;
        float: left;
    #sectionPhoto {
    #sectionPhoto img {
        width: 100%;
        display: block;
        clear: both;
    #bottomContent2 {
        width: 250px;
        display: block;
        float: left;
        clear: left;
        margin-left: auto;
        margin-right: auto;
    #bottomContent1 {
        width: 90%;
        clear: none;
    #sectionVideo {
        width: 95%;
        float: left;
        margin-left: 15px;
        text-align: left;
        margin-top: 15px;
        display: block;
    #sectionVideo img  {
        display: block;
        float: left;
        width: 100%;
    #Thermalnav  {
        width: 0px;
    .Thermalmenuitem {
        display: block;
        background-color: #06A7E2;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        text-decoration: none;
        height: 30px;
        padding-left: 15px;
        border-color: #FFFFFF;
        border-bottom-width: thin;
        border-bottom-style: dotted;
    .Thermalmenuitem a:hover {
        display: block;
        background-color: #FC6719;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        text-decoration: none;
        height: 30px;
        padding-left: 15px;
    .Thermalmenuitem a:link {
        display: block;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        text-decoration: none;
        height: 30px;
        padding-left: 15px;
    .Thermalmenuitem a:visited {
        display: block;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        text-decoration: none;
        height: 30px;
        padding-left: 15px;
    .Thermalmenuitem a:active {
        display: block;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        text-decoration: none;
        height: 30px;
        padding-left: 15px;
        background-color: #303E48;
    #ThermalList {
    #thermalLinks {
        margin-top: 15px;
        display: block;
        width: 400px;
        margin-left: auto;
        margin-right: auto;
    #ThermalLinks {
        display: block;
        margin-top: 20px;
        clear: both;
        text-align: center;
        margin-bottom: 20px;
        float: left;
        width: 100%;
    #SquareIcon {
        clear: both;
        width: 125px;
        float: left;
    #LinearIcon {
        width: 140px;
        clear: none;
        float: left;
        margin-left: 20px;
    #mainParagraph {
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        text-align: left;
        float: left;
        clear: both;
        width: 98%;
        margin-top: 15px;
        margin-bottom: 20px;
    #leftSpacer {
        width: 10%;
        height: 500px;
        display: block;
        float: left;
    #ThermalVideo {
        float: left;
        width: 100%;
        border: thin solid #000000;
    #ThermalChoose {
        text-align: left;
        background-color: #FC6719;
        color: #FDFDFD;
        display: block;
        height: 35px;
        line-height: 35px;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        width: 100%;
        float: left;
        padding-left: 10px;
    #SquareDiffuserSection {
        width: 100%;
        background-color: #06A7E2;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        font-size: 22px;
        text-align: left;
        display: block;
        height: 35px;
        float: left;
    #SquareDiffText {
        float: left;
        width: 90%;
        margin-left: 15px;
        margin-top: 20px;
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        margin-bottom: 25px;
        text-align: left;
    #squareDiffuserPicts {
        width: 100%;
        clear: both;
    #SCVH {
        float: none;
        width: 150px;
        margin-left: auto;
        margin-right: auto;
        clear: none;
        display: block;
    .Labels   {
        color: #06A7E2;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        text-align: center;
        vertical-align: bottom;
    #SCAH   {
        float: none;
        clear: none;
        display: block;
        width: 150px;
        margin-left: auto;
        margin-right: auto;
    #brochureThumb   {
        visibility: hidden;
    #SquareDiffSectTitle   {
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        padding-left: 15px;
    #SquarePict   {
        clear: left;
        width: 250px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    #brochureLink   {
        visibility: hidden;
    #bottomContent3   {
        float: left;
        width: 90%;
    .zeroMargin_mobile   {
    margin-left: 0;
    .hide_mobile   {
    display: none;
    #SCAHbutton {
        float: left;
        width: 100%;
        clear: both;
        margin-bottom: 10px;
    #SCVHbutton {
        float: left;
        clear: both;
        width: 100%;
        margin-bottom: 10px;
    #SCbutton {
        float: left;
        clear: both;
        width: 100%;
        margin-bottom: 10px;
    #SCVHbuttText {
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        width: 90%;
        clear: left;
        float: left;
        margin-left: 10px;
        text-align: center;
    #SCbuttText {
        position: relative;
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        width: 90%;
        float: left;
        clear: left;
        margin-left: 15px;
        text-align: center;
    #SC {
        width: 150px;
        margin-left: auto;
        margin-right: auto;
        float: none;
        clear: none;
        display: block;
    #SCAHbuttText {
        width: 90%;
        float: left;
        clear: left;
        margin-left: 15px;
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        text-align: center;
    #sqDiffPict {
        width: 150px;
        margin-top: 20px;
    #LAD {
        width: 150px;
        margin-left: auto;
        margin-right: auto;
        float: none;
        display: block;
    #LADbuttonText {
        float: left;
        clear: left;
        width: 90%;
        text-align: center;
    #VAC {
        width: 150px;
        margin-left: auto;
        margin-right: auto;
        float: none;
        display: block;
    #VACbuttonText {
        float: left;
        clear: left;
        width: 95%;
        text-align: center;
    #VACH {
        width: 150px;
        margin-left: auto;
        margin-right: auto;
        float: none;
        display: block;
    #VACHbuttonText {
        float: left;
        clear: left;
        width: 95%;
        text-align: center;
    #LADbutton   {
        width: 100%;
    #VACbutton {
        width: 100%;
        float: left;
        clear: left;
    #VACHbutton {
        float: left;
        clear: left;
        width: 100%;
    #LinearDiffusers {
        color: #FC6719;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        font-size: 22px;
        margin-bottom: 12px;
        padding-left: 15px;
    #LinearDiffPict {
        margin-left: 5px;
        float: right;
        width: 45%;
    #SquareDiffPict {
        float: right;
        color: #06A7E2;
        width: 40%;
    #SquareDiffPict img {
        width: 170px;
    #LinearDiffPict img {
        width: 175px;
    #PHseries {
        width: 200px;
        float: left;
        clear: none;
        margin-bottom: 15px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    #AirTerminalPicts {
        float: left;
        clear: both;
        background-color: #E6EBEE;
        display: block;
        width: 100%;
    #PTseries {
        width: 200px;
        float: left;
        clear: left;
        margin-right: auto;
        margin-bottom: 25px;
        margin-top: 20px;
        margin-left: auto;
    #ATUpicts {
        text-align: center;
        padding-left: 10px;
        margin-bottom: 20px;
    #PHbuttonText {
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        text-align: left;
        padding-left: 12px;
    #PTbuttonText {
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        padding-left: 12px;
        text-align: left;
    #ModelPhSeries {
        padding-left: 5%;
        color: #FC6719;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        font-size: 22px;
    #ATUVideo {
        width: 95%;
        margin-bottom: 20px;
        float: left;
        display: block;
        clear: both;
    #mainParagraphATU {
        float: none;
        width: 95%;
        padding-bottom: 15px;
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
    #ATUsectionVideo {
        margin-top: 35px;
        margin-left: 10px;
        width: 100%;
        float: left;
    #mainParagraphPH {
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        margin-bottom: 15px;
    #PHatuSeries {
        float: right;
    #ATUSectTitle {
        padding-left: 10px;
        width: 95%;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        font-size: 22px;
        line-height: 30px;
    #ATUplace {
        width: 100%;
    #ATUSection {
        float: left;
        width: 100%;
        background-color: #06A7E2;
    #PHDuct {
        margin-top: 35px;
        float: left;
        display: block;
        width: 100%;
    #PHductSection {
        float: left;
        background-color: #E6EBEE;
        clear: left;
        width: 100%;
    #PHductCaption {
        float: left;
        clear: left;
        color: #FFFFFF;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
        font-size: 22px;
        width: 100%;
        background-color: #303E48;
        line-height: 50px;
    #PHaccessText {
        margin-top: 20px;
        float: left;
        width: 100%;
    #PHdownloadTitle {
        background-color: #FC6719;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        line-height: 35px;
        font-size: 18px;
    #PHpdfList {
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
        line-height: 50px;
    #PHdownloads {
        float: left;
        clear: right;
        width: 100%;
        margin-top: 35px;
        margin-bottom: 20px;
    #Ductpict {
        float: left;
        display: block;
        width: 100%;
    .PHdata a:active {
        color: #06A7E2;
        text-decoration: none;
    #PHaccessories {
        float: left;
    .PHdata a:visited {
        color: #303E48;
        text-decoration: none;
    .PHdata a:hover {
        color: #06A7E2;
        text-decoration: none;
    .PHdata a:link {
        color: #303E48;
        text-decoration: none;
    .PHdata {
        border-bottom: 6px solid #E6EBEE;
        background-color: #FFFFFF;
    #PHimage {
        width: 150px;
    #PTseries2 {
        float: right;
    #Ductpict2 {
        width: 510px;
        float: left;
    #PHductCaption2 {
        width: 510px;
        float: left;
        background-color: #303E48;
        height: 40px;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        line-height: 40px;
        font-size: 22px;
    #DigitalContent {
        text-align: left;
        margin-top: 20px;
        background-color: #E6EBEE;
        float: left;
        width: 90%;
    #digiPicts {
        background-color: #E6EBEE;
        display: block;
        clear: left;
        width: 300px;
    #SEHCMbutton a:hover {
        background-color: #06A7E2;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        text-align: center;
        display: block;
    #EdgeSVCH {
        float: left;
        margin-left: 10px;
    #SCVHanim   {
        float: left;
        margin-top: 35px;
        width: 95%;
        margin-bottom: 10px;
    #SVCHanimPict {
        float: left;
        width: 100%;
    #SCVHhowToButt {
        float: left;
    .fluid.SCVHsubMenuItems {
        color: #303E48;
        background-color: #CED1D3;
        display: block;
        width: 100%;
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
    #SCVHsub {
        margin-bottom: 10px;
    .fluid.SCVHsubMenuItems2  {
        background-color: #CED1D3;
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
        text-align: center;
        height: 30px;
        display: block;
    .fluid.SCVHsubMenuItems2 a:link  {
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
        text-decoration: none;
        line-height: 30px;
        display: block;
    .fluid.SCVHsubMenuItems2 a:hover  {
        background-color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
        text-decoration: none;
        line-height: 30px;
        display: block;
        color: #FFFFFF;
    .fluid.SCVHsubMenuItems2 a:visited  {
        background-color: #CED1D3;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
        text-decoration: none;
        line-height: 30px;
        display: block;
        color: #303E48;
    .SCVHlist a:link {
        color: #303E48;
        text-decoration: none;
        display: block;
        background-color: #FFFFFF;
        height: 30px;
        line-height: 30px;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        border-bottom: medium solid #E6EBEE;
    .SCVHlist a:hover {
        color: #FFFFFF;
        background-color: #06A7E2;
        display: block;
    .SCVHlist a:visited {
        color: #303E48;
        background-color: #FFFFFF;
        display: block;
    #SCVHchartPict {
        float: left;
        text-align: center;
        width: 300px;
    #SCVHdata {
        margin-top: 25px;
        text-align: left;
        width: 90%;
        float: left;
    #SCVHbottomData {
        margin-top: 15px;
        width: 300px;
        float: left;
    #SCVHchartPict img {
    #SCVHchartGraphic {
        width: 100%;
    #SCVHdimGraphic {
        width: 100%;
    #SCVHdimenPict {
        margin-top: 20px;
        width: 300px;
    #SCVHvideo {
        width: 95%;
    #LADimages {
        float: right;
        width: 200px;
        margin-left: 20px;
    #LAD3D {
        float: right;
    #LADusePict {
        float: right;
        clear: right;
        margin-top: 50px;
    #MidContent {
        float: left;
        text-align: left;
        margin-top: 20px;
    #CoAnda {
        margin-top: 25px;
        border: thin solid #FFFFFF;
        float: left;
        width: 300px;
        padding-left: 15px;
    #VACinduction {
        float: right;
        margin-left: 10px;
    #PAproducts {
        width: 100%;
        clear: both;
        display: block;
        float: left;
    #SlideShow {
        width: 100%;
        float: left;
        height: 400px;
        display: block;
    #ProductWrapper {
        width: 300px;
        display: block;
        clear: both;
        float: left;
    .fluid.PromoBlocks {
        width: 225px;
        display: block;
        clear: both;
    #SQdiffPict {
        width: 100%;
    #ATUpict {
        width: 100%;
    #DigiDiffPict {
        width: 100%;
    @media only screen and (min-width:480px){
    #PAproducts {
        width: 100%;
        clear: both;
        display: block;
        float: left;
    #mainAnim {
        width: 100%;
        display: block;
        float: left;
        clear: both;
        height: 270px;
        margin-bottom: 15px;
    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
    @media only screen and (min-width: 600px) {
    .fluid.SCVHsubMenuItems2 a:link  {
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
        text-decoration: none;
        line-height: 30px;
        display: block;
    .fluid.SCVHsubMenuItems2 a:hover  {
        background-color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
        text-decoration: none;
        line-height: 30px;
        display: block;
        color: #FFFFFF;
    .fluid.SCVHsubMenuItems2  {
        background-color: #CED1D3;
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
        text-align: left;
        height: 30px;
        display: block;
        padding-left: 10px;
        font-size: 13px;
        width: 240px;
        float: left;
        clear: right;
    #DigitalPicts {
        float: left;
        display: block;
    #SEHCMbutton {
        float: left;
        margin-left: 15px;
        background-color: #FC6719;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 40px;
        text-align: center;
        display: block;
        width: 62%;
    .gridContainer {
        width: 100%;
        padding-left: 0%;
         padding-right: 0%;
        clear: none;
        float: none;
        margin-left: auto;
    #top {
        text-align: left;
        float: left;
    .tagline {
    width: 100%;
    clear: both;
    margin-left: 0;
    #menuChoices {
    #div2 {
        width: 100%;
        background-color: #FC6719;
        height: 380px;
    #SubHead {
        position: static;
        height: 40px;
        width: 100%;
    #mainSubHead {
        clear: both;
        margin-left: 0;
        position: static;
        height: 40px;
        width: 100%;
        line-height: 40px;
    #div3 {
    width: 100%;
    #div4 {
    clear: both;
    margin-left: 0;
    width: 100%;
    #mainContent {
    .content {
    .contentStyle {
        width: 88.6792%;
        margin-left: 0;
    #mainAside {
        margin-left: auto;
        position: static;
        height: auto;
        display: block;
        width: 700px;
        margin-right: auto;
    #mainFooter {
    #footerLogo {
        margin-left: 25px;
        text-align: left;
    #footerInfo {
        margin-left: 25px;
        text-align: left;
        width: 400px;
    #asideBrochure {
        clear: both;
        float: left;
    #asideVideo {
        margin-left: 0;
        float: left;
        text-align: center;
    .lightLinks {
        text-align: center;
        line-height: 16px;
    #thermalDiffLabel {
    #thermDiffLabel {
        width: 330px;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
    #thermDiffPict {
    #atuLabel {
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        width: 330px;
    #atuPict {
    #digitalLabel {
        width: 330px;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
    #digitalPict {
    .mainSubHead {
        color: #FFFFFF;
        background-color: #F60;
        display: block;
        font-family: questrial;
        font-size: 30px;
        margin: auto;
        height: 80px;
        line-height: 40px;
        font-style: normal;
        font-weight: 400;
    #navList {
    #PAnav {
    #PAchoices {
    #PAList {
        position: relative;
        margin-left: auto;
        margin-right: auto;
    .PAmenuItem {
        float: left;
        position: relative;
        display: block;
        width: 115px;
        clear: right;
        font-size: 13px;
        padding-left: 10px;
    .SubPageContentArea {
        padding-bottom: 20px;
        text-align: left;
    #topContent {
    #pageContent {
        width: 100%;
    #asideNavArea {
    #bottomContentArea {
    .bottomContent {
    #aboutPict {
    #sectionPict {
    #sideNavHolder {
    #bottomContentText {
    #indexContentArea {
    #asideArea {
        line-height: 30px;
        width: 150px;
        height: 700px;
        float: left;
        clear: none;
    #mainAnim {
        height: 425px;
        width: 100%;
        float: left;
    #bottomContent {
    #sectionPhoto {
    #bottomContent2 {
        float: left;
        clear: left;
        width: 250px;
        margin-left: auto;
        margin-right: auto;
    #bottomContent1 {
        float: left;
        width: 575px;
        margin-left: 5px;
    #sectionVideo {
        width: 580px;
        float: left;
        margin-left: 15px;
    .mainParagraphs {
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        font-size: 15px;
        text-align: left;
    #ThermalList {
    #thermalLinks {
    #ThermalLinks {
        float: left;
        clear: both;
        width: 150px;
        margin-bottom: 10px;
    #SquareIcon {
        width: 100px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        float: none;
    #LinearIcon {
        float: none;
        width: 120px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        clear: left;
    #mainParagraph {
        float: left;
        clear: both;
        width: 98%;
        margin-top: 0px;
    #leftSpacer {
    #ThermalVideo {
        width: 70%;
        margin-top: 20px;
        margin-left: 15px;
        border-width: thin;
    #ThermalChoose {
        margin-top: 0px;
        text-align: center;
        line-height: 1.5em;
        height: 50px;
    #SquareDiffuserSection {
        height: 35px;
    #SquareDiffText {
        width: 575px;
        margin-top: 20px;
        margin-bottom: 25px;
        margin-left: 15px;
        padding-left: 8px;
        text-align: left;
    #squareDiffuserPicts {
        width: 600px;
        margin-top: 15px;
        margin-left: 15px;
    #SCVH {
        display: block;
        width: 150px;
        float: none;
        margin-left: 0px;
        margin-right: 0px;
    #SCVHanim   {
        float: left;
        margin-top: 35px;
        width: 50%;
    .fluid.SCVHsubMenuItems {
        color: #303E48;
        background-color: #CED1D3;
        display: block;
        height: 30px;
        line-height: 30px;
        width: 220px;
        font-size: 14px;
        text-align: left;
        padding-left: 10px;
        float: left;
        clear: right;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    #SCVHdimGraphic {
        width: 600px;
    #SCVHdimenPict {
        margin-top: 20px;
    #SCAH {
        display: block;
        width: 150px;
        margin-left: 0px;
        margin-right: 0px;
    #SCbutton {
        float: left;
        width: 175px;
        clear: right;
        position: relative;
        margin-left: 25px;
    #PHDuct {
        margin-top: 35px;
        float: left;
        display: block;
    #PHductCaption2 {
        width: 510px;
        float: left;
        background-color: #303E48;
        height: 40px;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        line-height: 40px;
        font-size: 22px;
    #brochureThumb {
        visibility: visible;
    #SquareDiffSectTitle {
        width: 500px;
        height: 35px;
        text-align: left;
        color: #FFFFFF;
        margin-left: 20px;
        line-height: 35px;
    #SquarePict {
        width: 225px;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        clear: left;
    #LADbutton   {
        width: 175px;
        float: left;
    #brochureLink {
        visibility: visible;
    #bottomContent3 {
        width: 595px;
        float: left;
        clear: left;
        margin-left: 15px;
    .hide_tablet {
    display: none;
    .zeroMargin_tablet {
    margin-left: 0;
    #SCVHbutton {
        float: left;
        width: 175px;
    #SCVHbuttText {
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        width: 90%;
        float: left;
        clear: right;
        text-align: left;
    #SCAHbuttText {
        float: left;
        clear: right;
        width: 90%;
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        position: relative;
        text-align: left;
    #SCbuttText {
        position: relative;
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        width: 90%;
        float: left;
        clear: none;
        display: block;
        text-align: left;
    #SC {
        width: 150px;
        float: none;
        margin-left: 0px;
        margin-right: 0px;
    #SCAHbutton {
        float: left;
        width: 175px;
        clear: right;
        position: relative;
        margin-left: 25px;
        margin-bottom: 20px;
    #sqDiffPict {
        width: 190px;
        margin-top: 20px;
    #LinearDiffusers {
        color: #FC6719;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        font-size: 22px;
        padding-left: 15px;
        margin-bottom: 12px;
        float: left;
        width: 100%;
    #VACbutton {
        width: 175px;
        float: left;
        clear: right;
        margin-left: 25px;
    #VACHbutton {
        float: left;
        width: 175px;
        clear: right;
        margin-left: 25px;
    #VACbuttonText {
        float: left;
        clear: left;
        width: 90%;
        padding-left: 10px;
        text-align: left;
    #LADbuttonText {
        float: left;
        clear: left;
        width: 90%;
        padding-left: 10px;
        text-align: left;
    #VACHbuttonText {
        float: left;
        clear: left;
        width: 90%;
        padding-left: 10px;
        text-align: left;
    #LAD {
        width: 150px;
        margin-left: 0px;
    #VAC {
        width: 150px;
        margin-left: 0px;
    #VACH {
        width: 150px;
        margin-left: 0px;
    #linearPict {
        float: left;
        clear: right;
        margin-left: 0px;
    #linearPict img {
        width: 150px;
        display: block;
    #SquareDiffPict {
        color: #06A7E2;
        float: right;
        text-align: center;
        width: 25%;
    #LinearDiffPict {
        margin-left: 5px;
        float: right;
        width: 25%;
    #ATUsectionVideo {
        margin-top: 35px;
        width: 95%;
        float: left;
        margin-left: 40px;
    #ATUVideo {
        width: 62%;
        margin-bottom: 20px;
        float: left;
        clear: right;
        margin-left: 15px;
    #mainParagraphATU {
        float: left;
        width: 200px;
    #PHseries {
        width: 200px;
        float: left;
        margin-left: 10%;
        clear: none;
        margin-bottom: 25px;
        margin-top: 20px;
    #PHductCaption {
        float: left;
        clear: left;
        color: #FFFFFF;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
        font-size: 22px;
        width: 100%;
        background-color: #303E48;
        line-height: 50px;
    #PHdownloads {
        float: left;
        clear: right;
        width: 250px;
        margin-left: 30px;
        margin-top: 35px;
    #PHatuSeries {
        float: right;
    #PHimage {
        width: 225px;
    #PHaccessText {
        margin-top: 20px;
    #ATUSectTitle {
        padding-left: 40px;
    #PTseries2 {
        float: right;
    #PTseries {
        width: 200px;
        float: left;
        clear: right;
        margin-right: auto;
        margin-bottom: 25px;
        margin-top: 20px;
        margin-left: 35px;
    #digiPicts {
        float: right;
        background-color: #E6EBEE;
    #DigitalContent {
        text-align: left;
        margin-top: 20px;
        background-color: #E6EBEE;
        margin-left: 30px;
    #Ductpict {
        width: 511px;
        float: left;
        display: block;
        clear: right;
    #Ductpict2 {
        width: 510px;
        float: left;
    #DigitalPicts {
        float: right;
    #SCVHsub {
        width: 100%;
        margin-bottom: 15px;
    #EdgeSVCH {
        float: right;
        margin-left: 20px;
    #SVCHanimPict {
        float: left;
        width: 100%;
    #SCVHchartPict {
        float: right;
        margin-left: 20px;
        width: 350px;
    #SCVHbottomData {
        margin-top: 15px;
        width: 600px;
        float: left;
        clear: both;
    #SCVHvideo {
        width: 100%;
    #CoAnda {
        margin-top: 25px;
        border: thin solid #FFFFFF;
        float: left;
        width: 500px;
        padding-left: 15px;
    #SlideShow {
        width: 100%;
        height: 455px;
        float: left;
    #ProductWrapper {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    .fluid.PromoBlocks {
        width: 180px;
        float: left;
        margin-top: 20px;
        margin-left: 15px;
        clear: none;
        display: block;
    #SQdiffPict {
        display: block;
    #ATUpict {
        display: block;
    #DigiDiffPict {
        width: 100%;
        display: block;
    /* additional media query of min 600px*/
    /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
    @media only screen and (min-width:800px){
    .gridContainer {
        width: 100%;
        max-width: 1920px;
        padding-left: 0;
        padding-right: 0;
        margin: auto;
        clear: none;
        float: none;
        margin-left: auto;
    #top {
        float: left;
    .tagline {
    width: 79.3103%;
    margin-left: 1.2987%;
    clear: none;
    #mainNav {
    .menuItem {
        clear: none;
        background-size: auto 40px;
        padding-bottom: 0px;
        padding-right: 0px;
        padding-top: 0px;
    #top img {
        text-align: left;
        background-repeat: no-repeat;
        float: left;
        margin-left: 10px;
    #SEHCMbutton {
        float: left;
        margin-left: 35px;
        background-color: #FC6719;
        color: #FFFFFF;
        font-family: questrial;
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: block;
        width: 62%;
    #div2 {
        text-align: center;
        width: 100%;
        background-color: #FC6719;
        background-repeat: repeat-x;
        clear: both;
    #SlideShow {
        width: 100%;
        height: 555px;
        float: left;
    #SubHead {
        position: static;
        margin-left: auto;
        height: 45px;
        width: 100%;
        top: 586px;
        left: 0px;
        background-color: #FC6719;
    #mainSubHead {
        margin-left: 0;
        clear: both;
        position: static;
        height: 45px;
        width: 100%;
        #SCVHsub {
        width: 100%;
        margin-bottom: 15px;
    .fluid.SCVHsubMenuItems {
        color: #303E48;
        background-color: #CED1D3;
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 15px;
        text-align: left;
        padding-left: 15px;
        width: 250px;
        #SCVHlist a:link {
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        text-decoration: none;
    #SCVHpdfList {
        float: none;
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
    #SCVHlist {
        height: 25px;
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        background-color: #FFFFFF;
        border-bottom-style: solid;
        border-bottom-color: #E6EBEE;
    #SCVHanim   {
        float: left;
        margin-top: 35px;
        width: 511px;
    #SCVHdimGraphic {
        float: right;
    #SCVHdimenPict {
        margin-top: 20px;
        width: 800px;
        float: right;
    #div3 {
    width: 100%;
    #div4 {
    margin-left: 1.2987%;
    clear: none;
    width: 29.8701%;
    #mainContent {
    .content {
    .contentStyle {
        width: 55%;
        margin-left: 0;
        float: left;
    #mainAside {
        position: relative;
        width: 325px;
        float: left;
        clear: right;
        display: block;
        margin-left: 30px;
    #mainFooter {
    #footerLogo {
        margin-left: 25px;
    #footerInfo {
        line-height: 30px;
        display: block;
        height: 30px;
        float: none;
        clear: none;
        text-align: left;
        width: 400px;
    #asideBrochure {
        width: 325px;
        margin-left: 0;
        clear: none;
        float: left;
    #asideVideo {
        width: 325px;
        margin-left: 0;
        float: left;
    .mainSubHead {
        color: #FFFFFF;
        background-color: #F60;
        display: block;
        font-family: questrial;
        font-size: 30px;
        margin: auto;
        height: 40px;
        line-height: 40px;
        font-style: normal;
        font-weight: 400;
    .lightLinks {
    #thermalDiffLabel {
    #thermDiffLabel {
        width: 280px;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
    #thermDiffPict {
    #atuLabel {
        padding-top: 10px;
        /* [disabled]padding-right: 10px; */
        padding-bottom: 10px;
        padding-left: 10px;
        width: 280px;
    #atuPict {
    #digitalLabel {
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        width: 280px;
    #digitalPict {
        padding-bottom: 2px;
    #navChoices {
    #navList {
    #PAnav {
        background-color: #30434D;
        display: block;
    #PAchoices {
    #PAList {
        display: block;
        margin-left: auto;
        margin-right: auto;
        float: left;
    .PAmenuItem {
        padding-left: 10px;
        width: 150px;
        font-size: 15px;
    .mainSubHead {
        color: #FFFFFF;
        display: block;
        font-family: questrial;
        font-size: 30px;
        margin: auto;
        font-style: normal;
        font-weight: 400;
    #AboutUsText {
        padding-left: 15px;
        width: 92%;
    #pageContent {
    #asideNavArea {
    #bottomContentArea {
    .bottomContent {
    #aboutPict {
    #sectionPict {
    #sideNavHolder {
    #bottomContentText {
    #indexContentArea {
    #asideArea {
        height: 725px;
        width: 275px;
        float: left;
        clear: right;
        padding-bottom: 25px;
    #mainAnim {
        width: 100%;
        display: block;
        height: 555px;
        float: left;
    #bottomContent {
    #sectionPhoto {
    #bottomContent1 {
        float: left;
        width: 800px;
        margin-left: 15px;
    #bottomContent2 {
        clear: right;
        margin-left: 20px;
        float: left;
    #sectionVideo {
        margin-left: 5%;
        width: 800px;
    #ThermalList {
    #thermalLinks {
    #ThermalLinks {
        width: 200px;
        text-align: center;
    #SquareIcon {
        margin-left: auto;
        margin-right: auto;
        width: 125px;
        display: block;
        float: none;
    #LinearIcon {
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 145px;
        float: none;
        clear: both;
    #mainParagraph {
        color: #303E48;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        text-align: left;
        float: none;
        clear: both;
        width: 754px;
        margin-top: 10px;
        margin-bottom: 40px;
    #leftSpacer {
    #ThermalVideo {
        display: block;
        float: left;
        clear: right;
        margin-top: 20px;
        width: 534px;
        margin-left: 30px;
        margin-right: auto;
    #ThermalChoose {
    #SquareDiffuserSection {
        display: block;
        float: left;
        clear: both;
        width: 100%;
        padding-left: 5%;
        height: 35px;
    #SquareDiffText {
        width: 750px;
        float: left;
        margin-left: 5%;
        margin-bottom: 30px;
        text-align: left;
    #squareDiffuserPicts {
        margin-left: 5%;
        width: 800px;
        margin-bottom: 30px;
        clear:

    Too much to check through but You are using the following conditionals:
    1) Standard CSS.
    This is the CSS that will load at any res. If you set a style here it will load in the two conditional's below as well.
    2) @media screen and (min-width:990px)
         This is telling the browser to load these styles when the screen is over 990px's wide but you have not excluded anything using max-width so any styles from 1) will be carried over. You could try overwriting them with      !important but its messy and would make more sense to extract the styles from 1)
    3) @media screen and (min-width:1100px)
         This is telling the browser to load these styles when the screen is over 1100px but like 2) you are not ignoring anything under this width so it will pick up your base styles as well as your conditional styles from 2)

  • What action do I take when this error warning appears? Whilst executing onClick in Media Query Manag

    What action do I take when this error warning appears? Whilst executing onClick in Media Query Manager.htm, the following JavaScript error ocurred: At line 157 of the file "Macintosh HD: Application: Adobe Dreamweaver CS5>5: Configuration Commands: Media Query Manager.js": getDocumentDOM: Argument nember 1 is invalid
    Thank you

    You'll get better answers in teh DW forum...
    Mylenium

  • Site-wide media query file

    Let's say one has a style sheet for detail pages on one's website, say "detail.css", designed for desktop monitors.
      Now one creates a sitewide media query file, e.g., mq-detail.css
    which looks like this to refer to the tablet and phone style sheets:
    /* detail-tablet */
    @import url("detail-tab.css") only screen and (min-width:321px) and (max-width:768px);
    /* detail-phone */
    @import url("detail-phone.css") only screen and (max-width:320px);
    Then how does one refer to the desktop style sheet? If I simply use "detail.css" with a minimum width of 769px, then some browsers like IE8 will not reference any style sheet.
    Would this line in mq-detail.css   work:
    <!--[if lt IE 9]
    <link href="style_sheets/detail.css" rel="stylesheet" media="screen">
    <!endif]-->
    If the screen width is >768 px, will "detail.css" be used for all browsers: that is the goal.

    cma cma wrote:
    I understand the concept but it is unclear how to implement it. In what files does one put these two  lines?
    <link rel="stylesheet" href="css/global.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/mobile.css" type="text/css" media="screen"/>
    The links above go on every page of my site as they are needed. The global.css for desktop AND mobile. The mobile.css contains the media queries css which are used to change the css in the global.css file specifically for mobile devices.
    cma cma wrote:
    David Powers' excellent tutorial talks about a number of mobile query issues but he does not discuss using the Site-wide media query file. Do you and Nancy dispense with that step and put all your media queries and CSS links in every html page?
    There isn't any site wide media query file. That would be just a general css file that both  desktop and mobile share, in my view. You only change what is necessary for mobile devices in a dedicated media queries file or you can include them in the general css file.
    cma cma wrote:
    He also says:
    To ensure a level playing field with all devices that support media queries, just add the following line to the <head> of each web page:   #
    <meta name="viewport" content="width=device-width, initial-scale=1">
    Yes, that line of code needs to be present on all the website pages.
    cma cma wrote:
    Then Mr. Powers says to use "only"
    media="only screen and (min-width: 401px) and (max-width: 600px)"
    Havent read through the tutorial so can't really comment on that one only to say everyone has slightly different approaches to building pages. I tend to look at my design and see where it starts to break down then use media query break points based on that rather than any view port width.
    cma cma wrote:
    and finally:
    use an Internet Explorer conditional comment to serve a special set of rules to older versions of IE like this:   #
    <!--[if lt IE 9 & !IEMobile]> <link href="iestyles.css" rel="stylesheet" type="text/css"> <![endif]-->
    You can use an IE conditional comment IF that is whats needed to get IE8 to work with your design....depends what css you are using. The more advanced techniques will not work in older browsers.

  • Site Wide Media Query option is ghosted

    Hello,
    I am new to Dreamweaver CS6 and I am trying to set up media queries for my website design.
    When I got to Modify>Media Queries> the dialog box has the option for either "Site Weide" or  "This Document". However the "Site Wide" option is ghosted and I can't select it. I have tried a variety of different HTML documents (HTML 4 and HTML 5) but nothing works.
    Can anyone help me solve this problem?
    Thank You.

    Have you defined your site in DW? You should do that in order for 'Site-Wide' media-query to work. Here's a walkthrough that you can follow to define your site in DW: http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs01-defining-a-new-site/
    Yes - the video is for CS5 and 5.5. But it is no different to CS6 too!

  • Media query is affecting tablet as well as phone

    HI,
    I'm on DW CS6 on an iMac intel. I am (with trepidation) using media query to style my content for a mobile phone device. The basic issue is that even though I am setting media query to have an 800px max screen (see mobile.css),the css is also affecting my ipad rendering of the site as well.
    Is there a way to counter this?
    http://www.frankbright.com/mobile.css
    To give some context, I am scaling my regular site so that it also appears ok on an ipad as is. I know this can work because I used to use fixed css containers of (780 px width) and with no media query, the ipad adjusted the size quite well on its own. And I am close to doing that here anyways through compromises etc.
    I am somewhat familiar with fluid grid layouts and I've even taken an online course on them, but that will take some time to set up so this is hopefully a current solution (I hope !).
    Also, I tried to re-style the navigation to simply use a background color on the hover (and no image) and I even set the css like this --  #navcontainer img {display:none;} This didn't seem to work for whatever reason.
    I appreciate any help or tips anyone could offer.
    Many Thanks,
    Frank B.

    David_Powers wrote:
    In my experience, even when you use orientation in a media query for the iPad and iPhone, the page still zooms when you switch from portrait to landscape, and you have to tap the page to rescale it. However, I notice that doesn't happen with your sample page.
    Is that because you're running JavaScript to create equal height columns, or does the secret lie in the empty script immediately inside the body? Or is it because you're just supremely brilliant?
    No. It's because we spent 3 months researching the various articles on responsive design and managed to reinvent the technique to our standards
    The key is to use the right media queries (a combinnation of device independent and device dependent) along with exceptions for various devices and orientations. The zoom factor is equalized not through script but by use of a specific viewport meta tag. Using the tag makes pixel density irrelevant for the most part.

  • Media query for iPhone 4s and iPhone 5

    What is the Media Query for iPhone 4s and iPhone 5 in landscape and portrait mode

    This is a tech support forum.  For developer and coding questions, post in the Dev forums

  • Resizable page for different screen sizes but with static image content. Shall I use media query?

    I’m making a page that has of mostly image content. It’s a large circle in the middle so I want it to be centered vertically and horizontally. I also want it to stay centered and resized proportionally for different screen sizes. I’ve read about media query but it seems to me that the elements just become fluid. Can I make the elements stay in place using the media query?
    I’m working in Dreamweaver CS5.5

    Here's the code I'm working with now, I've taken away the things that I don't really understand.
    It's working but I guess it won't hold when I start with the media queries.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head><style type="text/css">
    body {}
    div {
       font: 12px Arial;
    span.bold { font-weight: bold; }
    #the-circle {
      height: 960px;
    width:960px;
    margin-left:650px;
    margin: 0px 10px 0px 10px;
    margin-left:650px;
    .link-row {
    position:absolute;
    width: 960px;
    height: 74px;
    top: 130px;
    left:660px;
    .link-row-2 {
       position: absolute;
       width: 960px;
       height: 74px;
       top: 300px;
       left:660px;
    .link-row-left {
    float: left;
    .link-row-right {
    float: right;
    .link-row-right {
    float: right;
    .link-row-right {
    float: right;
    </style></head>
    <body>
    <br /><br />
    <div id="the-circle">
    <img src="ACE Test/Logo-DW.png" width="960" height="960" />
    </div>
    <div class="link-row">
    <div class="link-row-left"><img src="ACE Fotografier EP och Video/Logo/Wix ACE Logo.png" width="111" height="74" /></div>
    </div>
    <div class="link-row-2">
    <div class="link-row-right"><img src="ACE Fotografier EP och Video/Logo/Wix ACE Logo.png" width="111" height="74" /></div>
    </div>
    </body></html>

  • Error message: (translated from Dutch) "Cannot find corresponding style page for media query"

    Error message: (translated from Dutch) "Cannot find corresponding style page for media query"(see image)
    I cannot find what is wrong with this page: steun sesem
    This message does not appear on the other pages of this site..
    What do I wrong??
    Thanks in advance!
    Martien

    There are two things that are probably causing this error.
    Line 22 in your HTML looks like this:
    </style><!--[if lt IE 9]>
    You need to remove the closing style tag:
    </style><!--[if lt IE 9]>
    Also in sesem.css, there's a missing closing brace on line 486:
    .footer {
      font-size: 1.1em;
      line-height: 1.4em;
      color: #878787;
      text-align: center;
    }  // <---- Missing closing brace
    /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
    There are other problems in your CSS, but fixing those two items should put you back on the right track.

  • IE Ignoring a media query that works in chrome and ff

    Hello,
    Hope someone can help. Around line 459 in my css http://192.185.137.91/~gothicarch/ihealth/ there is this media query that IE can''t see. I'm completely stumped. Chrome and FF see it just fine. If someone could take a look I would appreciate it.
    @media only screen and (max-width:902px){
      h2{
      font-size:20px;
      #callouts-wrapper{
      width:100%;
      padding-left:0;
      text-align:center;
      #callouts{
      float:none;
      text-align:center;
      margin: 0 auto;
    Chrome and FF
    Internet Explorer

    Nevermind. I found the where a closing media query tag was missing after the 100% look

Maybe you are looking for

  • Graphics card upgrade for HP G71-340US

    Hello, I have a HP G71-340US running Windows 7 Home Premium 64-bit with a Intel GMA4500MHD. I know that this graphic card has a very low performance rate, so is there any alternate graphics available for me to purchase to put it in this system. With

  • FTP not working behind firewall

    I've currently got a Cisco 891 running with a FTP server behind it. All FTP clients running inside the network can use the FTP by going directly to the internal IP of 192.168.12.6. However all outside clients are getting a connection to the server bu

  • Problem when using Logitech C270 webcam

    Hi, I've been having problems video calling with my C270 webcam. Initially video calls work fine for a couple of minutes, and then my computer loses its internet connection (just my computer - my other devices work fine). My internet will not reconne

  • Type d. Output

    How I can convert type d (date) to full date ( 1 january 2001 year) ?

  • Change mouse cursor over graph cursor.

    Is there a way to change the mouse cursor as it moves over graph cursors when using trackmode TrackDragCursor? To indicate that you can position the cursor.