@charset "UTF-8":active
/*CSS Document*/
@media screen and (max-width: 1060px){
    /* switch from static 960px container to a fluid 90% container at smaller display sizes */
    .container {
        width: 90%;
    }
    /* half containers (2-columns) don't work on small displays, change to 80% container centered on display */
    .half_container {
        width: 80%;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    /* adjust button left and right padding so buttons don't wrap to 2nd row on smaller displays */
    ul#menu li a.button{
        padding: 20px 75px;
    }
    /* force embedded youtube video to shrink width with display size */
    /* can't do anything about height */
    iframe{
        width: 100%;
    }
    /* shrink splash area for smaller displays */
    #splash {
        height: 748px;
        background-size: 1060px;
    }
    /* keep the title from being pushed down off the display */
    #title-page {
        margin-top: 360px;
    }
    /* always use default font sizes for mobile devices */ 
    /* this cancels the 14 px font in style.css */
    p{
        font-size: 1em;
    }
}
@media screen and (max-width: 967px){
    .container {
        width: 90%;
    }
    .half_container {
        width: 80%;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    ul#menu li a.button{
        padding: 20px 20px;
    }
    img {
        width: 100%;
        height: auto;
    }
    #credits img{
        width: 100px;
    }
    #splash {
        height: 500px;
        width: 100%
        background-size: 767px;
    }
    #title-page h1{
        margin-top: 310px;
        margin-bottom: 0px;
    }
}
@media screen and (max-width: 460px) {
     .container {
        width: 90%;
    }
    .half_container {
        width: 80%;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    ul#menu li a.button{
        font-size: .8em;
        padding: 0px 8px;
    }
    img {
        width: 100%;
        height: auto;
    }
    #splash {
        height: 500px;
    }
    #title-page h1 {
        margin-top: 260px;
    }
     #credits img{
        width: 50px;
    }
}