/************************************/
	 Iowa DOT Mobile Design  
	 Copyright 2012, Iowa DOT  
	 URL: www.iowadot.gov  
	 AUTHOR: Iowa DOT Web Team 	
	 NOTE: OFFICE STYLES ARE AT THE BOTTOM OF MOBILE.CSS
	 
/************************************/
	
 
 /* HTML5 STYLE ELEMENTS */

header, footer, aside, nav, article {
 display: block;
}
header h1 {
	font-size:16px;
}

/* FOUNDATION DESIGN */

body {
	background-image: url(/images/bannertop.gif);
	background-repeat: repeat-x;
	margin:0 auto;
	background-color:#eddbcc;
	text-align:center;
	font-family:arial, verdana, Helvetica, sans-serif;
	font-size:11px;
	line-height: 170%;
}
/***** Style for the DOT TOP HEADER *****/


/*** Sliver header ***/

#iowa_sliver_bar {
	display:none;   /* IOWA SLIVER HEADER */

}

#iowa_sliver_spacer {
	height:0px !important;
}

/*** END OF SLIVER HEADER ***/
.leftheader {
	width:100%;
	border:0px solid yellow;
	background:url('../images/dotlogo2.gif') no-repeat center;
	margin:0 auto;
	height:38px;
}
.banner {display:none;}
#logo {
background:url('../images/dotlogo2.gif') no-repeat center;
	border:0px solid red;
	width:98%;
	height:38px;
}
#home-link {
	margin:0 auto;
	display: inline-block;
	width: 300px;    /* width of the logo */
	height: 38px;   /* height of the logo */
	top: 0;
	left: 0; /* top-left corner of logo */
	border: 0px solid red;
	text-indent:-9999px
}
#headertop {
	font-family:Arial;
	height:48px;
	width:100%;
	margin:0 auto;
	border:0px solid white;
}
.toprightheader {
	margin:0 20px 0 0;
	height:46px;
	width:2px;
	border:0px solid yellow;
	float:left;
	display:none !important;
}
div#toprightheader-inner {
	margin:0px 0px 0px 0px;
	padding-top:5px;
}
div#bottomindex {
	color:#fff;
	margin:0;
	padding-top:0px;
	padding-left:0px;
	text-align:left;
}
/***** ELEMENT STYLES FOR THE DOT MOBILE PAGE DESIGN *****/


/* H1 page title design */
#header {
	background: #fff; /* creates the top overlap of the right column */
	margin: 0 auto;
	width:100%;
	border:0px solid red;
	padding:0px;
}
/* Page Design */

#holder {
	width:100%;
	background: #fff; /* This image creates the three column faux effect */
	margin: 0 auto;
	padding:0;
	border:0px solid red;
}
#container {
	border:0px solid red;
	width:100%;
	padding:0px 0 10px 0px;
	margin:0 auto;
}
#column2 {
	margin: 0;
	padding: 0;
	background-image: none;
	border:0px solid red;
	width:100%;
	background-color: #fff;
	
}
#column1 {
	margin: 0px;
	padding: 0px;
	background-image: none;
	width: 100%;
	border:0px solid red;
}
#main {
	padding-top: 0px;
	margin: 0 auto;
	text-align:left;
	font-family:arial, verdana, sans-serif;
	background-color:#fff;
	border:0px solid red;
}
#banner {
	background-image:none;
	width:100%;
	height:0px;
	margin:0 auto;
}
/* navigation styles */

#nav {
	display: none;
	float: none;
	width:0px;
}
div#navcol {
	padding: 0px;
	width: 0px;
	float: none;
}
/* content styles */
#content {
	margin: 0 auto;
	width:100%;
	padding: 10px 0 10px 0;
	float:none;
	background-color:#fff;
	font-size:12px;
	border:0px solid red;
	clear:both;
}

#menusu2 {visibility:visible !important;
float:none;
padding-bottom:30px;
margin:0 0 0px 0px;
}


#pad {padding:10px;}
#content h1 {text-align:center;}
.clear {
	clear: both;
	display: block;
	height:1px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
/*  FOOTER STYLE */
img.floatleft {  /* DOT FOOTER LOGO */
	float: none;
	margin:0 auto;
	border:0px;

}
.dotlogofooter {
	padding:5px 0 0 0px;
	float:none;
	margin:0 auto;
	border:0;
	border:0px solid red;
     
}
div#foot {
	background-color:#fff;
	background-image: none;
	padding:0 0 0 5px 0;
	margin:0 auto;
	clear: both;
	height:auto;
	border:0px solid red;
	text-align:center;
}
	
		

.footerpad {
	border:0px solid #ccc;
		font-size:11px;
	font-weight:bold;
	width:100%;
	margin:0 auto;
	padding:0 0 5px 0px;
	text-align: center;
}

.addpad {
margin:0 auto;
padding:0px;

}
#address {
	text-align:center;
font-weight:none;
margin:0 auto;
}

#footer {
		margin:0 auto;
	padding:0;
	border-top: 1px solid #877D6C;
	font-size: 80%;
	background: #FFF;  /* This background color covers the faux column effect that spans the entire holder div */
}
/* miscellaneous styles */
.brclear {
	clear:both;
	height:0;
	margin:0;
	font-size: 1px;
	line-height: 0px;
}
/* ********************************************************************   */
/* ********************************************************************   */
/* ********************************************************************   */
/* ******************** OFFICE.CSS STYLES GO HERE ********************   */
/* ********************************************************************   */
/* ********************************************************************   */
/* ********************************************************************   */
/* ********************************************************************   */

/*  *********   Orange Tab Header    ************  */
#callouts {   /* Shell around orange header */
	clear:both;
	/*  total width of area is 555 px; */
       width:100%;
	   margin:0;
padding:0px;

	height:25px;
	font: bold 145% Arial, Verdana, Helvetica, sans-serif;
	color: #ffffff;
}
	
 /*    Don't Touch */
	
@media all {
#callouts {
	display:block;
}
}
/*   End   */

.headertitle {
	width:100%; /*  If need to make title longer add to width amount, then adjust orangestrip by subtracting  same amount */
	height:22px;
	text-align:center;
	margin:0 auto;
	background-color:#e87d1d;
	border-bottom: 1px solid #e87d1d;
	padding:5px 0 0 0;
}
.orangestrip {
	width:0px; /* subtract width if you need to make headertitle wider */
	height:22px;
	float:none;
	border-bottom: 0px solid #e87d1d;
}
@media all {
.callout {
	margin-right:4px;
}
}
.orangestrip img {
	margin-bottom:0px;
	margin-top:0px;
	padding-bottom:0px;
}
/*    End Orange Header Tag */


.innercontent {
	width:100%;
	padding:0px;
	margin:0 auto;
	border:0px solid black;
	overflow:auto;
	background-color:#fff;
}
.innercontent_right {
width:98%;
	float:left;
	left:0;
	position:absolute;
	margin:0 auto;
	padding:0;
	border:0px solid blue;
	text-align:center;
}
.innercontent_left {
	float:right;
  
	bottom:0px;
		margin:80px auto 0 auto;
		width:100%;
	
}
#searcherl {display:block;
font-weight:bold;
}
#searcherl a{
color:#d66b0d;}
.rightpad {/* right column padding */
	padding-right:0px;
}
.bluecell {
	font-weight:bold;
	padding-left: 10px;
	padding-bottom: 2px;
	padding-top: 2px;
	color:#FFF;
	background: #00215b;
}
.blueshell {
	margin:0 auto;
	width:311px;
	background-image:url('../images/graystrip.jpg');
	background-repeat:repeat-x;
	overflow:auto;
}
.blueheader {
	font-weight:bold;
	padding-left: 10px;
	padding-bottom: 2px;
	padding-top: 2px;
	height:51px;
	color:#FFF;
	background-image:url('../images/browse.jpg');
	background-repeat:no-repeat;
}
.blueheader h1 {
	padding-top:10px;
	color:#FFF;
}
.fineprint {display:none;
padding:0px;}

.mob {display:none;}
.downloadbox {
	float:none;
	width:100px;
	text-align:left;
}

/* ********************************************************************   */
/* ********************************************************************   */
/* ********************************************************************   */
/* ******************** END OFFICE.CSS STYLES  ********************   */
/* ********************************************************************   */
/* ********************************************************************   */
/* ********************************************************************   */
/* ********************************************************************   */