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.

Similar Messages

  • 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 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.

  • In dreamweaver site-wide query option file grayed out

    in dreamweaver site-wide query option file grayed out
    Why won't this button option work, I cannot get the site-wide query to highlight, please help anyone, thanks.

    You need to have a defined site in order for DW to correctly work with your files...
    http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs01-defining-a-new-site/
    Once defined, you will always work from the Dreamweaver Files panel to ensure the program can manage your files correctly.

  • "Error loading media. File Could not be played"  when trying to view streaming media on only some sites.  How to fix?

    Hi!
    I've been having a problem trying to view streaming media, but it only happens on some sites.  It's similar to a problem I have on my Windows PC, that's related to Adobe Flash, but since I'm very new to using my iPad Mini, I don't even know if Apple devices have Flash...do they?
    Anyway, when I go to a site that's plagued by this issue, I tap the 'Play' arrow on my screen & the circle spins like it's gonna play, but then the screen turns black & this error message appears:
                                                  "Error loading media. File Could not be played"  followed by a triangle with an exclamation point !
    I read several articles online & the solutions ran from updating firmware in their router, (mine is brand new...installed last Thursday), to disabling ad-block programs in their browsers...(I don't have any enabled), and the last one was making changes to the DNS...(I know it means 'domain name server', but I don't have the foggiest idea how to make changes to it!
    Anyway, that's my problem.  I hope that someone out there knows what I can do to fix it!
    Thanks in advance for your help.
    K-9Pal

    I would assume an issue with the HTML5 media player.
    If those aren't working on Windows then it is possible that the proper codecs aren't installed.
    You can try to disable the HTML5 media player and make Firefox use the Flash plugin.
    You can do this by setting these two prefs to false on the <b>about:config</b> page:
    *media.windows-media-foundation.enabled
    *media.directshow.enabled
    See also:
    Windows Media Feature Pack for Windows 7 N and for Windows 7 KN:
    *http://support.microsoft.com/kb/968211 - www.microsoft.com/en-us/download/details.aspx?id=16546

  • 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 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)

  • HTTP status code returned by site-wide error handler is 200 OK?

    I'm using a developer install of ColdFusion 11. I set up the following page at http://localhost:8500/test/index.cfm:
    <cfthrow type="application" message="This is an error">
    When I visit that page, the HTTP status code returned is 500, as expected.
    I then created the following page at http://localhost:8500/error.cfm:
    <p>Sorry! That was an error.</p>
    If I set the site-wide error handler in the CF Admin to /error.cfm and visit /test/index.cfm, the HTTP status code returned is 200 OK.
    This seems weird to me. It looks like I can include the following in the error.cfm file to send an error code instead:
    <cfheader statuscode="500" statustext="Server Error">
    Does anyone see that as problematic? Is there a reason why the site-wide error handler should return 200 OK?

    Error Codes are the responsibility of the developer, to define and broadcast. Ultimately, the ColdFusion server has acted appropriately and fulfilled the request (hence the 202). Only the code would know what error was truly thrown, and how to appropriately handle that message to the user, hence the need for you to change the header in the response, if you want that broadcast to the browser in anything of than a "successful request" type of status.

  • Windows Media video file

    Does anyone know of a way to insert a windows media video file instead of the standard Quicktime video? Most of the viewers who will come to my site are Windows based and on corporate networks that will not allow them do download and install Quicktime. Thanks very much, great site.

    Use the HTML Widget feature.
    [Have a look and study the code.|http://web.mac.com/wyodor/iFrame/iFrame.html]
    [And look here.|http://discussions.apple.com/message.jspa?messageID=6158600#6158600]

  • 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

  • Template: Adding Site Wide Code To Editable Region

    I have a template
    I have an editable region called content
    I would now like to add a navigation bar within the editable region, so that it can be managed from the Template and thereon aplies to the child pages
    Q:
    How do I insert a site wide section within an editable region, which is only edited via the template, so that I can set up my navigation bar?
    woolf

    So, here's a sample page: http://www.gravenimagedesign.net/levnav/
    Here's the template 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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    #header {
         background-color: #333;
         height: 200px;
         width: 800px;
         position: relative;
         margin: 0 auto;
    #header h1 {
         color: white;
    #content {
         background-color: #FFC;
         height: 500px;
         width: 800px;
         margin: 0 auto;
         border: 1px solid red;
         position: relative;
    #content h1 {
         color: red;
         text-align: center;
    #apDiv1 {
         position:absolute;
         width:663px;
         height:115px;
         z-index:1;
         left: 63px;
         top: 438px;
         background-color: #FCF;
    -->
    </style>
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    </head>
    <body>
         <div id="header"><!--begin header-->
           <h1>This header div is position: relative;</h1>
           <div id="apDiv1">
             <ul id="MenuBar1" class="MenuBarHorizontal">
               <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
                 <ul>
                   <li><a href="#">Item 1.1</a></li>
                   <li><a href="#">Item 1.2</a></li>
                   <li><a href="#">Item 1.3</a></li>
                </ul>
              </li>
               <li><a href="#">Item 2</a></li>
               <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
                 <ul>
                   <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
                     <ul>
                       <li><a href="#">Item 3.1.1</a></li>
                       <li><a href="#">Item 3.1.2</a></li>
                    </ul>
                  </li>
                   <li><a href="#">Item 3.2</a></li>
                   <li><a href="#">Item 3.3</a></li>
                </ul>
              </li>
               <li><a href="#">Item 4</a></li>
            </ul>
             <p><br />
            This menu bar is <strong>position: absolute;</strong></p>
             <p>It is  nested in the code inside the &quot;header&quot; div (the dark grey one), which is positioned &quot;relative.&quot;</p>
          </div>
         </div><!--end header-->
         <div id="content">
           <!--begin content-->
           <!-- TemplateBeginEditable name="EditRegion3" -->
           <h1>This text (really an h1) is appearing within the div with id of "content"</h1>
           <!-- TemplateEndEditable --></div>
         <!--end content-->
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
        </script>
    </body>
    </html>
    And here's a child page:
    <!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"><!-- InstanceBegin template="/Templates/maintemplate.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- InstanceEndEditable -->
    <style type="text/css">
    <!--
    #header {
         background-color: #333;
         height: 200px;
         width: 800px;
         position: relative;
         margin: 0 auto;
    #header h1 {
         color: white;
    #content {
         background-color: #FFC;
         height: 500px;
         width: 800px;
         margin: 0 auto;
         border: 1px solid red;
         position: relative;
    #content h1 {
         color: red;
         text-align: center;
    #apDiv1 {
         position:absolute;
         width:663px;
         height:115px;
         z-index:1;
         left: 63px;
         top: 438px;
         background-color: #FCF;
    -->
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    </head>
    <body>
         <div id="header"><!--begin header-->
           <h1>This header div is position: relative;</h1>
           <div id="apDiv1">
             <ul id="MenuBar1" class="MenuBarHorizontal">
               <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
                 <ul>
                   <li><a href="#">Item 1.1</a></li>
                   <li><a href="#">Item 1.2</a></li>
                   <li><a href="#">Item 1.3</a></li>
                </ul>
              </li>
               <li><a href="#">Item 2</a></li>
               <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
                 <ul>
                   <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
                     <ul>
                       <li><a href="#">Item 3.1.1</a></li>
                       <li><a href="#">Item 3.1.2</a></li>
                    </ul>
                  </li>
                   <li><a href="#">Item 3.2</a></li>
                   <li><a href="#">Item 3.3</a></li>
                </ul>
              </li>
               <li><a href="#">Item 4</a></li>
            </ul>
             <p><br />
            This menu bar is <strong>position: absolute;</strong></p>
             <p>It is  nested in the code inside the &quot;header&quot; div (the dark grey one), which is positioned &quot;relative.&quot;</p>
          </div>
         </div><!--end header-->
         <div id="content">
           <!--begin content-->
           <!-- InstanceBeginEditable name="EditRegion3" -->
           <h1>This text (really an h1) is appearing within the div with id of &quot;content&quot;</h1>
           <!-- InstanceEndEditable --></div>
         <!--end content-->
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
        </script>
    </body>
    <!-- InstanceEnd --></html>
    I arbitrarily positioned the nav in the middle of the action. You can play with its positioning, but remember that it is positioned "absolutely" from the left and top of the "header" div. (in this case)
    If this is unclear, let me know! By the way, the CSS is in the head of the Template, and the child page, but I didn't print out the other auxiliary files, which you will get automatically if you insert a SpryMenuBar. But the sample on my site will work...
    Beth

  • ANN: Site-Wide Management in Dreamweaver Tutorial Series

    http://www.projectseven.com/products/menusystems/pmm3/tutorials/site-wide/
    Dreamweaver Templates, Library Items and Server-Side Includes allow you to manage repeating sections of your web pages in a central file. This series of tutorials listed below will help you to deploy your Pop Menu Magic 3 menu using any of these methods. They will also serve as a general foundation in understanding the most popular site-wide techniques deployable in a Dreamweaver-managed site.
    The tutorials are relevant for Dreamweaver versions MX2004 up to and including Dreamweaver Creative Cloud.
    Al Sparber - PVII
    Responsive Dreamweaver Menus | Galleries | Widgets
    Since 1998

    Unfortuantely sourcelabs.com does not give the option of testing IE11 on windows 7 so I cant be of much help here.
    One thing you might want to try is floating the <li> tags - add the below to your css stylesheet.
    li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 20%;
    David Powers is pretty good when it comes to his tutorials and they are usually thoroughly tested. As I say in a simulated windows 8.1 envrionment in IE11 the nav looks fine BUT of course its better to test in the real thing.
    EDITED: Try the below combination of css if you have no success finding a solution:
    #mainnav ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    #mainnav li {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        float: left;
        width: 20%;
         background-color: #4D4D4D;
         text-align: center;
    #mainnav a {
        display: block;
        width: 100%;
        background-color: #4D4D4D;
        color: #FFFFFF;
        text-transform: uppercase;
        padding-top: 6px;
        padding-bottom: 6px;

  • CC 2014 Media Cache Files duplication...

    Windows 8 Pro
    CC 2014
    3930k
    Titan Black
    SSD C:, raid, and storage
    As of the latest update for CC 2014, any time I open any audio file from CC with Audition it is now saving a PFK and Extracted audio file next to the original in addition to the folder I have designated for these files.. I do NOT have the box checked for "Save media cache files next to originals when possible".
    I didn't notice this problem until almost finishing a very large project with hundreds of sound effects that now have PFK files and Extracted files sitting next to them all over my effects and music folders.
    This problem is NOT happening is plain old CC... only 2014.
    I have tried pointing it to a new folder, and have also tried checking and unchecking the box.
    Anyone else have this issue? Any possible solution I have not tried?
    Thanks

    Win 7 64
    CC 2014
    3930k
    Titan Black
    All SSD
    64 gigs ram
    Exactly the same issue as Jeckle. Without having the box checked "save media cache files next to originals", every single file I've imported into 2014 has created a pkf file directly next to the original, as well as in the location I specified for the cache. This is eating my drive space pretty quick. Anyone?
    Tested with fresh project file in both CC and CC 2014 - no problems at all with CC...
    Any help appreciated...

  • DreamWeaver CS3 - How to excute a site wide change...

    I am using Dreamweaver (DW) CS3. I have updated a few pages
    which had the ending of .HTM. After the modification to the pages
    the ending of the file names were changed to .ASP. The pages work
    well in their test environment.
    OK, so the pages were known by the site with the file name
    extension of .HTM
    The file name extension is now .ASP
    How do I update very page in the site so that they no longer
    look for the old file name but the
    new name, which ends with the extension of .ASP?
    Thanks!
    Happy New Year!

    I would also suggest that you never rename your files like
    this outside of
    DW. By renaming them in DW's File panel, you allow DW to
    manage the links
    automatically.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "martcol" <[email protected]> wrote in
    message
    news:gjg0k4$nrk$[email protected]..
    > DW comes with a very sophisticated Find & Replace
    tool that would do what
    > you
    > want
    >
    >
    http://tinyurl.com/97cknp
    >
    > It also has a tool for checking broken links
    >
    >
    http://tinyurl.com/7aegnq
    >
    > I would suggest that before you make site-wide changes
    you back it up
    > somewhere.
    >

  • 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.

Maybe you are looking for