/*--------------------------------------------
  Regions
  ------------------------------------------*/
@media only screen and (min-width: 760px) {
    #column_right {width:284px;float:right;margin-bottom: 30px;}
    .column_body {float:left; width:455px; padding: 28px 23px 50px;}
    
    body {background: #0f3367 url('../../_images/responsive/body-bg.png') repeat-x; }
    #bg-container {background:none;}
    
    #page_heading {
        padding: 10px 0 10px 18px;
        min-height: 10px;
        background: #081630;
    }
    
    #page_heading h2 {padding: 0; margin: -10px 0 5px; font-size: 30px;}

    .modern-browser .breakout-container {
        /* break out of container */
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        width: 97vw; /* don't make full 100%, because would trigger horizontal scrollbars */
    }
}

@media only screen and (min-width: 840px) {
    #column_one {margin: 20px auto 0; }
    .column_body {width: 520px;}
    #page_heading {background: none;}
}

@media only screen and (min-width: 1090px) {
    
    #column_one {float: left; width:232px; margin:0;}
    #column_two {float:right; width: 840px;}
    .menucontainer {float:none !important; width:100% !important;}
    #content-container {width: 1090px !important;}
    #bg-container {background:transparent url('../../_images/responsive/site-bg.png') no-repeat top center; }
    .custom-template #bg-container {background: transparent;}
}


/*--------------------------------------------
  Breadcrumbs
  ------------------------------------------*/
@media only screen and (min-width: 760px) {
    #breadcrumb {font-size: 10px; margin:0; padding: 10px 0 ; overflow: hidden; list-style: none;}
    #breadcrumb li {float: left; color: #999;}
    #breadcrumb a, 
    #breadcrumb span {color: #999; text-decoration: none;}
    #breadcrumb a:hover,
    #breadcrumb a:focus,
    #breadcrumb a:active {color: #ddd;}
    #breadcrumb li:after { content: "\0000bb"; margin: 0 10px; }
    #breadcrumb li:last-child:after {content: "";margin:0;}
    #breadcrumb strong {color: #fff;}
    #breadcrumb span {margin: 0 11px;}
}


/*--------------------------------------------
  Very Top Navigation
  ------------------------------------------*/ 
@media only screen and (min-width: 760px) {
    #topnav {padding: 20px 10px 8px; background:transparent;}
    #topnav .noscript {display:none !important;}
    
    #topnav ul {list-style:none; margin:0;padding:0;}
    #topnav ul.dropdown-content { padding:3px 0 0; }
    #topnav li {
        color:#fff;
        float:left;
        font-size:11px;
        font-weight:700;
        padding:0;
    }
    #topnav li a {
        color: #A9BED1;
        margin: 0 8px;
        padding: 0;
        text-decoration:none;
    }
    #topnav li a:visited {color:#A9BED1;}
    #topnav li a:hover {color:#f16f30;}

    #topnav .right-links a,
    #topnav a.home_link {
        background:url("../../_images/responsive/header-icons.png?v=2018a") no-repeat scroll 0 0 transparent;
        height: 14px;
        display:block;
    }
    
    #topnav .right-links a {margin:0;}
    
    #topnav a.home_link {
        margin-top:-1px;
        overflow:hidden;
        text-indent: -100px;
        width:14px;
        height:14px;
    }
    
    #dropdown-search {background:transparent;}
    #dropdown-search fieldset {padding: 10px 0;}

    #topnav a.home_link:hover {background-position:0 -14px;}

    #topnav a.az_index {background-position: 0 -29px; padding:0 10px 0 20px;}
    #topnav a.az_index:hover {background-position:0 -43px;}

    #topnav a.find_people { background-position: 0 -57px; padding:0 10px 0 20px;}
    #topnav a.find_people:hover {background-position:0 -71px;}

    #topnav a.contact_us { background-position: 0 -85px;padding:0 10px 0 23px;}
    #topnav a.contact_us:hover {background-position:0 -99px;}

    #topnav a.maps {background-position: 0 -113px; padding:0 10px 0 15px; }
    #topnav a.maps:hover {background-position:0 -127px;}
    
    #topnav a.help {background-position: 0 -140px;padding:0 10px 0 15px;}
    #topnav a.help:hover {background-position:0 -154px;}

    #topnav .right-links a.search2 {
        background: url('../../_images/responsive/search-icon.png') no-repeat 0 0;
        background-size: 12px 12px;
        padding: 0 10px 0 15px;
    }

    #topnav .for-large-up fieldset { margin-top:-4px; }
}

@media screen and (min-width:900px) {
    #topnav .right-links a {margin: 0 3px 0 5px;}
}

@media screen and (min-width:1090px) {
    #topnav input[type="text"] {
        font-size: 11px; 
        width: 120px;
        height: 20px;
        line-height: 14px;
        -moz-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }
    
    #topnav input[type="text"]:focus {width:150px; font-size: 12px;}
    
    #topnav input[type="submit"] {height:20px; width:20px;}
}


/*--------------------------------------------
  Site Banner
  ------------------------------------------*/
@media only screen and (min-width: 760px) {

    #site-banner {
        padding: 10px 0 0 15px; 
        height: 95px; 
        background: #0948B1 url('../../_images/responsive/banner-bg.png') repeat-y 50px 0; 
        position: relative; 
        overflow: hidden;
        -moz-transition: height 400ms;
        -webkit-transition: height 400ms;
        -o-transition: height 400ms;
        transition: height 400ms;
    }
    
    .standard-template #site-banner {
        padding: 0;
    }
    
    #site-banner .uta-logo {
        float: left;
        width: 185px;
        padding-right: 25px;
        margin-right: 25px;
        margin-top: 15px;
        border-right: 1px solid #5588ca;
    }
    
    #site-banner .uta-logo-main {
        max-width: 600px;
        width: 65%;
    }

    #site-banner .uta-logo-main a {
        padding: 22px 10px;
    }
    
    #site-banner h2 {
        float: left;
        width: 515px;
        text-align: left;
        opacity: 1;
        filter: alpha(opacity=100);
        display:table; 
        height: 80px; 
        margin: 0; 
        line-height: 1.2;
        -moz-transition: opacity 400ms;
        -webkit-transition: opacity 400ms;
        -o-transition: opacity 400ms;
        transition: opacity 400ms;
    }
    
    #site-banner .links {display:block;position:absolute;top:20px;}
    #site-banner .links a {color:#A9BED1; text-decoration:none; font-size:10px; text-transform:uppercase;}
    #site-banner .links a:hover {color:#fff;}
    #site-banner .links.left {
        right: 130px;
        width: 100px;
        border-right: 1px solid #4d7ec6;
    }
    
    #site-banner .links.right {
        right:0;
        width:120px;
    }
    
    #site-banner h2 > span {display:table-cell; vertical-align:middle;}
    
    #site-banner.open {height:190px;}
    
    #site-banner.open h2 { opacity:0; filter: alpha(opacity=0); }

    #header .expand-menu { 
        display: none; 
        position: absolute; 
        top: 19px; 
        left: 164px; 
        overflow: hidden; 
        width: 745px; 
        opacity: 0;
        -moz-transition: opacity 400ms;
        -webkit-transition: opacity 400ms;
        -o-transition: opacity 400ms;
        transition: opacity 400ms;
    }
    
    #header .expand-menu ul {border-left: 1px solid #5f88c6; float: left; margin: 0 0 10px 35px; padding: 0 0 0 12px; height: 85px; list-style:none; width: 115px;}
    #header .expand-menu ul,
    #header .expand-menu li {list-style-type:none;}
    #header .expand-menu a {color: #a9bed1; font-size: 12px; text-decoration: none;}
    #header .expand-menu a:hover,
    #header .expand-menu a:active,
    #header .expand-menu a:focus {text-decoration: none; color: #fff;}
    
    #header .expand-menu ul.uta-social {float: left; margin: 25px 0 0 35px; clear: left; width:450px; border:none;}
    #header .uta-social li {float:left; margin-right:8px; color: #fff; text-transform: uppercase; font-size: 11px;font-weight:bold;}
    #header .uta-social li:first-child {margin-right:25px; padding-top:5px;}
    #header .uta-social p { float: left; margin: 0 15px 0 0; padding-top: 5px; overflow: hidden; }

    #site-banner .expand-bttn {background:url(../../_images/responsive/expand_close_menu.png) no-repeat 0 0; display: block; height:33px; width: 100px; position: absolute; right: 18px; bottom: 0; z-index:600; overflow: hidden; text-indent: -500px;}
    #site-banner .expand-bttn:hover,
    #site-banner .expand-bttn:focus,
    #site-banner .expand-bttn:active {background-position: -100px 0;}
    
    #site-banner.open .expand-bttn {background-position:0 -33px;}
    #site-banner.open .expand-bttn:hover,
    #site-banner.open .expand-bttn:active,
    #site-banner.open .expand-bttn:focus {background-position: -100px -33px;}
    
    #site-banner.open .expand-menu {opacity:1;}
}

@media only screen and (min-width: 860px) {
    #header .expand-menu {left:179px;}
    #site-banner .uta-logo {width:200px;padding-right:35px;margin-right:35px;}
    #site-banner h2 {font-size: 24px; }
}

@media screen and (min-width:985px) {
    #site-banner .links.left {right:156px; width:110px;}
    #site-banner .links.right {width:140px;}
}

@media only screen and (min-width: 1090px) {
    #site-banner {padding:12px 0 0 25px; -webkit-border-radius: 6px 6px 0 0;-moz-border-radius: 6px 6px 0 0;border-radius: 6px 6px 0 0;}
    .standard-template #site-banner { padding: 0; }
    #site-banner .uta-logo {width:231px;margin-top:10px;}
    #site-banner .uta-logo-main {width: 625px; max-width: none; padding:0 20px;}
    #header .expand-menu {left:219px;}
    #site-banner h2 {width:650px;}
}


/*--------------------------------------------
  Primary (orange) navigation 
  ------------------------------------------*/
@media only screen and (min-width: 760px) {
    #desktop-menu {background:#d85c1c url('../../_images/responsive/gradients.png') repeat-x 0 -89px; height:29px;}

    #desktop-menu ul {margin:0;padding:0;list-style:none; display:block;}
    #desktop-menu > ul {height: 29px;}
    #desktop-menu li {float:left; position: relative; border-left:1px solid #D58057;}
    
    #desktop-menu a {
        color: #fff;
        text-decoration:none;
        display:block;
        position: relative;
        padding: 0 12px;
        height: 29px;
        line-height: 30px; /* this is intentionally 1px more than height, so that in edge-cases text will be 1px too low rather than 1px too high */
        font-size: 12px;
        font-weight: bold;
        text-transform:uppercase;
        background: url('../../_images/responsive/gradients.png') repeat-x 0 -89px;
    }
    
    #desktop-menu ul > li > a:hover,
    #desktop-menu ul > li > a.selected,
    #desktop-menu ul > li.sfHover > a {background-position:0 -118px;}
    
    #desktop-menu ul > li:first-child {-moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; border:none;}

    #desktop-menu ul, 
    #desktop-menu ul ul {margin: 0; padding: 0; list-style: none; }
    
    #desktop-menu ul ul {
        position: absolute;
        display: none;
        top: 100%;
        left: 0;
        z-index: 99;
        background-color: #b64813;
        min-width: 12em; /* allow long menu items to determine submenu width */
        *width: 12em; /* no auto sub width for IE7, see white-space comment below */
        max-width: 250px;
        -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3);
    }

    #desktop-menu li:hover > ul,
    #desktop-menu li.sfHover > ul {
        display: block;
    }
    
    #desktop-menu li {
        white-space: nowrap;
        *white-space: normal;
    }
    
    #desktop-menu ul ul li {
        width: 100%;
        border: none;
    }
    
    #desktop-menu ul ul li a {
        font-weight: normal; 
        border-bottom: 1px solid #cf632f;
        background: transparent none;
        height: 32px;
        line-height: 32px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    #desktop-menu li.more a {text-transform: none;}
    
    #desktop-menu ul ul li a:hover {background: #ea7125;}
    
    /* in standard template we can show desktop menu now */
    .standard-template #mobile-menu {display:none !important;}
    .standard-template #desktop-menu {display:block !important;}
        
    .standard-template #desktop-menu a {text-align:center;}
    .standard-template #desktop-menu li.about {width:11%;}
    .standard-template #desktop-menu li.admissions { width:13.5%;}
    .standard-template #desktop-menu li.academics { width:13%;}
    .standard-template #desktop-menu li.research { width:12.5%;}
    .standard-template #desktop-menu li.student { width:14%;}
    .standard-template #desktop-menu li.giving {width:9%;}
    .standard-template #desktop-menu li.athletics {width:12%;}
    .standard-template #desktop-menu li.news {width:15%;}
    
    .custom-template #main-menu {
        box-shadow: 2px 2px 6px rgba(0,0,0,0.7);
        position: relative;
        z-index: 5;
    }
}

@media only screen and (min-width: 1090px) {
    #mobile-menu {display:none !important;}
    #desktop-menu {display:block !important;}
    
    .standard-template #desktop-menu li {width:auto !important;}
    .standard-template #desktop-menu li.about a {width:120px;}
    .standard-template #desktop-menu li.admissions a { width:136px;}
    .standard-template #desktop-menu li.academics a { width:135px;}
    .standard-template #desktop-menu li.research a { width:133px;}
    .standard-template #desktop-menu li.student a { width:154px;}
    .standard-template #desktop-menu li.giving a {width:112px;}
    .standard-template #desktop-menu li.athletics a {width:137px;}
    .standard-template #desktop-menu li.news a {width:156px;}
}


/*--------------------------------------------
  Page
  ------------------------------------------*/
@media screen and (min-width: 760px) {
    .page-banner {position:relative;}
    .page-banner img {position:relative;z-index:1;}
      
    .page-banner h3 {
        position: absolute;
        z-index: 50;
        bottom: 20px;
        width: auto;
        max-width: 95%;
        height:2.1em;
        line-height:2.1em;
        overflow:hidden;
        padding: 0 25px;
        background: rgba(0,0,0,.7);
    }
}

@media screen and (min-width: 840px) {
    .page-banner h3 {font-size: 25px;}
}


/*--------------------------------------------
  Sidebars
  ------------------------------------------*/
@media only screen and (min-width:760px) {
    #column_right .sidebar {margin:0; float:none;}
    #column_right:after {content:" ";display:block;width:100%;height:9px;background:url('../../_images/responsive/intruder_shadow.png') no-repeat center top;}
    #column_right.new-shadow:after {display: none;}
    #column_right img.shadow {display:block;margin-bottom:1em;}
}
  

/*--------------------------------------------
  Footer 
  ------------------------------------------*/
@media only screen and (min-width: 760px) {
    #footer {margin:20px auto 0; width:100%;max-width:840px; padding: 0 15px 15px;}
    #footer .left {float:left; width:475px;}
    #footer .quicklinks {float:right; width:250px;}
    #footer .policylinks {border: none; padding:0;}
    #footer .quicklinks .leftcol {border-right:1px solid #98b3db;}
}

@media only screen and (min-width:840px) {
    #totop-arrow.visible {left:50%; margin-left:358px;}
    #footer .left {width: 550px;}
}

@media screen and (min-width:1090px) {
    #footer {margin:20px 0; padding:0; max-width:none;}
    #footer .attribution, 
    #footer .policylinks,
    #footer .quicklinks {line-height: 1.6; }
    #footer ul.uta-social a {margin:0; float: left;}
    #footer .quicklinks a, 
    #footer .policylinks a {display:inline; padding:0; margin: 0;}
    
    #footer .uta-social li.mo span.moretext {
        float: left;
        margin-left: 6px;
        font: bold 12px/12px 'Roboto Slab', Rockwell, serif;
    }
    
    #footer .uta-social li.mo:hover span.moretext {display: block;}
    
    #totop-arrow.visible {left:50%; margin-left:484px; opacity:0.35; }
    #totop-arrow.visible:hover {opacity:.7;}
    #totop-arrow.sticky { position:absolute; right:10px; bottom:10px; left:auto; margin:0 !important; }
}