@charset "utf-8";
/* CSS Document */

/* Website colors
	blue		#1592ca
	dark red    #BF0404	
	orange		#F7931E removed with Oct 2016 update
	dark gray	#333333
	light gray	#CCCCCC
	white		#ffffff
*/

/* author - Tiffani Baum & Mike Standley for the Illinois Secretary of State - April 15,2009 */

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

body {
	background-color:#CCCCCC; /* Light Gray */
	margin: 15px 0px 15px 0px;
	padding: 0px;	
	color: #333333;  /* Dark Gray */
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: normal;
}

/*  THIS CLASS WILL NOT DISPLAY */
.print {
	display:none;
}




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

/*  HOME PAGE STYLES */ 


/* banner container for homepage */
#homebancontain900 {
	background-image: url(../images/homebanner.jpg);
	width: 900px;
	height: 293px; 
	margin: auto;   /*if removed the container shifts to the right */
	padding: 0px;
	border: 0px;
}


 /* main dark gray container for main content on homepage */
#homemaincontain {
	background: url(../images/dkgrayguilloche.png) no-repeat top;
	width: 900px;
	height: 350px;
	margin: auto;
	padding: 0px;
	border: 0px;
}

/* main dark gray container for main content on homepage  when there is a message - if message is more than 1 line the height will need to be adjusted */
#homemaincontainmessage {
	background: url(../images/dkgrayguilloche.png) no-repeat top;
	width: 900px;
	height: 405px;
	margin: auto;
	padding: 0px;
	border: 0px;
}


/* message div for home page*/
.homemessage {
	width:820px;
	background-color:#e5e5e5;
	border-top: 4px solid #999999;
	border-bottom: 4px solid #999999;
	padding: 8px;
	text-align:left;
	font-weight:bold;
	margin-bottom:15px;
}

/* Used for  messages on  - orange top and bottom border with a light orange background - dark gray text*/
.homemessageorange {
	width:820px;
	background-color:#f6ddc0;
	border-top: 4px solid #BF0404;
	border-bottom: 4px solid #BF0404;
	padding: 8px;
	text-align:left;
	font-weight:normal;
	margin-bottom:15px;
}

/* Used for  messages on  - orange top and bottom border with a light orange background - dark gray text*/
#homemessageorange {
	width:820px;
	background-color:#f6ddc0;
	border-top: 4px solid #BF0404;
	border-bottom: 4px solid #BF0404;
	padding: 8px;
	text-align:left;
	font-weight:normal;
	margin-bottom:15px;
}

/* all <a href...> tags in this contain will have this style. No class netop nav font  - white to orange */   
#homemessageorange a, a:active, a:visited {
	color: #1592ca;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: bold;
	text-decoration: underline;
}

#homemessageorange a:hover {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: bold;
	text-decoration: underline;
}

/* makes the main table transparent */
#homemainmargins {	
	background: transparent;
	margin: 0px 25px 0px 25px;
	padding-top: 10px;
	padding-bottom: 25px;
	overflow:auto;
}


/* white container for quick links content on homepage   */
#homewhitecontain {
	background-color: #ffffff;
	width: 900px;/*
	height: 110px;*/
	margin: auto;
	padding: 0px;
	border: 0px;
	padding-bottom:0px;
	}

/* margins for quick links container*/
#homewhitecontainmargins {
	background-color: #ffffff;
	margin: 0px 25px 0px 25px; 
	padding: 0px;
	border: 0px;
}	

	
#homewhitecontain a, a:active, a:visited { 
   color: #1592ca; 
   font-family: 'Roboto', sans-serif;
   font-size: 9pt;
   font-weight: normal; 
   text-decoration: none; }
   
#homewhitecontain a:hover { 
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 9pt; 
   font-weight: normal; 
   text-decoration: underline;}	


/* bottom nav font - dk gray to blue  */   
a.navgray, a:active.navgray, a:visited.navgray  {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-decoration: none;
}

a:hover.navgray {
	color: #1592ca; 
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-decoration: underline;
}

/* div to create rows on home page*/
.homerow {
	width:850px;
	margin-left:0px;
	margin-right:0px;
	padding: 5px 0px 10px 0px;
	overflow:auto;
}

/* div used o create a cell in an application  */
.homecell {
	position:relative;
	float:left;
	margin:0px;
}

/*dashed gray border for bottom nav*/
.graydash {	
	border-bottom: #cccccc dashed 1px;	
}


/* icons */

/* Facility Finder*/
 a.facfinder {
	display: block;
	width: 160px;
	height: 60px;
	background: transparent url(../images/icons/facility.png) no-repeat;
}

 a.facfinder:hover {
	background-position: -160px 0;
}

/* Facility Finder Small Icon*/
 a.facfindersm {
	display: block;
	width: 160px;
	height: 50px;
	background: transparent url(../images/icons/facilitysm.png) no-repeat;
}

 a.facfindersm:hover {
	background-position: -160px 0;
}

/* License Plate Renewal */
 a.greenmail {
	display: block;
	width: 159px;
	height: 60px;
	background: transparent url(../images/icons/greenmail.png) no-repeat;
}

 a.greenmail:hover {
	background-position: -160px 0;
}

/* Green Mail Small Icon */
 a.greenmailsm {
	display: block;
	width: 210px;
	height: 50px;
	background: transparent url(../images/icons/greenmailsm.png) no-repeat;
}

 a.greenmailsm:hover {
	background-position: -210px 0;
}


/* License Plate Renewal */
 a.licenseplaterenew {
	display: block;
	width: 200px;
	height: 63px;
	background: transparent url(../images/icons/licenseplaterenew.png) no-repeat;
}

 a.licenseplaterenew:hover {
	background-position: -206px 0;
}


/* License Plate Renewal Small Icon */
 a.licenseplaterenewsm {
	display: block;
	width: 210px;
	height: 50px;
	background: transparent url(../images/icons/licenseplaterenewsm.png) no-repeat;
}

 a.licenseplaterenewsm:hover {
	background-position: -210px 0;
}

/* LifeGoesOn */
 a.lgo {
	display: block;
	width: 160px;
	height: 65px;
	background: transparent url(../images/icons/lifegoeson.png) no-repeat;
}

 a.lgo:hover {
	background-position: -160px 0;
}

/* LifeGoesOn Small Icon */
 a.lgosm {
	display: block;
	width: 160px;
	height: 50px;
	background: transparent url(../images/icons/lifegoesonsm.png) no-repeat;
}

 a.lgosm:hover {
	background-position: -160px 0;
}


/* Pick-a-Plate */
 a.pickaplate {
	display: block;
	width: 160px;
	height: 63px;
	background: transparent url(../images/icons/pickaplate.png) no-repeat;
}

 a.pickaplate:hover {
	background-position: -160px 0;
}

/* Pick-a-Plate Small Icon */
 a.pickaplatesm {
	display: block;
	width: 160px;
	height: 50px;
	background: transparent url(../images/icons/pickaplatesm.png) no-repeat;
}

 a.pickaplatesm:hover {
	background-position: -160px 0;
}


/* Teen Driver Safety */
 a.teendriver {
	display: block;
	width: 173px;
	height: 60px;
	background: transparent url(../images/icons/teendriver.png) no-repeat;
}

 a.teendriver:hover {
	background-position: -175px 0;
}


/* Teen Driver Safety */
 a.teendriversm {
	display: block;
	width: 210px;
	height: 50px;
	background: transparent url(../images/icons/teendriversm.png) no-repeat;
}

 a.teendriversm:hover {
	background-position: -210px 0;
}


 /* END OF HOME PAGE CONTAINER STYLES */
 

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


/* TOP AND BOTTOM NAV STYLES USED ON ALL PAGES */

/* dark gray container for top navigation  */
#topnavcontain {
	background-color: #333333;
	width: 900px;
	height: 60px;
	margin: auto;
	padding: 0px;
	border: 0px;
}

/* margins for dark gray container for top navigation*/ 
#topnavmargins {	
	width: 850px;
	height: 25px;
	margin: 25px 25px 0px 0px;
	padding: 0px;
	border:0px;
	text-align: right;
	float:right;
}

/* all <a href...> tags in this contain will have this style. No class netop nav font  - white to orange */   
#topnavmargins a, a:active, a:visited {
	color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-size: 9pt;
	font-weight: normal;
	text-decoration: none;
}

#topnavmargins a:hover {
	color: #BF0404;
	font-family: 'Roboto', sans-serif;
	font-size: 9pt;
	font-weight: normal;
	text-decoration: underline;
}

/* input text box for the search in the nav bar. No class needed*/
#topnavmargins input[type=text]  {
	font-family: 'Roboto', sans-serif;
	font-size: 9pt;
	font-weight: normal;
	color: #333333;
	background-color: #CCCCCC;
	height: 12pt;
	border: 0px;
	border-radius:0px;
	text-align: center;
	vertical-align:middle;	
	margin-top:0px; 
	margin-left:0px;
	margin-right:2px; 
	display: inline;
}

/* navigation for javascript disabled */

/* noscritp all <a href...> tags in this contain will have this style. No class netop nav font  - white to orange   */ 
#nstopnavmargins {
	text-align:left;	
	}

#nstopnavmargins a, a:active, a:visited {
	color: #1592ca;
	font-family: 'Roboto', sans-serif;
	font-size: 9pt;
	font-weight: normal;
	text-decoration: underline;
}

#nstopnavmargins a:hover {
	color: #BF0404;
	font-family: 'Roboto', sans-serif;
	font-size: 9pt;
	font-weight: normal;
	text-decoration: underline;
}


/* search button for top navigation */
.searchbutton {
	border: 0px;
	margin:0px;
	background: url(../images/textsearch2.gif)  no-repeat;
	width: 55px;
	height: 18px;
	text-align: center;
	vertical-align:middle;
	display: inline;
}

 /* light gray container for home page bottom navigation*/
#homebottomnavcontain {
	background-color: #ffffff;
	width: 850px;
	height: 30px;
	line-height: 23px;
	margin: auto;
	text-align: center;
	vertical-align:middle;
}

/* all <a href....> tags in this container will have this style.  No class needed in the html code */
#homebottomnavcontain a, a:active, a:visited {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-decoration: none;
}

#homebottomnavcontain a:hover {
	color: #1592ca; 
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-decoration: underline;
}

 /* dark gray container for bottom navigation*/
#bottomnavcontain {
	background-color: #333333;
	width: 900px;
	height: 25px;
	line-height: 23px;
	margin: auto;
	padding: 0px;
	text-align: center;
	vertical-align:middle;
}

/* all <a href....> tags in this container will have this style.  No class needed in the html code */   
#bottomnavcontain a, a:active, a:visited  {
	color: #FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-decoration: none;
}

#bottomnavcontain a:hover {
	color: #BF0404;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-decoration: underline;
}

/* all <a href....> tags in this container will have this style.  No class needed in the html code */   
#nsbottomnavcontain {
	text-align:left;
	 margin:0px 25px;
}

#nsbottomnavcontain a, a:active, a:visited  {
	color: #1592ca;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-decoration: underline;
}

#nsbottomnavcontain a:hover {
	color: #BF0404;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-decoration: underline;
}



 /*END OF NAV STYLES USED ON ALL PAGES */
 
 /* ************************************************************************************************************************************** */

/* SECONDARY PAGE CONTAINERS bout us - depart - services etc...*/


/* Main Container */
#contain {
	background-color: #ffffff;
	width: 900px;
	margin: auto;  /*  if removed the container shifts to the right */
	padding: 0px;
	border: 0px;
	
}

/* banner container for secondary pages  */
#bancontain {
	width: 900px;
	height: 188px;
	margin: auto;
	background: url(../images/secondarybanner.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}


#libbancontain {
	width: 900px;
	height: 188px;
	margin: auto;
	background: url(../images/secondarybanner.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}


#archbancontain {
	width: 900px;
	height: 188px;
	margin: auto;
	background:url(../images/secondarybanner.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

 
 /* css image map to link secondary pages to home.html */
 #imagemap  {
  position: relative;
  width: 385px;
  height: 35px;
  top: 28px;
  left: 110px;
  text-decoration:none;
  cursor:pointer;
  }
  
  /* css image map to link secondary pages to home.html makes link invisible*/
  #imagemap a { visibility: hidden;}
  
  /* css image map to link secondary pages to home.html makes link invisible*/
  #imagemap a i { visibility: hidden;}
  
 

 /* main white container for secondary level - */
#secondmaincontain {
	background: url(../images/transparentguilloche.png) no-repeat bottom;
	background-color: #FFFFFF;
	width: 900px;
	height: auto;   
	margin: auto; 
	padding: 0px;
	border: 0px;
 }
 
/* makes the main table transparent */
#secondmainmargins {	
	background: transparent;
	margin: 0px 25px 0px 25px;
	padding-top: 10px;
	padding-bottom: 25px;
	overflow:auto;
}

/* first column no blue right border for the secondary level. Use this when the right side is longer than the left side. */
.secondcolumn1 {
	width:240px;
	position:relative;
	float:left;
	padding:0px;
}

/* first column with blue right border for the secondary level. Use this when the left side is longer than the right side. */
.secondcolumn1b {
	width:240px;
	position:relative;
	float:left;
	border-right: solid 1px #1592ca;
	padding:0px;
}

/* second column with no blue border for the secondary level. Use this when the left side is longer than the right side */
.secondcolumn2 {
	width:600px;
	position:relative;
	float:left;
	padding:0px;
	margin:0px;
}


/* second column with the blue border for the secondary level. Use this when the right side is longer than the left side */
.secondcolumn2b {
	width:600px;
	position:relative;
	float:left;
	border-left: solid 1px #1592ca;
	padding:0px;
	margin:0px;
}


/* columns with links on secondary pages */
.collist1 {
	position:relative;
	float:left;
	width:280px;
	margin:20px 5px 0px 0px;
	padding:0px;
}

/* columns with links on secondary pages */
.collist2 {
	position:relative;
	float:right;
	width:280px;
	margin:20px 0px 5px 0px;
	padding:0px;
}

/* columns with links on landing pages */
.collist1land {
	position:relative;
	float:left;
	width:280px;
	margin:0px 5px 0px 25px;
	padding:0px;
}

/* columns with links on landing pages */
.collist2land {
	position:relative;
	float:right;
	width:280px;
	margin:0px 0px 5px 0px;
	padding:0px;
}

/* main white container for main content on ALL PAGES*/
#maincontain {
	background-color: #FFFFFF;
	width: 900px;
	height: auto;
	margin: 0px auto;
	padding: 0px;
	border: 0px;
 } 
  
/* blue line on secondary pages also sets width - dept page, dept home pages, contact us etc...*/
.rightborder {
	width: 240px;
	border-right: solid 1px #1592ca;
} 

/* main white container with margins */
.mainmargins {
	margin: 0px 25px 0px 25px;
	padding-top: 10px;
	padding-bottom: 25px;
	line-height: 13pt;
	display: inline-block;
	clear: left;
}

	
/* department LEFT side with right margin - margins and text*/
.deptleft {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: normal;
	margin: 0px 25px 10px 0px;
	line-height: 13pt;
}


/* department RIGHT side with left margin - margin and text  Can be used with any tag*/
.deptright {
	margin:0px 0px 0px 25px;
	line-height: 13pt;
}

/* department RIGHT side with left margin - margin and text  Can be used with any tag
.deptlinks {
	margin-top: 0px;
	margin-left: 25px;	
	margin-right: 25px;
	line-height: 13pt;
}*/


/* Tracer - sets top margin only. left and right margins come from secondmainmargins */
.tracer {
	margin: 0px 0px 10px 0px;
}

/* Tracer - sets top margin only. left and right margins come from secondmainmargins */
#tracersearch {
	margin: 0px 0px 10px 0px;
	color: #cccccc;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
}


/* used in breadcrumbs  */   
#tracersearch a, a:active, a:visited  {
	color: #cccccc;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-decoration: none;
}

#tracersearch a:hover {
	color: #1592ca;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-decoration: underline;
}


/* department home page icons. icons are 93x93 */
.icons {
	padding-right:17px;
}
	


/* END OF ALL OTHER PAGE CONTAINER STYLES */

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


/* LINKS */

/* Default links -  blue with orange hover  -used for links within a paragraph of text */
a:link, a:active, a:visited { 
   color: #1592ca; 
   font-family: 'Roboto', sans-serif;
   font-size: 10pt;
   font-weight: normal;
   text-decoration:underline; }
a:hover { 
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 10pt; 
   font-weight: normal;
   text-decoration:underline;}
   
  

/* links as buttons */
a.button, a:active.button, a:visited.button {  
    background: url(../images/buttons/buttonbackground.png) repeat #333333; 
	color:#ffffff;
	font-size:11pt;
	letter-spacing:2px;
	line-height:10pt;
	text-align:center;
	vertical-align:top;
	padding: 5px 20px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	border: #1592ca solid 3px;
   	text-decoration: none;}
   
a:hover.button {  
   	color: #1592ca;
   	text-decoration: underline;}  
	
	/* links as buttons - small text - ucc page */
a.buttonsm, a:active.buttonsm, a:visited.buttonsm {  
    background: url(../images/buttons/buttonbackground.png) repeat #333333; 
	color:#ffffff;
	font-size:9pt;
	letter-spacing:2px;
	line-height:10pt;
	text-align:center;
	vertical-align:top;
	padding: 5px 20px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	border: #1592ca solid 3px;
   	text-decoration: none;}
   
a:hover.buttonsm {  
   	color: #1592ca;
   	text-decoration: underline;}  
	
	
/* 8pt blue with orange hover -used when there is a link in the example text */
a.example, a:active.example, a:visited.example { 
   color: #1592ca; 
   font-family: 'Roboto', sans-serif;
   font-size: 8pt;
   font-weight: normal; 
   text-decoration: underline; }
   
a:hover.example {  
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 8pt;
   font-weight: normal; 
   text-decoration: underline;}
   
/* 8pt blue with orange hover - Back to Top links */
a.blue8, a:active.blue8, a:visited.blue8 { 
   color: #1592ca; 
   font-family: 'Roboto', sans-serif;
   font-size: 8pt;
   font-weight: normal; 
   text-decoration: none; }
   
a:hover.blue8 {  
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 8pt;
   font-weight: normal; 
   text-decoration: underline;}
   
a.blue8b, a:active.blue8b, a:visited.blue8b { 
   color: #1592ca; 
   font-family: 'Roboto', sans-serif;
   font-size: 8pt;
   font-weight: bold; 
   text-decoration: none; }
   
a:hover.blue8b { 
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 8pt; 
   font-weight: bold; 
   text-decoration: underline;}
   
/* facility finder */
 a.blue8u, a:active.blue8u, a:visited.blue8u { 
   color: #1592ca; 
   font-family: 'Roboto', sans-serif;
   font-size: 8pt;
   font-weight: bold; 
   text-decoration: underline; }
   
a:hover.blue8u { 
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 8pt; 
   font-weight: bold; 
   text-decoration: underline;
   }
   
   /* apps for add edit delete on review screen */
 a.blue8un, a:active.blue8un, a:visited.blue8un { 
   color: #1592ca; 
   font-family: 'Roboto', sans-serif;
   font-size: 8pt;
   font-weight: normal; 
   text-decoration: underline; }
   
a:hover.blue8un { 
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 8pt; 
   font-weight: normal; 
   text-decoration: underline;
   }
   
   
  /* 9pt blue with orange hover*/
a.blue9, a:active.blue9, a:visited.blue9 { 
   color: #1592ca; 
   font-family: 'Roboto', sans-serif;
   font-size: 9pt;
   font-weight: normal; 
   text-decoration: none; }
   
a:hover.blue9 {  
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 9pt;
   font-weight: normal; 
   text-decoration: underline;} 

/* facility finder*/
 a.blue9u, a:active.blue9u, a:visited.blue9u { 
   color: #1592ca; 
   font-family: 'Roboto', sans-serif;
   font-size: 9pt;
   font-weight: normal; 
   text-decoration: underline; }
   
a:hover.blue9u { 
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 9pt; 
   font-weight: normal; 
   text-decoration: underline; } 
  
     
/*homepage links -  blue with orange hover  -not bold  */
a.blue10, a:active.blue10, a:visited.blue10 { 
   color: #1592ca; 
   font-family: 'Roboto', sans-serif;
   font-size: 10pt;
   font-weight: normal; 
   text-decoration: none; }
   
a:hover.blue10 { 
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 10pt; 
   font-weight: normal; 
   text-decoration: underline;}
   
/* use for listing of links and oh home pages*/
a.blue10b, a:active.blue10b, a:visited.blue10b { 
   color: #1592ca;
   font-family: 'Roboto', sans-serif;
   font-size: 10pt;
   font-weight: bold;  
   text-decoration: none; }
   
a:hover.blue10b { 
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 10pt; 
   font-weight: bold; 
   text-decoration: underline;}
   
  /* use for listing of links and oh home pages*/
a.blue12b, a:active.blue12b, a:visited.blue12b { 
   color: #1592ca;
   font-family: 'Roboto', sans-serif;
   font-size: 12pt;
   font-weight: bold;  
   text-decoration: none; }
   
a:hover.blue12b { 
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 12pt; 
   font-weight: bold; 
   text-decoration: underline;}
   
      
/* use for listing of links and oh home pages*/
a.list, a:active.list, a:visited.list { 
   color: #1592ca;
   font-family: 'Roboto', sans-serif;
   font-size: 10pt;
   font-weight: bold;  
   text-decoration: none; }
   
a:hover.list { 
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 10pt; 
   font-weight: bold; 
   text-decoration: underline;}
   
/* use on the news pages for version in espanol - puts left padding*/
a.spanishnews, a:active.spanishnews, a:visited.spanishnews { 
   color: #1592ca;
   font-family: 'Roboto', sans-serif;
   font-size: 10pt;
   font-weight: normal;  
   text-decoration: underline;
   padding-left: 75px;}
   
a:hover.spanishnews { 
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 10pt; 
   font-weight: normal; 
   text-decoration: underline;
   padding-left: 75px;}

   
 /* underline links that are titles */
 a.blue10ub, a:active.blue10ub, a:visited.blue10ub { 
   color: #1592ca;
   font-family: 'Roboto', sans-serif;
   font-size: 10pt;
   font-weight: bold;  
   text-decoration: underline; }
   
a:hover.blue10ub { 
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 10pt; 
   font-weight: bold; 
   text-decoration: underline;}
   
a.blue16, a:active.blue16, a:visited.blue16 { 
   color: #1592ca; 
   font-family: 'Roboto', sans-serif;
   font-size: 16pt;
   font-weight: normal; 
   text-decoration: underline; }
   
a:hover.blue16 {  
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 16pt; 
   font-weight: normal; 
   text-decoration: underline;}
   

a.blue16b, a:active.blue16b, a:visited.blue16b { 
   color: #1592ca;
   font-family: 'Roboto', sans-serif;
   font-size: 16pt;
   font-weight: bold;  
   text-decoration: none; }
   
a:hover.blue16b { 
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 16pt; 
   font-weight: bold; 
   text-decoration: underline;} 

/* used in breadcrumbs  */   
a.dkgray8, a:active.dkgray8, a:visited.dkgray8  {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-decoration: none;
}

a:hover.dkgray8 {
	color: #1592ca; 
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-decoration: underline;
}

/* home page tab links - dk gray to blue  */   
a.dkgray10, a:active.dkgray10, a:visited.dkgray10  {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: normal;
	text-decoration: none;
}

a:hover.dkgray10 {
	color: #1592ca; 
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: normal;
	text-decoration: underline;
}

/* home page tab links - dk gray to blue  */   
a.dkgray10b, a:active.dkgray10b, a:visited.dkgray10b  {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: bold;
	text-decoration: none;
}

a:hover.dkgray10b {
	color: #1592ca;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: bold;
	text-decoration: underline;
}

/* used in breadcrumbs  */   
a.ltgray8, a:active.ltgray8, a:visited.ltgray8  {
	color: #cccccc;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-decoration: none;
}

a:hover.ltgray8 {
	color: #1592ca; 
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
	text-decoration: underline;
}

/*used for delete links when approved by Mike */
a.red8, a:active.red8, a:visited.red8 { 
   color: #FF0000; 
   font-size: 8pt;
   font-weight: normal; 
   text-decoration: underline; }
   
a:hover.red10 { 
   color: #FF0000; 
   font-size: 8pt; 
   font-weight: normal; 
   text-decoration: underline;}

/*homepage links -  red used for temp announcements on the home page */
a.red10, a:active.red10, a:visited.red10 { 
   color: #FF0000; 
   font-family: 'Roboto', sans-serif;
   font-size: 10pt;
   font-weight: normal; 
   text-decoration: none; }
   
a:hover.red10 { 
   color: #FF0000; 
   font-family: 'Roboto', sans-serif;
   font-size: 10pt; 
   font-weight: normal; 
   text-decoration: underline;}
   
/* used in breadcrumbs  */   
a.homewhite, a:active.homewhite, a:visited.homewhite  {
	color: #ffffff;
	font-family: 'Roboto', sans-serif;
	font-size: 12pt;
	font-weight: bold;
	text-decoration: none;
}

a:hover.homewhite {
	color: #ffffff; 
	font-family: 'Roboto', sans-serif;
	font-size: 12pt;
	font-weight: bold;
	text-decoration: underline;
}

/* END OF LINKS */

 /* ************************************************************************************************************************************** */
 
/* FONTS */

.text {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: normal;
}

.text8 {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
}

.bold {
	font-weight:bold;		
}

.nobold {
	font-weight:normal;		
}


/*  used on home page for | between nav links*/
.blue9b {
	color: #1592ca;
	font-family: 'Roboto', sans-serif;
	font-size: 9pt;
	font-weight: bold;
}

.blue10 {
	color: #1592ca;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: normal;
}

.blue10b {
	color: #1592ca;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: bold;
}

/* used on the Archives Teaching Packet Pages*/
.blue10geo {
	color: #1592ca;
	font-family:'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: normal;
}

.blue16 {
	color: #1592ca;
	font-family: 'Roboto', sans-serif;
	font-size: 16pt;
	font-weight: normal;
}

.blue16b {
	color: #1592ca;
	font-family: 'Roboto', sans-serif;
	font-size: 16pt;
	font-weight: bold;
}

.blue16geo {
	color: #333333;
	font-family:'Roboto', sans-serif;
	font-size: 16pt;
	font-weight: normal;
}

.blue16geob {
	color: #333333;
	font-family:'Roboto', sans-serif;
	font-size: 16pt;
	font-weight: bold;
}

.dkgray8 {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
}


/* used on information pages for the | between anchor links */
.dkgray8b {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: bold;
}

.dkgray9 {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 9pt;
	font-weight: normal;
}

/* used on information pages for the | between anchor links */
.dkgray12 {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 12pt;
	font-weight: normal;
}

/* used on information pages for the | between anchor links */
.dkgray12b {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 12pt;
	font-weight: bold;
}


.dkgray16 {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 16pt;
	font-weight: normal;
	line-height:18pt;
}

.dkgray16b {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 16pt;
	font-weight: normal;
	line-height:18pt;
}

.dkgray16geo {
	color: #333333;
	font-family:'Roboto', sans-serif;
	font-size: 16pt;
	font-weight: normal;
	line-height:18pt;
}

.dkgray16geob {
	color: #333333;
	font-family:'Roboto', sans-serif;
	font-size: 16pt;
	font-weight: bold;
	line-height:18pt;
}

.ltgray8 {
	color: #cccccc;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
}

.ltgray10 {
	color: #cccccc;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: normal;
}

.orange9 {
	color: #BF0404;
	font-family: 'Roboto', sans-serif;
	font-size: 9pt;
}

.orange9b {
	color: #BF0404;
	font-family: 'Roboto', sans-serif;
	font-size: 9pt;
	font-weight: bold;
}

.orange10 {
	color: #BF0404;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
}

.orange10b {
	color: #BF0404;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: bold;
}

.orange16 {
	color: #BF0404;
	font-family: 'Roboto', sans-serif;
	font-size: 16pt;
	font-weight: normal;
}

.orange16b {
	color: #BF0404;
	font-family: 'Roboto', sans-serif;
	font-size: 16pt;
	font-weight: bold;
}

.orange16geo {
	color: #BF0404;
	font-family:'Roboto', sans-serif;
	font-size: 16pt;
	font-weight: normal;
}

.orange16geob {
	color: #BF0404;
	font-family:'Roboto', sans-serif;
	font-size: 16pt;
	font-weight: bold;
}


/* used for DEI app*/
.red9 {
	color: #ff0000;
	font-size: 9pt;
}


.white8 {
	color: #ffffff;
	font-family: 'Roboto', sans-serif;
	font-size: 8pt;
	font-weight: normal;
}


.white10 {
	color: #ffffff;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: normal;
}


.white10b {
	color: #ffffff;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: bold;
}



/* END OF FONTS */

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

/* REDEFINED TAGS */

/* table tag th and td redfined in APPS section */

/* default text for site */
p {
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: normal;
	line-height: 13pt;
}


/* blue heading 12pt font - Subject/Department on info pages*/
h1 {
	color: #1592ca;
	font-family:'Roboto', sans-serif, "微軟正黑體", "Microsoft JhengHei";
	font-size: 12pt;
	font-weight: bold;
}

/* orange heading*/
h1.two {
	color: #BF0404;
	font-family:'Roboto', sans-serif;
	font-size: 12pt;
	font-weight: bold;
}

/* gray heading*/
h1.three {
	color: #333333;
	font-family:'Roboto', sans-serif;
	font-size: 12pt;
	font-weight: bold;
}

/* orange head 10pt font - Sub head titles in info pages*/
/* p class=notopmargin should be used for information below this tag for proper spacing*/
h2 {
	color: #BF0404;
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: bold;
	margin-bottom: 0px;
	padding: 0px;
}

/* blue heading 11pt font - Press release title on press page*/
h3 {
	color: #1592ca;
	font-family:'Roboto', sans-serif;
	font-size: 10pt;
	font-weight: bold;
}

/* default ul*/
ul {
	 margin:0px 0px 0px 17px; 
	 padding:0;	 
	list-style-type:disc;
	list-style-position:outside;
}

/*  ul with 10px top - use when ul starts under page heading/h2*/
ul.martop10 {
	 margin:10px 0px 0px 17px; 
	 padding:0;	 
}

/* style sets the place of the dash that is used as a nested list */
ul.dash li {
     background:url(../images/lgdash.gif) no-repeat 0 9px; 
     padding-left: 17px; /* the width of your image + some space */
     margin: 3px;
}

/* style sets the place of the dash that is used as a nested list */
ul.dkgray16 li {
    color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 16pt;
	font-weight: normal;
	line-height:18pt;
}

/* default ol*/
ol {
	 margin:0px 0px 0px 21px; 
	 padding:0;
	 list-style-type:decimal;
	 list-style-position:outside; 
}


li {
	line-height: 13pt;
	margin-bottom: 5px;
}

/*  changed 08/21/12 - the list style is now defined in the ul and ol so the number when ol is used works without a class added to the ol
li {
	list-style-type:disc;
	list-style-position:outside;
	line-height: 13pt;
	margin-bottom: 5px;
}*/

li.num {
	list-style-type:decimal;
	list-style-position:outside;
}

li.none {
	list-style-type:none;
	display:block;
}

/* use with ol tag */

li.ol {
	list-style-type:decimal;
	list-style-position:outside;
}


/* used on Archives teaching packet pages */
li.olbotmargin10 {
	list-style-type:decimal;
	list-style-position:outside;
	line-height: 13pt;
	margin-bottom: 10px;
}

/* END OF REDEFINED */

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


/* MISC */

.inline {
	display:inline;
}

/*  THIS CLASS WILL NOT DISPLAY added for phil and tony 04/03/14 */
.none {
	display:none;
}


/* margin used for sections with in a section where h2 is used */
.subsection {
	margin-left:15px;
	margin-top:0px;  
	margin-bottom:0px;
}

/* used to position  ex.TRP app navigation to the right*/
.absolute {
	position:absolute;
}

/* used to position  ex.TRP app navigation to the right*/
.relative {
	position:relative;
}

/* odd and even used in the alternate color table listing on the web */
.odd {
	background-color: #ffffff;
} 

/* odd and even used in the alternate color table listing on the web */	
.even {
	background-color: #eeeeee;
} 

/* used in p tag under the h2 tage to reduce the amount of space between the subhead and the text */
.notopmargin {
	margin-top: 1px;
}

/* used with p tag when ul tag follows p tag - use notopmargin tag on the ul tag also  */
.nobotmargin {
	margin-bottom: 1px;
}
	

/* no top or bottom margin used with p tag when ul tag follows p tag - use nomargin tag on the ul tag also  */
.nomargin {
	margin: 0px;
}

.ltgrayborder{
	border:#cccccc 1px solid;
	padding:5px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
	

/* td class for dashed line on publications pages*/
.dashborder {
	border-bottom:#CCCCCC dashed 1px;
	padding-top:3px;
	vertical-align:bottom;
	line-height: 13pt;
}


/* used to underline row with fee listings*/
.dashborderrow {
	border-bottom:#CCCCCC dashed 1px;
	padding-top:3px;
	vertical-align:bottom;
	line-height: 13pt;
	margin-top: 0px;
	margin-bottom: 5px;
	overflow:auto;
}

/* used to underline row with fee listings*/
.dashborderrowtbbs {
	border-bottom:#CCCCCC dashed 1px;
	padding-top:3px;
	vertical-align:bottom;
	line-height: 19pt;
	margin-top: 0px;
	margin-bottom: 5px;
	overflow:auto;
}


/*  class for dashed line on publications pages talking book and braille library pubs page*/
.dashbordertbbs {
	border-bottom:#CCCCCC dashed 1px;
	padding-top:5px;
	vertical-align:bottom;
	line-height: 19pt;
}


/* div used o create a cell in a row  */
.cell {
	position:relative;
	float:left;
}

.disclaimer { 
	border-top: #cccccc dashed 1px;
	padding-top: 5px;
	font-size: 8pt;
	font-style:italic;
}

.disclaimernb { 
	padding-top: 5px;
	font-size: 8pt;
	font-style:italic;
}

.disclaimernoitalic { 
	border-top: #cccccc dashed 1px;
	padding-top: 5px;
	font-size: 8pt;
}


/* back to top margins - will not print */
.top {
	margin-top: 0px;
	margin-bottom: 35px;
}
	


/* class is used for the accessibility navigation skip */
.hide {
position: absolute;
left: -9000px;
} 

/* Used for  messages on  - orange top and bottom border with a light orange background - dark gray text*/
.message {
	width:820px;
	background-color:#f6ddc0;
	border-top: 4px solid #BF0404;
	border-bottom: 4px solid #BF0404;
	padding: 8px;
	text-align:left;
}

/* Used for  messages on home page trending in tabs  - orange top and bottom border with a light orange background - dark gray text*/
.orangeborder {
	background-color:#f6ddc0;
	border-top: 4px solid #BF0404;
	border-bottom: 4px solid #BF0404;
	padding: 8px;
	text-align:left;
}


/* Used for important messages on applications - dark red top and bottom border with a light red background - dark gray text*/
.importantmessage {
	width:820px;
	background-color:#f3d7d7;
	border-top: 3px solid #cc0000;
	border-bottom: 3px solid #cc0000;
	padding: 8px;
	text-align:left;
	list-style:disc;
	margin-bottom:15px;
	margin-top:5px;
}


/* used to alternate row color for tabular data  jquery*/
tr.alt td {
	background-color: #e1e1e1;
}

/* used to alternate row color for divs jquery*/
div.content  .approw10 {
	border: 0px;
}

/* used to alternate row color for divs jquery*/
div.alt {
	background-color: #e1e1e1;
}

.bottom {
	vertical-align:bottom;
}

/* END MISC TAGS */
/* ************************************************************************************************************************************** */

/* FACILITY APP */

/* used to underline row with fee listings*/
.row1 {
	border-bottom:none;
	padding-top:0px;
	vertical-align:bottom;
	line-height: 13pt;
	margin-top: 0px;
	margin-bottom: 5px;
	overflow:auto;
}


/*END FACILITY APP*/


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

/* FORMS */

form {
	display:inline;
}

/* default textbox */
input[type=text] { 
	font-family:'Roboto', sans-serif;
	font-size: 10pt;
	color:#333333;
	border: solid #cccccc 1px;
	height:18px; 
	margin-top:1px; 
	margin-left:0px; 
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
} 

/* default password textbox */
input[type=password] { 
	font-family:'Roboto', sans-serif;
	font-size: 10pt;
	color:#333333;
	border: solid #cccccc 1px;
	height:18px; 
	margin-top:1px; 
	margin-left:0px; 
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
} 


/* default text area */
textarea { 
	font-family:'Roboto', sans-serif;
	font-size: 10pt;
	color:#333333;
	border: solid #cccccc 1px;
	margin-top:1px; 
	margin-left:0px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

/* default select box */
input[type=select] {
	border:solid #cccccc 1px;
	margin-top:1px; 
	margin-left:0px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

/* default select box */
input[type=checkbox] {
	border:solid #cccccc 1px;
	margin-top:1px; 
	margin-left:0px;
	/*margin-right:15px;*/ /* removed TBaum 09-18-2012  space not needed. For instances where the checkbox is AFTER the label use class="apprpad" */
	border: none;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

/* changed margin-left to 2px on 2-19-13 because radio was getting cut off by margin */
input[type=radio] {
	margin-top:1px; 
	margin-left:2px;	
}

/* button used on ALL applicaiton buttons */
.button {
	background: url(../images/buttons/buttonbackground.png) repeat #333333;
	color:#ffffff;
	font-size:10pt;
	letter-spacing:1.5px;
	line-height:10pt;
	text-align:center;
	vertical-align:top;
	padding-left: 10px;
	padding-right: 10px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	height: 25px;
	width: 100px;
	border: #1592ca solid 3px;
}

.button:hover {
    color:#1592ca;
}

/* button used on ALL applicaiton buttons */
.buttongray {
	background-color:#cccccc;
	color:#999999;
	font-size:10pt;
	letter-spacing:1.5px;
	line-height:10pt;
	text-align:center;
	vertical-align:top;
	padding-left: 10px;
	padding-right: 10px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	height: 25px;
	width: 100px;
	border: #999999 solid 3px;
}

.buttongray:hover {
    color:#999999;
}




/* orange asterisk */
.required {
	font-size:10pt;
	color: #BF0404;
	font-weight: bold;
}

/* entry example on forms */
.example {
	color: #333333;
	font-size: 8pt;
	font-weight: normal;
}

/* 8pt blue with orange hover - used for expand collapse details for form entry example IRP*/
a.detail, a:active.detail, a:visited.detail { 
   color: #1592ca; 
   font-family: 'Roboto', sans-serif;
   font-size: 8pt;
   font-weight: normal; 
   text-decoration: underline;
   vertical-align:baseline;
   padding-left:10px; }
   
a:hover.detail {  
   color: #BF0404; 
   font-family: 'Roboto', sans-serif;
   font-size: 8pt;
   font-weight: normal; 
   text-decoration: underline;
   vertical-align:baseline;
   padding-left:10px; }

/* redefined <label> tag */
label {
	color: #333333;
	font-weight: bold;
}
 
 /* for radio buttons - default for yes or no to a question  */
label.radio {
	font-weight:normal;
	margin-right: 8px;
}

/* for radio buttons - use if radio button has no question   */
label.radiobold {
	font-weight:bold;
	margin-right: 8px;
}

/* use for the divs on forms that are one row text field forms such as the contact forms*/
.form {
	margin-bottom:15px;
}


/* END FORMS */


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


 /* APPS */
 
 /* redefined table tags for apps*/
 
 /* internal apps */
 /* banner container for secondary pages  */
#userappbancontain {
	width: 900px;
	height: 125px!important;
	margin: auto;
	background: url(https://www.ilsos.gov/images/banners/intappsbanner.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

 
 /* sets table width */
 table {
	 
	 
 }
 
 /* color row header - usually used for table cells that are headers in searches*/
th {
	background-color:#333333;
	font-size: 10pt;
	color:#FFFFFF;
	font-weight:normal;
	vertical-align:top;
	text-align:left;
	padding: 5px;
}  

td{
	padding-left:5px;
}
	
	
/* used for right aligned navigation when a user is logged in.  i.e. TRP */
.appnav {
	width:200px;
	top:0px;
	right:0;
	text-align:right;
}

/* used for right aligned navigation when a user is logged in.  i.e. TRP */
.appnav li {
	list-style-type:none;
}

.nonsearchhelp {
	position:relative;
	float:right;
}

/* created with new templates */
.rightnavapp {
	position:relative;
	float:right;
	text-align:right;
}

/*TRP*/
fieldset {
	width:825px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

/*TRP*/
fieldset .approw {
	width:825px;
}


/* Used for error messages on applications - dark red top and bottom border with a light red background - dark gray text*/
.error {
	width:820px;
	background-color:#f3d7d7;
	border-top: 3px solid #cc0000;
	border-bottom: 3px solid #cc0000;
	padding: 8px;
	text-align:left;
	list-style:disc;
	margin-bottom:15px;
	margin-top:5px;
}

/* Used for error messages on applications - dark red top and bottom border with a light red background - dark gray text*/
.facilityhomeerror {
	width:820px;
	font-family:'Roboto', sans-serif;
	color:#333333;
	font-size:10pt;
	background-color:#f3d7d7;
	border-top: 3px solid #cc0000;
	border-bottom: 3px solid #cc0000;
	padding: 8px;
	text-align:left;
	list-style:disc;
	margin-bottom:15px;
	margin-top:5px;
}



/* color row header - usually used for table cells that are headers in searches*/
.headerrow {
	background-color:#333333;
	font-size: 10pt;
	color:#FFFFFF;
	font-weight:normal;
	vertical-align:top;
	text-align:left;
	padding: 5px 2px;
}



/* div used to create the row of an application */
.approw  {
	width:850px;
	margin-top: 0px;
	margin-bottom: 20px;
	overflow:auto;
}

/* div used to create the row of an application--use on payment pages and pages that list user entered information */
.approw10 {
	width:850px;
	margin-top: 0px;
	margin-bottom: 10px;
	overflow:auto;
}

/* div used o create a cell in an application  */
.appcell {
	position:relative;
	float:left;
}

/* use this with the appcell class to add 30px to the right*/
.apprpad { 
	padding-right:30px;}
	
/* use this with the appcell class to add 20px to the right*/
.apprpad20 { 
	padding-right:20px;}



/* Used for row in  pages that display information i.e. reciept page, summary page, review page  */
.detailrow  {
	width:850px;
	border-bottom:#CCCCCC dashed 1px;
	padding-top:10px;
	overflow:auto;
}

/* SHOULD BE USED WITH detailrow(above) Used for row in  pages that display information.  This is the first cell that holds the label.  a  i.e. reciept page, summary page, review page*/
.detailcell-label {
	width:150px;
	position:relative;
	float:left;
	font-weight:bold;
}

/* SHOULD BE USED WITH detailrow(above) and detailcell-label(above). Used for rows in  pages that display information.  This is the first cell that holds the label.  a  i.e. reciept page, summary page, review page*/
.detailcell-info {
	width:auto;
	position:relative;
	float:left;
}

.detailcell-fee {
	width:100px;
	position:relative;
	float:left;
	text-align:right;
}



/* div used to place required and buttons on the app */
.buttonrow  {
	width:850px;
	margin-top: 20px;
	margin-bottom: 10px;
	border-top:#CCCCCC dashed 1px;
	padding-top:10px;
	overflow:auto;
}

/* SHOULD BE USED WITH buttonrow(above). The cell needs to be the first cell in the button row used to place required and buttons on the app */
.buttoncell-req {
	width:100px;
	position:relative;
	float:left;
}

/* SHOULD BE USED WITH buttonrow(above) and buttoncell-req used to place  the  buttons to the right */
.buttoncell-button {
	width:750px;
	position:relative;
	float:left;
	text-align:right;
}

/* SHOULD BE USED WITH buttonrow(above) and buttoncell-req used to place  the  buttons to the right */
.noreq {
	width:850px;
	position:relative;
	float:left;
	text-align:right;
}

.right {
	text-align:right;
}

.noborder {
	border:none;
	padding-top:0px;
}



/* button row 
.buttonrow { 
	position:relative;
	left:600px;
}*/

/* File button on app static pages*/
 a.file {
	display: block;
	width: 121px;
	height: 28px;
	background: transparent url(../images/buttons/file.png) no-repeat;
	text-indent: -9999em;
}

 a.file:hover {
	background-position: -121px 0;
}


/* File button on app static pages*/
 a.search {
	display: block;
	width: 121px;
	height: 28px;
	background: transparent url(../images/buttons/search.png) no-repeat;
	text-indent: -9999em;
}

 a.search:hover {
	background-position: -121px 0;
}

/* File button on app static pages*/
 a.join {
	display: block;
	width: 121px;
	height: 28px;
	background: transparent url(../images/buttons/join.png) no-repeat;
	text-indent: -9999em;
}

 a.join:hover {
	background-position: -121px 0;
}

/* Submit button on app  pages*/
 .submit {
	display: block;
	width: 121px;
	height: 28px;
	background: transparent url(../images/buttons/submit.png) no-repeat;
	text-indent: -9999em;
	border:0px;
}

 .submit:hover {
	background-position: -121px 0;
	border:0px;
}

/* Continue button on app  pages*/
 .continue {
	display: block;
	width: 121px;
	height: 28px;
	background: transparent url(../images/buttons/continue.png) no-repeat;
	text-indent: -9999em;
	border:0px;
}

 .continue:hover {
	background-position: -121px 0;
	border:0px;
}

/* Reset button on app  pages*/
 .reset {
	display: block;
	width: 121px;
	height: 28px;
	background: transparent url(../images/buttons/reset.png) no-repeat;
	text-indent: -9999em;
	border:0px;
}

 .reset:hover {
	background-position: -121px 0;
	border:0px;
}



/* LICENSE PLATE GUIDE */

/* div used to create the row of the license plate home pages */
.lprow {
	width:850px;
	margin-top: 0px;
	margin-bottom: 20px;
	padding-bottom:10px;
	overflow:auto;
}


/* div used o create a cell in the license plate home pages  */
.lpcell {
	width:170px;
	vertical-align:top;
	text-align:center; 
	position:relative;
	float:left;
}

.lprow img {
	padding-bottom: 5px;
}

/* END LICENSE PLATE GUIDE */

/*  END OF APPS */

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

/* JAVA DEVELOPMENT */

/* DEV banner container 900 */
#bandevcontain {
	width: 900px;
	height: 178px;
	margin: auto;
	background: url(../images/banners/bannerdev.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* DEV banner container 730 */
#bandevcontain730 {
	width: 900px;
	height: 148px;
	margin: auto;
	background: url(../images/banners/bannerdev730.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* LOCAL banner container 900 */
#banlocalcontain {
	width: 900px;
	height: 178px;
	margin: auto;
	background: url(../images/banners/bannerlocal.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* LOCAL banner container 730 */
#banlocalcontain730 {
	width: 900px;
	height: 148px;
	margin: auto;
	background: url(../images/banners/bannerlocal730.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* STAGE banner container 900 */
#banstagecontain {
	width: 900px;
	height: 178px;
	margin: auto;
	background: url(../images/banners/bannerstage.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* STAGE banner container 730 */
#banstagecontain730 {
	width: 900px;
	height: 148px;
	margin: auto;
	background: url(../images/banners/bannerstage730.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}


/* User App Banner- Business to Business - TRP */
#b2bappbancontain {
	width: 900px;
	height: 188px;
	margin: auto;
	background: url(../images/banners/b2bappsbanner.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}


/* DEV User App Banner - Business to Business - TRP*/
#b2bappbandevcontain {
	width: 900px;
	height: 188px;
	margin: auto;
	background: url(../images/banners/b2bappsbannerdev.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* Local User App Banner - Business to Business - TRP*/
#b2bappbanlocalcontain {
	width: 900px;
	height: 188px;
	margin: auto;
	background: url(../images/banners/b2bappsbannerlocal.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* Stage User App Banner - Business to Business - TRP*/
#b2bappbanstagecontain {
	width: 900px;
	height: 188px;
	margin: auto;
	background: url(../images/banners/b2bappsbannerstage.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* User App Banner- SOS Users ONLY - TRP */
#intappbancontain {
	width: 900px;
	height: 148px;
	margin: auto;
	background: url(../images/banners/intappsbanner.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}


/* DEV User App Banner -SOS Users ONLY - TRP*/
#intappbandevcontain {
	width: 900px;
	height: 148px;
	margin: auto;
	background: url(../images/banners/intappsbannerdev.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* Local User App Banner - SOS Users ONLY - TRP*/
#intappbanlocalcontain {
	width: 900px;
	height: 148px;
	margin: auto;
	background: url(../images/banners/intappsbannerlocal.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* Stage User App Banner - SOS Users ONLY - TRP*/
#intappbanstagecontain {
	width: 900px;
	height: 148px;
	margin: auto;
	background: url(../images/banners/intappsbannerstage.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}



/* ***************************************************************************************************************** */
/* SSL styles */
/* added per Mike Standley on 09-06-2012*/


/* SSL banner container for secondary pages  */
#bancontainssl {
	width: 900px;
	height: 178px;
	margin: auto;
	background: url(https://www.ilsos.gov/images/secondarybanner.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

#libbancontainssl {
	width: 900px;
	height: 199px;
	margin: auto;
	background: url(https://www.ilsos.gov/images/librarybanner.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}


#archbancontainssl {
	width: 900px;
	height: 199px;
	margin: auto;
	background:url(https://www.ilsos.gov/images/archivesbanner.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

 /* links as buttons */
a.buttonssl, a:active.buttonssl, a:visited.buttonssl { 
    background: url(https://www.ilsos.gov/images/buttons/buttonbackground.png) repeat #333333;
	color:#ffffff;
	font-size:11pt;
	letter-spacing:2px;
	line-height:10pt;
	text-align:center;
	vertical-align:top;
	padding: 5px 20px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	border: #1592ca solid 3px;
   	text-decoration: none;}
   
a:hover.buttonssl {  
   	color: #1592ca;
   	text-decoration: underline;}  
	
/* button used on ALL applicaiton buttons */
.buttonssl {
	background: url(https://www.ilsos.gov/images/buttons/buttonbackground.png) repeat #333333;
	color:#ffffff;
	font-size:10pt;
	letter-spacing:1.5px;
	line-height:10pt;
	text-align:center;
	vertical-align:top;
	padding-left: 10px;
	padding-right: 10px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	height: 25px;
	width: 100px;
	border: #1592ca solid 3px;
}

.buttonssl:hover {
    color:#1592ca;
}

/* jquery toggle */
.toggledetail { 
   color: #1592ca; 
   font-family: 'Roboto', sans-serif;
   font-size: 8pt;
   font-weight: normal; 
   text-decoration: underline;
   vertical-align:baseline;
   padding-left:10px;
   cursor:default; }
   
 .togglebox {
   width:800px;
   border:#1592ca solid 2px;
   border-radius:5px;
   background-color:#e5e5e5;
   padding:3px; 
   margin-bottom:20px; }



/* for CFT IRP app */
table.secondary { 
	width:100%;
	}

table.secondary  th { 
	background-color:#696969; 
	color:#fff;
	}	


/* DEV banner container 900 */
#bandevcontainssl {
	width: 900px;
	height: 178px;
	margin: auto;
	background: url(https://www.ilsos.gov/images/banners/bannerdev.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* DEV banner container 730 */
#bandevcontain730ssl {
	width: 730px;
	height: 148px;
	margin: auto;
	background: url(https://www.ilsos.gov/images/banners/bannerdev730.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* LOCAL banner container 900 */
#banlocalcontainssl {
	width: 900px;
	height: 178px;
	margin: auto;
	background: url(https://www.ilsos.gov/images/banners/bannerlocal.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* LOCAL banner container 730 */
#banlocalcontain730ssl {
	width: 730px;
	height: 148px;
	margin: auto;
	background: url(https://www.ilsos.gov/images/banners/bannerlocal730.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* STAGE banner container 900 */
#banstagecontainssl {
	width: 900px;
	height: 178px;
	margin: auto;
	background: url(https://www.ilsos.gov/images/banners/bannerstage.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* STAGE banner container 730 */
#banstagecontain730ssl {
	width: 730px;
	height: 148px;
	margin: auto;
	background: url(https://www.ilsos.gov/images/banners/bannerstage730.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}


/* User App Banner- Business to Business - TRP */
#b2bappbancontainssl {
	width: 900px;
	height: 188px;
	margin: auto;
	background: url(https://www.ilsos.gov/images/banners/b2bappsbanner.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}


/* DEV User App Banner - Business to Business - TRP*/
#b2bappbandevcontainssl {
	width: 900px;
	height: 188px;
	margin: auto;
	background: url(https://www.ilsos.gov/images/banners/b2bappsbannerdev.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* Local User App Banner - Business to Business - TRP*/
#b2bappbanlocalcontainssl {
	width: 900px;
	height: 188px;
	margin: auto;
	background: url(https://www.ilsos.gov/images/banners/b2bappsbannerlocal.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}

/* Stage User App Banner - Business to Business - TRP*/
#b2bappbanstagecontainssl {
	width: 900px;
	height: 188px;
	margin: auto;
	background: url(https://www.ilsos.gov/images/banners/b2bappsbannerstage.gif) no-repeat top;
	border: 0px;
	padding: 0px;
}