/***********************************************************************
 * 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) {

    .locations {
        top: 15px;
        max-height: 700px;
        overflow: scroll;
    }

}


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

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

    .locations {
        max-height: 100%;
        overflow: hidden;
    }

    article img {
        width: 100%;
        height: auto;
    }

}


/* 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) {

    .locations {
        width: -webkit-calc(100% - 80px);
        width: -moz-calc(100% - 80px);
        width: calc(100% - 80px);

        margin-left: -380px;
    }

}


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

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

    .locations {
        margin-left: -365px;
    }

}


/* Up to 640px wide in landscape, 570px in portrait to match iPhone 5 */

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

    .locations {
        max-height: 290px;
        overflow: scroll;
        margin-left: -300px;
    }

    .locations ul,
    .service-areas ul {
        width: 49%;
    }

}


/* 570px. The iPhone 5 in landscape. */

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

    header .wrap h1 {
        text-align: center;
        float: none;
    }

    .locations {
        max-height: 250px;
        margin-left: -220px;
    }

    section#content article {
        float: none;
        width: auto;
        margin: 0;
    }

    section#content aside {
        float: none;
        position: static;
        width: auto;
        margin-top: 50px;
    }

    aside img {
        display: block;
        width: auto;
        height: auto;
        margin: 0 auto;
    }

    nav#main-nav ul {
        text-align:center;
    }

    nav#main-nav ul li {
        float: none;
        display: inline-block;
        zoom: 1;
        *display: inline;
    }

}


/* Up to 480px, iPhones > gen. 5 in landscape */

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



}


/* Up to 360px. Large mobiles, like the Galaxy S4 will match this.
 * Queries for 320 can go here, too. */

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

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

    .locations {
        max-height: 570px;
        margin-left: -160px;
    }

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

}


/* 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;
    }

    .locations {
        max-height: 410px;
        margin-left: -140px;
    }

}