@charset "utf-8";
/* Responsive Styles */
/* 	Date Created:  10/23/2012
	Date in Prod:  1/6/2014 (release)
	Date Modified: 2/18/2015 Respond.js note added
	Date Modified: 3/24/2015 - DBE new page release
	Date Modified: 6/29/2017 Modify orange navigation to add Road & Bridge $ section - legislative mandate for fuel tax increase reporting
	Date Archived: 	
	Do not minify: Minify the production version only
	Note: Internet Explorer 8 requires the use of Respond.js to enable media query support.
*/
/************************************************

	MEDIA QUERIES

************************************************/
/* SMALL SCREENS */
@media only screen and (max-width:480px) { 

  figure {margin: 1em 0; float: none;}
	  figcaption.credits {width: inherit;} 
  /*#template-search-item { padding:none !important;}*/
  #agencycontent .imgL, #agencycontent .imgR {float:none; display:block; margin:1.5em 0;}
  #mainContent p, #mainContent h2, #mainContent h3, #mainContent ul.inlinePipe {margin-left: 0;}
  #mdtFooter a.long {display:none;} 
  #socialMedia {float: none; text-align: center;} 
  
	#mdtSearchBox {display:none;}
	  #mdtSmallSearch {position:relative; 
		  margin:0;
		  margin-top:10em !important; 
		  position:absolute; right:-30px !important;
		  padding:none;
		  height:100px;
	  }	  
	  /*  Search-related */
		input[type=search] {
		  width: 160px;
		  background-color: #fff;
		  -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
		  -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
		  box-shadow: 0 0 5px rgba(109,207,246,.5);
		  outline: 0; /*removes outline on search box*/
		  padding-left: 50px;
		  color: #000;
		  background-color: #fff;
		  cursor: auto;
		}
		.smallSearch {text-align:center;}
	/* end search-related */
	
	.breakWord {word-break:break-all;}
	.clearImg {overflow:visible;}	
	.floatieMenuR, .floatieMenuL  {
		float:none; border:none;
		font-size:100%;	
		border: 5px solid #E0E0E0;
	}
	.homeFeature aside img {display:none;}
}
@media only screen and (min-width: 481px) {
  #mdtFooter section#terms a.short {display:none;}
  #mdtSearchBox {display:none;}
}
@media only screen and (max-width: 900px) {
  #mdtSearch {display: none;} /* temporary until we find a way to display it on small screens */  
}
@media only screen and (max-width:630px) {
 /* sprite: top right = blue | bottom right = white | right -195px = black */ 	
 /* #mdtLogo  {
	background: url(/common/images/sprite-mdtLogos.png) right -195px no-repeat; 
	width: 58px; 
	height: 50px; 	
  }	*/
  #aboutMDT {
	margin:0; 
	position: absolute; top: 95px; left: 25px; 
  }
  #aboutMDT p {position:relative; top:-10px;}
  header#agencyHead {height:150px;}
  #mdtSearchBox {display:none;}
  input[type=search]:focus {width:160px;}

}
@media only screen and (max-width:675px){
	.promoContainer .promo {
		background-position: 0px 0px; 
		display: block; 
		float: none; 
		margin-bottom: 2em; 
		width: 100%;
		background:#eee;
	}
	.promoContainer ~ .promoContainer {margin-top:-2em;} 
	#mdtSearchBox {display:none;}
}
@media only screen and (max-width:752px) {  
			.homeFeature {background:white;}
				.homeFeature article {color:black;}
}
@media only screen and (max-width:768px) {
	#pagewrap {margin:0; padding:0;} /* removes 6em top padding */
	#agencycontent .twoColLeft aside, .twoColLeft article, 
	#agencycontent .twoColRight aside, .twoColRight article, 
	#agencycontent .threeCol section, .threeCol section.rightCol {
		float:none; 
		width:auto; 
		background:none;
	}	
	#agencycontent .threeCol section.leftCol, 
	#agencycontent .threeCol section.centerCol {
		float:none; 
		width:auto; 
		margin-right:0;
	}
	/*3 col section with button-like sections - as seen on DBE pages*/
	#agencycontent .sectionButtons.threeCol section, .sectionButtons.threeCol section.rightCol {
		float:none; 
		width:auto !important; 
		background:#6F9799 !important;}
	.sectionButtons.leftCol a, .sectionButtons.centerCol a, .sectionButtons.rightCol a {color:#FFFFFF !important;}
	.sectionButtons.leftCol:hover, .sectionButtons.centerCol:hover, .sectionButtons.rightCol:hover {
		background-color:#F5F0DE !important; color:#000000;}
	.sectionButtons.leftCol:hover a, .sectionButtons.centerCol:hover a, .sectionButtons.rightCol:hover a {
		background-color:#6F9799; color:#FFFFFF;}
	/* 50-50 Split */
	.halfA {float:none; width:100%;}	
	.halfB {float: none; width:100%; padding-left:0; border:0;}	
				
	blockquote {
		width: auto; 
		padding: 4em; 
		margin: 2em auto; 
	}
	.pullQuote {float:none; width:60%; margin:2em auto;} 
	.floatLeft, .floatRight {float:none; display:block; } 		
	a.top.invisible {visibility: visible;} 
	.imgL, .imgR  {display: block; float: none; margin:1.5em auto;} /* removed: margin-left: 0;  min-width: 250px; */
	
	#mainContent {top:-65px;}
	#mdtFooter {top:-65px;}
	#socialMedia {position:relative; top:-65px;}
		/*overrides {top:-65px;} when a notice is displayed */	  
	   .mdtNotice + #mainContent, .mdtNotice ~ #mdtFooter, .mdtNotice ~ #socialMedia {top:0!important;} 
	
	.js .selectnav { display: block; }
   .js #nav { display: none }
   /*#template-search-wrap {overflow:hidden;}*/

}
@media only screen and (max-width:1137px) {  
  #mdtSmallSearch {position:relative; 	
  	margin-top:7em;
	padding:none;
	height:100px;
  }
  #agencyHead {height:100px;} 
  #mainContent {top: -65px;}
	  
  #mdtFooter {top: -65px;}
	#socialMedia {position: relative; top: -65px;}
     
  .halfA img.imgL {float:none; display:block;}
  .halfA div.clearImg, .halfB div.clearImg  {display:block; clear:left;}		
  .promoContainer .promo {background-position: 0px 0px;}
  	.promoContainer .promo .content {padding: 60px 30px 0px 0px; }
  table.mdtTable1 {font-size: 1.2em;}   
}
@media only screen and (max-width:1080px) {
	.quarters ul {float:none; display:block; width: 95%; height:auto; margin:0 auto; }
    .quarters ul:last-of-type {margin:0 auto;}
	.quarters li {background:none; border-bottom:1px solid grey; padding:.5em 0;}
  		.quarters li:first-child {margin-top:0;}  
  		.quarters li:last-child {position:relative; margin-top:1.5em; border-bottom:none; }
  	.quarters a {width:100%; padding:.5em 0; text-align:center;}
  		.quarters a:hover {width:100%; padding:.5em 0; text-decoration:none;}
}
@media only screen and (max-width:1024px) { 
/* A 4-column list */
  .four ul {float: none; width: 100%; text-align: center;}
  	.four ul li {margin-left: 0;}
  	.four li:first-of-type {border: none;}
  	.four li a {display: block; width: 100%; height: 100%;  padding:.75em 0; background:#eee;}
  	.four li a:hover {background:#ccc; text-decoration:none;}
}

/* LARGE SCREENS */ 
@media only screen and (min-width:769px) { 
  a.short  {display:none;}  
  a.top.invisible {display:none;}
  #mdtFooter section:last-of-type {padding-bottom: 3em;} 
  	#mdtFooter li {
		display: inline-block; 
		width: 30%;
		border: none;
  }
  	#mdtFooter li:first-of-type {border:none;} 
} 

@media only screen and (min-width:1137px) {
	#mdtSmallSearch {display:none;}
	#mdtSearchBox {display:inline;}
	nav#mdtNav li {float:left; width:20%;}  
}


/* Responsive Nav*/

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width
}@-o-viewport{width:device-width}
@viewport{width:device-width}

@media screen and (min-width: 975px) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;	
  } 
}

.js nav{ 
	max-height:0; 
	position:relative; 
	display:block; 
	overflow:hidden; 
	zoom:1;
}


@media screen and (min-width:1137px){
	.js #nav{
		position:relative !important;
		max-height:none;}}
	nav.opened{
		max-height:9999px; 
	}
	.nav-toggle{
		background:#D7500E; 
		-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
		width:70px;
		height:60px;
		float:right;
		text-indent:-9999px;
		overflow:hidden;
		display:block;
		position:relative;
		top:-60px;
		background:#D7500E url("/common/images/hamburgerIcon.png");}
	.nav-toggle:after {
		content: "."; 
		visibility: hidden; 
		display: block; 
		height: 0; 
		clear: both;
	}

@media screen and (-webkit-min-device-pixel-ratio:1.3),screen and (min--moz-device-pixel-ratio:1.3),screen and (-o-min-device-pixel-ratio:2 / 1),screen and (min-device-pixel-ratio:1.3),screen and (min-resolution:192dpi),screen and (min-resolution:2dppx){
	.nav-toggle{
		background:#D7500E;
		background-image:url("/common/images/hamburgerIcon.png") 
	}
}

@media screen and (min-width:1137px){
	.nav-toggle{
		display:none;
	}
}