@charset "utf-8";
/* CSS Document */
/*Style things that are going to be consistent throughout the page*/
body{
	background: #030c1b;
	padding: 0;
	margin: auto;
	text-align: center;
	font-family: Helvetica, Arial, Verdana, sans-serif;
}

/*Header Elements*/
h3{
	margin: 30px 15px 0 15px;
	padding: 0;
	font-weight: normal;
	border-bottom: 1px solid #0d4d7c;
}

h3tab{
    font-size: 1.45em;
	padding: 0;
	font-weight: normal;
	border-bottom: 1px solid #0d4d7c;
}

h4{
	margin: 30px 15px 0 15px;
	padding: 0;
	font-weight: normal;
}

h5, h6{
	margin: 5px 15px 0 15px;
	padding: 0;
	font-weight: bold;	
}

h1, h2{
	margin: 35px 15px 0 0;
	padding: 0;
	font-weight: bold;
}

h1{
	color: 	#0d4d7c;
	width: auto;
	margin: 35px 0 15px 0;
	font-size: 2.0em;
	text-transform: uppercase;
	font-weight: bold;
	
}
/*This makes the background image fall in the correct location*/
h1 span{
	padding: 35px 100px 15px 0;
	background: url('../../images/h1BG.png') no-repeat top right;
}

h2{
	color: 	#0d4d7c;
	font-size: 1.5em;
	text-transform: uppercase;
	font-weight: bold;
}

h3{
	color: #000;
	font-size: 1.45em;
}

h4{
	color: 	#000;	
	font-size: 1.3em;
	
}

h5{
	font-size: 1em;
	color: #000;
}

h6{
	font-size: .9em;
	color: #0d4d7c;
}
/*Link elements*/

a{
	color: #00457E;
	text-decoration: none;
}

a:visited{
	color: #00223f;	
	font-weight: normal;
}

a:hover, a:focus{
	color: #ba141a;
	text-decoration: underline;
}
/*All lists*/
ul, ol, dl{
	font-size: .9em;
	margin: 0 10px 0 35px;
	padding: 5px 0 5px 0;
}

ul li{
	list-style: url('../../images/Arrow.png') outside;	
}

ul.noBullet li{
	list-style: none outside;	
}

li{
	line-height: normal;
	padding: .4em 0;
}
/*Paragraphs*/
p{
	font-size: .9em;
	line-height: 1.5em;
	margin: 0;
	padding: 5px 10px 5px 15px;
	font-weight: normal;
}
/*Styles a link that is inside a paragraph*/
p a{
	font-weight: bold;
	text-decoration: underline;
}

p a:visited{
	font-weight: normal;
}

p a:hover, p a:focus{
	text-decoration: none;
}
/*Classes*/
/*Clears both left and right float*/
.clear{
	clear: both;	
}

/*Float item left of content below it*/
.left{
	float: left;	
}

/*Float item right of content below it*/
.right{
	float: right;	
}

/*Padding for floated images*/
img.left, img.right{
	padding: 10px;	
}

/*For in page linked pages i.e. 'My Government" for the back to top link*/
.backToTop{
	font-size: .8em;	
}

/*Hide elements for screen readers*/
.hidden{
	position: absolute;
	left: 0px;
	top: -200px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/*Create the boxes used on the pages*/
.box{
	background: #fff;
	border: 1px solid #86a6bd;
	position: relative;
	width: auto;
}
/*adds space if there is no header element*/
.space{
	margin: 10px 0 0 0;	
}
/*Header 2 is generally used outside the box elements, but can be use in the box, but needs to be adjusted*/
.box h2{
	text-transform: none;
	margin: 20px 15px 0 15px;
	padding: 0 0 0 0;
	border-bottom: 1px solid #0d4d7c;
}
/*Puts a larger border on the top of the box when needed*/
.boxTop{
	border-top: 5px solid #0d4d7c;
	width: auto;
}
/*Used to create columns in the main section of a layout with a sidebar*/
.column{
	width: 330px;
}
/*Used to create two columns on a widescreen*/
.columnWide{
	width: 400px;	
}

/*Used to create a 3-column layout outside of a .box*/
.column3{
	width: 295px;
}
/*used to create a 3 column layout within a .box*/
.box .column3{
	width: 307px;
}
/*Main area of a sidebar template within a .box*/
.columnMain{
	width: 665px;
	float: left;
}
/*Sidebar area of a sidebar template within a .box*/
.columnSide{
	width: 260px;
	padding: 0 0 15px 0;
	background: #c3d1de;
	float: right;
}
/*Align center*/
.center{
	text-align: center;	
}

/*Breaking a single <ul> into multiple columns*/
ul.multi_column{
	list-style: none;
	padding: 5px 0 5px 25px;
	margin: 0;
}

ul.multi_column li{
	padding: .5em 0;	
}

ul.multi_column .column{
	display: block;
	width: 237px;
}


/*Creating horizontal Tabbed boxes to use on the page (Example: Services on Homepage)*/
.hasJS .switched {position:absolute; left:-9999px;}
.hasJS .on {position:relative; top:0; left:0}

ul#tabnav{
width: 668px; 
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
border-bottom: 1px solid #86a6bd;
}

ul#tabnav li{
	display: inline;
	padding: 0;
	margin: 0;
	line-height: 1.5em;
}

ul#tabnav li a{ 
text-align: center;
width: 116px;
display: block;
float: left;
padding: 5px;
margin: 0 7px -3px 0;
text-decoration: none; 
color: #0d4d7c;
text-transform: uppercase; 
border: 1px solid #86a6bd;
border-top: 5px solid #0d4d7c;
background: #fff;
font-weight: bold;
font-size: 15px;
}

ul#tabnav li a:hover, ul#tabnav li a:focus{
		border-top: 5px solid #ba141a;
}

ul#tabnav li a.last{
float: right;
margin: 0 0 -3px 0;
}

ul#tabnav li.on a{  
color: #ba141a;
border-top: 5px solid #ba141a;
border-bottom: 1px solid #fff;
}
/* BOXER */
.boxer {
	border:1px solid #d28c29;
	padding:.5em 1em 2em 1em;
	background:#fff7e7;
	color:#000;
	margin:1em;
	border-radius: 1em;
	font-size: .9em;
	overflow: hidden;
}
.boxer h1:first-child, .boxer h2:first-child, .boxer h3:first-child, .boxer h4:first-child, .boxer h5:first-child, .boxer h6:first-child {
	margin: .25em 0;	
}

div#tabpanel{
background: #fff;
padding: 0px;
border: 1px solid #86a6bd;
clear: both;
margin: -5px 0 0 0;
}

div#tabpanel div {
	padding: 10px;
}

div#tabpanel div.clear {
	padding: 0;
}

div#tabpanel div h3 {
margin: 0;
padding: 0;
}

div#tabpanel div ul li {
}

/*For vertical tabbed navigation (Example: My Government on Homepage)*/
ul#tabnav2{
float: left;
padding: 0;
margin: 0;
width: 215px;
background: #c3d1de;
display: block;
}

ul#tabnav2 li{
list-style: none;
padding:0;
margin: 0;
font-size: .8em;
line-height: 1.3em;
}

ul#tabnav2 li a{ 
text-decoration: none;
font-weight: normal;
color: #000;
width: 210px;
display: block;
padding: 7px 0 6px 10px;
}

ul#tabnav2 li a:hover, ul#tabnav2 li a:focus{
	background: #fff;
	border-left: 5px solid #0d4d7c;
	padding: 7px 0 6px 5px;
}

ul#tabnav2 li a.last{

}

ul#tabnav2 li.on a{  
background: #fff;
border-left: 5px solid #ba141a;
padding: 7px 0 6px 5px;
}

div#tabpanel2{
float: right;
width: 440px;
padding: 0;
margin: 0;
display: block;
}

div#tabpanel2 ul.multi_column{
	padding: 0;
	margin: 0;
}

div#tabpanel2 div {
padding: 10px;
margin: 0;
background: none;
}

div#tabpanel2 div.clear {
padding: 0;
}

div#tabpanel2 div h3 {
margin: 0;
padding: 0;
}

div#tabpanel2 div ul li {

}

.dept_home{
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: right;
	padding: 0 10px 15px 0;
	font-size: .9em;
}

.dept_home a{
	padding: 7px 37px 10px 0;
	background: url('../../images/blueBTN.png') no-repeat top right;
	display:block;
}

/*IDs (In order of appearance on the page)*/
/*This adds the gradient background on the top of the page*/
#background_top{
	background: url('../../images/background.gif') repeat-x #0a306a;
	width: 100%;
	padding-top: 15px;
}

/*IDs are elements that can be used only once per page on the website*/
#container{
	width: 960px;
	text-align: left;
	margin: auto;
}

/*These all control the look and feel of the gold bar at the top of the page*/
/*This is for the <div> container that holds the entire top bar*/
#top_bar{
	display: block;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	width: 960px;
	min-height: 27px;
	background: #f9c033 url('../../images/gold_bar.gif') repeat-x;
	position: relative;
}
/*Puts the rounded right corner on the top bar*/
#top_bar_right{
	background: url('../../images/topbarSOA.gif') no-repeat -170px 0px;
	width: 7px;
	height: 27px;
	float: right;
}
/*This creates the State of Alaska Button on the left hand corner of the top bar*/
#top_bar a#soa{/*This displays the State of Alaska Link if the images don't load*/
	display: block;
	float: left;
	width: 153px;/*Want to set a width and height to make sure that the link doesn't show up under the button image*/
	height: 21px;
	padding: 4px 0 0 15px;
	color:#00006F;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
}

#top_bar a#soa:hover, #top_bar a#soa:focus{
	text-decoration: underline;	
}

#top_bar a#soa span{/*This positions the button image over the text*/
	display: block;
	width: 170px;
	height: 27px;
	background: url('../../images/topbarSOA.gif') no-repeat 0 0;
	position: absolute;
	top: 0;
	left: 0;
}

/*This is the "container" for the list of links on the top bar*/
#top_bar ul{
	padding: 6px 0 0 10px;
	margin: 0;
	float: right;
}
/*This is the styling for each list item in the top bar list of links*/
#top_bar ul li{
	float: left;
	display: inline;
	list-style: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .7em;
	padding: 0 7px;
}
/*Style for the actual links in the top bar*/
#top_bar ul li a{
	color:#00006F;
	font-weight: bold;
	text-decoration: none;
	padding: 0;
	margin: 0;
}
/*Style for the hover / focus state of the list of links in the top bar*/
#top_bar ul li a:hover, #top_bar ul li a:focus{
	text-decoration: underline;
	background: none;
}

/*This control the header element*/
/*This is the container as well as the holder of the actual header image*/
#header{
	display: block;
	width: 960px;
	min-height: 90px;
	background: #112039 url('../../images/headerMenuBG.png') no-repeat 0 0;/*This will need to be changed depending on the background color or style you choose to use*/
	clear: both;
	position: relative;
}

/*This creates the link for the header with an invisible link block*/
#header a#title{/*This styles the text just in case the image doesn't load*/
	color: #ffffff;
	float: left;
	font-size: 1.2em;
	padding: 15px 0 0 15px;
	font-weight: bold;
	display: block;
	/*text-indent: -999px;*//*Use this line of code if the image you are using is transparent and the text would be visible behind it*/
	width: 334px;/* The width and height will need to be set to the above image so that everything shows up appropriately*/
	height: 70px;
}

#header a#title span{/* This hides the text so that you just have a link element, but screenreaders also have the link available*/
	background: url('../../images/headerMenuBG.png') no-repeat -15px -10px;
	display: block;
	width: 349px;
	height: 70px;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 15px;
	top: 10px;
	z-index: 1;
}

/*This styles the search box, mostly taken from DFG's css*/
#search{
	float: right;
	padding: 15px 15px 0 0;
	font-family: Arial, Helvetica, sans-serif;
	text-align: right;
	position: relative;/*Need this to get the absolute positioning to work within this div box*/
}
/*This is the background for the search box*/
#search #searchBox{
	background: url('../../images/searchbox.png') no-repeat top left;
	width: 300px;
}

#searchSelect{
	position: absolute;
	top: 45px;
	right: 15px;
}

#search input, #search label{
	padding: 0;
	margin: 0;
}
/*This is the position and size of the search text field*/
#search #searchtextfield{
	color:#6D6D6D; /*Change this to change the text color*/
	font-size:12px;
	border: none; 
	width: 195px;
	margin: 0;
	position: relative;
	border: none;
	top: -7px;
	right: 0px;
}
/*This is the positioning of the search button*/
#search #searchbutton{
	position: relative;
	padding: 0;
	margin: 0;
	top: 0;
	right: 0;
}
/*This is the styling of the radio button labels*/
#search label{
	font-weight: bold;
	color: #f5f5f5;/*Change this to change the text color*/
	font-size: .7em;
}

/*This is the main menu*/
/*This styles the menu structure*/
#menu{
	clear: both;
	width: 960px;
	height: 28px;
	background: url('../../images/headerMenuBG.png') 0 -90px;
	padding: 0;
	text-transform: uppercase;
	font-family: Helvetica, Arial, sans-serif;
	border-bottom: 4px solid #e4cd6c;
}
/*This styles the first level list*/
#menu ul{
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: bold;
}
/*This styles the first level list items*/
#menu ul li{
	float: left;
	color: #FFF;
	font-size: 1em;
	list-style: none;
}
/*This styles the list item link*/
#menu ul li a{
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
	padding: 2px 20px;
	text-decoration: none;
	display: block;
	border-right: 1px solid #6b7791;
}
/*This styles the first nav item of the list link to not have a left border*/
#menu ul li#first_nav a{
	border-left: none;	
}
/*This adds a right hand border to the last list item to create the illusion of a double border*/
#menu ul li#last_nav{
	border-right: none;	
}
/*This is the rollover effect on the link*/
#menu ul li a:hover, #menu ul li a:focus{
	color: #fff;
	background: #061D40;
}
/*This puts the rollover effect on the list item*/
#menu ul li:hover, #menu ul li:focus, #menu ul li.sfhover{
	color: #fff;
	background: #061D40;
}
/*This does the main styling for all the dropdowns which are wrapped in divs depending on columns*/
#menu ul li div.one_col, #menu ul li div.three_col, #menu ul li div.two_col{
	position: absolute;
	top: -9999px;
	width: 190px;
	padding: 0 5px;
	margin: 0 0 0 0;
	background: #fff;
	position: absolute;
	z-index: 10000;
	text-transform: none;
	font-weight: bold;
	border-top: 4px solid #061D40;
	border-bottom: 4px solid #ba141a;
	left: auto;
}

#menu ul li div.two_col{
	width: 380px;
}

#menu ul li div.three_col{
	width: 570px;
}


/*This is the transparent white background for all the dropdowns*/
#menu div.bg_left{
	background: url('../../images/ltdropdownBG.png') repeat-y 0 0;
	margin: 0 0 0 -15px;
	padding: 0 0 0 15px;
}

#menu div.bg_right{
	background: url('../../images/rtdropdownBG.png') repeat-y top right;
	margin: 0 -17px 0 0;
	padding: 0 15px 0 0;
}

#menu ul li div.column{
	width: 170px;
	padding: 10px;
	float: left;
	overflow: hidden;
}

#menu ul li div.column h4{
	margin: 0;
	padding: 5px 0 0 0;
	font-weight: bold;
	font-size: 1.2em;
	border-bottom: 1px solid #d9e7ef;
}

#menu ul li div.column ul{
	padding: 0 0 20px 0;
	margin: 0;
	list-style: none;
}

#menu ul li div.column li{
	padding: 3px 0 0 0;
	line-height: normal;
	color: #000;
	font-weight: normal;
	list-style: none;
}

#menu>ul>li>ul{
	top: auto;
	left: auto;
	list-style: none;
}
/*This is the hover effect to get the dropdowns to appear*/
#menu ul li:hover div.one_col, #menu ul li:focus div.one_col, #menu ul li.sfhover  div.one_col, #menu ul li:hover div.three_col, #menu ul li:focus div.three_col, #menu ul li.sfhover  div.three_col, #menu ul li:hover div.two_col, #menu ul li:focus div.two_col, #menu ul li.sfhover  div.two_col{
	top: auto;	
}
/*This defines all the lists within lists that constitute the dropdown*/
#menu ul li ul li{
	float: none;
	display: block;
	text-align: left;
	border: none;
	min-width: 170px;
	padding: 0;
	margin: 0;
	list-style: none;
}
/*This is all the links within the dropdown*/
#menu ul li ul li a{
	color: #003a91;
	text-decoration: none;
	font-weight: normal;
	border: none;
	padding: 3px 0;
	margin: 0;
}
/*The hover effect on the links in the dropdown*/
#menu ul li ul li a:hover, #menu ul li ul li a:focus, #menu ul li ul li:hover, #menu ul li ul li:focus, #menu ul li ul li.sfhover {
	color: #ba141a;
	background: none;
}

/*This styles the breadcrumbs*/
#breadcrumbs{
	width: 948px;
	background: #f0ebdb;
	color: #293042;
	font-size: .7em;
	font-weight: bold;
	padding: 2px 0 2px 12px;
	margin: 0;
	clear: both;
}

#breadcrumbs a{
	color: #293042;
	text-decoration: none;
	padding: 0 5px 0 5px;
}

#breadcrumbs a:hover, #breadcrumbs a:focus{
	text-decoration: underline;	
}

/*This controls the main content area*/
#content{
	padding: 10px 15px 15px 15px;
	background: #f0ebdb;
}

/*This creates an easy two column layout where you can insert your information. It is currently set up for a left hand sidebar with a right hand content, but can easily be switched by simply switching the float statements of each the #main and #sidebar to the other side*/
#content #main{
	float: left;
	width: 655px;
	position: relative;
}

#content #sidebar{
	float: right;
	width: 260px;
	position: relative;
}

#content #main #col_one{
	width: 329px;
	float: left;
	padding: 0 10px 0 0;
}

#content #main #col_two{
	float: left;
	width: 329px;
}

/*This is the style for the footer; defines the background that runs the bottom of the page*/
#footer{
	display: block;
	width: 100%;
	min-height: 200px;
	text-align: center;
	margin: auto;
	background: url('../../images/footerBG.gif') repeat-x #030c1b;
	padding-top: 3px;
}
/*Footer Links and content*/
#footer_content{
	display: block;
	width: 960px;
	min-height: 80px;
	padding-top: 10px;
	background: url('../../images/footer_contentBG.gif') repeat-x top;
	text-align: left;
	margin: auto;
	color: #CED4DF;
	font-family: Arial, Helvetica, sans-serif;
}
/*Styles the right and left box of the statewide footer */
#footer_content .right, #footer_content .left{
	padding: 10px 0;	
}

#footer_content .right{
	text-align: right;
	float: none;
	font-size: .75em;
}

#footer_content .left{
	text-align: left;	
}

/* Style the list of links in the footer */
#footer_content ul{
	list-style: none;
	display: inline;
	padding: 0;
	font-size: .8em;
}

#footer_content ul li{
	float: left;
	padding: 0 10px 3px 0;
	list-style: none;
}

#footer_content ul li a, #footer_content a{
	color: #CED4DF;
	text-decoration: underline;
	font-weight: normal;
	padding: 0;
}

#footer_content ul li a:hover, #footer_content ul li a:focus, #footer_content a:hover, #footer_content a:focus{
	text-decoration: none;
	background: none;
}

#footer_content .right .center_item{
	border-left: #526d96 solid 1px;
	border-right: #526d96 solid 1px;
	padding: 0 4px;
}

#footer_content .right .right_item{
	border-left: #526d96 solid 1px;
	padding: 0 0 0 4px;
}

#footer_content .right .left_item{
	border-right: #526d96 solid 1px;
	padding: 0 4px 0 0;
}

/*This styles the department footer*/
#department_footer{
	width: 960px;
	height: 235px;
	text-align: left;
	margin: -5px auto 0 auto;
	background: url('../../images/deptFooterBG.jpg') no-repeat top right;
	font-family: Arial, Helvetica, sans-serif;
}

#department_footer .right, #department_footer .left{
	width: 250px;
	margin: 98px 0 0 20px;
}

#department_footer h4{
	padding: 0;
	margin: 0;
	color: #ddefff;
	border: none;
}

#department_footer ul{
	list-style: none;
	display: inline;
	padding: 0;
	margin: 0;
}

#department_footer .left ul li{
	width: 120px;
	float: left;
	padding: .3em 0;
}

#department_footer ul li{
	padding: 0;
	margin: 0;
	font-size: .8em;
	color: #fff;
	line-height: 1.4em;
	list-style: none;
	
}

#department_footer ul li a, #department_footer a{
	color: #fff;
	text-decoration: none;
	padding: 0;
}

#department_footer ul li a:hover, #department_footer ul li a:focus, #department_footer a:hover, #department_footer a:focus{
	text-decoration: underline;
	background: none;
}

#footer_decoration{
	display: block;	
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	ul#tabnav li a{margin: 0 7px 0 0; border-bottom: none;}
	ul#tabnav li.on a {padding: 5px 5px 6px 5px;}
	div#tabpanel{margin: 0 0 0 0;}
}