/*****************************************************************************************************
****************************************************************************************************
				
				
Description		- Basic style sheet used for the look-and-feel of the Department of Office Administration
				  website.
				  
Notes			- The !important keyword is used with some classes that override default values of ID tags.
				  It allows previous values to be overwritten when they would normally not be replaced.
				  For more info please see http://www.w3.org/TR/CSS2/cascade.html#important-rules

				20090519 - Created
****************************************************************************************************
*****************************************************************************************************/



/*****************************************************************************************************
				DEFAULT STYLES
*****************************************************************************************************/
/*defaults all undesginated padding, margin, and borders to zero*/
* 
{
	padding: 0px;
	margin: 0px;
	border: 0px;
}

body
{
	text-align: center;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background-color:#243458;
/*	background-color: #DDDDDD;
	background-image: url(images/background2.gif);
	background-size:contain;
*//*	background-repeat: norepeat;
	background-position: left top;
*/	
/*	background:url(background2.gif) repeat-x #0a306a;width:100%;padding-top:15px;
*/}


/*wrapper envelops the header, content, and footer stuff and keeps it all together*/
#wrapper
{
	text-align: left;
	background-color: #FFFFFF;
	width: 960px;
	border: 0px;
	margin: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	position: relative;
}	
/*****************************************************************************************************
*****************************************************************************************************/

/*****************************************************************************************************
				HEADER AND BANNER
*****************************************************************************************************/
/*This is the bit that places the nice banner on the front pages*/
#banner 
{
	position: absolute;
	left: 0px;
	top: 24px;
	width: 960px;
	height: 90px;
	border: 0px;
	margin: 0px;
	padding: 0px; 
}
	
#banner img
{
	width: 960px;
	height: 90px; 
}

#acjcbanner 
{
	position: absolute;
	left: 0px;
	top: 24px;
	width: 960px;
	height: 90px;
	border: 0px;
	margin: 0px;
	padding: 0px;
}
	
#acjcbanner img
{
	width: 960px;
	height: 90px; 
border-bottom-color: rgb(249, 192, 51);	
}
	
/*This extends the front header to encompass the large banner*/
#header 
{
	position: relative;
	padding: 0px;
	height: 114px;
	margin: 0px;
	background-color: #FFFFFF;
	
	
	border-bottom: 1px solid #f9c033;
    border-bottom-style: solid;
    border-bottom-color: rgb(249, 192, 51);
    border-bottom-width: 1px;
/*	border-image:url(images/header_background.gif);
*//*	background-repeat: norepeat;
	background-position: left top;	
*/}
/*****************************************************************************************************
*****************************************************************************************************/


/*****************************************************************************************************
				HEADER LINKS
*****************************************************************************************************/
#header ul, #header li 
{ 
	display: inline; 
	margin: 0px; 
}

#header ul 
{
	list-style-image: none; 
}
	
#header li 
{ 
	padding: 0px 10px 0px 0px; 
}

#header a:link, #header a:visited, #header a:hover, #header a:active 
{ 
	vertical-align: 50%; /*this property is not supported in IE for Mac 5.2...big deal!  No one even uses that anyway.*/
	color: #333399; 
	font: bold 0.75em Arial, Helvetica, Tahoma, sans-serif;
	text-decoration: none; 
}

#header a:hover 
{ 
	color: #0066CC; 
	text-decoration: underline; 
}

#header a:active 
{ 
	color: #000066; 
}
/*****************************************************************************************************
*****************************************************************************************************/




















/*this is the style used for the blue line image underneath the banner*/
#blue_line 
{
	position:absolute;
	margin-left: 0px;
	top: 114px;
	background-image:url(images/header_background.gif);
}
/*****************************************************************************************************
*****************************************************************************************************/


/*****************************************************************************************************
				ACCESSIBILITY
*****************************************************************************************************/
/*skip navigation structure style.  This helps AD users skip to the main content area so that programs 
like windows narrator doesn't read through all the navigation links and such.*/
.skip a:active
{
	position: static;
	width: auto;
	height: auto;
}
.skip label, .skip a, .skip a:hover, .skip a:visited 
{
	position: absolute;
	left: 0px;
	top: -500px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*this style makes the elements to which it is applied invisible to users but not to text readers.*/
.invisible 
{
	position: absolute;
	left: 0px;
	top: -200px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/*****************************************************************************************************
*****************************************************************************************************/




/*****************************************************************************************************
				HEAD LINKS AND SEAL
*****************************************************************************************************/
/*Notice that the head is a system of relative and absolute divs. Keeps every div within the head hard 
positioned in relation to the head. If things can't be found, it is probably because the absolute div just 
ain't big enough. You will have to fiddle a bit in here*/
/*seal image and search style*/
#seal 
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 177px;
	height: 27px;
	border: 0px;
	margin: 0px;
	padding: 0px;
}

#headlinks 
{
	position: absolute;
	z-index: 1;
	left: 170px;
	top: 0px;
	width: 550px;
	height: 27px;
	border: 0px;
	margin: 0px;
	padding: 0px;
	background-image: url(images/header_background.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#headlinks ul 
{
	display: inline;
	vertical-align: 50%;/*this property is not supported in IE for Mac 5.2.  The 1 guy viewing this page with a mac and IE will see content aligned to the top.*/
	padding: 0px;
	list-style:none; 
}

#headlinks li 
{
	display: inline;
	vertical-align: 50%;/*this property is not supported in IE for Mac 5.2.  I think there are about 12 people worldwide using IE on a mac*/
	padding: 0px;
	list-style:none; 
}
/*****************************************************************************************************
*****************************************************************************************************/



/*****************************************************************************************************
				SEARCH
*****************************************************************************************************/
#search 
{
	position: absolute;
	z-index: 0;
	left: 540px;
	top: 1px;
	width: 75px;
	height: 24px;
	border: 0px;
	margin: 0px;
	padding: 0px;
	text-align: right;
	vertical-align: middle;
}
	
#search img
{
	margin-right: 5px;
}
/*this style sets the look-and-feel of the search input (text) box.  Currently we make it look "sunk in".*/
#searchField, textarea, input.border 
{
	border: inset;
	border-color: #CCCCCC;
	border-width: 1px; 
}

#googlestuff
{
	position: absolute;
	vertical-align: middle;
	left: 825px;
	top: 0px;
	width: 130px;
	height: 24px;
	border: 0px;
	margin: 0px;
	padding: 0px;
}

/*this class makes sure the input button and text box are aligned correctly, if this is not declared
they tent to hide underneath the banner image*/
#googlestuff input
{
	vertical-align: middle;
}



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












/*****************************************************************************************************
				BREADCRUMBS
*****************************************************************************************************/
/*Breadcrumb styles */
#crumb 
{
	margin: 0px; 
	padding: 5px 0px 0px 5px; 
	font: normal 0.7em Arial, Helvetica, Tahoma, sans-serif; 
	background-color: #FFFFFF; 
}

#crumb, #crumb a:link, #crumb a:visited, #crumb a:hover, #crumb a:active 
{ 
	color: #666699; 
	text-decoration: none; 
	}

#crumb a:hover   
{ 
	color: #0066CC;
	text-decoration:underline; 
}
/*****************************************************************************************************
*****************************************************************************************************/



/*****************************************************************************************************
****************************************************************************************************
				CONTENT TEXT
				
Description		- These class determines the look and feel of the page.  It can be applied to any 
				  element to ensure a unified look-and-feel.
*****************************************************************************************************/
.content 
{
	background-color: #FFFFFF;
	color: #000;
	padding-left: 10px;
	text-decoration: none;
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size: 0.8em;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	margin-left: 10px;
}
	
.content p.indent 
{
	padding-left: 10px; 
}

.paraleftjust {
	text-align:left;
}

/*this style should be used when there is need for "fine print" paragraph or text.*/
.small 
{
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size: 0.75em;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
	
.content strong 
{ 
	padding-bottom: 10px; 
	font: bold 1.0em Arial, Helvetica, Tahoma, sans-serif;
 
}
	
.content ul 
{
	list-style-type:none;
	margin:0px;
	padding-top: -5px;
	padding-right: 0px;
	padding-bottom: -5px;
	padding-left: 0px;
}
	
.content ul li 
{
    background-repeat: no-repeat;
    background-position: 0px 6px;
    padding: 5px 0px 0px 30px;
    background-image: url(images/gray_arrow_wide.gif);
}
#libackground
{
	background-image:none;
}
.content blockquote 
{
	padding-left: 30px;
}
	
/*.content h1 
{
	padding-top: 2px;
	padding-bottom: 2px;
	color: #006;
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
}
*/.smallheader 
{
	font-size: 1em;
	font-weight: bold;
	color: #333;
	margin-left: -20px;
}
.smheader2 {
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size: 12px;
	padding-bottom: 5px;
	margin-bottom: 5px;
	color: #333;
	margin-left: 15px;
}


.content h2 {
	font: bold 1.5em Arial, Helvetica, Tahoma, sans-serif;
	color: #006;
	padding-bottom: 10px;
}

.content h3 {
	font-size:14px;
	padding:3px 8px 3px 8px;
	letter-spacing:.5px;
	margin-top:10px;
	margin-bottom:4px;
	border-bottom:2px solid #fbda5f;
	display:inline-block;color:#fff;
}

.darkblue {
	background:#1e3965;
}


.acjcbrown {
	background:#372a00;
}

.h3li {
	font: bold small Arial, Helvetica, Tahoma, sans-serif;
}
	
/*h10{font-size:14px;padding:3px 8px 3px 8px;background:#2566C6;letter-spacing:.5px;margin-top:10px;margin-bottom:4px;border-bottom:2px solid #fbda5f;display:inline-block;color:#fff;}
.bold {
	font-weight:bold;
}
h11{font-size:14px;padding:3px 8px 3px 8px;background:#372a00;letter-spacing:.5px;margin-top:10px;margin-bottom:4px;border-bottom:2px solid #fbda5f;display:inline-block;color:#fff;}
*/		
/*.content h2 
{
	color: #006;
	font: bold 1.25em Arial, Helvetica, Tahoma, sans-serif;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
*/	
.noborderh3 
{
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	color: #006;
	border:none;
	border-bottom-color: white;
	
}
	
.content hr 
{
	border: 1px solid rgb(153, 153, 153);
}
h4 
{
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size: 1.1em;
	color: #006;
	text-indent: 30px;
}
h5 
{
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size: 1em;
	color: #006;
	text-indent: 40px;
}
h6 
{
	text-indent: 50px;
	font-size: 1em;
	color: #006;
	font-weight: bold;
}

/* for Zoe's histlog test */

.collapsible {
  background-color: #FFF;
  cursor: pointer;
  padding: 8px;
  border: none;
  text-align: left;
  outline: none;
  font: bold 14px Arial, Helvetica, Tahoma, sans-serif;
  color: #006;
  width: 100%;
}

.collapsible:hover {
    background-color: #C3C3C3;
}

.collapsible:after {
  content: '\02C5';
  font-size: 10px; 
  font-size: 1em;
  color: #000;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\02C4";
  color: #000;
}

.collapsible_content {
	padding: 0px 15px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	background-color: #FFF;
	color: #000;
	text-decoration: none;
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}

.secondrow {
	background-color:#E4E4E4;
}

.notice_box_header {
	background-color: #1E3965; 
	color: #fff; 
	border: medium solid #1A3259;
	text-align: center; 
	font-size: 14px; 
	font-weight: bold; 
	margin-top: 10px;
	padding: 5px;
	display: block;
	clear: both;
}

.notice_box {
	border-bottom: medium solid #0E1B30; 
	border-right: medium solid #0E1B30; 
	border-left: medium solid #0E1B30; 
	margin-top: -1px; 
	padding: 10px 15px;
	font-weight: bold;
	display: block;
/*	box-shadow: 0px 1px 6px #b3a102;*/
}

.notice_box_special {
	background-color: #DF9400; 
	border-color: #9d6801;
}

.notice_box_button {
	background-color: #DF9400; 
	border: medium solid #9d6801; 
	border-radius: .5em;	
	color: #fff; 
	font-size: 14px; 
	font-weight: bold; 
	margin: 0px auto 10px auto;
	padding: 5px 10px;
	text-align: center; 
	width: 200px; 
}

.election_notice_container {
	background-color: rgba(169,185,208,.4); 
	clear: both; 
	height: 300px;
	display: block;
	margin-bottom: 20px;
	padding: 30px; 
}

.election_notice_content {
	display: inline-block; 
	padding-left: 20px;
	text-align: center; 
	width: 425px;
}

.election_notice_content h2 {
	border-bottom: 2px solid #fbda5f; 
	color: #1E3965; 
	display: inline-block;
	font-size: 2em; 
	margin-bottom: 5px; 
	padding-bottom: 0px; 
	padding-top: 8px;
}

/*****************************************************************************************************
*****************************************************************************************************
 		Retention page styles
*****************************************************************************************************/

/* There was stuff here, but I moved it to retentionzoe.css */

/*****************************************************************************************************
****************************************************************************************************
				OL styles
******************************************************************************************************/
/*this tyle removes the default list background image and ensures that ordered lists (OL) do not 
display the arrows.*/
.content ol 
{
	padding: 5px 0px 5px 30px;
	font-weight: normal;
}

/*this style does the same as the one above*/	
.content ol li 
{
	background-image: none;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 7px;
	padding-left: 0px;
}


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



/*****************************************************************************************************
****************************************************************************************************
				UL styles
Description		- These styles can be used to produce embedded bullet lists.
******************************************************************************************************/
/* the level1, level2, and level3 UL styles are used to create standard UL bullet types.  They can be
used alone, or embedded within each other.

i've added the clear, disc, square, and circle classes which are easier to understand than level1, etc.
they produce the bullet styles after which they are named (clear produces a list with no bullets).  the
previous style names have been left here for backwards compatibility.
*/
ul.level1, ul.level2, ul.level3, ul.level4, ul.clear, ul.disc, ul.square, ul.circle, ul.upperalpha 
{
	padding: 5px 0px 5px 30px;
	margin:0px;
}
/*level1 does not show any bullets*/
ul.level1 li, ul.level2 li, ul.level3 li, ul.level4 li, ul.clear li, ul.disc li, ul.square li, ul.circle li
, ul.upperalpha li 
{
	background-image: none;
	list-style-image: none;
	margin:0px;
	padding: 2px 0px 0px 0px;
}

/*level2 produces filled circle bullets*/
ul.level2 li, ul.disc li
{
	list-style-type: disc;
}
/*level3 produces filled square bullets*/
ul.level3 li, ul.square li
{
	list-style-type: square;
}
/*level4 produces hollowed circle bullets*/
ul.level4 li, ul.circle li 
{
	list-style-type: circle;
}
	
/*this style places the new.gif image as the bullet*/
ul li.new, .content ul li.new
{
	background-image: url('images/new.gif');
	list-style-image: none;
	background-repeat:no-repeat;
	background-position: 0px 0px;
	padding: 2px 0px 0px 30px;
}
/*****************************************************************************************************
*****************************************************************************************************/



/*****************************************************************************************************
****************************************************************************************************
				CONTENT LINKS
				
Description		- These class determines the look and feel of the links for the content class.
*****************************************************************************************************/
.content a:link, .content a:active, .content a:hover, .content a:visited 
{
	color: #333399;
	text-decoration: none;
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
}
	
.content a:visited 
{ 
	color: #666699; 
}
	
.content a:hover 
{ 
	color: #0066CC;  
	text-decoration: underline; 
}
	
.content a:active 
{ 
	color: #666699; 
}
/*****************************************************************************************************
*****************************************************************************************************/


/*****************************************************************************************************
****************************************************************************************************
				CONTENT TABLES AND FORMS
								
Description		- This style is used for tables and forms within the content class.
*****************************************************************************************************/
/*form content not given a class tag will be invisible	
.content .form , .content .select{ 
	font-size: 11px; 
	font-family: Arial, Helvetica, sans-serif; 
	border: 1px solid #888;  
	background: #E4E4E4; 
	padding: 1px 3px 1px 3px;}*/

/*default tables will be invisible but td tags with class="grey" will be kick-butt grey! Wow.*/
.content td, .content td.grey 
{ 
	padding: 0px 0px 0px 3px; 
}
	
.content table 
{
	margin: 0px 0px 15px 0px;
	border: #CCCCCC;
	text-align: left;
}

/*this table style makes sure that the table width is 100% and that the content is alligned to
the top of the cells.  So far it is used only in dlc.html*/
table.wide 
{ 
	width: 100%;
	vertical-align: top; 
}
table.wide td 
{
 	vertical-align: top; 
}
	
.content table.borders 
{ 
	border-width: 1px;
	border-style: outset;
	border-color: #CCCCCC;
	border-collapse: separate; 
	text-align: left;
}
	
.content table.borders td
{ 
	border-width: 1px;
	padding: 1px;
	border-style: inset;
	border-color:#CCCCCC;
	vertical-align: top;
}
	
.content tr.odd 
{ 
	background-color: #99CC00; 
}
	
.content td.grey 
{ 
	background: none; 
	padding: 4px 4px 4px 4px; 
	border:#CCCCCC solid 1px; 
}
	
.content select 
{
	border-width: 1px; 
	border-style: solid; 
	border-color: #6699CC;
}
	
.content dd 
{
	padding-left: 30px;
}
	
/*this style is used to create tables without borders.  By default all tables are created this way,
however this style can be used when it needs to be explicitely stated.*/
table.borderless 
{ 
	border-width: 0px;
	border-style: none;
	border-color: #FFFFFF;
	border-collapse: none; 
	text-align: left;
}
	
table.borderless td
{ 
	border-width: 0px;
	padding: 1px;
	border-style: hidden;
	border-color: #FFFFFF;
	vertical-align: top;
}
/****************************************************************************************************
******************************************************************************************************/

/*****************************************************************************************************
				CONTENT_FULL
*****************************************************************************************************/
#content_full 
{
	margin-right: 10px;
	padding-left: 10px;
	margin-left: 10px;
	color: #000;
	text-decoration: none;
	position: relative;
	padding-top: 5px;
	padding-right: 1px;
	padding-bottom: 5px;
}
/*****************************************************************************************************
*****************************************************************************************************/



/*****************************************************************************************************
				CONTENT_PARTIAL AND SIDEBAR
*****************************************************************************************************/

#content_partial 
{
	margin-left: 10px;
	color: #000;
	text-decoration: none;
	float: none!important;
	font-size: 0.8em;
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 10px;
	margin-right: 10px;
}

/*#content_partial  a:link, #content_partial  a:active, #content_partial  a:hover, #content_partial  a:visited 
{
	color: #333399;
	text-decoration: none;
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
}
	
#content_partial  a:visited 
{ 
	color: #666699; 
}
	
#content_partial  a:hover 
{ 
	color: #0066CC;  
	text-decoration: underline; 
}
	
#content_partial  a:active 
{ 
	color: #666699; 
}
*/
.histlogheader 
{
	font-size: 1.3em;
	color: #006;
	font-weight: bold;
	padding-left: -20px;
	margin-left: -20px;
	font-family: Arial, Helvetica, Tahoma, sans-serif;
}
#content_partial h1 
{
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size: 1.5em;
	color: #006;
}
.acjcbottomborder {
border-bottom-color: rgb(249, 192, 51);	
}
#content_partial p 
{ 
	text-decoration: none;
	padding-left: 25px;
}
	
#sidebar 
{
	position: relative;
	float: right;
	width: 225px;
	background: none;
	word-wrap: break-word;
	margin-left: 10px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 5px;
	border-bottom-width: thin;
	border-left-width: thin;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #006;
	border-left-color: #006;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #006;
	margin-top: 15px;
}
	
/*this makes sure that any image placed inside the sidebar does not make the sidebar expand and overflow.
this can happen if the image is bigger than the sidebar width. */
#sidebar ul, #sidebar li 
{
	width: 180px!important;
	vertical-align: text-top!important; 
}

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



/*****************************************************************************************************
				CONTENT_LEFT, CONTENT_CENTER, CONTENT_RIGHT
*****************************************************************************************************/
#content_left, #content_right, #content_center 
{
	float: left;
	background-color: #FFFFFF;
	text-align: left;
	vertical-align: top; 
	width: 242px;
	margin: 0px;
	padding: 0px 0px 0px 20px; 
	font-size: 1em;
}
	
#content_center 
{
	float: none!important;
	margin-left: 262px;
	margin-right: 260px;
	padding: 0px 0px 0px 0px;
}
	
#content_right 
{
	float: right!important;
	padding-left: 0px;
	padding-right: 10px;
}


/*this class is to be applied to the content_right and content_left styles when  they are required to
take up half the screen.*/
.content_lrhh
{
	width: 45% !important;
}
/****************************************************************************************************
*****************************************************************************************************/

/*****************************************************************************************************
				FOOTER
*****************************************************************************************************/
/*Footer styles*/
#footer 
{
	clear: both;
	padding: 10px;
	margin-top: 5px;
/*	background-color: #FFFFFF;
*/	color: #FFFFFF;
	font: normal 0.625em Arial, Helvetica, Tahoma, sans-serif;
	text-align: center;
	height: auto;
}
	
#footer p 
{ 
	text-decoration: none;
	padding-top: 0px;
}

#footer ul, #footer li 
{ 
	display: inline; 
	margin: 0px; 
	padding: 0px; 
	list-style-image: none
}
	
#footer li 
{ 
	padding: 0px 10px 0px 0px; 
}
	
#footer a:link, #footer a:visited, #footer a:hover, #footer a:active
{ 
	color: #FFFFFF; 
	text-decoration: none; 
}
	
#footer a:hover 
{ 
	color: #FFFFFF;  
	text-decoration: underline; 
}

/*this style is used to for certain lines, words, or paragraphs that need to stand out.*/
.important
{
	color: #FF0000;
	font-style: italic;
}
/****************************************************************************************************
*****************************************************************************************************/


        
/****************************************************************************************************
          UNIQUE
		  
Description	- These styles are unique and not widely used except in special cases, but it makes sense
			  to put them here in case they are used again or if they are useful to have in the future.
*****************************************************************************************************/
/*this style is used in a couple of pages to display text withing a "box" as the name implies.  Basically
it just displays the text inside a div tag with black borders.*/
div.box 
{
	width: 97%;
	border-width: 1px;
	border-style: none;
	border-color: #000000;
	border-collapse: separate;
	padding: 2px; 
	text-align: left;
	font-weight: bold; 
	margin-bottom: 5px; 
}

/*
This style reproduces the <blockquote> indentation and is prefered over using <blockquote> for anything
other than actual quotations.
*/	
.quote 
{
	font-style: italic;
	padding: 10px 20px 20px 20px;
	margin-top: 10px;
	margin-bottom: 20px;	
}


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


/****************************************************************************************************
          Retention Pages
		  
Description	- These styles are used for retention pages
*****************************************************************************************************/

/* These are used for the Retention Current page */
.retent_main_search_container {
    display: block;
    margin-left: 20px;
	width: 880px;
    margin-right: 20px;
    border: 1px solid #1e3965;
    box-shadow: 0px 1px 9px rgba(0,0,0,0.09);
    background-color: #F2F5FB;
}

.retent_search_header {
	background-color: #1e3965;
	color:#fff;
	font-size: 14px;
	font-weight: bold;
	padding: 5px;
}

.retent_search_dropdown {
	border: 1px solid #ccc;
	border-radius: 0.20rem;
	background-color: #fff;
	font-family: Arial, Helvetica, Tahoma, sans-serif;	
	color:#4D4D4D;
	font-size: 14px;
	padding: 5px 20px 5px 10px;	
	margin: 5px;
	height: 55px;
	width: 383px;
}

/* These are used for the Retention FAQ sidebar */
.retent_sidebar_header {
	background: #1E3965; 
	color: white; 
	font-size: 16px; 
	font-weight: bold;
	padding-bottom: 5px;
	padding-top: 5px;
	text-align: center; 
	width: 100%; 
}

/* These are used on the judge list pages */
.retent_jl_search_container {
    background-color: #F2F5FB;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;	
    border: 1px solid #1e3965;
    box-shadow: 0px 1px 9px rgba(0,0,0,0.09);
	display: block;
    margin-right: 20px;
	width: 674px;
}

.retent_header_rounded {
	background-color: #1e3965;
	color:#fff;
	font-size: 14px;
	font-weight: bold;
	padding: 5px;
	border-top-left-radius: .5rem;
	border-top-right-radius: .5rem;
}

.retent_jl_search_content {
	padding: 10px 20px 0px 20px;
}

.retent_jl_search_dropdown {
	border: 1px solid #ccc;
	border-radius: 0.20rem;
	background-color: #fff;
	font-family: Arial, Helvetica, Tahoma, sans-serif;	
	color:#4D4D4D;
	font-size: 14px;
	padding: 5px 20px 5px 10px;	
	margin: 5px;
	height: 45px;
	width: 280px;
}

.retent_second_dropdown {
	float:right;
}

.retent_jl_search_text {
	padding: 5px 25px 10px 25px;
}

.retent_header {
	background:#1e3965;
	border-bottom:2px solid #fbda5f;
	color:#fff;
	display:inline-block;
	font-size:16px;
	font-weight: bold;
	letter-spacing:.5px;
	margin-bottom:10px;
	padding:3px 8px 3px 8px;
	text-align:left;
	width: 660px;
}

.retent_jl_container {
	box-shadow: 0px 1px 9px rgba(0,0,0,.09); 	
	margin: 0px 0px 15px 5px; 
	min-height: 240px;
	width: 670px; 
}

.retent_jl_picture {
	display: inline-block; 
	float: left; 
	padding-right: 10px;
}

.retent_jl_recommedation {
	background-color: #336737; 
	color: #fff; 	
	display: inline-block; 
	float: right;
	font-size: 20px; 
	font-weight: bold; 
	height: 35px; 
	line-height: 35px; 
	text-align: center; 
	width: 240px; 
}

.retent_jl_name {
	display: inline-block;
	font-size: 22px; 	
	height: 30px; 
	padding-top: 5px; 
}

.retent_jl_reco_text {
	color: #8d8d8d; 
	display: inline-block; 
	float:right;
	font-size: 14px; 
	height: 30px; 
	margin: 0px; 
	padding-top: 5px;  
	text-align: center; 
	width: 240px; 
}

.retent_jl_location {
	color: #8d8d8d;
	display: inline-block; 
	font-size: 14px; 
	height: 30px; 
	padding-top: 5px; 
}

.retent_jl_content {
	font-size: 14px; 
	min-height: 109px;
	padding: 10px; 
}

.retent_jl_footer {
	border-top: 1px solid #dadada; 
	padding: 10px;
	width: 650px; }

/* These are used on the individual pages */
#retention h1 {
	font-size: 30px;
}

#retention h2 {
	color: #939393;
}

#retention h4 {
	color: #243458; 
	font-size: 18px; 
	font-weight: bold;
	padding-bottom: 8px; 	
	padding-left: 0px; 
	padding-top: 5px; 
	text-indent: 0px;
}

#retention p {
	padding-bottom: 8px; 
	padding-left: 0px
}

#retention li {
	padding-bottom: 8px;
}

.blank_header {
	float:left;
	width:80%;
}

.retent_ind_recommendation {
	background-color: green;
	color: white;
	float: right;
	font-size: 30px;
	font-weight: bold;
	margin-top: 10px; 
	padding:5px;
	text-align: center;
	width: 350px;
}

.retent_ind_photo {
	float:left; 
	padding-bottom: 5px;
	padding-right: 15px; 
}

.retent_ind_survey {
	float: right; 
	margin-left: 5px;
}

.retent_ind_fullreport_row {
	margin: 30px 0px 10px 0px;
	text-align: center;
	width: 100%; 
}

/* These are used on the Retention FAQ page */
.faq_collapsible {
    background-color: #FFF;
    cursor: pointer;
    padding: 15px 10px 15px 10px;
    border-top: thin solid #C1C1C1;
    text-align: left;
    outline: none;
    font: normal 1.5em Arial, Helvetica, Tahoma, sans-serif;
    color: #006;
	width: auto;
}

.faq_collapsible:hover {
    background-color: #C3C3C3;
}

.faq_collapsible:before {
	content: "\02C3";	
	color: #C3C3C3;
	padding-right: 15px;
}

.faq_collapsible:hover:before {
	color: #006;
}

.faq_active:before {
	content: "\02C5";	
}


/****************************************************************************************************
          GENERIC Pages
		  
Description	- These styles are used for special stylings and appear in multiple sections
*****************************************************************************************************/

.underline
{
	text-decoration:underline!important;
}
	
.italic
{
	font-style:italic!important;
}
	
.bold
{
	font-weight:bold!important;
}

/* this style can be used to indent text or items*/
.indent 
{
	padding-left: 40px;
}

/*this style is used for backward compatibility with the old CSS styles used.  Any spans using this
style should be removed.*/
.subhead 
{
	color: #666666;
	font-weight: bold;
}
	
/*centers content*/
.center 
{
	text-align: center;
}
	
/*aligns the content to the top of the container (most used in tables)*/
.align_top 
{
	vertical-align: top;
}

/*these styles is used in the employer page tables*/
.tableheader 
{
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size: 1.50em!important;
	color: #000000;
}
.rowheader 
{
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size: 1.05em!important;
	color: #0000FF;
}
.emphasis 
{
	font-size: 1.05em!important;
	color: #000000;
}

	
/*this style is mainly used on some header tags to make them stand out*/
.headstrong 
{
	color: #660033!important;
}
/****************************************************************************************************
*****************************************************************************************************/

.blueheader 
{
	font-size: 1em;
	font-weight: bold;
	color: #006;
}
.content_partial_h4_indent
{
	margin-left:15px;
}
.content_partial_h5_indent
{
	margin-left:30px;
}
.content_partial_h6_indent
{
	margin-left:40px;
}
#content_partial p 
{
/*	text-align: justify;
*/	margin-top: 1px;
	margin-right: -3px;
	padding-top: -10px;
	padding-bottom: -10px;
/*	padding-left: 3px;
*/}

.listindent 
{
	text-indent: 25px;
}
.selectionheader 
{
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size: 1.4em;
	color: #006;
	font-weight: bold;
	border-bottom-width: thin;
	border-bottom-style: inset;
	border-bottom-color: #E9E041;
	background-color: #DBE0EE;
	text-align: left;
}
.top {
	text-align: right;
	font-weight: bold;
	color: #000;
	float: right;
}
.LargeHeader {
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size: 28px;
	color: #006;
	font-weight: bold;
	text-align: center;
}
.LargeCenter {
	text-align: center;
}
.verticalaligncenter {
		vertical-align:central;
}
/* *************************** ACS SK 03/22/2018 ************************** */
.date-heading h3{line-height:30px;font-size:1.7em;}.view .date-nav-wrapper .date-next{-moz-border-radius:0px 5px 5px 0px;border-radius:0px 5px 5px 0px;background:none repeat scroll 0 0 #dfdfdf;float:none;padding:5px 0;position:absolute;right:0px;text-align:right;top:0px;width:auto;z-index:1;font-size:12px;}

.nobackground {
	background-color:transparent;
}
.darkred {
	color: #db0000;
}
.nobackgroundnoborder {
	border:none;
	background-color:transparent;	
}
#pagebottom {
	margin-top: 0px;
	padding-top: 0px;
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size: 0.8em;
	text-align: center;
	height: auto;
	color:#CCC;
}
#pagebottom a:link 
{ 
	color: #FFFFFF;
	text-decoration:none;
}
#pagebottom a:hover 
{ 
	color: #FFFFFF;  
	text-decoration: underline; 
}
#pagebottom a:visited 
{ 
	color: #FFFFFF;  
	text-decoration:none;
}
#pagebottom p 
{ 
	text-decoration: none;
	padding-top: 0px;
}
#navbar {
	width: 960px;
}
#top_bar_right {
    background: url(images/topbarSOA.gif) no-repeat -170px 0;
    width: 7px;
    height: 27px;
    float: right;
}
.textleftjust {
	text-align:left;
}

.regularbold
{
	font-family: Arial, Helvetica, Tahoma, sans-serif;
	font-size: 1.05em;
	font-weight:bold;
}
/*.mission
{ 
	text-decoration: none;
	padding-top: 0px;
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 0.8em;
}*/
.mission_statement 
{
    width: 100%;
    background-color: #EA9C02;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -10px;
    padding: 25px;
}