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



}


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


    /* structure */

    div#outer-wrap {
        width: auto;
        padding-left: 0;
        background: none;
    }

    div#inner-wrap {
        background: none;
    }

    div#page {
        background: rgba(255,255,255,0.65);
        padding: 20px;
    }


    /* header */

    div#header {
        text-align: center;
    }

    div#header #logo {
        margin: 25px auto;
    }

    div#header #create {
        margin: 10px auto;
    }


    /* navigation */

    div#inner-wrap nav#main-nav a.mobile-nav-expand {
        display: block;
    }

    nav#main-nav {
        margin: 25px 0;
    }

    ul#navigation {
        width: 100%;
        height: auto;
        position: static;
        margin: 0 0 20px 0;
    }

    ul#navigation li {
        text-align: center;
        border-bottom: none;
    }


    /* image overlay */

    #overlay {
        display: none !important;
    }


    /* page stuff */

    div#page .text-column-wide {
        margin-left: 35%;
        width: auto;
    }


    /* footer */

    div#footer {
        display: none;
    }

}


/* 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 to match iPhone 5 */

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

    /* unfloating things... */

    div#page .text-column,
    div#page .text-column-narrow {
        clear: both;
        margin-left: 0;
        width: auto;
    }

    a#living-channel {
        position: static !important;
        display: inline-block !important;
    }

    div#page .text-row {
        float: none;
        width: auto;
        margin-left: 0;
    }

    div#page .text-column-wide {
        margin-left: 0;
    }

    /* showcase */

    .showcase-table td img {
        width: 90%;
    }

    /* footer */

    div#subfooter ul {
        padding-left: 0;
    }

    /* slideshow/gallery */

    div#gallery,
    div#gallery-home {
        float: none;
        margin-left: 0;
        width: auto;
        background: none;
    }

    div#slideshow,
    div#slideshow-home {
        background: none;
        float: none;
        width: auto;
        margin-right: 0;
        height: 345px;
    }

    div#gallery div#slideshow {
        height: 300px;
    }

    div#slideshow img,
    div#slideshow a,
    div#slideshow-home img,
    div#slideshow-home a {
        margin: 0;
        width: 100%;
        height: auto;
    }

    div#gallery div#thumbs {
        height: auto;
    }

    div#gallery ul.thumbs {
        padding-left: 15px;
    }

    div#gallery div.pagination {
        display: none;
    }

    /* google map on contact page */

    div#gallery-home.contact div#slideshow-home {
        height: auto;
    }

    div#slideshow-home iframe {
        margin-left: 0;
        width: 100%;
    }

}


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

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

    /* showcase */

    td.cat-table img {
        width: 85%;
    }

    div#slideshow-home {
        height: 315px;
    }

}


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

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

    .page-img {
        width: 95%;
    }

    div#slideshow-home {
        height: 255px;
    }

    div#gallery div#slideshow {
        height: 240px;
    }

    div#gallery div#slideshow img {
        width: 90%;
    }

}


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

    div#header {
        padding: 0 20px;
    }

    div#header img {
        width: 100%;
        height: auto;
    }

    td.cat-table,
    table.showcase-table td {
        display: block;
    }

    td.cat-table img,
    table.showcase-table td img {
        width: auto;
    }

    div#slideshow-home {
        height: 185px;
    }

    div#gallery div#slideshow {
        height: 175px;
    }

}


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

    div#slideshow-home {
        height: 160px;
    }

    div#gallery div#slideshow {
        height: 165px;
    }

    div#gallery div#slideshow img {
        width: 90%;
    }

}