/* --------------------------------------------------------
EngrIT Web Theme
Author: Engineering IT Shared Services - WAIS
engrit-web@illinois.edu
Version: 1.0

RESPONSIVE STYLES
-------------------------------------------------------- */


/* COLORS -------------------------------------------------
-----------------------------------------------------------
orange: #DF6226
slightly darker orange: #C45521
blue: #0072BC
yellow: #FFAF15
dark grey: #343434
med dark grey: #71706f
medium grey: #565553
light grey: #D8D7D6
lighter grey: #F4F3F1
-------------------------------------------------------- */
@media (max-width: 1090px) {
	.sidebar-first .region-sidebar-first, .two-sidebars .region-sidebar-first { margin-left: 10px; }
	.two-sidebars .region-sidebar-second { padding-left: 0px; margin-left: 78%; }
	.two-sidebars #content { width: 58%; }
}
@media (max-width: 1080px) {
	body.front { background: #ffffff; background-image: none; }
 
	body.front #header,
	body.front #main, #page, 
	#footer-inner {
		width: 100%;
	}
	#content { 
		padding: 10px 20px 10px 20px; 
	}
	.sidebar-first #content {
		float: left;
		margin-left: 20%;
		margin-right: -100%;
		width: 80%;
	}
	#footer .contact-info { width: 25%; }
	#footer .block-webform { width: 75%; }
	#footer-inner { padding: 0px 30px; }
	#footer-inner .bigger {  
		font-size: 12px; font-size: 1.2rem;
		line-height: 14px; line-height: 1.4rem;
	}
	.region-home-feature {
		height: auto;
		min-height: 0px;
	}
	.region-home-feature .block.feature-image { text-align: right; }
	.region-home-feature .block.feature-image img {
    	width: 98%;
    	height: auto;
	}
	.region-home-status {
    	height: auto;
    	overflow: auto;
    	padding-bottom: 20px;
	}
	.region-home-status .ews-status {
		float: left;
		padding: 10px 20px 10px 30px;
		width: 50%;
	}
	.region-home-status .ews-status #data {
		height: auto;
		width: auto;
	}
	.region-home-status .ews-status #workstations .name {
		margin-right: 5px;
		width: 65px;
	}
	.region-home-status .job-postings {
		background: none;
		border: none;
		float: right;
		height: auto;
		padding: 0px;
		position: absolute;
		right: 3%;
		top: 475px;
		width: 45%;
	}
	.region-home-audiences { padding: 0px; background: #0072BC; }
	.region-home-audiences .inner { width: 100%; }
}
@media (max-width: 1032px) { 
	.region-home-feature .block.feature-image img {
    	width: 96%;
    	height: auto;
	}
}
@media (max-width: 1016px) { 
	.region-home-feature .block.feature-image img {
    	width: 94%;
    	height: auto;
	}
}
@media (max-width: 1000px) { 
	.region-home-feature .block.feature-image img {
    	width: 92%;
    	height: auto;
	}
}
@media (max-width: 900px) { 
	.region-home-audiences { margin-top: 0px; }
	.region-home-audiences h3 { margin-bottom: 10px; }
	.region-home-audiences h3 a {
		min-width: 0px;
		font-size: 18px; font-size: 1.8rem;
		line-height: 18px; line-height: 1.8rem;
	}
	.region-home-audiences p { 
		margin-top: 0px; 
		font-size: 1.4rem;
    	line-height: 2.0rem;
	}
}
@media (max-width: 980px) {
	.tb-megamenu { background: #565553; }
	.tb-megamenu .btn-navbar {
		margin-bottom: 0px;
		padding: 5px 8px;
		margin: 5px;
	}
	.tb-megamenu .btn { 
		font-size: 14px; 
		background-image: none;
		background: transparent;
		border: 1px solid #ffffff; 
	}
	.tb-megamenu .btn:hover { 
		background: #343434; 
	}
	.tb-megamenu .btn-navbar [class^="icon-"], .tb-megamenu .btn-navbar [class^=" icon-"] { 
		color: #ffffff;
	}

	.tb-megamenu .nav-collapse .nav > li > a:hover,
	.tb-megamenu .nav-collapse .nav > li > a:focus,
	.tb-megamenu .nav-collapse .nav > li.active > a:hover,
	.tb-megamenu .nav-collapse .nav > li.active > a:focus,
	.tb-megamenu .nav > li > a:focus, .tb-megamenu .nav > li > a:hover {
		background-color: #343434;
		color: #FFAF15;
		outline: medium none;
		text-decoration: none;
		text-shadow: none;
	}
	.tb-megamenu .nav li a { text-transform: uppercase; text-decoration: none; }
	.tb-megamenu .nav li ul li a { text-transform: none; }
	.tb-megamenu .nav li ul li a:hover { color: #FFAF15; }
	.tb-megamenu .nav li.dropdown > .dropdown-toggle {
		font-weight: normal;
	}
	.tb-megamenu .nav li.dropdown.active > .dropdown-toggle, 
	.tb-megamenu .nav li.dropdown.open.active > .dropdown-toggle, 
	.tb-megamenu .nav > li.dropdown.open.active > a:hover {
    	background-color: #343434;
    	border-color: none;
    	border-bottom: none;
    	color: #ffffff;
    	font-weight: normal;
    	font-size: 14px; font-size: 1.4rem;
    	line-height: 14px; line-height: 1.4rem;
	}
	.tb-megamenu .nav li.dropdown-submenu.active a.dropdown-toggle { 
		background: none; 
		color: #FFAF15; 
		font-weight: bold; 
	}
	.tb-megamenu .nav-collapse .nav > li > a, .tb-megamenu .nav-collapse .dropdown-menu a {
    	border-bottom: 1px solid #222;
    	border-radius: 0;
    	border-right: medium none;
    	color: #fff;
    	text-shadow: none;
    	font-weight: normal;
	}
	.tb-megamenu .mega-nav > li a, .tb-megamenu .dropdown-menu .mega-nav > li a {
    	margin-left: 5px;
    	text-decoration: none;
    }
    /* hide level 3 items, mega menus */
	.tb-megamenu li.level-1 .dropdown-submenu > .dropdown-menu { display: none !important; }
	/* hide about items */
	.tb-megamenu .nav li.about-item .tb-megamenu-submenu { display: none !important; }
	
	.region-home-feature .block.feature-image { text-align: left; }
	.region-home-feature .block.feature-image div { float: none; width: 100%; }
	.region-home-feature .block.feature-image img {
		zoom: 2;
		display: block;
    	margin: auto;

    	height: auto;
    	max-height: 100%;

    	width: auto;
    	max-width: 100%;
	}
}

@media (max-width: 960px) {
	.region-home-status .job-postings { padding-top: 10px; }
 	.region-home-status .job-postings h2 {
		font-size: 18px; font-size: 1.80rem;
		line-height: 22px; line-height: 2.2rem;
		margin-bottom: 10px !important;
	}
	.region-home-status .job-postings p { margin-top: 0px; }
	
	.region-home-audiences { margin-top: 0px;  }
	.region-home-audiences .inner { padding: 0px; }
	
	.sidebar-first #content {
    	float: left;
    	margin-left: 0;
    	margin-right: -100%;
    	width: 100%;
    	/*
    	float: left;
    	margin-left: 25%;
    	margin-right: -100%;
    	width: 75%;*/
	}
	.sidebar-first .region-sidebar-first {
		 clear: both;
    	margin-left: 0;
    	margin-right: -25%;
    	width: 90%;
    	/*
    	float: left;
		margin-left: 0;
		margin-right: -25%;
		width: 25%; */
	}
.two-sidebars #content {
    float: left;
    margin-left: 2%;
    margin-right: -120%;
    width: 100%;
}
.two-sidebars .region-sidebar-first {
    clear: both;
    margin-left: 10%;
    margin-right: -25%;
    width: 90%;
    	/*float: left;
		margin-left: 10px;
		margin-right: -20%;
		width: 20%;*/
	}
	.sidebar-first .region-sidebar-first { margin-left: 20px; }
	.two-sidebars .region-sidebar-second {
		clear: both;
		float: left;
		width: 90%;
		margin-left: 10%;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	#footer .block-webform h2 {	
		text-indent: 0px;
		padding: 10px 50px;
	}

@media (max-width: 890px) {
	#footer { height: auto; padding-bottom: 20px; }
	#footer .contact-info { width: 30%; }
	#footer .block-webform { width: 70%; }
	#footer .block-webform h2 {  
		font-size: 18px; font-size: 1.8rem;
		line-height: 22px; line-height: 2.2rem;
	}
}
@media (max-width: 890px) { 
	#footer .contact-info {
		width: 100%;
		min-height: 0px;
		border-right: none;
		float: none;
		min-height: none;
		padding-top: 20px;
		padding-bottom: 10px;
		border-bottom: 1px solid #71706f;
		margin-bottom: 20px;
		overflow: auto;
	}
	#footer .contact-info #footer-name { float: left; margin-right: 40px; }
	#footer .contact-info .bigger { 
		float: left; 
		margin-right: 20px; 
		margin-top: 0px; 
		padding-top: 0px; 
	}
	#footer #footer-name { margin-bottom: 20px; }
	#footer .block-webform {
		width: 100%;
		float: none;
		padding: 0px 0 0 0px;
    }
}
@media (max-width: 800px) {
	a.service-area {
		width: 48%;
	}
}
@media (max-width: 768px) {
	.tb-megamenu .nav-collapse .nav li a { border-top: 1px solid #222; }
	header .block-search input.form-text { width: 160px; }
	p {
		font-size: 1.3rem;
		line-height: 1.7rem;
	}
	h1 {
		font-size: 26px; font-size: 2.6rem;
  		line-height: 26px; line-height: 2.6rem;
	}
	h2 {
		font-size: 18px; font-size: 1.8rem;
  		line-height: 20px; line-height: 2.0rem;
  		margin-bottom: 0.5rem;
	}
	.region-home-feature { background: #EDEBE8; }
	.region-home-status { padding-bottom: 0px; }
	.region-home-status, .region-home-status .ews-status { overflow: auto; }
	.region-home-status .ews-status, .region-home-status .job-postings {
		float: none;
		padding: 10px 20px;
		margin-bottom: 10px;
		width: 100%;
	}
	.region-home-status .job-postings { 
		position: relative; 
		right: 0px; top: 0px;
		border-top: 1px solid #ccc; 
	}
}
@media (max-width: 640px) {
	.region-home-audiences .audience {
		width: 50%;
		padding: 0px 10px;
	}
}
@media (max-width: 500px) {
	body.front #main { padding: 0px; }
	.region-home-audiences { padding: 20px; }
	.region-home-audiences .audience {
		width: 100%;
		padding: 0px;
		text-align: left;
	}
	.region-home-audiences .audience h3 { margin-top: 0px; }
	#site-name a {
		font-size: 22px; font-size: 2.2rem;
		line-height: 24px; line-height: 2.4rem;
	}
	#site-name a.ss {
    	font-size: 11px; font-size: 1.1rem;
    	line-height: 11px; line-height: 1.1rem;
    	letter-spacing: 0.52rem;
    }
    header .block-search {
    	top: -10px;
    }
}
@media (max-width: 500px) { 
	.ews-status .lab { width: 100%; }
	.region-home-feature { background: #565553; padding-top: 20px; }
}

@media (max-width: 480px) {
	.tb-megamenu { height: 40px;  }
	
	.region-home-feature { background: #ffffff; padding-top: 0px; }
	#navigation {
		position: relative;
    	top: -55px;
    	background: #565553;
    }
    body.front #navigation { top: 0px; }
}
@media (max-width: 450px) {
	.tb-megamenu .btn-navbar { margin-top: 5px; }
	body.front .tb-megamenu .btn-navbar { margin-top: -20px; }
}
@media (max-width: 390px) {
	header { height: 80px; }
	#branding {display: none; }
	#site-name { margin-top: 20px; } 
	header .block-search { top: -31px; }
	header .block-search input.form-text {
    	width: 90px;
	}
	body.front .tb-megamenu .btn-navbar { margin-top: -10px; }
}