@charset "utf-8";
/* core.css */


/*****************************************************************************************************
				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;
	font-size: 16px;
/*	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 {
    position: absolute;
    z-index: 1;
}
	
#banner img
{
	width: 960px;
	height: 90px;
	display: block;
}

#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);	
	border-radius: 0 !important;
}
	
/*This extends the front header to encompass the large banner*/
#header 
{
	position: relative;
	padding: 0px;
	height: 114px;
	margin: 0px;
	background-color: #FFFFFF;
	border-radius: 0 !important;
	
	
	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: 10;
	left: 750px;
    right: 180px;
	top: 1px;
	width: 75px;
	height: 24px;
	border: 0px;
	margin: -5px;
	padding: 0px;
	text-align: right;
	vertical-align: middle;
}
	
#search img
{
	margin-right: 25px;
    padding-top: 3px;
    margin-right: 10px;
}
/*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;
	width: 100px;
}

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

#search,
#googlestuff {
    position: absolute;
    z-index: 10;
}

/*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;
    margin-right: -20px;
}

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


/*****************************************************************************************************
				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-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;
}

.election_notice_text {
	text-align: left; 
	padding: 25px; 
	font-weight: bold
}

/*****************************************************************************************************
****************************************************************************************************
				UL Styles (List 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;
}
/****************************************************************************************************
******************************************************************************************************/


/*****************************************************************************************************
				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;
}
/****************************************************************************************************
*****************************************************************************************************/


/****************************************************************************************************
          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;
    background-color: #0a306a;
}
#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;
}