/************************************/
	 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;
}
header h2 {
	font-size: 14px;
}
nav {
	text-align: center;
	margin: 0 auto;
	padding: 0px;
	width: 100%;
}
nav ul {
	display: none;
}
.horizontal-nav {
	display: none;
}

article {
	padding: 10px;
}

   
   
   
   
   /*  For select pull-down menu inact the two lines below */ 
/* ##################################################### */
    
    nav select { display: inline-block; }
/* ##################################################### */ 
 

    
 

/* BASE 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 *****/

.leftheader {
	width: 100%;
	border: 0px solid yellow;
	background: url('../images/dotlogomobile.jpg') no-repeat center;
	margin: 0 auto;
	height: 38px;
}
#logo {
	background: url('../images/dotlogomobile.jpg') 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;
}
/*****  Orange header *****/

/*  *********   Orange Tab Header    ************  */
#callouts {   /* Shell around orange header */
	display: none;
	clear: both;
	/*  total width of area is 555 px; */
	width: 100%;
	padding-top: 5px;
	padding-left: 0px;
	padding-bottom: 5px;
	height: 25px;
	font: bold 145% Arial, Verdana, Helvetica, sans-serif;
	color: #ffffff;
	
	border:0px solid black;
}
	
 /*    Don't Touch */
	
@media all {
#callouts {
	display: block;
}
}
/*   End   */


.orangestrip {
	width: 100%; /* subtract width if you need to make headertitle wider */
	height: 20px;
	float: right;
	border-bottom: 1px solid #e87d1d;
}
@media all {
.callout {
	margin-right: 4px;
}
}
.orangestrip img {
	margin-bottom: 0px;
	margin-top: 0px;
}
/***** 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;
}
div#navcol {
	padding: 0px;
	width: 0px;
	float: none;
	margin: 0px;

}
#banner {
	display: none;
	background-image: none;
	width: 100%;
	height: 0px;
	margin: 0 auto;
}
/* navigation styles */

#nav {
	border: 0px solid red;
	display: block;
	width: 100%;
	margin: 0 0 10px 0;
	padding: 0px;
background-color: #E8E8E8;
}
/* content styles */
#content {
	margin: 0 auto;
	width: 100%;
	padding: 0px;
	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, .footerpad960 {
	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;
}
/* ********************************************************************   */
/* ********************************************************************   */
/* ********************************************************************   */
/* ******************** MENU.CSS STYLES GO HERE ********************   */
/* ********************************************************************   */
/* ********************************************************************   */
/* ********************************************************************   */
/* ********************************************************************   */



/* The following CSS is only for the demo */


#navigationColumn {
	width: 100%;
	float: left;
	border: 0px solid #d0cfcf;
	font-family: arial, verdana, sans-serif;
	line-height: 1.2;
	background-color: #e5e4e3;
	padding-top: 2px;
	padding-bottom: 5px;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 13px;
	text-decoration: none;
}
#navigationColumn2 {
	float: left;
	border: 0px solid #d0cfcf;
	font-family: arial, verdana, sans-serif;
	line-height: 1.2;
	background-color: #e5e4e3;
	padding-top: 2px;
	padding-bottom: 9px;
	margin-bottom: 8px;
	font-weight: bold;
	font-size: 13px;
	text-decoration: none;
}
.strip {
	margin-top: 4px;
	padding-bottom: 0px;
	border-top: 2px solid #fff;
}
.invstrip {
	margin-top: 1px;
	padding-bottom: 2px;
	border-top: 0px solid #fff;
}

	/* End of demo CSS */
	
	/****************************************************************************************
	* 	LAYOUT CSS FOR THE MENU
	****************************************************************************************/
	a. {
 text-decoration:none;
}
.main {	/* Main menu items */
	color: #00215b;
	text-decoration: none;
	font-weight: bold;
	font-size: 11px;
	margin-bottom: 0px;
	padding-left: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-right: 0px;
}
.main:visited {	/* Main menu items */
	color: #00215b;
	text-decoration: none;
	font-weight: bold;
	font-size: 11px;
	margin-bottom: 0px;
	padding-left: 0px;
	padding-top: 3px;
	padding-bottom: 0px;
	padding-right: 0px;
}
.main:hover {	/* Main menu items */
	color: #00215b;
	text-decoration: none;
	font-weight: bold;
	font-size: 11px;
	margin-bottom: 0px;
	padding-left: 0px;
	padding-top: 3px;
	padding-bottom: 0px;
	padding-right: 0px;
}
.main:active {	/* Main menu items */
	color: #00215b;
	text-decoration: none;
	font-weight: bold;
	font-size: 11px;
	margin-bottom: 0px;
	padding-left: 0px;
	padding-top: 3px;
	padding-bottom: 0px;
	padding-right: 0px;
}
.mobilemain {	/* Main menu items */
	margin-left: 0px;
	margin-top: 0px;
	padding-top: 6px;
	padding-left: 20px;

}
.mobilemain:hover {	/* Main menu items */
	margin-left: 0px;
	margin-top: 0px;
	padding-top: 6px;
	padding-left: 20px;

}
.mobilemain:visited {	/* Main menu items */
	margin-left: 0px;
	margin-top: 0px;
	padding-top: 6px;
	padding-left: 20px;
	background-image: url("../images/orangebuttonmobile.gif");
	background-repeat: no-repeat;
}
.arrow {
	background-image: none;
	padding-top: 3px;
	margin: 0 auto;
	padding-bottom: 3px;
	text-align: center;
	text-decoration: none;
	margin-bottom: 0px;
}
.mobilearrow {
	background-image: none;
	padding-top: 3px;
	margin: 0 auto;
	padding-bottom: 3px;
	text-align: center;
	text-decoration: none;
	margin-bottom: 0px;
}
.arrow:hover {
	background-color: #f7e098;
	cursor: pointer;
	cursor: hand;
}
#dhtmlgoodies_listMenu {	/* Sub menu */
	color: #00215b;
	font-weight: bold;
	font-size: 13px;
	margin-bottom: 3px;
}
#dhtmlgoodies_listMenu ul li ul li {	/* Sub Sub menu */
	color: #000;
	font-size: 0.79em;
	font-weight: bold;
	margin-bottom: 5px;
	padding-top: 6px;
	padding-bottom: 5px;
}
#dhtmlgoodies_listMenu .activeMenuLink {	/* Styling of active menu item */
	color: #e87d1d;
	text-decoration: none;
	font-weight: bold;
	font-size: 11px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	margin: 0 auto;
	text-align: center;
}
#dhtmlgoodies_listMenu .activeMenuItem {	/* Styling of active menu item */
	color: #f27e09;
	font-weight: bold;
	font-size: 11px;
}
/*
	No bullets
	*/	

	/*
	No margin and padding
	*/

/* ********************************************************************   */
/* ********************************************************************   */
/* ********************************************************************   */
/* ******************** 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 */
	min-height: 100%;
	
	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 */


h1#title {
	font-size: 13pt
	text-align:center;
	float:none;
}
.innercontent {
	width: 320px;
	padding: 0px;
	margin: 0 auto;
	border: 0px solid black;
	overflow: visible;

	background-color: #fff;
	column-count: 2;
	
}

.innercontent_left {
	border: 0px solid blue;
	float: none;	
	margin: 0 auto;
}

#innercontent_right {
	float: none;
	margin: 0 auto;
	padding: 0;
	border: 0px solid red;
	
	
	text-align: center;
}
}
.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 {
	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;
}

.servicesLeft {
	background-color: #E8E8E8;
	width:95%;

border:0px solid red;
padding-right:0px;
margin-right: 0px;
margin-bottom:5px;

}
ol.checkmark {
padding-top:2px;
margin-left:25px;
background-position:center top; 
}

ol.checkmark li{border:0px solid red;
background-image:url(../images/checkmark.gif);
background-repeat:no-repeat;
list-style-type: none;


padding-left:20px;
padding-right:0px;
font-weight:none;
margin-left:20px;
margin-bottom: 12px;
text-align:left;
                }
                
                .steps{
                display:none;
                
}

h2.title {
                color: #3d7dab;
                font-size: 16pt;
                font-weight: 400;
                margin-top: -10px;
                padding-top: 10px;
                display: inline;
}

.innercontent {
                width: 100%;
                padding:10px;
                border: 0px solid black;
                text-align:left;
                overflow: auto;
}
.innercontent_right {
                float: none;
                width: 100%;
                margin:0;
                padding:0;
                position:relative;
}
.innercontent_left {
                float: none;
                width: 100%;
                margin: 0px;
                padding: 0px;
                position:relative;
}

/* ** Homepage ** */


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