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


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

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



}


/* Up to 800px, google Nexus portrait */

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

    section#header header {
        width: 96%;
        margin-right: 4%;
    }

    .button {
        padding: 10px;
        font-size: 13px;
    }

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

    div.homepage-banner h1,
    div.homepage-banner h2 {
        font-size: 18px;
    }

    section#content {
        padding: 2%;
        width: 96%;
    }

    aside#sub-navigation {
        width: 90%;
        clear: left;
        margin: 0px 5%;
    }
}

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

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

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

}


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

        header#header hgroup {
            height: auto;
        }

        header#header h1,
        header#header h2 {
            text-align: center;
        }

        header#header h3 {
            display: none;
        }

        header#header hgroup,
        nav,
        section#content {
            padding: 5%;
        }

        /* the homepage banner */

        div.homepage-banner {
            padding: 20px;
            border-radius: 0;
            background: none;
            height: auto;
            position: static;
        }

        div.homepage-banner h1,
        div.homepage-banner h2 {
            -webkit-text-shadow: 0px 0px 0px rgba(0,0,0,0.8);
            -moz-text-shadow: 0px 0px 0px rgba(0,0,0,0.8);
            -ms-text-shadow: 0px 0px 0px rgba(0,0,0,0.8);
            text-shadow: 0px 0px 0px rgba(0,0,0,0.8);
            color: #000;
        }


        div.homepage-banner a.button {
            box-shadow: 0 0 0px rgba(0,0,0,0.6);

            -webkit-transition: -webkit-transform 0.3s ease;
            -moz-transition: -moz-transform: 0.3s ease;
            -ms-transition: -ms-transform 0.3s ease;
            transition: transform 0.3s ease;
        }


        /* position at the base of the banner */

        div.homepage-banner .twocol,
        div.twocol {
            position: static;
            float: left;
            width: 100%;
        }

        div.twocol + .twocol {
            margin-left: 0;
        }
        /* the second column is right aligned... */

        div.homepage-banner .twocol:first-child + .twocol {
            clear: left;
            margin-left: 0px;
            width: 100%;
        }

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

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

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

        aside#sidebar {
            float: none;
            width: auto;
            margin: 10px 0px;
        }

    div.threecol {
        width: 100%;
        float: left;
        margin-right: 0%;
    }

    article.profile img {
        float: left;
        width: 30%;
        margin-left: 0px;
    }

    article.profile div {
        float: left;
        width: 65%;
        margin-left: 0px;
    }

    article.profile div h1 {
        margin-top: 0px;
    }

}


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

    header hgroup h1 {
        text-align: center;
        width: 100%;
    }

    header hgroup h2 {
        text-align: center;
        width: 100%;
        margin: 10px 0px;
    }

    article.profile img {
        float: left;
        width: 100%;
        margin-left: 0px;
    }

    article.profile div {
        float: left;
        width: 100%;
        margin-left: 0px;
    }

}


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

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



}


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

    header#header h1 {
        margin-top: 10px;
    }

    header#header h2 {

    }

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

    form fieldset {
        padding: 35px 20px;
    }

}