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

* html .visualIEFloatFix { 
	height: 0.01%;}

body{
	text-align: center;
	background: #DDDDDD url('images/background.gif') top left repeat;
	margin: 0px;
	padding: 0px 0px 25px 0px;
	border: 0px; }

/*wrapper envelops the header, content, and footer stuff and keeps it all together*/
#wrapper{
	text-align: left;
	background-color: #FFFFFF;
	width: 780px;
	border: 0px;
	margin: 0px;
	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: 780px;
	height: 125px;
	border: 0px;
	margin: 0px;
	padding: 0px; }
	
#banner img{
	width: 780px;
	height: 125px; }
	
/*this style is for the SOA home page.  It makes an adjustment to the size of the banner image.*/
#banner.soa_level, #banner.soa_level img{
	height: 159px; }
	
/*This extends the front header to encompass the large banner*/
#header {
	position: relative;
	/*background: #FFFFFF url('images/search_header.gif') top left no-repeat;*/
	background: #FFFFFF top left no-repeat; background-image: 'images/ImageSprite.gif'; background-position: 0px 24px;
	padding: 0px;
	margin-bottom: 0px;
	height: 150px;}
#header.soa_level{
	height: 184px;}
/*****************************************************************************************************
*****************************************************************************************************/


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



/*****************************************************************************************************
				TABBING STYLES
*****************************************************************************************************/
#tabbing {
	/*position: absolute;
	clear: both;
	top: 149px;*/
	margin: 0px;
	padding: 0px; 
	white-space: nowrap; }
#tabbing ul, #tabbing li {
	display: inline;
	margin: 0px;
	padding: 0px; }

/*this is the style used for the blue line image underneath the banner*/
#blue_line {
	position:absolute;
	margin-left: 0px;
	top: 149px;}
	
/*this is the style used for the blue line image underneath the banner*/
#soa_blue_line {
	position:absolute;
	margin-left: 0px;
	top: 183px;}
/*****************************************************************************************************
*****************************************************************************************************/


/*****************************************************************************************************
				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: 23px;
	height: 24px;
	border: 0px;
	margin: 0px;
	padding: 0px;}

#headlinks {
	position: absolute;
	z-index: 1;
	left: 22px;
	top: 3px;
	width: 550px;
	height: 24px;
	border: 0px;
	margin: 0px;
	padding: 0px;}

#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, #search_soa {
	position: absolute;
	z-index: 0;
	left: 500px;
	top: 1px;
	width: 140px;
	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; }
	
/*this style is used to place the search image under the page banner.*/
#search.under_banner {
	top: 152px;
	left: 505px;
}
/*this style moves the search image to the right side of the header.  It is used in the
DOA and SOA home pages.*/
#search.doa_level {
	left: 640px;
}


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

/*this class is used to reposition the googlestuff content (search button and input).
This class is used by the DOAhome page.*/
#googlestuff.doa_level {
	top: 150px;
}
/*this class is used to reposition the googlestuff content (search button and input).
This class is used by the SOA home page.*/
#googlestuff.soa_level {
	top: 184px;
}

/*these styles move the search image and google stuff below the division banner.  It is mainly used on tabbing pages.*/
#search.drop, #googlestuff.drop {
	top: 152px;
}

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

/*makes google search box the amazing color I chose. If form isn't given a class, it is invisible*/
#googlestuff .form { 
	color: #060678; 
	font-size: 11px; 
	font-family: Arial, Helvetica, sans-serif; 
	border: 1px solid #060678;  
	background: #FFFFFF; 
	padding: 1px 3px 1px 3px;}
/*****************************************************************************************************
*****************************************************************************************************/




/*****************************************************************************************************
				BREADCRUMBS
*****************************************************************************************************/
/*Breadcrumb styles */
#crumb {
	margin: 0px; 
	padding: 0px 0px 0px 10px; 
	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: #666666;
	padding-left: 10px;
	font: normal .8em Arial, Tahoma, Verdana, sans-serif; 
	text-decoration: none; }

.content p { 
	padding: 5px 0px 10px 0px; }
	
.content p.indent {
	padding-left: 10px; }

/*this style should be used when there is need for "fine print" paragraph or text.*/
.small {
	font: normal 0.75em Arial, Helvetica, sans-serif; }
	
.content strong { 
	padding-bottom: 10px; 
	font: bold 1.0em Arial, Tahoma, Verdana, sans-serif; }
	
.content ul {
	list-style-type:none;
	padding:0px 0px 5px 0px;
	margin:0px;}
	
.content ul li {
	background-image:url('images/gray_arrow_wide.gif');
	background-repeat:no-repeat;
	background-position:0px 3px;
	padding: 2px 0px 0px 30px;}
	
.content blockquote {
	padding-left: 30px;}
	
.content h1 { 
	padding-top: 2px;
	padding-bottom: 10px; 
	color: #00007C; 
	font: bold 1.5em Arial, Helvetica, Tahoma, sans-serif;}
	
.content h2 { 
	padding: 10px 0px 5px 0px; 
	color: #00007C; 
	font: bold 1.25em Arial, Helvetica, Tahoma, sans-serif;}
	
.content h3 { 
	padding-bottom: 5px; 
	font: bold 1.0em Arial, Tahoma, Verdana, sans-serif; }
	
.content hr {
	border: 1px solid rgb(153, 153, 153);}
/*****************************************************************************************************
*****************************************************************************************************/



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

/*this style produces a list with bullets that are upper case letters (i.e A, B, C, D,..., X, Y, Z)*/
.content ol.upperAlpha {
	background-image: none;
	list-style-type: upper-alpha; }

/*this list style is for making a list with bullets that are lower case letters (i.e. a, b, c,..., y, z)*/
.content ol.lowerAlpha {
	background-image: none;
	list-style-type: lower-alpha; }
	
/*this style produces a list with lower case roman numerals as the bullets (i.e. i, ii, iv, x, etc.)*/
.content ol.upperRoman {
	background-image: none;
	list-style-type: upper-roman;}

/*this style produces a list with upper case roman numeral as the bullets (i.e. I, II, IV, V, XL, etc.)*/
.content ol.lowerRoman {
	background-image: none;
	list-style-type: lower-roman;}
/*****************************************************************************************************
*****************************************************************************************************/



/*****************************************************************************************************
****************************************************************************************************
				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;}
/*upperalpha produces a list of upper case letters*/
ul.upperalpha li {
	list-style-type: upper-alpha;}
	
/*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; 
	font: normal 1.0em Arial, Tahoma, Verdana, sans-serif; 
	text-decoration: none; }
	
.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; }

/*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 EMAIL LINKS
*****************************************************************************************************/
/* This is for the emailer boxes*/
.content a.emailer {
	display: block; 
	Margin: 5px 0px 15px 0px; 
	padding: 0px; 
	border: 1px solid #dedede; 
	background-color: #f4f4f4; 
	width: 200px; }	
	
.content a.emailer:link, .content a.emailer:visited, .content a.emailer:hover, .content a.emailer:active {
	color: #799eae; 
	font: normal 1.0em Verdana, sans-serif; }
	
.content a.emailer:hover {
	color: #a80f04; 
	border: 1px solid #a80f04; }
/*****************************************************************************************************
*****************************************************************************************************/



/*****************************************************************************************************
				FAQs
				
Description		- This style is useful for creating the look and feel of the FAQs pages.  It changes
				  the look-and-feel of the headers and paragraphs tags.  Every FAQ answer should be
				  encased in a div tag whith this class applied.
*****************************************************************************************************/
.faq {
	padding: 5px 0px 0px 5px;
}
.faq p {
	margin-left: 20px;
}

/**/
#faq_questions {
	height: 80px;
}

/*the following two styles are used to color the option properties within a select.  We do this so that
we can tell the sections apart from the questions.  Sections should have the red class while questions
should have the pink class*/
.faq select {
	width: 500px;
}
option.section {
	background-color: #FFCC00; 
	font-weight: bold; 
	font-size: .75em; 
	color: #333399;}
option.question {
	background-color: #E8F7FD;
	color: #333399;}

/*this class is used when the question needs to be broken up into two or more parts.  Using this class
on the broken pieces of the question makes the piece indented so that it stands out from the other 
questions*/
option.partial {
	padding-left: 15px; }
/*****************************************************************************************************
*****************************************************************************************************/



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



/*****************************************************************************************************
				CONTENT_PARTIAL AND SIDEBAR
*****************************************************************************************************/
#content_partial {
	padding: 10px 1px 5px 10px;
	margin-right: 220px;
	margin-left: 0px;
	color: #666666;
	text-decoration: none;
	float: none!important;}
	
#sidebar {
	position: relative; 
	float: right; 
	width: 205px; 
	padding: 5px 10px 5px 5px;
	background: none; 
	word-wrap: break-word; }
	
/*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; }
/*#sidebar img {
	width: 205px!important;}*/

/*this class is used when a director column is required on the page*/
.partial_director { 
	width: 400px!important;
	margin-left: 130px!important;
	float: none!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 10px; }
	
#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;}

#content_left.content_soa_level, #content_right.content_soa_level, #content_center.content_soa_level {
	padding-top: 10px;
	width: 270px;}
#content_left.content_soa_level {
	width: 200px;  
	padding-left: 20px;}
#content_center.content_soa_level {
	margin-left: 215px;
	height: 350px; }
	
/*the following to clases are to be applied to the content_left, content_right, and content_center
styles when there is a director column required.  This is done so that everything fits snuggly in
place.*/
.director_lr {
	margin: 0px!important;
	width: 205px!important;
}/*this is applied to the content_left and content_right div tags*/
.director_c {
	width: 205px!important;
	margin: 0px 210px 0px 348px!important;
}/*this is applied to the content_center div tag*/

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



/*****************************************************************************************************
				DIRECTOR
*****************************************************************************************************/
#director {
	float: left;
	vertical-align: top; 
	text-align: left;
	background-color: #FFFFFF; 
	padding: 0px 0px 0px 0px;
	width: 120px;
	margin: 0px; 
	height: auto;}

/**/
#director.doa_level{ 
	text-align: center;}
	
/*this tag is for autmatically sizing the director's image.  It can be overritten or modified if
other images will be placed within the director column*/
#director img {
	width: 120px;}
	
/*this class removes the width and height properties set above.  It is useful when the director
image does not conform to the standard size*/
#director img .default_size {
	width: auto;
	height: auto;}
	
#director p, #director h1, #director h2, #director h3 {
	margin-left: 10px;}
	
/*this class is for use in DOA level pages.  It resizes the diurector image.*/
#director img.doa_level {
	width: 75px;
	height: 98px;}

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



/*****************************************************************************************************
				FOOTER
*****************************************************************************************************/
/*Footer styles*/
#footer {
	clear: both;
	padding: 0px;
	margin-top: 5px;		
	background-color: #FFFFFF;
	color: #666666; 
	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: #666666; 
	text-decoration: none; }
	
#footer a:hover { 
	color: #333399;  
	text-decoration: underline; }

#footererlogo {
	position: absolute;
	left: 540px;
	top: -73px;
	width: 240px;
	height: 98px;
	border: 0px;
	margin: 0px;
	padding: 0px;}
/****************************************************************************************************
*****************************************************************************************************/

/****************************************************************************************************
          ETHICS_TRAINING
		  
Description	- These styles are used for the APOC Ethics Traiing module and review question pages.  These pages have 4 divs
			  which makeup the layout.  
*****************************************************************************************************/
/*this class selector is used to define the with and color of the div tags.  Some div tags (such as
the modulenotes div tag) have their own color scheme which is specified in their ID selector style*/
.module, .reviewquestions{
	width:500px;
	background-color:#FFFFCC;
}

/*this style replaces the arrow bullets for ul items with a standard circle, note that there is a redundant
declaration of the class for the li items.  This was done in order to ensure that CSS specificity rules 
take effect so the .content li style is not applied along with the .module li style...CSS is so fun! <_<*/
.module ul {
	padding-left: 30px;}

.module li, .content .module li {
	background-image: none;
	list-style-type: disc;
	padding-left: 0px;}

/*this style is used for the module notes div tag.  It overrides the .module default color.*/
#modulenotes{
	background-color:#CEDCFF;
} 
 
/*this style is used for the layout of the module page's title.  While a special mod to the H1 tag
could have been made, it was decided that this would be better in order to properly align the content
and text*/
#moduleheader, #reviewquestionsheader, #faqsheader{
	color:#000099;
	text-align:center;
	font-size:1.25em;
	font-weight:bold;
}

/*this style is used to position the "next" link which occurs at the bottom of the page.  It ensures
that it is possitioned to the far right opposite of the "previous" link, but within the same line.*/
#modulenext{
	text-align:right;
	width:250px;
	float:left;
}

/*this style is used to position the "previous" link which occurs at the bottom of the page.  It ensures
that it is possitioned to the far left opposite of the "next" link, but within the same line.*/
#moduleprevious{
	text-align:left;
	float:left;
	width:250px;
}
 
#reviewquestionsnext{
	text-align:right;
	width:500px;
	}	

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



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



/****************************************************************************************************
          DRB Pages
		  
Description	- These styles are used across the DRB pages
*****************************************************************************************************/
/*this style is used to color, center, and define the size of the footer message found on all DRB pages*/
.purple{
	color:#660033;
	text-align:center;
	font-size: 1.25em!important;
}

/*these styles is used in the employer page tables*/
.tableheader {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.50em!important;
	color: #000000;}
.rowheader {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.05em!important;
	color: #0000FF;}
.emphasis {
	font-size: 1.05em!important;
	color: #000000;}
	
/*this style is used for ul lists with the blueball image as the bullet*/
ul.blueball li {
	background-image: url('drb/images/blueball.gif');
	list-style-image: none;}
/*this style is used for ul lists with the blue square image as the bullet*/
ul.bluesquare li {
	background-image: url('drb/images/bluesquare.gif');
	list-style-image: none;
	background-repeat:no-repeat;
	background-position: left;
	padding: 2px 0px 0px 15px;}
	
/*this style is mainly used on some header tags to make them stand out*/
.headstrong {
	color: #660033!important;}
/****************************************************************************************************
*****************************************************************************************************/



/****************************************************************************************************
          Press Release Pages
		  
Description	- These styles are used across the Press Release pages
*****************************************************************************************************/
/*this style positions the press release banner image on the scereen*/
#pr_banner {
	position: absolute;
	left: 0px;
	top: 24px;}
	
/*this style managees the banner image size*/
#pr_banner img {
	width: 780px;}

/*this style positions the press release date and id number under the banner image and on top of the
page title*/
#pr_content_header {
	height: 70px;
	clear: both;}

/*this style is used to align the press release date to the left*/
.pr_content_header_left {
	top: 40px;}

/*this style is used to align the press release number to the right*/
.pr_content_header_right {
	text-align: right; 
	padding-right: 28px;}
	
/*this style aligns the content h1 tag to the center of the screen*/
.pr_title {
	text-align: center;}
/****************************************************************************************************
*****************************************************************************************************/

.letteredlist{
	list-style-type:lower-alpha;
}