/**********************************************************************************************
		Main Sections in Mobile CSS
		
		1. FLUID DESIGN FOR 800-990
			IE Fix here as well
		2. SCREEN SIZE 100-300
		
		3. SCREEN SIZE 301-400
					
		4. SCREEN SIZE 401-600
					
		5. STYLES FOR 800\ AND BELOW
			Menu, Logo, Search & Navigation

***********************************************************************************************/

/*------------------------------------------
// 1. FLUID DESIGN FOR 800-990
//------------------------------------------*/
	@charset "utf-8";
@media all and (max-width: 990px) {
	/*---- Fluid design ----*/
 	div#container {
         margin-right: auto;
         margin-left: auto;
         width: 100%; /* Holding outermost DIV */
    }
 
	 div.wrapper, div.wrapper-bottom {
         width: 99.182%; /* 970/978  */
    }
    
    div#today, div#navigation, div#banner, div#content, div#dashboard{
         width: 98.969%; /* 960/970  */
    }

    div#header{
    	width: 99%;
    }
    
    div#navigation{
    	height: inherit;
    }
    
    .fixed { 
    	width: 98%; 
    	background: #F9F7F0;
    }
    
    /** Main page styles **/
    
    div#dashboard {
    	background: #F5F5F5;
    }
    
    div#news, div#events, div#region {
    	width: 30%;
    	float: left;
    	padding-right: 15px;
    	border-left: 1px solid #DCDCDC;
    }
    
    div.box, div#dashboard div#news div.box, div#dashboard div#events div.box, div.heading {
    	width: 96% !important;
    }
    
    div#dashboard div.box div.post p {
    	word-wrap: break-word;
   	}
    
    /** Sub page styles **/
    div#main {
    	width: 62.9%; /* 611/960 */
		background: #F5F5F5;
		border-right: 1px solid #DCDCDC;
    }
    
    div#content {
    	background: white;
    }
    
    div#sidebar {
    	width: 28.688%; /* 285/960 */
    	float: left;
    }
    
    div#sidebar ul {
    	width: 90%;
    }
    
    div#main h2 {
    	width: 75%;
    }

	/*---- iFrames of Maps no longer fixed in width ----*/
	
	.fluidMedia {
    	position: relative;
    	padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    	padding-top: 30px;
    	height: 0;
    	overflow: hidden;
	}

	.fluidMedia iframe {
    	position: absolute;
    	top: 0; 
    	left: 0;
    	width: 100%;
    	height: 100%;
	}
}

@media all and (min-width: 800px) and (max-width: 953px) {	
	div#navigation {
		background-size: contain;
		height: 63px !important;
	}
}

@media all and (max-width: 600px) {
	div#news, div#events, div#region {
		width: 45%;
	}
	
	input#query-field { 
		width: 80% !important; 
		margin-right: 6px; 
	}
}

@media all and (max-width: 400px) {
	div#news, div#events, div#region {
		width: 90%; 
	}
}

/*------------------------------------------
// 5. STYLES FOR 800PX AND BELOW
//------------------------------------------*/

@media all and (max-width: 800px) {
	/*---- Body background image and color ----*/
	body { 
		color:#666;
		background-image: none;
	}

	/*---- Container ----*/
	div#container {
		float: left !important;
		background-image: none;
		padding: 0px 0px 0px 0px;
		position: relative;
	}
	
	/*---- Hidden Items ----*/
	div.global-navigation, div#sidebar div.service-form, div#sidebar div#links, div#main #breadcrumbs, div#footer, div#clients, div#services {
		display: none;
	}
	div#banner, div#today, div#footer, a.more-link{
		display: none; 
	}
	/*---- MENU ITEMS ----*/
	
	/*---- Logo ----*/
	div#header{ background:none; url("../../../../../cs/groups/webteam/documents/site_assets/idc-007911.jpg") left top no-repeat; height:40px; padding:0px 0px 0px 0px; width:100%; overflow:hidden; display:none; }
	div#header div.logo{display:none; }
	img#mobile-header-image{display:block; float:left; margin-left:1px; }
	
	/*---- Search ----*/
	form#mobile-search-field {display:block; width:100%; margin-left:0px; }
	a#mobile-search {display:block; float:left; }
	div#header div.search-form{ float:left; margin-top:5px; width:100%; }
	input#query-field{ width:90%; margin-right: 6px; }
	div#header div.search-form input.button{ float:right; margin-right:10px; margin-top:2px; }
	
	/*---- Header - Search Form ----*/
	div#header div.search-form input.button{float:left;}
	
	/*---- Navigation ----*/
	a#mobile-nav, a#mobile-search {display:block; margin-left:5px; float:right; }
	a#mobile-nav:hover, a#mobile-search:hover {cursor: pointer; }
	div#navigation{ background:#F9F7E6; }
	div#navigation ul{width:100%; float:right; display:none; }
	div#navigation ul li{margin-top:5px; margin-left:2px; width:100%; background:#c4720c; border: 1px solid black; }
	div#navigation ul li.pipe{display:none; background: none;}
	div#navigation ul li a{ 
		color:black; font-size:110%; font-family:Georgia, "Times New Roman", Times, serif; font-size:110%; font-weight:bold; 
		padding:5px 10px 1px 0px; height:20px; float:right; text-decoration:none; text-transform:uppercase; letter-spacing:-1px;
		width: 98%; text-align: right;
	}
	div#navigation ul li a:hover, div#navigation ul li a.active{text-decoration:none; color:white; background:none; width: 98%; text-align: right;}
}