/******** smaller than 1200 ***********/
@media screen and (max-width: 1200px) {
    body{
        width:100%;
    }
}

/************************************************************************************
smaller than 580
#left and #right are reversed from here on
*************************************************************************************/
@media screen and (max-width: 540px) {  
    #right {
        left: 4px;
    }
    #left {
        width: 1%;
        margin: 0;
        visibility: hidden;
    }
    #title-box {
        font-size: 1.0em;
    }
    #title-header {
        float: left;
        width:60%;
    }
    .pager-element {
        margin: 0 2px 0;
    }
    #intro {
        margin:4px;
        padding: 20px;
    }
    #creditsWrapper {
        margin-left: 4px;
        margin-right: 4px;
        margin-top: 4px;
        padding: 20px;
        width: 95%;
    }
    #photoArea {

    }
    #photo {
        height: auto;
        margin: auto;
        max-width: 95%;
    }
}