/***********************************************************************
 * 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
 * http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
 * http://members.ping.de/~sven/dpi.html
 *
 * Here's a handy quick list of physical screen resolutions and the
 * pixel ratio (dppx) for the some common devices, along with their
 * logical resolution. This illustrates some of the boundaries we must
 * work within when making sites 'responsive'.
 *
 * Samsung Galaxy S: 480x800 @ 1 = 480x800
 * Samsung Galaxy S4: 1080x1920 @ 3 = 360x640
 * Samsung Galaxy 10.1: 800x1280 @ 1 = 800x1280
 * Samsung Galaxy Note: 800x1280 @ 2 = 400x640
 * Samsung Galaxy Note II: 720x1280 @ 2 = 360x640
 * Samsung Galaxy Nexus: 720x1280 @ 2 = 360x640
 * Google Nexus 4: 768x1280 @ 2 = 384x640
 * Google Nexus 7: 800x1280 @ 1.325 = 603x966
 * Google Nexus 10: 1600x2560 @ 2 = 800x1280
 * Apple iPhone 4, 4S: 640x960 @ 2 = 320x480
 * Apple iPhone 5: 640x1136 @ 2 = 320x568
 * Apple iPad 1, 2: 768x1024 @ 1 = 768x1024
 * Apple iPad 3, 4: 1536x2048 @ 2 = 768x1024
 * Bedove HY5001 (MTK6589 Device): 720x1280 @ 2: 360x640
 **********************************************************************/


/***********************************************************************
 * Seeing as a lot of devices have displays that have a
 * pixel density greater than one, we should swap out logos and nav
 * elements for higher res versions. This query targets those devices
 * accordingly and swaps out background images for high res ones
 * Very few devices have a pixel ratio great than 3, but this will need
 * to be taken into consideration at some point.
 * ********************************************************************/

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 2dppx) {



}


/* Up to 1280px, high res tablets (Nexus 10), some desktops/laptops */

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



}


/* Up to 1024px, landscape iPads, old computers */

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



}


/* 980px */

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

     /* carousel... */

    section#intro div.carousel img.slide-overlay {
        height: 100%;
        width: auto;
    }

    /* aside */

    aside .action img {
        width: 100%;
        height: auto;
    }


    /* header */

    header h1 {
        float: none;
        width: auto;
        margin-bottom: 10px;
    }

    header h1 img {
        width: auto;
        height: auto;
        margin: 0 auto;
    }

    header h2 {
        float: none;
        width: auto;
        text-align: center;
        padding-top: 10px;
    }


    /* navigation */

    nav#main-nav {
        margin-top: 10px;
        float: none;
        width: 100%;
    }

    nav#main-nav a.mobile-nav-expand {
        display: block;
        text-align: center;
    }

    nav#main-nav ul li {
        float: none;
        width: auto;
        text-align: center;
        margin: 20px 0;
    }

    nav#main-nav ul li a {
        font-size: 14px;
    }
}


/* 800px wide, includes the Nexus 10 in portrait and maybe some other large
 * tablets. These queries should be fluid so that only minor adjustments
 * are needed at 768px. */

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

    /* header */

    header h1 {
        width: 23%;
        margin-top: 50px;
    }

    header h1 img {
        width: 100%;
        height: auto;
    }



    /* twcocols on the homepage */

    .homepage .twocol img {
        float: none;
        margin-bottom: 10px;
    }

    .homepage .twocol h1,
    .homepage .twocol p {
        padding-left: 0;
    }

    /* page structure */

    .page-detail article {
        padding-left: 4.6%;
        width: 60.69%;
    }

    .page-detail article,
    .page-detail aside {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    /* asides... */

    aside h2 {
        font-size: 18px;
    }

}


/* 768px wide, all iPads in portrait, including the iPad mini! */

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

    footer p.contact span {
        display: block;
    }

}


/* Up to 640px wide in landscape, 570px in portrait.
/* For landscape phones and to exclude devices with a dppx that is > 1.
 * The Nexus 7, for example, has a logical 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.
 * Some weird quirks can arise from this query - when the keyboard is
 * opened on a tablet/phone, the viewport of the browser undergoes a
 * change in logical resolution. This *can* screw up some layouts when
 * forms are being filled out. Keep an eye on this one... */

@media only screen and (max-width: 640px) and (orientation: landscape),
       only screen and (max-width: 570px) and (orientation: portrait) {

    /* header */

    header h1 {
        margin-top: 10px;
        width: 140px;
    }



}


/* 570px. The iPhone 5 is 568px wide in landscape, so we may as well kick
 * in the mobile styles at this width rather than 480, which is the width
 * od older iPhones and a variety of Android devices */

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

     /* the aside on cms page details... */

    .page-detail aside,
    .page-detail article {
        float: none;
        width: auto;
    }

    .page-detail aside {
        padding: 0 4%;
    }

    .page-detail aside .action {
        display: none;
    }

    .page-detail aside a.download-catalogue:hover,
    .page-detail aside a.download-catalogue:focus {
        margin-left: 0;
    }

    /* footer stuff */

    footer nav#footer-nav,
    footer div {
        float: none;
        width: auto;
    }

}


/* Up to 480px, this will match some phablety devices in portrait, but it
 * mainly applies to iPhones (except 5th gen) in landscape. High res
 * Androids will match this in portrait. Most styles here are here for
 * the portrait view so effectively, the landscape view and portrait view
 * will be the same on iPhones. Shift these queries down to 360px to make
 * them only applicable to portrait views. */

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





    /* homagepage carousel */

    div.carousel-navigation {
        display: none;
    }

    /* footer */

    footer {
        margin: 0;
    }

}


/* Up to 360px. Not many phones match this, but the Galaxy S4 does, as
 * will some 'phablety' devices (Galaxy Note) and my strange Chinese
 * MediaTek device */

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

    /* layout, homepage columns... */

    .homepage .twocol {
        float: none;
        width: auto;
        margin-bottom: 20px;
        padding: 2%;
    }

    /* blog */

    #content ul.latest-entries li a img {
        float: none;
        margin-bottom: 20px;
    }

}


/* Up to 320px. iPhones of all flavour in portrait (even 5th gen).
 * A variety of Android devices, too. */

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

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



}