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

    .carousel .carousel-stage li div.slide-overlay {
        margin-left: 65px;
    }

}


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

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

    /* headings */

    h1 {
        font-size: 26px;
    }

    /* common classes */

    .wrap {
        padding-left: 10px;
        padding-right: 10px;
    }

    .button.large {
        font-size: 24px;
    }

    .services {
        min-height: 335px;
    }

    /* content and page stuff */

    section#content {
        padding-left: 10px;
        padding-right: 10px;
    }

    section#content .page-detail,
    section#content .page-edit {
        padding-left: 0;
    }

}


/* 980px wide */

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

    /* cms page details and stuff */

    article.page-detail div.page-content {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    .homepage .services {
        min-height: 350px;
    }

}


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

    /* common classes */

    .button.large {
        font-size: 20px;
    }

    /* header */

    header h1 a img {
        max-width: 365px;
    }

    /* navigation */

    nav a#mobile-nav-expand {
        display: block;
    }

  /* this is where the mobile stuff happens */

    header nav {
        float: none;
        width: auto;
        background: #6A737C;
        padding: 5px 0;
    }

    aside.sidebar nav {
        background: none;
    }


    nav ul#main-nav {
        margin: 0;
        clear: right;
        text-align: center;
    }

    nav ul#main-nav li {
        display: block;
        margin: 5px 0;
    }

    nav ul#main-nav li:first-child {
        text-align: center;
        width: auto;
    }

    nav ul#main-nav li:first-child a {
        color: #fff;
        background-image: none;
        text-align: center;
    }

    nav ul#main-nav li:first-child a:hover,
    nav ul#main-nav li:first-child a:focus {
        color: #AC0636;
        background-image: none;
    }

    nav ul#main-nav li a {
        display: block;
        width: 100%;
        text-align: center;
        color: #fff;
        padding: 5px 0;
    }

    nav ul#main-nav li:hover ul,
    nav ul#main-nav li:focus ul {
        display: none;
    }

    nav ul#main-nav li ul {
        position: static;
        padding-top: 0;
        margin-left: 0;
    }

    nav ul#main-nav li ul li a {
        color: #333;
        width: auto;
        padding-right: 0;
        padding-left: 0;
    }

    /* homepage */

    .homepage .services {
        min-height: 230px;
    }

    .homepage .services.fourcol {
        width: 44.5%;
        margin-bottom: 10px;
    }

    .homepage .services.relationships {
        margin-left: 0;
        margin-top: 10px;
    }

    .homepage .services.assets {
        margin-top: 10px;
    }

    /* footer */

     footer .twocol.contact h1 {
        font-size: 18px;
     }

     footer .twocol.contact .twocol {
        float: none;
        width: auto;
     }

}


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

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



}


/* 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 a img {
        max-width: 245px;
    }

    nav {
        width: 52.5%;
    }

    nav ul#main-nav {
        margin: 10px 0 0 0;
    }

    /* page structure and content */

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

    .page-detail, .page-edit, aside.sidebar {
        padding: 20px 0;
    }

    aside .services {
        min-height: 0;
        padding: 15px;
    }

    /* homepage */

    article.homepage div.twocol.first {
        display: none;
    }

    article.homepage div.twocol {
        text-align: center;
    }

    article.homepage div.twocol h1 {
        margin-top: 10px;
    }

    article.homepage .fourcol.services {
        float: none;
        width: auto;
        min-height: 0;
        margin-left: 0;
        padding: 15px;
    }


    .homepage .services.relationships {
        margin-left: 0;
        margin-top: 20px;
    }

    .homepage .services.assets {
        margin-top: 20px;
    }

    /* footer ... */

    footer .twocol.first {
        margin-right: 0;
        margin-bottom: 20px;
    }

}


/* 570px. The iPhone 5 is 568px wide in landscape, so we may as well kick
 * in the phone styles at this width rather than 480, which is the width
 * older iPhones and a lot of android phones are */

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

    /* make the header and logo full width */

    section#header {
        border-top: 0;
    }

    header.wrap {
        padding: 0 !important;
    }

    header h1 {
        width: auto;
        float: none;
        margin: 0;
        padding: 10px 0;
    }

    header h1 a {
        display: block;
        max-width: 100%;
    }

    header h1 a img {
        margin: 0 auto;
        max-width: 365px;
    }



}


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



}


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



}


/* Up to 320px. iPhones of all flavour in portrait. Probably older Android
 * devices, but this has yet to be verified */

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

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


}