/* general */

html {
font-size: 125%;
}

body#mol3col	{
	background: #fff;
	color: #333;
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 50%; /* two font resizes takes away em bug in IE6 with small and smaller text size, and also gives a baseline of 1em=10px */
}

html, body, div#container { /* for footer technique: the document must be at least as high as the browser window. */
min-height: 100%;
width: 100%;
height: 100%;
}

 html>body, html>body div#container { /* for footer technique: the document must be at least as high as the browser window. */
height: auto;
} 


img	{
	border: 0;
	display: block;  /*get rid of whitespace underneath image in NS7/Opera, as when inline, treats line as slightly bigger than image */
	}
	
.topleft 
	{
	position: absolute;
 	left: 0px;
 	top: -500px;
 	width: 1px;
 	height: 1px;
 	overflow: hidden;
 	}
	
	.imagereplacement {
		position: relative;
		margin: 0;
		padding: 0;
		font-size: 8px;
		color: #E8E8E8;
		background: transparent;
		/* hide the following from ie5/Mac \*/
		
		overflow: hidden;
		/* */
	}
	
	.imagereplacement span {
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 1; /* for Opera 5 and 6 */
	}
	
	div#container {
	width: 100%;
	padding: 0;
	border: 0;
	margin: 0;
	position: absolute; /* for footer technique: The footer must be placed at the bottom of the document: Place the footer, along with the rest of the page, inside a container div that is absolutely positioned to the top left edge of the browser window. The bottom of this container div is now the bottom of the document */
	top: 0;				/* for footer technique */
   left: 0;				/* for footer technique */

  }	
  
/* header graphic(s) */
  
div#header {
	padding: 0;
	border: 0;
	margin: 0;
	background: #0041A2 url(images/header_bg.gif) right bottom no-repeat;
	height: 65px;
	}


/* "Employee services online" banner and navigation within this banner */
		
div#topnavbanner {
    padding: 0;
	border: 0;
	border-top: 1px #fff solid;
	margin: 0;
	background: url(images/topnavbanner_bg.gif) left top repeat-x;
	height: 33px; /* non box model compliant browsers will include the border top in this height (that is, IE5/PC), but the actual image's height should over ride this CSS height, so image should display in its correct proportions. */
}

div#topnavbanner a, div#topnavbanner a:link, div#topnavbanner a:visited, div#topnavbanner a:hover, div#topnavbanner a:active, div#topnavbanner a:focus {
background: transparent;
color: #333;
text-decoration: none;
}

div#topnavbanner ul { /* this may need a width for ie5/mac: let's try to avoid putting a width on this, as would need to be in ems, and then if also have padding, how does one work with ems and the box model hack? */
			float: right;
			padding: 7px 10px 0 0;
			margin: 0;
			list-style-type: none;
			font-size: 1.2em;
			font-family: Arial, Helvetica, sans-serif;
		}
		
div#topnavbanner li {
 display: inline;
}
		
h1#banner_employee, h1#banner_employee span {
	width: 260px;
	height: 29px;
	padding: 0;
	border: 0;
	margin: 0;
	background: transparent url(images/banner_employee.gif) left top no-repeat;
}

h1#banner_administration, h1#banner_administration span {
	width: 160px;
	height: 29px;
	padding: 0;
	border: 0;
	margin: 0;
	background: transparent url(images/banner_administration.gif) left top no-repeat;
}

h1#banner_mol, h1#banner_mol span {
	width: 160px;
	height: 29px;
	padding: 0;
	border: 0;
	margin: 0;
	background: transparent url(images/banner_mol.gif) left top no-repeat;
}

		
/* left column and primary nav */

div#leftcolumn { /* set to specified maximum left nav width */
  width: 128px; 
	padding: 0;
	padding-bottom: 9px;
   border: 0;
	margin: 0;
	font-size: 1.2em;
	position: absolute; /* z-index can only be applied to elements that also have a value set for the position property: so have this to gain control of stacking order */
z-index: 10;
left: 0;
background: transparent url(images/leftcolumn_bg.gif) left bottom no-repeat;
}
	
ul#primarynav
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
}

ul#primarynav li { /* just to make sure there is no default behavior from li element: ie5/PC still leaves margin-top and/or bottom by default: this rule applies to all li's under primarynav */
	padding: 0;
	border: 0;
	margin: 0;
	margin-bottom: 1px;
	/* line-height: 1.3; border-bottom on the a element appears below the bg image on the a element for some of the links in the left nav in NS6/7/Firefox PC, when use line-height on either the UL or the LI. Same thing happens when apply line-height on the a element below: note: applying line-height to a element below increases the height between and within the LI's, as with UL and LI application */
}


ul#primarynav a  /* styles all link states, then only list the exceptions */ 
    {
	display: block;
	width: 127px; /* width of bg plus 2px: so 2px extra of border-bottom: Win/IE5 and Win/IE6 will not recognise the entire block as an active link unless a width is added to the "a" element */
	padding-top: 3px;
	padding-right: 7px;
	padding-bottom: 3px;
	padding-left: 5px;
	border: 0;
	border-bottom: 1px solid #CEE8FD;
	margin: 0;
	color: #000;
	background: transparent url(images/bg_leftnavitems_arial.jpg) repeat-y left top;
	text-decoration: none;
	voice-family: "\"}\"";   /* IE5/Win stops here: Box model hack */
voice-family: inherit;
width: 115px;	/* for box model compliant browsers */ 
}
	
html>ul#primarynav a {  /* for UA's that support CSS2 selectors (not IE6/Win) and box model, but also have parsing bug exploited above (Opera 5): rule also helps those with parsing bug to get back on track */
width: 115px;
}


ul#primarynav a:hover, ul#primarynav a:focus, ul#primarynav a:active /* (:focus for NS6/7 keyboard activation: a:active for IE6 keyboard activation ) */
{ 
width: 128px; /* same as bg's width */
padding-right: 8px;
background: transparent url(images/bg_leftnavitems_over_arial.jpg) repeat-y left top;
voice-family: "\"}\"";   /* IE5/Win stops here: Box model hack -- thanks Tantek!! */
voice-family: inherit;
width: 115px;	/* for box model  compliant browsers */ 
}
	
	html>ul#primarynav a:hover, html>ul#primarynav a:focus, html>ul#primarynav a:active  { /* for UA's that support CSS2 selectors (not IE6/Win) and box model, but also have parsing bug exploited above (Opera 5): rule also helps those with parsing bug to get back on track */
	width: 115px;
	}

	
ul#primarynav a#primarynavselected {
width: 128px;
padding-right: 8px;
font-weight: bold;
background: transparent url(images/bg_leftnavitems_active_arial.jpg) repeat-y left top;
voice-family: "\"}\"";   /* IE5/Win stops here: Box model hack -- thanks Tantek!! */
voice-family: inherit;
width: 115px;	/* for box model  compliant browsers */ 
}
	
	html>ul#primarynav a#primarynavselected { /* for UA's that support CSS2 selectors (not IE6/Win) and box model, but also have parsing bug exploited above (Opera 5): rule also helps those with parsing bug to get back on track */
	width: 115px;
	}
	
	/* nested submenu */
	
	ul#primarynav ul.submenu { /* using a class in case want multiple sub navs */
    padding: 0;
	margin: 0;
	list-style-type: none;
	margin-top: 1px;
	font-size: 0.95em;
	}
	

ul#primarynav ul.submenu a
{
    display: block;
	width: 126px; /* minus 1 from ul#primarynav a -- allowing for margin-left: bg is 124px, so still get 2px border bottom   */
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 7px;
	padding-right: 7px;
	border: 0;
	border-bottom: 1px solid #CEE8FD;
	margin: 0;
	margin-left: 1px;
	color: #000;
	background: transparent url(images/bg_submenu.jpg) repeat-y left top;
	text-decoration: none;
	voice-family: "\"}\"";   /* IE5/Win stops here: Box model hack */
voice-family: inherit;
width: 112px;	/* for box model compliant browsers */ 
}
	
html>ul#primarynav ul.submenu a { 
width: 112px;
}

ul#primarynav ul.submenu a.submenulast {
padding-bottom: 2px;
}

ul#primarynav ul.submenu a:hover, ul#primarynav ul.submenu a:focus, ul#primarynav ul.submenu a:active { 
width: 127px; /* minus 1 from ul#primarynav a:hover, allowing for margin left: same as bg's width */
padding-right: 8px;
background: transparent url(images/bg_submenu_over.jpg) repeat-y left top;
voice-family: "\"}\"";   /* IE5/Win stops here: Box model hack -- thanks Tantek!! */
voice-family: inherit;
width: 112px;	/* for box model  compliant browsers */ 
}
	
	html>ul#primarynav ul.submenu a:hover, html>ul#primarynav ul.submenu a:focus, html>ul#primarynav ul.submenu a:active { 
	width: 112px;
	}

	
ul#primarynav ul.submenu a#submenuselected {
width: 127px;
padding-right: 8px;
font-weight: bold;
background: transparent url(images/bg_submenu_active.jpg) repeat-y left top;
voice-family: "\"}\"";   /* IE5/Win stops here: Box model hack -- thanks Tantek!! */
voice-family: inherit;
width: 112px;	/* for box model  compliant browsers */ 
}
	
	html>ul#primarynav ul.submenu a#submenuselected
	{ 
	width: 112px;
	}
	

/* center column */

#maincolumn /* set 5px initial column margins here */
{
padding: 0;
padding-top: 6px;
border: 0;
margin: 0;
margin-left: 133px; 
margin-right: 125px;
position: relative;
z-index: 100;
}

#maincolumn.norightcolumn {
margin-right: 20px;
}

#maincolumn.noleftcolumn {
margin-left: 10px;
}

/* content */

div#content { /* set content margins here: adjacent horizontal margins don't collapse, but let's use padding anyway */
	padding: 0;
	border: 0;
	margin: 0;
	padding-left: 5px;
	padding-right: 8px;
}

/* Hides from IE5-mac \*/
* html div#content {height: 1%;}
/* End hide from IE5-mac */ 


/* content links */

div#content a:link {
	color:  #00458A; /*#004B97;#06c;#069;#039;  #3098B4; #1185A6 */			
	background-color: #fff;
	text-decoration: underline;
	}

div#content a:visited {
	color: #4078B1;
	background-color: #fff;
	text-decoration: underline;
}

div#content a:hover, div#content a:active, div#content a:focus /* (:focus for NS6/7 keyboard activation: a:active for IE6 keyboard activation ) */
{
	/* don't specify color or background-color */
	text-decoration: none;
}

 div#content a.functionlink:visited {
	color:  #00458A; /*#004B97;#06c;#069;#039;  #3098B4; #1185A6 */			
	background-color: #fff;
	}

/* breadcrumbs */

div#content div#breadcrumbs {
	padding: 0;
	padding-left: 3px;
	padding-right: 13px;
	border: 0;
	margin: 0;
	margin-bottom: 1.5em;
	font-size: 0.9em;
	font-family: Arial, Helvetica, sans-serif;
	}

div#content div#breadcrumbs a:link, div#content div#breadcrumbs a:visited {
	color: #06c;  /* #069;#039;  #3098B4; #1185A6 */			
	background-color: #fff;
	text-decoration: none;
	}


div#content div#breadcrumbs ul {
	padding: 0;
	margin: 0;
	list-style: none;
	}

div#content div#breadcrumbs ul li {
	display: inline;
}

/* paragraphs */

#content p {
margin-top: 0;
margin-bottom: 1.2em;
font-size: 1.2em;
line-height: 1.4;
}

#content p.center {
	text-align: center;
}

#content p.small {
font-size: 1.1em
}

#content p.requiredfieldlegend, #content p.legend, #content p.arial {
font-family: Arial, Helvetica, sans-serif;
}

div#content p.updatesuccess, div#content p.success  { /* (green) used for "Update successful" "Submitted successfully" "entered successfully" "completed successfully" type messages: use .success rather than .updatesuccess (which was only used in Employees) */
background: url(images/success_check_bg.gif) no-repeat left top;
padding: 5px 0 15px 27px;
margin: 0;
}

div#content p.unsuccessful { /* (red) used for "search unsuccessful" type messages */
background: url(images/unsuccessful_bg.gif) no-repeat left top;
padding: 3px 0 15px 28px;
margin: 0;
}

 
div#content p.step { /* (red) used for "step 1 of x" type messages */
color: #A46200;
background: #fff;
font-size: 1.2em;
font-weight: bold;
}

div#content p.instruction { /* used for instruction type messages */
font-size: 1.2em;
/* font-family: Arial, Helvetica, sans-serif; */
}

div#content p.instruction span {
background:  #ECE3D7; /*#E9DECF;#EDE4D8;#E9DECF;#E6D9C8;#EBFBB3; #EDFBBF; */
padding: 1px 0px 2px 1px;
color: #000;
}

div#content p.pleasenote { /* used for "please note" type messages */
font-size: 1.2em;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
}

div#content p.alert { /* used for "alert" type messages */
background: url(images/alert_bg.gif) no-repeat left top;
padding: 2px 0 1.5em 25px;
margin: 0;
}

/* content headings */

div#content h2.h2background
{
	padding: 3px 3px 1px 2px;
	border: 0;
	margin: 0;
	font-size: 1.7em;
	color: #281574; /*#00309c; */
	background: transparent url(images/heading_bg.jpg) repeat-x left top;
	font-family: Arial, Helvetica, sans-serif;
}

div#content h3 {
padding: 0;
/* padding-top: 0.4em; use padding rather than margin, as margin will just collapse with margin-bottom of P element, which will prevail as it is the larger of the two */
border-bottom: 1px dotted #495B00;
	margin-top: 0;
margin-bottom: 1.25em;
color: #474747; /*#0A3BAD;#AD2A0A; #A05717; #903D27;*/
	background: #fff;
	font-size: 1.4em;
	font-family: Arial, Helvetica, sans-serif;
}

div#content h3.lessmarginbottom {  
margin-bottom: 0.5em;
}


div#content h4 {
padding: 0;
margin-top: 0;
margin-bottom: 1.25em;
font-size: 1.3em;
}

/* content lists */

div#content ol, div#content ul {
		margin-top: 0;
		margin-bottom: 1.2em;
			font-size: 1.2em;
		line-height: 1.3;
	}
	
	div#content li { 
		margin-bottom: 0.4em;
	}
	
	div#content ul {
	margin-left:  2em; /* looks better if indent increases proportionately on text resize, so use ems */
	padding: 0;
	/* list-style-type: circle; */
}
	
	div#content ul.bulletcircle, div#content ul.bulletcarat  {
	margin-left:  1em;
	list-style-type: none;
	}
	
   div#content ul.bulletcircle li {
   	background: transparent url(images/bullet_circle.gif) 0 0.4em no-repeat;
	padding-left: 1em;
   }
	
	div#content ul.bulletcarat li {
		background: transparent url(images/bullet_carat.gif) 0 0.4em no-repeat;
		padding-left: 1em;
	}
	

	div#content ol { 
	margin-left: 2.8em; 
	padding: 0;  
	}
	
	div#content ol ul, div#content ul ol, div#content ul ul, div#content ol ol /* override inheritance, and margin-bottom from global style above: provide little extra space between ending of nested list and next item in parent list */
	{
	font-size: 1em;
	margin-bottom: 0.7em;
	list-style-type: square;
	}
	
	div#content ol ul.smallernested, div#content ul ol.smallernested, div#content ul ul.smallernested, div#content ol ol.smallernested {
	font-size: 0.9em;
	line-height: 1.1;
	}
	
	div#content ol ul li, div#content ul ol li, div#content ul ul li, div#content ol ol li { 
		margin-bottom: 0.2em;
	}

 div#content ul.bulletcircle ol li, div#content ul.bulletcircle ul li, div#content ul.bulletcarat ol li, div#content ul.bulletcarat ul li {
	background: none;
}


div#content ul.rightlinks {
float: right;
padding: 0 15px 0 0;
margin: 0 0 0 30px;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

div#content ul.rightlinks li {
display: inline;
padding: 0;
margin: 0;
}

div#content ul.stepindicator {
float: right;
margin: 0 10px 1.5em 10px;
/* font-size: 0.95em; */
list-style-type: none;
color: #666; 
background: #fff;
font-family: Arial, Helvetica, sans-serif;
display: inline;
}

div#content ul.stepindicator span {
color: #000;
background: #fff;
font-weight: bold;
}

div#content ul.stepindicator2 {
float: right;
margin: 0 15px 1.5em 15px;
display: inline;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 0 0 3px 40px;
list-style-type: none;
color: #666;
background: transparent url(images/step_bg.gif) no-repeat 0px 4px;
}

div#content ul.stepindicator2 li {
display: inline;
margin-left: 5px;
}

div#content ul.stepindicator2 span {
color: #000;
background: #fff;
font-weight: bold;
font-size: 1.3em;
}

div#content ul.inlineleftlinks {
margin-left: 0;
list-style-type: none;
font-size: 1.1em;
}

div#content ul.inlineleftlinks li {
display: inline;
padding: 0;
margin: 0;
}

div#content ul.errorlist {
font-weight: bold;
color: #B72400;
background: #fff;
}

div#content ul.errorlist a:link {
font-weight: bold;
color: #B72400;
background: #fff;
}

div#content ul.errorlist a:visited {
font-weight: normal;
color: #B72400;
background: #fff;
}

/* other content styles */

	div#content hr
	{
	width: 100%;
text-align: left; /*this will align it for IE*/
margin: 0 auto 1.25em 0; /*this will align it left for Mozilla*/
border: none 0; 
border-top: 1px dotted #999;
height: 1px; /*whatever the total width of the border-top and border-bottom equal*/
} 


/* images in content area */

div#content img {
display: inline; /* set back to inline for content div, so will behave as default */
	margin: 5px; /* IE5x/PC won't respect padding on an inline img */
}

.left {
 float: left;
}

.right {
 float: right;
}

div#content table.datatable img {
margin: 0 0 1px 3px;
}

/* floated columns and boxes in content area */

div#content div.floatedcolumn {
	float: left;
	width: 42%;
	padding: 0;
	margin: 0 20px 1.5em 0;
}

div#content div.floatedcolumnbox { /* so can have multiple boxes in one column, and have them be independent of the boxes in the next floated column */
margin: 0 0 1.5em 0;
padding: 0;
}


div#content div.floatedcolumnbox h3 {
padding: 7px 3px 2px 5px;
border: 0;
margin: 0;
font-size: 1.3em;
background: transparent url(images/floatedcolumnboxheader_bg.jpg) repeat-x left top;
color: #000;
}


div#content div.floatedcolumnboxcontentcontainer { /* use existing standard containers within here -- <p>, <ul> etc */
padding: 8px 10px 2px 5px; /* 1px bottom margin to prevent margin-bottom of last element in the contentcontainer from being adjacent to and therefore collapsing with the margin-bottom of the floatedcolumnbox or the floatedcolumn */
border: 1px solid #ddd;
border-bottom: none;
margin: 0;
background: url(images/floatedcolumnboxcontentcontainer_bg.gif) left bottom repeat-x;
color: #333;
}


 div#content div.floatedcolumn div.floatedcolumnbox ul
 {
	margin-left: 1em;
	} 

div#content div.floatedcolumn div.floatedcolumnbox ul.bulletcircle, div#content div.floatedcolumn div.floatedcolumnbox ul.bulletcarat  {
	margin-left:  0;
	}


/* right column */
div#rightcolumn { /* set to specified right nav width */
	width: 120px;   
	padding: 19px 0 0 0; 
	border: 0;
	margin: 10px 0 0 0;   
	background: transparent url(images/rightcolumn_bg.gif) left top no-repeat;    
	font-size: 1.2em;
	position: absolute; /* z-index can only be applied to elements that also have a value set for the position property: so have this to gain control of stacking order */
z-index: 5;
right: 0;
	}

div#rightcolumn ul#secondarynav {
	padding: 0 0 10px 0;
	margin: 0;
	background: transparent url(images/secondarynav_bg.jpg) left bottom no-repeat;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
}

ul#secondarynav li { /* just to make sure there is no default behavior from li element: ie5/PC still leaves margin-top and/or bottom by default */
	padding: 0;
	border: 0;
	margin: 0;
	/* line-height: 1.3; border-bottom on the a element appears below the bg image on the a element for some of the links in the left nav in NS6/7/Firefox PC, when use line-height on either the UL or the LI. Same thing happens when apply line-height on the a element below: note: applying line-height to a element below increases the height between and within the LI's, as with UL and LI application */
}

ul#secondarynav a, ul#secondarynav a:link, ul#secondarynav a:visited {
	display: block;
	width: 120px;
	padding: 3px 3px 3px 5px;
	border: 0;
	border-bottom: 1px solid #7E7E7E; /*#CDE7FE;    */
	margin: 0;
	background: #fff;
color:  #133FA4;  /* #06c;#1C429B;	#3840DB;*/
text-align: right;
text-decoration: none;
	voice-family: "\"}\"";   /* IE5/Win stops here: Box model hack */
voice-family: inherit;
width: 112px;	/* for box model compliant browsers */ 
}
	
html>ul#secondarynav a, html>ul#secondarynav a:link, html>ul#secondarynav a:visited {  /* for UA's that support CSS2 selectors (not IE6/Win) and box model, but also have parsing bug exploited above (Opera 5): rule also helps those with parsing bug to get back on track */
width: 112px;
}

ul#secondarynav a:hover, ul#secondarynav a:focus, ul#secondarynav a:active { 
display: block;
	width: 120px;
	padding: 3px 3px 3px 5px;
	border: 0;
	border-bottom: 1px solid #7E7E7E; /*#CDE7FE;    */
	margin: 0;
	background: #fff url(images/bg_secondarynav_over.gif) left top repeat-y;
color:  #133FA4;  /* #06c;#1C429B;	#3840DB;*/
text-align: right;
text-decoration: none;
	voice-family: "\"}\"";   /* IE5/Win stops here: Box model hack */
voice-family: inherit;
width: 112px;	/* for box model compliant browsers */ 
}

html>ul#secondarynav a:hover, html>ul#secondarynav a:focus, html>ul#secondarynav a:active {  /* for UA's that support CSS2 selectors (not IE6/Win) and box model, but also have parsing bug exploited above (Opera 5): rule also helps those with parsing bug to get back on track */
width: 112px;
}

ul#secondarynav a#secondarynavselected  { 
display: block;
	width: 120px;
	padding: 3px 3px 3px 5px;
	border: 0;
	border-bottom: 1px solid #7E7E7E; /*#CDE7FE;    */
	margin: 0;
	background: #fff url(images/bg_secondarynav_active.gif) left top repeat-y;
color:  #133FA4;  /* #06c;#1C429B;	#3840DB;*/
text-align: right;
text-decoration: none;
	voice-family: "\"}\"";   /* IE5/Win stops here: Box model hack */
voice-family: inherit;
width: 112px;	/* for box model compliant browsers */ 
}

html>ul#secondarynav a#secondarynavselected {  /* for UA's that support CSS2 selectors (not IE6/Win) and box model, but also have parsing bug exploited above (Opera 5): rule also helps those with parsing bug to get back on track */
width: 112px;
}

div#rightcolumn ul#secondarynav a.topsecondarynavlink  { 
border-top: 1px solid #7E7E7E;
}

/* footer styles */

div#clearbeforefooter { /* clear floats, and leave room for absolutely positioned footer */
	clear: both;
	padding-bottom: 8em;
}

div#footer
{
	width: 100%; /* need a width to fill parent container, I think because this div is absolutely positioned */
	padding: 0;
	padding-top: 7px;
	padding-bottom: 1px;
	border: 0;
	margin: 0;
	background: transparent url(images/footer_bg.gif) left top repeat-x;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	position: absolute; /* absolutely positioning the footer causes horizontal scroll bar in IE5.2/Mac */
	bottom: 0; /* The footer must be placed at the bottom of the document -- that is, at the bottom of the absolutely positioned parent container div */
	z-index: 2; /* Footer will show below everything else, if comes to it */
}

div#footer a, div#footer a:link, div#footer a:visited {
	color: #333;
	background: #fff;
	text-decoration: underline;
}

div#footer a:hover, div#footer a:active, div#footer a:focus {
	text-decoration: none;
}

div#footer img.preload {
	display: inline;
	margin: 0;
	padding: 0;
}
	
/* general form styles */

form {
padding: 0;
border: 0;
margin: 0;
}

span.required {
	color: #E52D00;
	background: #fff;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

input, textarea, select {
	color: #000;
	/* background: #fff; #ECF0F4; */
	font-size: 1em; /* for IE/PC, so resizes input field text with rest of text */
	font-family: Arial, Helvetica, sans-serif;
}

.medium {
	width: 17em; /* rather than having to use size attribute on <input> which is inconsistent across browsers, as relative to browser's base font: am using ems so input field will increase with text size. Can still enter into field as far beyond width as need to -- field will "scroll", unless there is a maxlength attribute */
}

.long {
	width: 25em;
}

.short {
	width: 5em;
}

.buttonshort {
width: 5em;
}

.buttonmedium {
width: 8em;
}

.buttonslong {
width: 15em;
}

input.submit, input.mostfocus {
	border: 3px double #999999;
border-top-color: #c0c0c0;
border-left-color: #c0c0c0;
/* padding: 0.25em; causes button to not have default click feedback in Firefox */
color: #fff;
background: transparent url(images/input_bg.gif) left top repeat-x;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif; /* IE/PC not inheriting, so specify again */
}

input.reset, input.edit, input.cancel, input.lessfocus {
	border: 3px double #999999;
border-top-color: #c0c0c0;
border-left-color: #c0c0c0;
/* padding: 0.25em; causes button to not have default click feedback in Firefox */
color: #333;
background: #F3F3F3;
font-family: Arial, Helvetica, sans-serif; /* IE/PC not inheriting, so specify again */
}

input.optionalinfield  {
color: #666;
font-size: 0.95em;
}

input.displayonly {
	border: 1px solid #ccc;
	background: #F8F4EF;
	}
	
/* form table syles */

table.formtable {
margin-top: 0;
margin-bottom: 1.2em;
border: 0;
font-size: 1.2em;
font-family: Verdana, Arial, Helvetica, sans-serif; /* font size and family inherited OK into cells on PC: ALL. */
}

table.formtable caption {
	padding: 0;
	padding-top: 0.5em; /* way to create some whitespace before the table element: works on PC: IE6, Firefox, Opera (haven't tested others */
	padding-bottom: 0.5em;
	border: 0;
	margin: 0;
	font-weight: bold;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: left;
	color: #A46200;
	background: #fff;
}

table.formtable th { 
	padding: 3px 5px 3px 5px;
	margin: 0;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
	font-weight: bold;
}

table.formtable td { 
	padding: 3px 5px 3px 5px;
	margin: 0;
	text-align: left;
	/* vertical-align: top; */
	white-space: nowrap;
}

table.formtable td.lessverticalpadding {
  padding-top: 1px;
  padding-bottom: 1px;
}

table.formtable td.moreleftpadding {
padding-left: 15px;
}

table.formtable td.formspacer  { /* padding will not work on tr */
padding: 5px;
}

table.formtable td.formspacer2  { /* padding will not work on tr */
padding: 3px;
}

table.formtable td.linespacer { /* padding will not work on tr */
border-bottom: 1px solid #ccc;
}

table.formtable td.formsectionwithdivider { 
	padding: 15px 3px 0px 0px;
	font-weight: bold;
	border-top: 1px solid #666;
}

table.formtable td.formsection { 
	padding: 15px 3px 0px 0px;
	font-weight: bold;
}

table.formtable td.formsection2 { 
	padding: 10px 3px 0px 5px;
	font-weight: bold;
}

table.formtable .arial {
font-family: Arial, Helvetica, sans-serif;
}

table.formtable span.inlinevalidation {
color: #B72400;
background: #fff;
}

/* data table styles */

table.datatable {
 border: 1px solid #ccc; /* border for table box only */
	border-collapse: collapse; /* get rid of space between cells: doesn't work on PC: NS6; acts like cellspacing="0", and also prevents cell borders of adjacent cells from doubling up */
 margin-top: 0; /* padding-top doesn't seem to have any effect on whitespace before a table element on PC: IE and Firefox. On PC: IE, margin-top collapses when table comes after another content element with margin-bottom. In Firefox, margin-top on table is rendered between the caption and the actual visual table */
 margin-bottom: 1.2em;
 font-size: 1.2em;
font-family: Arial, Helvetica, sans-serif; /* font size and family inherited OK into cells and caption on PC: ALL. */
background: #fff;
color: #000;
}

table.datatable tr.alternaterows {
	background: #E4E4E4;/* #E9E9E9; #eee; */
	color: #000;
}

div#content table.datatable tr.alternaterows a:link  {
	background: #E4E4E4;
	color:  #00458A;
}

div#content table.datatable tr.alternaterows a:visited {
background: #E4E4E4;
	color: #4078B1;
}

div#content table.datatable tr.alternaterows a.functionlink:visited { /* mainly for row action links */
	color:  #00458A; /*#004B97;#06c;#069;#039;  #3098B4; #1185A6 */			
	background: #E4E4E4;
	}

table.datatable th, table.datatable td { /* the values for each selector are interdependent (on the other selector's values), so declare both selectors together */
	margin: 0;
	text-align: left;
}

table.datatable th { /* over-rides table border is Mozilla, which is according to spec */
padding: 4px 5px 4px 5px;
border: 0;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #000;
	font-weight: bold;
	background: #1C429B url(images/th_background.gif) repeat-x left top; /*#254692;#395CAB;#0031A4;#00309c;#003CC6; #B75200;#893E00; #494949;*/
	color: #fff;
	white-space: nowrap;
}

div#content table.datatable th a:link  {
	background: transparent;
	color:  #fff;
	text-decoration: underline;
}

div#content table.datatable th a:visited {
background: transparent;
	color: #fff;
	text-decoration: underline;
}

div#content table.datatable th a.sortedcolumn  {
	font-style: italic;
}

table.datatable th.numericdataheader {
text-align: center;
}

table.datatable th.leftheader {
border: 1px solid #ccc; 
background: #fff;
color: #000;
}

table.datatable tr.alternaterows th.leftheader {
background: #E4E4E4;
color: #000;
}

div#content table.datatable th.leftheader a:link  {
	color:  #00458A; /*#004B97;#06c;#069;#039;  #3098B4; #1185A6 */			
	background-color: #fff;
	}

div#content table.datatable th.leftheader a:visited {
color: #4078B1;
background-color: #fff;
}

div#content table.datatable tr.alternaterows th.leftheader a:link  {
	color:  #00458A; /*#004B97;#06c;#069;#039;  #3098B4; #1185A6 */			
	background-color: #E4E4E4;
	}

div#content table.datatable tr.alternaterows th.leftheader a:visited {
color: #4078B1;
background-color: #E4E4E4;
}

table.datatable th.simplecolumnheader, table.datatable th.simpleheader {
border: 1px solid #ccc; 
background: #F4F4F4;
color: #000;
}

div#content table.datatable th.simplecolumnheader a:link  {
	color:  #00458A; /*#004B97;#06c;#069;#039;  #3098B4; #1185A6 */			
	background-color: #F4F4F4;
	}

div#content table.datatable th.simplecolumnheader a:visited {
color: #4078B1;
background-color: #F4F4F4;
}

div#content table.datatable tr.alternaterows th.simplecolumnheader a:link  {
	color:  #00458A; /*#004B97;#06c;#069;#039;  #3098B4; #1185A6 */			
	background-color: #E4E4E4;
	}

div#content table.datatable tr.alternaterows th.simplecolumnheader a:visited {
color: #4078B1;
background-color: #E4E4E4;
}

table.datatable td {
	padding: 5px;
	border: 1px solid #ccc; /* over-rides table border in Mozilla and Opera on the PC, which is according to spec */
}

table.datatable td.numericdata {
text-align: right;
}

table.datatable td.editinline {
white-space: nowrap;
}

div#content table.datatable td.editinline a:link, div#content table.datatable td.editinline a:visited {
	color:  #00458A;			
	background-color: #fff;
}

div#content table.datatable tr.alternaterows td.editinline a:link, div#content table.datatable tr.alternaterows td.editinline a:visited  {
	background: #E4E4E4;
	color:  #00458A;
}

table.datatable caption {
	padding: 0;
	padding-top: 0.5em; /* way to create some whitespace before the table element: works on PC: IE6, Firefox, Opera (haven't tested others */
	padding-bottom: 0.3em;
	border: 0;
	margin: 0;
	font-weight: bold;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: left;
		color: #A46200;
	background: #fff;
}

/* information table */

table.informationtable {
 border: 0;
 border-collapse: collapse; 
 margin-top: 0;
 margin-bottom: 1.2em;
 font-size: 1.2em;
font-family: Arial, Helvetica, sans-serif; /* font size and family inherited OK into cells on PC: ALL. */
background: #fff;
color: #000;
}

table.informationtable th, table.informationtable td { /* the values for each selector are interdependent (on the other selector's values), so declare both selectors together */
	padding: 5px 20px 5px 0;
	margin: 0;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
	border-bottom: 1px solid #ddd;
}

table.informationtable th { /* over-rides table border is Mozilla, which is according to spec */
	font-weight: bold;
}

table.informationtable th.wrap, table.informationtable td.wrap, table.formtable td.wrap {
white-space: normal;
}

table.informationtable td.numericinformation {
text-align: right;
padding-right: 0;
}

table.informationtable td.nocaption, table.informationtable th.nocaption {
border-top: 1px solid #ddd;
}

table.informationtable td.button, table.informationtable td.noborder {
border: 0;
padding-right: 0;
}

table.informationtable caption {
	padding: 0;
	padding-top: 0.5em; /* way to create some whitespace before the table element: works on PC: IE6, Firefox, Opera (haven't tested others */
	padding-bottom: 0.2em;
	border: 0;
	border-bottom: 1px dotted #333;
	margin: 0;
	font-weight: bold;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: left;
	color: #A46200;
	background: #fff;
}

table.informationtable .informationchange {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

/* calendar table container  */

table.calendarcontainer {
 border: 0;
 border-collapse: collapse;
 margin-top: 0; 
 margin-bottom: 1.2em;
 margin-left: 1%;
 width: 70%;
 font-size: 1.2em;
font-family: Arial, Helvetica, sans-serif;
}

table.calendarcontainer caption {
	padding: 0;
	padding-top: 0.5em; /* way to create some whitespace before the table element: works on PC: IE6, Firefox, Opera (haven't tested others */
	padding-bottom: 0.3em;
	border: 0;
	margin: 0;
	font-weight: bold;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: left;
		color: #A46200;
	background: #fff;
}

table.calendarcontainer td {
padding: 10px 15px 10px 0;
border: 0;
margin: 0;
text-align: left;
vertical-align: top;
white-space: nowrap;
}

table.calendarcontainer td.norightpadding {
padding-right: 0;
}

table.calendarcontainer td.nopadding {
padding: 0;
}

/* calendar tables */

table.calendarmonth {
  border: 0;
  border-collapse: collapse; 
  margin: 0;
font-family: Arial, Helvetica, sans-serif; /* font size and family inherited OK into cells on PC: ALL. */
background: #fff;
color: #000;
font-size: 12px; /* getting weird inheritance effects in IE5/PC with em or % font size */
}

table.calendarmonth caption {
	padding: 0;
	padding-bottom: 0.3em;
	border: 0;
	margin: 0;
	font-weight: normal;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: center;
	color: #fff;
	background: #1C429B url(images/th_background.gif) repeat-x left top;
	font-size: 11px;
}

table.calendarmonth th {
	padding: 3px 4px 3px 3px;
	border: 0;
	margin: 0;
	text-align: center;
	white-space: nowrap;
	font-weight: bold;
}
table.calendarmonth td {
	padding: 3px 4px 3px 3px;
	border: 1px solid #ddd;
	margin: 0;
	vertical-align: top;
	text-align: left;
	}
	
	table.calendarmonth td.singledigit {
	text-align: center;
	}
	
	
	table.calendarmonth td.selected {
	border: 2px solid #AE0000;
}

/* calendarmonthpopup */
 
 table.calendarmonthpopup {
  border: 0;
  border-collapse: collapse; 
  margin: 0;
font-family: Arial, Helvetica, sans-serif; /* font size and family inherited OK into cells on PC: ALL. */
background: #fff;
color: #000;
font-size: 12px; /* getting weird inheritance effects in IE5/PC with em or % font size */
}

table.calendarmonthpopup caption {
	padding: 0;
	padding-bottom: 0.3em;
	border: 0;
	margin: 0;
	font-weight: normal;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: center;
	color: #fff;
	background: #1C429B url(images/th_background.gif) repeat-x left top;
	font-size: 11px;
}

table.calendarmonthpopup th {
	padding: 3px 4px 3px 3px;
	border: 0;
	margin: 0;
	text-align: center;
	white-space: nowrap;
	font-weight: bold;
}
table.calendarmonthpopup td {
	padding: 3px 4px 3px 3px;
	border: 1px solid #ddd;
	margin: 0;
	vertical-align: top;
	text-align: left;
	}
	
	/* these links should not have to compete with div#content a:link, etc, as content div should not be used in code */
	
 table.calendarmonthpopup a:link, table.calendarmonthpopup a:visited {
	color:  #00458A; /*#004B97;#06c;#069;#039;  #3098B4; #1185A6 */			
	background-color: #fff;
	text-decoration: none;
	}
 
table.calendarmonthpopup a:hover, table.calendarmonthpopup a:active, table.calendarmonthpopup a:focus /* (:focus for NS6/7 keyboard activation: a:active for IE6 keyboard activation ) */
{
	color: #fff;
	background: #1C429B;
	text-decoration: none;
}
 
 table.calendarmonthpopup caption a:link,  table.calendarmonthpopup caption a:visited, table.calendarmonthpopup caption a:hover, table.calendarmonthpopup caption a:active, table.calendarmonthpopup caption a:focus {
 color: #fff;
 background: transparent;
 text-decoration: none;
 } 
 
 
 div.calendarpopupclose {
 padding: 5px 2px 2px 2px;
 border: 0;
 margin: 0;
 text-align: right;
 }
 
 div.calendarpopupclose a:link, div.calendarpopupclose a:visited {
	color:  #00458A; /*#004B97;#06c;#069;#039;  #3098B4; #1185A6 */			
	background-color: #fff;
	text-decoration: underline;
	}
 
div.calendarpopupclose a:hover, div.calendarpopupclose a:active, div.calendarpopupclose a:focus /* (:focus for NS6/7 keyboard activation: a:active for IE6 keyboard activation ) */
{
	text-decoration: none;
}
 

/* generic table styles */

table.nomargin {
margin-bottom: 0;
}

td.width50, th.width50 {
width: 50%;
}

td.width40, th.width40 {
width: 40%;
}

td.width34, th.width34 {
width: 34%;
}

td.width33, th.width33 {
width: 33%;
}

td.width25, th.width25 {
width: 25%;
}

td.width66, th.width66 {
width: 66%;
}

td.width75, th.width75 {
width: 75%;
}

td.width20, th.width20 {
width: 20%;
}

td.width15, th.width15 {
width: 15%;
}

td.width1, th.width1 {
width: 1%;
}

td.width100, th.width100 {
width: 100%;
}

.nowrap {
white-space: nowrap;
}

table.datatable th.center, table.datatable td.center {
text-align: center;
}

table.datatable th.middle, table.datatable td.middle {
vertical-align: middle;
}

table.datatable td.right, table.calendarcontainer td.right, table.datatable th.right, table.formtable td.right {
text-align: right;
}

table.formtable .smaller, table.informationtable .smaller {
font-size: 0.95em;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #444;
background: #fff;
}

table.formtable .additionalfieldinformation {
font-size: 0.95em;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #666;
background: #fff;
}

td.aligntop {
vertical-align: top;
}

table.informationtable .captioninformation, table.datatable .captioninformation { /* don't specify color -- link styles will take care of that, and will override <caption> styles */
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
color: #000;
}

.liability  {
color: #B72400;
}

.paid  {
color: #00842B;
}

/* misc */
.clear { 
  clear: both;
  }
 
   div.spacerlong { 
margin: 0;
padding: 0;
padding-bottom: 140px;
  clear: both; 
  }
  
  div.spacermedium {
  margin: 0;
padding: 0;
padding-bottom: 60px;
  clear: both; 
  }
  
  div.spacershort { 
margin: 0;
padding: 0 0 40px 0;
 clear: both; 
  }
  
  /* styles for pop-ups that are not within the standard template */
  
  div#popupcontainer {
  margin: 0;
  padding: 5px;
}
  
  div#popupcontainer h1 {
  font-size: 1.4em;
  }
  
   div#popupcontainer p {
  margin-top: 0;
margin-bottom: 1.2em;
font-size: 1.2em;
line-height: 1.4;
  }
  
   div#popupcontainer ul {
        margin: 0 0 1.2em 2em;
		padding: 0;
		font-size: 1.2em;
		line-height: 1.3;
	}
	
	 div#popupcontainer li { 
		margin-bottom: 0.4em;
	}
	
  
  div.popupclose {
 padding: 3px 3px 10px 10px;
 margin: 0;
 font-size: 1.2em;
 text-align: right;
 }
 
 div.popupclose a:link, div.popupclose a:visited {
	color:  #00458A; /*#004B97;#06c;#069;#039;  #3098B4; #1185A6 */			
	background-color: #fff;
	text-decoration: underline;
	}
 
div.popupclose a:hover, div.popupclose a:active, div.popupclose a:focus /* (:focus for NS6/7 keyboard activation: a:active for IE6 keyboard activation ) */
{
	text-decoration: none;
}
 
  
  /* applicant tracking */
  
  div#linkopportunities {
	text-align: right;
	font-size: 1.2em;
	font-family: Arial, Helvetica, sans-serif;
}

.textfield
{
    color:  #0A3BAD; 
	background: #fff;
	font-size: 1.1em;
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
}

.module

{
    border-bottom:1px dotted #0A3BAD;
    padding-bottom:8px;
    padding-top:8px;
}