/*
Washington State Department of Fish and Wildlife

COLORS

blue       = 344F59
lt blue    = 8EADBA
dark gray  = 7E765B
light gray = BEC195
light tan  = FDFEAC
blue gray  = C9CDE4
orange     = E96B10
brown      = A24E12
lt green   = BEC195
*/

/* General styles
 ***************************************/
body {
	margin:0;
	padding:0;
	border:0;		/* This removes the border around the viewport in old versions of IE */
	width:100%;
	background:#fff;
	min-width:1064px;    	/* Minimum width of layout - remove line if not required */
				/* The min-width property does not work in old versions of Internet Explorer */
	font-size:90%;
	font-family: Verdana,Helvetica,sans-serif;
}
a {
	color:#369;
}
a:hover {
        color: #E96B10;
	text-decoration:none;
}

/* Center Panel Headings */
h1 { }
h2 {
        color: #E96B10;
        margin: .5em 0;
}
h3 {
        color: #E96B10;
        margin: .5em 0;
}
h4 {
        color: #000;
        margin: .5em 0;
}

/* Side Panel Headings */

h5 {
        color: #E96B10;
        margin: .2em 0;
        font-size: 1em;
}
h6 {
        color: #000;
        margin: .2em 0;
}

img {
    border: 0px;   
}

.img_border {
    float: left;
    margin: 0 20px 20px 0;
    border: 1px solid #ddd;
    padding: 5px;
}

/* Header styles
 ***************************************/
#headingwrapper {
        min-width: 1064px;
        /* ie hack to force minimum width */
        width:expression(document.body.clientWidth < 1024? "1064px": "auto" );
}
#header {
	clear:both;
	float:left;
	width:100%;
	background: #8EADBA; /*url(../images/topnav/nav_bg.png) bottom left repeat-x;*/
}

/* Loading
 ***************************************/
#loading {
    vertical-align:middle;
}


/* Breadcrumbs styles
****************************************/
#breadcrumbs {
    padding: .4em 15px;
}

#breadcrumbs a {
    color: #344F59;
}

#breadcrumbs a:hover {
    color: #E96B10;
    text-decoration: underline;
}

/* Top navigation styles
 ************************************************/
#topnav {
	position: relative;
	z-index: 9999999;
}

ul#topnav {
	margin: 0; padding: 0;
	float:left;
	width: 100%;
	list-style: none;
	font-size: 0.75em;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	position: relative;
}
ul#topnav li a {
	float: left;
	text-indent: -9999px;
	height: 30px;
}
ul#topnav li:hover a, ul#topnav li a:hover { 
    background-position: left bottom;
}

ul#topnav a.current {
    background-position: left bottom;
}

ul#topnav a.recovery {
	background: url(../images/topnav/nav_recovery.png) no-repeat;
	width: 200px;
}
ul#topnav a.species {
	background: url(../images/topnav/nav_species.png) no-repeat;
	width: 200px;
}
ul#topnav a.hatcheries {
	background: url(../images/topnav/nav_hatcheries.png) no-repeat;
	width: 200px;
}
ul#topnav a.habitat {
	background: url(../images/topnav/nav_habitat.png) no-repeat;
	width: 200px;
}
ul#topnav a.harvest {
	background: url(../images/topnav/nav_harvest.png) no-repeat;
	width: 200px;
}
ul#topnav li .sub {
	position: absolute;
	top: 30px;
	background: #333; /*url(../images/topnav/sub_bg.png) repeat;*/
	padding: 15px 5px 15px 5px; /*20px 20px 20px;*/
	float: left;
	display: none;
        overflow: hidden;
        /*border: 3px solid #333;*/
}
ul#topnav li .subright {
        right: 1px;
}
ul#topnav li .subleft {
        left: 0;
}
ul#topnav li .submidright {
        right: -200px;
}
ul#topnav li .row {clear: both; float: left; width: 100%; margin-bottom: 10px;}
ul#topnav li .sub ul{
	list-style: none;
	margin: 0; padding: 0;
	width: 200px;
	float: left;
}
ul#topnav .sub ul li {
	width: 100%;
	color: #000;
        text-align: left;
}
ul#topnav .sub ul li h2 {
	padding: 0 0 3px 0px;
        margin: 0;
	font-size: .95em;
	font-weight: bold;
        color: #fc0;
        text-align: left;
}
ul#topnav .sub ul li h2 a {
	padding: 5px 0;
	background-image: none;
        color: #fff;
}
ul#topnav .sub ul li h2 a:hover {
        color: #E96B10;
        text-decoration: underline;
}
ul#topnav .sub ul li a {
	float: none;
	text-indent: 0; 	/*--Reset text indent--*/
	height: auto;
	background: url(../images/topnav/navlist_arrow.png) no-repeat 5px 12px;
	padding: 5px 5px 5px 15px;
	display: block;
	text-decoration: none;
	color: #fff;
}
ul#topnav .sub ul li a:hover {
	color: #E96B10;
        text-decoration: underline;
}
ul#topnav .sub ul li img {
        float: none;
        text-indent: 0;
        height: auto;
        padding: 0 0 0 0px;
        display: block;
	border: 3px solid #fff;
}
#topnav table {
    border-collapse: collapse;
    border: 0px;
    margin: 0;
    padding: 0;
}
#topnav td, th {
    border-right: 1px solid #333;
    padding: 0 -1px 0 5px;
    margin: 0;
    vertical-align: top;
    text-align: center;
}

/* Tab styles
****************************************/
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 21px; /*--Set height of tabs--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 98%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 20px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 20px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #8EADBA;
}
ul.tabs li a {
	text-decoration: none;
	color: #fff;
	display: block;
	font-size: 0.95em;
	padding: 0 10px; /* 0 20px */
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #E96B10;
        color: #fff;
}
html ul.tabs li.active, html ul.tabs li.active a,html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
        color: #000;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left;
        width: 98%;
	background: #fff;
}
.tab_content {
	padding: 10px; /* 20px */
	font-size: 0.85em;
}
.tab_content h2 {
	font-weight: normal;
	padding-bottom: 10px;
	border-bottom: 1px dashed #ddd;
	font-size: 1.8em;
}
.tab_content h3 a{
	color: #254588;
}
.tab_content img {
	float: left;
	margin: 0 20px 20px 0;
	border: 1px solid #ddd;
	padding: 5px;
}

/* Side Tab styles
****************************************/
ul.sidetabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 21px; /*--Set height of tabs--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.sidetabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 20px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 20px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #8EADBA;
}
ul.sidetabs li a {
	text-decoration: none;
	color: #fff;
	display: block;
	font-size: 0.85em;
	padding: 0 5px; /* 0 20px */
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.sidetabs li a:hover {
	background: #E96B10;
        color: #fff;
}
html ul.sidetabs li.active, html ul.sidetabs li.active a,html ul.sidetabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
        color: #000;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.sidetab_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left;
        width: 100%;
	background: #fff;
}
.sidetab_content {
	padding: 5px; /* 20px */
	font-size: 0.85em;
}
.sidetab_content h2 {
	font-weight: normal;
	padding-bottom: 10px;
	border-bottom: 1px dashed #ddd;
	font-size: 1.8em;
}
.sidetab_content h3 a{
	color: #254588;
}
.sidetab_content img {
	float: left;
	margin: 5px; /* 0 20px 20px 0 */
	border: 1px solid #ddd;
	padding: 5px;
}

/* Side navigation styles
****************************************/
#sidnav {
    padding: 20px 0px 0px 0px;
    /*font-family: Verdana,helvetica,sans-serif;*/ /* shouldn't need font-family here...*/
}

#sidnav .sideTitle {
    display: block;
    font-size: .95em;
    font-weight: bold;
    padding: 10px 0px 10px 0px;
}

#sidenav .address  {
    border-top:solid 1px #000;
    border-bottom:solid 1px #000;
    font-size: .75em;
    padding: 15px 0px 15px 0px;
    text-align: center;
}
#sidnav a.sidenavMain:link, a.sidenavMain:visited, a.sidenavMain:active {
    width: 170px;
    color: #333;
    padding: 7px 5px 7px 15px;
    margin: 0;
    background: url(../images/topnav/navsidelist_arrow.png) no-repeat 5px 12px;
    text-decoration: none;
    display: block;
    font-size: .75em;
}
#sidnav a.sidenavMain:hover {
    color: #E96B10;
    text-decoration: underline;
}
#sidnav a.sidenavSub1:link, a.sidenavSub1:visited, a.sidenavSub1:active {
    width: 170px;
    color: #333;
    /*background: url(../images/topnav/navsidelist_arrow.png) no-repeat 15px 12px;*/
    padding: 5px 5px 5px 25px;
    margin: 0;
    text-decoration: none;
    display: block;
    font-size: .75em;
}
#sidnav a.sidenavSub1:hover {
    color: #E96B10;
    text-decoration: underline;
}

/* Right Panel styles
****************************************/
.panel {
    color: #000;
    background: #fff;
    border: 1px solid #E96B10;
    padding: 10px 10px;
    font-weight: normal;
    font-size: .85em;
}
.panelTitle {
    color: #fff;
    background: #E96B10;
    padding: 0.2em 1em;
    font-weight: bold;
    font-size: .95em;
    height: 1.25em;
}
.panelFactSheetTitle {
    color: #fff;
    background: #333;
    padding: 0.2em 1em;
    font-weight: bold;
    text-align: right;
}
.panelLeftFactSheet {
    float: left;
    width: 70%;
    color: #000;
    background: #fff;
    padding: 0;
    font-weight: normal;
}
.panelRightFactSheet {
    float: right;
    width: 25%;
    border-left: 2px solid #999;
    padding: 0 0 0 .3em;
    color: #000;
    font-size: .9em;
}
.panelFactSheetItem {
    float: left;
    width: 45%;
    padding: .1em;
}
.panelCellLeft {
    float: left;
    width: 33%;
    padding: .5em;
}

/* Footer styles
 ***************************************/
#footer {
	background: #333;
        color: #fff;
        font-size: .85em;
        font-weight: bold;
        padding: .3em;
        clear: both;
}
#footer a {
    text-decoration: none;
    color: #E96B10;
}
#footer a:hover {
    text-decoration: underline;
}

/* Clear style
*************************/
.clear {
    clear:both;
    height: 0;
}
.spacer {
    height: 10px;
    min-height: 10px;
}

/* No Border Table Layout Styles
 **********************************************/
table.no_border {
	border-collapse: collapse;
	width: 100%;
	border: none;
}
table.no_border th {
	border: none;
	color: #000;
	padding: 8px;
        text-align: left;
        border-bottom: 1px solid #000;
}
table.no_border td {
	border: none;
	padding: 8px;
	color: #000;
}

/* Database Table Layout Styles
 **********************************************/
table.table_border {
	border-collapse: collapse;
	font-size: 0.75em;
	width: 100%;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
}
table.table_border th {
	border-top: solid 1px #000;
	border-right: solid 1px #000;
	color: #000;
	padding: 5px;
	background: #BEC195;
        text-align: left;
}
table.table_border td {
	border-top: solid 1px #000;
	border-right: solid 1px #000;
	padding: 5px;
	color: #000;
}
.tableTitle {
    	color: #fff;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	padding: 5px;
	border-top: solid 1px #000;
	border-right: solid 1px #000;
        border-left: solid 1px #000;
	background: #333;
	font-weight: bold;
	font-size: 0.85em;
}
table.table_border .title {
	color: #fff;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	padding: 5px;
	border-top: solid 1px #000;
	border-right: solid 1px #000;
	background: #333;
	font-weight: bold;
	font-size: 1.1em;
}
table.hatcheries_detail th,
table.hatcheries_detail td,
table.hatcheries_detail .title {
    padding: 5px 1px;
}
table.table_border a:link.thumb,
table.table_border a:active.thumb,
table.table_border a:visited.thumb {
    text-decoration: none;
    background: #344F59;
    color: #fff;
    width: 223px;
    padding-top: .2em;
    border: 0px solid #344F59;
    margin: 0;
    display: block;
}
table.table_border a:hover.thumb {
    background: #fff;
    color: #344F59;
    width: 223px;
    padding-top: .2em;
    border: 0px solid #344F59;
    margin: 0;
    display: block;
}
/**
*  The width, overflow-x, overflow-y is used as a hack for MS Internet Explorer
*/
table.table_border div.thumb {
    width: 223px;
    height: 148px;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    border: 1px solid #000;
}

/** Essential for placement of the plot_info_float_right 
*/
.plot_wrapper {
    position: relative;
}

/** This panel is currently used for the population escapment graph
*   to show the extra comments as you hover over each data point.
*/
.plot_info_float_right {
    position: absolute;
    top: 100px;
    right: 10px;
    width: 20%;
    font-size: .80em;
    z-index: 5555555;
    border: 2px solid #000;
    background: #ccc;
    display: none;
    padding: .2em;
    float: right;
}

/**********************************************************
    Document   : jquery.tooltip.css
    Created on : Mar 5, 2011, 12:11:45 PM
    Author     : phammp
    Description:
        Supporting styles for jQuery Tooltips.
***********************************************************/

.tip_block {
    display: inline;
}

.tip_trigger {
    cursor:hand;
    cursor:pointer;
}

.tip {
    color: #dedede;
    position: absolute;
    z-index: 1000;
    width: 200px;
    margin: 0;
    padding: 0 .3em 9px .3em;
}

.tip_block .tip { display:none; }

.tip_closer {
    text-align: right;
    padding: .3em;
    font-size: .85em;
    border-top: 3px solid #e96b10;
    border-left: 3px solid #e96b10;
    border-right: 3px solid #e96b10;
    border-bottom: 1px solid #999;
    color: #fff;
    cursor: hand;
    cursor: pointer;
    background-color: #000;
}

.tip_closer a {
    color: #fff;
}

.tip_body {
    padding: .3em;
    font-size: .85em;
    background-color: #000;

}

/**********************************************************
    Created on : Mar 5, 2011, 12:11:45 PM
    Author     : phammp
    Description:
        Supporting styles for jQuery toggle.
**********************************************************/
h5.trigger {
	padding: 0 0 0 30px;
	margin: 0 0 5px 0;
	background: url(../images/jquery.toggle/toggle.png) no-repeat;
	height: 30px;
	line-height: 30px;
	width: 230px;
	font-size: 1em;
	font-weight: normal;
	float: left;
}
h5.trigger a {
	color: #fff;
	text-decoration: none;
	display: block;
}
h5.trigger a:hover { color: #ccc; }
h5.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
	margin: 0 0 5px;
	padding: 0;
        border: 1px solid #d6d6d6;
	background: #fff;
	overflow: hidden;
	font-size: .85em;
	width: 228px;
	clear: both;
}
.toggle_container .block {
	padding: 5px; /*--Padding of Container--*/
}

/**********************************************************
    Created on : Mar 5, 2011, 12:11:45 PM
    Author     : phammp
    Description:
        jQuery - Table Sorter Styles
***********************************************************/
table.tablesorter {
	text-align: left;
}
table.tablesorter thead tr .header {
	background-image: url(../images/jquery.tablesorter/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody td {
	vertical-align: top;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(../images/jquery.tablesorter/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(../images/jquery.tablesorter/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
	background-color: #8EADBA;
}

/**********************************************************
    Created on : Mar 5, 2011, 12:11:45 PM
    Author     : phammp
    Description:
        jQuery - Slider Styles
**********************************************************/
.slider_container {
	width: 700px;
        /*width: 590px;*/
	padding: 0;
	margin: 0 auto;
}
.slider_block {
	left: 50%;
	margin: 0;
}

/*--Main Container--*/
.main_view {
	float: left;
	position: relative;
}
/*--Window/Masking Styles--*/
.window {
	height:350px;
        width: 700px;
        /*width: 590px;*/
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
        border: 1px solid #333;
        margin: 0 0 30px 0;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 480px;
	height: 80px;
	z-index: 8888888; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
        overflow: visible;
}
.paging a {
	color: #fff;
	text-decoration: none;
}
.paging a img {
	border: 5px solid #ddd;
	margin: 5px 0 5px 0;
}
.paging a img:hover {
        border: 5px solid #E96B10;
}
.paging a.active img {
        border: 5px solid #E96B10;
}

/**********************************************************
    Created on : April 26, 2011, 12:11:45 PM
    Author     : phammp
    Description:
        photo strip styles
***********************************************************/
.stripContainer {
	width: 100%;
	padding: 0;
	margin: 0;
}

.stripItem {
	width: 175px;
	height: 175px;
	float: left;
	padding: 5px;
        margin: 20px;
	font-size: .85em;
}

.stripTitle {
	font-size: 1.15em;
	font-weight: bold;
	border-bottom: 1px solid #000;
	text-transform: uppercase;
}

.stripItem img {
	width: 175px;
	height: 75px;
	margin-top: .5em;
	margin-bottom: .5em;
	border: 0px;
}