/***********************************************************************
 * Media queries for responsive design. Useful links for finding device
 * resolutions, effective viewport dimensions and media features:
 *
 * http://bjango.com/articles/min-device-pixel-ratio/
 * http://responsejs.com/labs/dimensions/
 * https://developer.mozilla.org/en/docs/CSS/Media_queries
 **********************************************************************/


@media only screen and (max-width: 1150px) {



}


/* Up to 1024px, landscape tablets, older computers, iPad 4(?) and Nexus 7 */

@media only screen and (max-width: 1024px) {



}


@media only screen and (max-width: 985px) {



}



@media only screen and (max-width: 805px) {


    /* the gallery on the blog */

    section#content article.blog-article div.gallery .gallery-stage {
        height: 165px;
    }

    .twocol,
    .twocol.home {
        float: none;
        width: 100%;
        margin-right: 0%;
    }
}





/* Up to 768px, portrait tablets, iPad 4(?), Nexus 7 */

@media only screen and (max-width: 768px) {


    header {
        min-height: 122px;
    }

    header#header h1#logo {
        width: 90px;
        height: auto;
    }

    header#header nav {
        width: calc(100% - 112px);
        margin: 59px 0 0 0px;

    }

    nav ul#main-nav li a,
    nav ul#main-nav ul li a {
        background: none;
    }

    nav ul#main-nav li a.selected {
        background: #DBDBDB;
    }

    nav ul#main-nav li a:hover,
    nav ul#main-nav li a:focus {
        background: #333333;
    }

    nav ul#main-nav li a.selected:hover,
    nav ul#main-nav li a.selected:focus {
        background: #DBDBDB;
        opacity: 0.8;
    }


    div.diagram-explanations div.explanation {
        width: 32.5%;
    }

    section#diagram div.diagram-explanations div#ventilation-explanation {
        top: 32.5%;
        left: 56.5%;
    }

    section.icons-page {
        margin: 0;
    }

    section.icons-page a.icon-print {
        display: none;
    }

}


/* For landscape phones and to exclude devices with a pixel ratio that's > 1.
 * The Nexus 7, for example, has an effective hz resolution of 600px in
 * portrait. This query chains the landscape and portrait layouts.
 * However, the portrait layout can be overridden by the query below. */

@media only screen and (max-width: 640px) {

    div.body-content.blog article.blog-article {
        float: none;
        width: auto;
    }

    section#diagram div.diagram-explanations div.explanation {
        width: 50.5%;
    }

    header#header h1#logo {
        margin: 20px auto;
        float: none;
    }

    header#header nav {
        margin: 18px 2.5%;
        float: none;
        width: 95%;
        border-radius: none;
        overflow: hidden;
    }

    header nav ul#main-nav li {
        display: block;
    }

    nav ul#main-nav li a,
    nav ul#main-nav li a.selected,
    nav ul#main-nav ul li a {
        font-size: 12px;
    }
}


/* Intermediate query to smooth out things */

@media only screen and (max-width: 580px) {


    div.carousel {
        max-width: 100%;
    }

}


/* Up to 480px, usually a portrait phone but also applies to older phones
 * in landscape. Overrides the portrait styles established by the query
 * above. */

@media only screen and (max-width: 480px) {



    /* hide everything in the diagram */

    ul.diagram-links,
    div.diagram-overlays,
    div.diagram-explanations {
        display: none;
    }

}


/* Up to 360px, intermediate query for fiddly bits. */

@media only screen and (max-width: 360px) {

    div.gallery div.gallery-stage {
        height: 270px;
    }

}


/* Up to 320px. Most phones have an effective horizontal portrait
 * resolution of 320px. */

@media only screen and (max-width: 320px) {

    /* disable webkit text size adjust (for iPhone) */
    html {
        -webkit-text-size-adjust: none;
    }

    form fieldset {
        padding: 35px 20px;
    }

}