/*========================================================*/
/*  Mobile overrides — only active below 768px, so the    */
/*  fixed 960px desktop layout is untouched on desktop.   */
/*========================================================*/

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

    /* Collapse the fixed-width outer box to the viewport */
    .BoxTable {
        width: 100% !important;
    }

    .BoxTL, .BoxT, .BoxTR,
    .BoxL, .BoxR,
    .BoxBL, .BoxB, .BoxBR {
        display: none;
    }

    #Content {
        width: auto !important;
        padding: 5px 8px 10px 8px;
    }

    /* Header: scale the logo, move the login links below it */
    #Header {
        margin: 4px 8px;
        width: auto;
    }

    #Logo {
        max-width: 70%;
        height: auto;
    }

    #Login {
        position: static;
        padding: 6px 0 0 0;
        text-align: left;
    }

    /* Nav: let items wrap onto multiple rows, hide divider images.
       The desktop background is a 32px repeat-x gradient, so wrapped rows
       need a solid color behind the white link text. */
    #NavBar {
        height: auto;
        overflow: hidden;
        background-color: #3C4E76;
    }

    #NavBar ul li img {
        display: none;
    }

    #NavBar ul li a {
        padding: 8px 10px 4px 10px;
    }

    #NavBarRight {
        display: none;
    }

    /* Linearize the two-column homepage layout */
    #ContentColLeft,
    #ContentColRight {
        float: none;
        width: auto !important;
        margin: 10px 0 8px 0;
        padding: 10px 0 8px 0;
    }

    /* Keep content-supplied media and form fields inside the viewport */
    #Content img {
        max-width: 100%;
        height: auto;
    }

    #Content table {
        max-width: 100%;
    }

    #Content input[type="text"],
    #Content input[type="password"],
    #Content textarea,
    #Content select {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Footer */
    #FooterLeft, #FooterRight {
        display: none;
    }

    #FooterContent {
        margin: 4px 8px;
    }
}