Responsive Design media query question

Hello all, please forgive the elementary question. If I have the following css, are both of the images loaded on the smaller device or only the background image for the appropriate media query?
@media only screen and (min-width: 960px) {
    bk-head {
     background-image: background-image: url(../images/BIGGER-IMAGE.png);
@media only screen and (min-width: 768px) and (max-width: 959px) {
    bk-head {
     background-image: background-image: url(../images/SMALLER-IMAGE.png);

They're all loaded.  The ones that get displayed depend on the user's viewport width.
See this related discussion.
http://forums.adobe.com/message/4418887#4418887
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/

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.

  • DW CC - Fluid grid & media query questions

    Hi.
    I'm delving into the fluid grid section in DW CC as I'd like to target most screen sizes. Just a couple of questions:
    1) Is it possible to create a template (designed for mobile, tablet, desktop) and reuse it for other projects?  If so, are there any tuts out there that provides guidance?
    2) Important - Whilst I'm creating the layouts in fluid grid & using mobile queries, I'm having a hard time targeting the css for a particular screen size.
    For example, In both mobile & tablet I'll float an image to the left, but float right in desktop. So under @Media I'll select desktop (min-width: 769px) and then float right said img. But when I check the other screen sizes, the float right has been used globally. I usually have to manually input the css myself to make it work. Am I missing something?
    Thanks.

    Frustrated: Nancy O. said: "Sure.  After you're done creating the basic layout and everything works as it should, go to File >  SaveAs Template.dwt. Thoroughly read the F1 Help articles on DW Templates.  They can be a bit tricky for first-time users. " 
    Fine. I've been using templates for over ten years through all the iterations andincarnations of DW since before MX. Now with CC and FGlayout, after I get everything working and I "SaveAs Template, all the editablility of the template goes away and even the Template Editable regions do not work. What am I doing wrong?
    Also I tried creating the FGlayout in a blank template, which logically should work, but the same things happen.  It's almost as if it were engineered that way on purpose.  LOL What gives?
    thanksInAdvance

  • Slideshows in responsive design

    Making responsiv designs in Dreamweaver has become easy but if you want to make a webpage with a full page slideshow optimized for ordinary screens and high resolution screens (Retina) you must have images of a rather large size. So if you have images that fit eg. the new 30" Apple Retina display an Iphone must download the same images and downsize them to fit the phone display. What I'm concerned of is the pageload time. I know that Muse automatically downsize images in the different layouts but Muse doesn't do true responsive design.  My question is then - is it possible to have the same slideshow pointing to different folders with images of more appropriate sizes?
    Or is the solution that you make 2 or 3 slideshows on the same page and then in CSS hide (display: none) the slideshow that is not needed? But if an element is hidden, isn't it loaded anyway?
    Or are there other solutions?
    Best regards Jørgen

    Never tried this myself but I guess appending the images using jQuery based on screen width might work: If screen width is more that 500px the appropriate 'desktop' img is appended to its <li></li> container, else a smaller image is appended to it.
    Might be a good reason this won't work just thinking off the top of my head. (I don't know if all the images are download when the document is ready or just those that conform to the screen width.) Someone will have a view.
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta ="charset=UTF-8">
    <title>Untitled Document</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    $(document).ready(function() {
    if ($(window).width() > 500) {
    $(".slide_1").append("<img src='desktopImages/slideshow_1.jpg' />");
    $(".slide_2").append("<img src='desktopImages/slideshow_1.jpg' />");
    $(".slide_3").append("<img src='desktopImages/slideshow_1.jpg' />");
    $(".slide_4").append("<img src='desktopImages/slideshow_1.jpg' />");
    $(".slide_5").append("<img src='desktopImages/slideshow_1.jpg' />");
    $(".slide_6").append("<img src='desktopImages/slideshow_1.jpg' />");
    else {
    $(".slide_1").append("<img src='mobileImages/slideshow_1.jpg' />");
    $(".slide_2").append("<img src='mobileImages/slideshow_1.jpg' />");
    $(".slide_3").append("<img src='mobileImages/slideshow_1.jpg' />");
    $(".slide_4").append("<img src='mobileImages/slideshow_1.jpg' />");
    $(".slide_5").append("<img src='mobileImages/slideshow_1.jpg' />");
    $(".slide_6").append("<img src='mobileImages/slideshow_1.jpg' />");
    </script>
    <style>
    ul {
        margin: 0;
        padding: 0;
    li {
    margin: 0;
    padding: 0;
    list-style: none;
    </style>
    </head>
    <body>
    <div id="slideshow">
    <ul>
    <li class="slide_1"></li>
    <li class="slide_2"></li>
    <li class="slide_3"></li>
    <li class="slide_4"></li>
    <li class="slide_5"></li>
    <li class="slide_6"></li>
    </ul>
    </div>
    <!-- end slideshow -->
    </body>
    </html>

  • Responsive Design and @media queries

    I thought my HTML/CSS guns were loaded and good to go; and then I started reading about responsive web design!
    If I have a rule declared in the main body of my CSS and add a media query what happens to the existing rule?
    It looks to me with my experimenting so far that if I take a style in the main section and duplicate that with some edits for a smaller width, I have to then remove it from the original and replicate it in another @media query.  Is that correct? 
    So if I have this:
    header {
        background: url("images/headerhand.png") no-repeat scroll left top transparent;
        height: 300px;
        margin: 40px auto 0;
        min-height: 300px;
        text-align: left;
        width: 100%;
    I need to put this in a @media query for the below break point:
    header {
        background: none;
        height: 300px;
        margin: 40px auto 0;
        min-height: 300px;
        text-align: left;
        width: 100%;
    I then take the rule out of the main section of my style sheet and put that in another media query for the above break point.
    So if I have a header element with background image and color, and border-radius and whatever but only want to lose the background image at a certain break point, I then need two @media queries one for below the break point and one for above and then remove the whole rule from the main section of the site?
    Oh my, that was so complicated, I am not sure I even understand my own question!
    Martin
    PS "Mobile First" is starting to make a lot of sense!

    osgood_ wrote:
    pziecina wrote:
    Hi Os
    As an example, (using Jennys Chocolate Cookies) would it not make more sense to design a mobile only web site, complete with geolocation that shows the nearest outlet selling the cookies?
    So you are saying forget the desktop monster (assign that to the bin) and convince the client mobile is the way to go? Even if that is the case it still seems that you're going to need two or three different design set ups to satifsy the majority of devices, which means more expense, right? Plus from what I've seen the information all crushed into a 400px wide screen looks a bit shite, no?
    Reply -
    No I am saying that one should offer the type of site/service that best suits the clients needs, be this a desktop, responsive or mobile only web site, or even telling the client that an advert in yellow pages would be better.
    pziecina wrote:
    The same may also apply to a restaurants web page, after all it is often the directions to the restaurant, and its proximity to oneself that are important when one is looking for somewhere to go out for a meal, is it not?
    Can't see what location or direction has to do with anything or proximity to oneself. I look in yellow pages if I need a restaurant or I identify it on the computer before I go out........but then again I'm old so maybe younger people do all this whilst they are out. So we come down to demographics - cut out whatever section of society at your own peril. I guess a nightclub would be a better example, can't see many 50 plus year olds wanting to know where one of those are on the move.
    Reply -
    So you are out and about, or driving home and suddenly decide that you would like to go for an Indonesian meal, do you now get the yellow pages out?
    BTW - I am over 60.
    pziecina wrote:
    As for testing on mobile devices, a good testing set-up now costs less than £400, ($600) and most items one will already own.
    They are -
    1  A smartphone, (most people have one now and a good budget smartphone can be purchased for under £70.00)
    2. A tablet device, (An budget android device now cost about £120.00, and can also be used as an e-reader)
    3. A iPod-Touch (If it works on this it will also work exactly the same on the iPhone)
    Well I guess you have to factor in the cost of getting connected to the net on these mobile devices to check everything. I dunno if anyone in the UK offers a reasonable monthly package whereby you can be connected to all these devices 24/7 and not rack up any additional charge per minute.
    Reply -
    Use Shadow and your home wifi network, extra cost nothing.
    PZ

  • CSS Designer keeps switching from the media query I want to edit to Global

    CSS Designer keeps switching from the media query I want to edit to Global. How can I keep it in the same editing mode so that I'm not all of a sudden making global changes instead of confined to the particular media query?

    I feel your pain.  I see that using styles apply to the entire paragraph.
    So I have a kluge until some really bright minds step in.
    Open the Pages document that you need to edit.
    Have in memory a single word that is in (red) in your desired font style.
    Just type a word in (red), make your font color adjustments. Copy the (red) word into memory. Delete from the document.  I put this in parantheses.
    Paste the (red) word where you want to make an edit
    Sample
    I have to edit papers that require me to type red words into each sentence, sometimes several times per sentence.
    Every time I write a word in red, the next time I click into the sentence (or anywhere else on the document), the color defaults back to black.
    So let's say you want three edits.  I am showing all three, but you'd just do it as you encounter things that need correcting.
    Sample
    I have to edit papers that require me to type red words into each sentence, sometimes several times per sentence (red).
    Every time I write (red) a word in red, the next time I click (red) into the sentence (or anywhere else on the document), the color defaults (red)back to black.
    Type directly into the (red) or double click on red and make your edit(s) one at a time.
    Result
    Sample
    I have to edit papers that require me to type red words into each sentence (only those that needs correcting), sometimes several times per sentence (that sounds painful).
    Every time I write (you mean type, not write) a word in red, the next time I click (with the mouse) into the sentence (or anywhere else on the document), the color defaults (reverts) back to black.

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

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

  • Responsive Design with Animate and Reflow

    So here is an interesting question... If anyone knows how to do this I will be forever grateful
    I am trying to make a responsive single web page... I know I could do it all in animate but we want the text to be HTML and a few other things... So I made a reflow project with all the text where we want and where we want for the resized... I made just an empty box with the dimensions we want to have for the animation part... All works... Ok cool...
    So now the hard part... I made two different animate projects... One has the dimensions for full screen and the other has the dimensions for mobile.... Now to add them into the responsive page I made from reflow...
    I replaced the div (box part from reflow) with this
    <div id="Stage" class="Cat-Site-Full">
    <div id="Stage" class="Cat-Site-Tablet">
    And added the correct header code for both stages...
    I then went into the css from reflow and changed the .box to be .Cat-Site-Full  and then bellow the media query i changed that .box to be the .Cat-Site-Tablet
    I thought this would work but it does not I also tried adding .Cat-Site-Tablet {display: none;} for the main size page and then did the opposite for the media query mobile page size... But no luck...
    If anyone knows how to show different edge animate stages for different media query sizes that would be amazing!!!!
    Thank you so much!!!

    That’s definitely a request we hear often. Unfortunately we can’t comment on what features are coming to Adobe Muse, but please know the team is listening!
    Please feel free to add your vote here :
    Ability to create mobile (responsive) web sites
    Thanks,
    Sanjit

  • Mobile media query adjustments effecting desktop - Fluid Grid Layouts

    Why do css changes in mobile media queries cascade through to the desktop view, and where is the freakin manual for all this stuff?  I still can't get my head around why anyone would want this. Mobile is the least of my concern, as it's less than 12% of my traffic. Desktop first! Any help?

    First off. Watch your mouth Ben. We are  Adobe customers. This is s Dreamweaver forum, correct? Where's the desktop first method in Dreamweaver?
    So you're saying how can design be more important that the user experience???  BECAUSE IT STARTS WITH DESIGN.
    I have spent countless hours working directly with Adobe and many others in an effort to help answer some of these FGL Dreamweaver questions,a and maybe help create some useful workarounds.  Nancy has helped me with several things successfully in the distant and recent past and I do appreciate her efforts. I think I said that.
    Did you just want pick out one tiny insignificant thing and use the forum to come beat me up?
    Second, where were you when this question was asked previously? (and not only by me)  Now all of the sudden, you chime in with more redundant information.
    Third, this topic is widely discussed everywhere and is often frequent frustration by many skilled designers and developers. Why are we doing this?
    Fourth, if a clients mobile traffic is less than 15-20%, mobile is not my focus, but responsive is.  And Dreamweaver is our tool.
    With that said, I don't prefer that mobile media queries override my desktop media queries. But I do respect the mobile user experience.
    We survey all of our customers. So far,  about half of them have said that they prefer the desktop site on their mobile devices, and hate most mobile sites,  and get angry when there's not option to view the desktop site. We are currently working on a switch for this. So there goes 50% of those "user experiences"  Another large percentage doesn't care. And a select few do. But I think it depends on the site. If it's your bank, you want mobile. If it's a wedding planner, a desktop will win out. These are real numbers. Not some Hype.
    Im not understanding how mobile media queries overriding  desktop is useful when using Dreamweaver/html5boilerplate for a simple responsive design. (unless there's something am missing)  We have used the program for over 10 years now, and will continue to use all Adobe's products and realize it's work in progress.
    Would you please post some of your web work. Maybe I can learn the answers from you. Or a portfolio.
    OR maybe you can answer a question specifically. display:block  is overriding desktop display:anything.

  • How to add multiple presets to responsive design view without having to resize the screen each time

    I want to be able to add multiple screen size presets to the responsive design view capability but don't want to have to resize the screen and add each one individually via the custom preset function.
    Have seen that some posts on the internet (http://g-liu.com/blog/2013/08/firefox-rdm-presets/) that say this can be done but cannot find where the config is held in ver 26.0?

    You can also do the opposite and create custom settings in the responsive design mode window.
    You can hold down the Shift key and drag the borders via the (right border, bottom border, bottom right corner) resize icons to get specific dimensions and give the current custom setting a name to add them as a preset.
    This will add the preset to the devtools.responsiveUI.presets pref.
    See also my post here for a bookmarklet.
    *[[/questions/957590]]
    You can paste the current value of the pref in the prompt to see a list of currently defined presets.<br />
    You can add a new preset by entering the width,height,name values in the prompt.<br />
    Copy the new preset list to the pref.
    <pre><nowiki>javascript:(function(){
    function rdObj(w,h,n){with(this){key=w+"x"+h;if(n)name=n;width=w;height=h;}}
    rdObj.prototype={key:"",name:"",width:"",height:""};
    var n={},p='<width>x<height> <name> OR width,height,name',rd=[];
    while(p!=null){
    p=prompt(p,JSON.stringify(rd));
    if(/^(\d{3,4})[,x](\d{3,4})([, ](.+))?$/.test(p)){
    n=new rdObj(RegExp.$1,RegExp.$2,RegExp.$4);rd.push(n);
    }else{try{rd=JSON.parse(p);}catch(e){}}
    }})()</nowiki></pre>

  • Chain of Responsibility Design Pattern

    Is there any java api which helps in implementing Chain of Responsibility Design pattern by parsing a XML file?. Can I use XML file to do this in Apache Commons Chain API?

    A quick look at the javadocs for that project suggest that, yes, indeed they do provide a way to specify a chain of command using XML.
    In fact I'm kind of confused why you even asked this question, since you already seem to know the answer.
    I've never heard of such a thing in the standard API, if that's what you're asking, probably because it's a simple pattern to implement, and most of the pain of any implementation is likely to be due to details specific to the problem domain, not the pattern.
    If you're really eager to use XML, you might want to check out Spring. You could configure a bunch of beans in a chain, if you like.

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

  • Cannot Import PowerPoint into Responsive Design Template

    Hi,
    I have a PowerPoint which needs to be converted to a Responsive Design Project. I notice that when I create a new Responsive design project, the Import PowerPoint is greyed out.
    Is this normal?
    Also if I create a basic Captivate Project, is it possible to convert it to a responsive project if a client decides they require this, without a complete rebuild?
    thanks

    It is not possible to import Powerpoint slides in a responsive project at all, seems logical to me but will not bother you with an explanation. The technique, programming is so different. The provided themes are responsive, PPT is not.
    Same negative answer for your second question, for the same reason. You can use the assets from PPT, but will have to create your own responsive project.
    Lilybiri

Maybe you are looking for