@charset "utf-8";
/* Responsive overrides for the fixed 950px layout in style.css.
   Desktop rendering is unchanged; below 970px the layout becomes fluid
   and below 760px the columns stack. */

img { max-width: 100%; height: auto; }
table { max-width: 100%; }
input, select, textarea { max-width: 100%; box-sizing: border-box; }

/* Hamburger button, injected by js/responsive.js; hidden on desktop */
.menu-toggle { display: none; }

@media (max-width: 969px) {
    #bg { height: auto; }
    #main, #topper, #center, #banner, #content, #footer, #footer_last {
        width: 100%;
        box-sizing: border-box;
    }
    #main { overflow: hidden; }
    #center_total { float: none; width: 100%; }
    #banner { padding: 10px; }
    .flexslider { width: 100%; }
    .flexslider .slides img { width: 100%; }
    #content { padding: 15px; }
    #content_left { width: 65%; }
    #content_right { width: 32%; }
    #related, #related_inner { width: 100%; box-sizing: border-box; }
    #related_inner li a { width: auto; margin-right: 10px; }
    #footer { padding: 20px 15px; }
    #footer span { width: 33%; box-sizing: border-box; padding-right: 10px; }
    #letter { width: 33%; box-sizing: border-box; }
    .text_field { width: 100%; }
    #topper { height: auto; overflow: hidden; }
    #logo { width: 200px; }
    #menu { width: auto; max-width: calc(100% - 220px); margin: 20px 10px 10px 0; }
    #menu ul { width: auto; }
    #menu li a { padding: 0 8px; font-size: 11px; }
    #support { padding-left: 0; padding-right: 10px; }
    div[style*="width:950px"] { width: 100% !important; }
}

@media (max-width: 759px) {
    body { text-align: left; font-size: 14px; }
    #logo { position: static; float: none; width: 160px; margin: 10px auto 0; }
    #support { float: none; width: auto; padding: 10px; text-align: center; }
    #menu {
        float: none; width: auto; max-width: none;
        margin: 0 10px 10px; border-radius: 5px;
    }
    .menu-toggle {
        display: block; width: 100%; padding: 12px 15px;
        background: transparent; color: #fff; border: 0;
        font: bold 14px Arial, Helvetica, sans-serif; text-align: left; cursor: pointer;
    }
    #menu.collapsible ul { display: none; }
    #menu.open ul { display: block; }
    #menu ul, #menu li { float: none; width: 100%; }
    #menu li a {
        float: none; line-height: 42px; padding: 0 15px; font-size: 13px;
        border-right: 0; border-top: 1px solid #222;
    }
    #content_left, #content_right, .mission {
        float: none; width: 100% !important; margin-right: 0 !important;
    }
    /* Page text first, sidebar links after it */
    #content { display: flex; flex-direction: column; }
    #content_left { order: 1; }
    #content_right { order: 2; margin-top: 20px; }
    #content_left table, #content_left td { width: auto !important; }
    .mission { margin-bottom: 15px; }
    #footer span, #letter { float: none; width: 100%; margin-bottom: 15px; }
    #letter { padding: 15px; }
    .flex-caption { font-size: 11px; }
    .application-1st, .reg-textfield, .reg-listmenu { width: 100%; }
    /* Long application tables scroll sideways instead of breaking the page */
    #content_left { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}