/*****************************************************************************************************
****************************************************************************************************
Description		- Basic style sheet used for the look-and-feel of the State of Alaska (SOA) level pages.
				  These styles modify the styles declared in the basic_style.css document.  Both style
				  sheets should be declared within the SOA level pages.
				  
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

				20090629 - Created
*****************************************************************************************************/

/*****************************************************************************************************
				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 extends the front header to encompass the large banner*/
#header {
	position: relative;
	background: #FFFFFF url(images/search_header.gif) top left no-repeat;
	padding: 0px;
	margin-bottom: 0px;
	height: 150px;}
	
#soaheader {
	position: relative;
	background: #FFFFFF url(images/search_header.gif) top left no-repeat;
	padding: 0px;
	margin-bottom: 0px;
	height: 35px;}

#soaheadlinks {
	position: absolute;
	left: 22px;
	top: 3px;
	width: 550px;
	height: 24px;
	border: 0px;
	margin: 0px;
	padding: 0px;}

#soaheadlinks 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; }

#soaheadlinks 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; }

#header.soa_level{
	height: 184px;}
/****************************************************************************************************/

/*****************************************************************************************************
				SEARCH
*****************************************************************************************************/
#search, #soa_search {
	position: absolute;
	left: 525px;
	top: 1px;
	width: 140px;
	height: 24px;
	border: 0px;
	margin: 0px;
	padding: 0px;
	text-align: right; }
	
#search img{ margin-right: 5px; }
/*this style is used for the second search image in the DOA and SOA home pages.*/
#search_doa { top: 150px; left: 522px; }
/*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; }
/*this style moves the search image to the right side of the header.  It is used in the
DOA and SOA home pages.*/
#soa_search {
	left: 508px;
}


#googlestuff{
	position: absolute;
	vertical-align: middle; 
	left: 645px;
	top: 2px;
	width: 130px;
	height: 24px;
	border: 0px;
	margin: 0px;
	padding: 0px;}
#soagooglestuff{
	position: absolute;
	vertical-align: middle; 
	left: 645px;
	top: 1px;
	width: 134px;
	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;
}

/*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 */
#soacrumb {
	margin: 0px; 
	padding: 0px 0px 0px 10px; 
	font: normal 0.7em Arial, Helvetica, Tahoma, sans-serif; 
	background-color: #FFFFFF; }

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

#soacrumb a:hover   { 
	color: #0066CC;
	text-decoration:underline; }
	
#soacrumb h1{
	margin: 0px; 
	padding: 0px 0px 0px 0px; 
	font: bold 2.5em Arial, Helvetica, Tahoma, sans-serif; 
	color: #00007C; }
/*****************************************************************************************************
*****************************************************************************************************/



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



/*****************************************************************************************************
				CONTENT_PARTIAL AND SIDEBAR
*****************************************************************************************************/
#content_partial { 
	position: relative;
	padding: 10px 1px 5px 10px;
	margin-right: 220px;
	margin-left: 0px;
	color: #666666;
	text-decoration: none; }
	
#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: 410px!important;
	margin-left: 140px!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: 252px;
	margin: 0px;
	padding: 0px; }
	
#content_center {
	float: none!important;
	margin-left: 260px;
	margin-right: 260px;}
	
#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; }
/****************************************************************************************************/

/*****************************************************************************************************
				SOA HOME
These styles are used in the SOA home page.
*****************************************************************************************************/
#top {
	height: auto;
}

#top_center {
	margin-left: 220px;
	width: 290px; 
	background-color: #FFFFFF;
	vertical-align: top; 
}

#top_left {
	float: left;
	width: 210px;  
	background-color: #FFFFFF;
	vertical-align: top; 
}

#top_right {
	float: right;
	width: 270px; 
	background-color: #FFFFFF;
	vertical-align: top; 
}

#middle { height: 260px; }
/********************************************************************/

#soa_header { width: 50px; }
.soa_content {
	font: normal .75em Arial, Helvetica, sans-serif;
	color: #666666;
}
.soa_content p { padding: 0px 10px 5px 10px; }
.soa_content ul {
	list-style-type:none;
	padding:0px;
	margin:0px;
}
.soa_content li {
	background-image:url(images/gray_arrow_wide.gif);
	background-repeat:no-repeat;
	background-position:0px 0px;
	padding: 2px 0px 0px 30px;
}
.soa_content a:link, .soa_content a:visited {
	text-decoration: none;
	color: #333399; 
}
.soa_content a:hover { text-decoration: underline; }
.soa_content a:active { 
	color: #666699; 
	text-decoration: none;}

/*fixes the lelvel1 class padding*/
.soa_content ul.level1 {
	padding-top: 15px;
	padding-left: 30px;}

.soa_content h1 { 
	padding-top: 2px;
	padding-bottom: 10px; 
	color: #00007C; 
	font: bold 1.5em Arial, Helvetica, Tahoma, sans-serif;}

/*ensures that all h2 tags within the soa_content class show up proper*/
.soa_content h2 {
	color: #00007C; 
	font: bold 1.25em Arial, Helvetica, Tahoma, sans-serif;
	padding-left: 30px;}
	
.soa_content hr { border: 1px solid rgb(153, 153, 153);}

/*used for the Back to top links that show up in directory listing or other types of
lists where the user can use anchors to find data on a page*/	
.soa_content p.backToTop {
	font-size: .80em;
	padding-left: 30px;
	padding-top: 10px;
	padding-bottom: 15px;}
	
/**/
.soa_padding {
	padding: 10px 0px 0px 10px!important;}
	
/*used for the webmart page items...it helps so that the images do not overlap or cluter*/
.webmart_item {
	height: 130px;}
.webmart_item_small {
	height: 80px;}
	
/*this is the style used for the blue line image underneath the banner*/
#soa_blue_line {
	position:absolute;
	margin-left: 0px;
	top: 183px;}