body {
	background-color: #6E6E6E;
	}

div.pagewrapper {
	position: relative;
	background-color: #6E6E6E;
	width: 770px;
	margin: 20px auto;
	padding: 0 20px;
	}

div.topofpage{
	background-color: rgb(251,253,253);
	}
div.header {
	background-color: rgb(123,113,99); 
	background-image: url(../images/diver_header.jpg);
	height:210px; width: 770px;
	}

div.header2 {
	background-color: rgb(123,113,99); 
	background-image: url(../images/garibaldi_header.jpg);
	height:210px; width: 770px;
	}


.sitename {
	display: block;
	position: relative;
	color: white;
	text-align: right;
	font-family: calibri, helvetica, sans-serif;
	font-size: 17pt;
	left: -510px;
	padding: 0.25em 0.5em;
	top: 80px;  
	}
.redbar {
	color: white;
	background-image: url(../images/redbar.gif);
	height: 31px; width: 770px;
	text-align:left;
	}
.redbarDiver {
	color: white;
	background-image: url(../images/redbar_diver.gif);
	height: 31px; width: 770px;
	text-align:left;
	}
.bluebar {
	color: white;
	background-image: url(../images/redUbar.gif);
	height: 31px; width: 770px;
	text-align:left;
	}
.bluebarHelp {
	color: white;
	background-image: url(../images/redUbar_help.gif);
	height: 31px; width: 770px;
	text-align:left;
	}
.bluebarHelp span.title,
.bluebar span.title,
.redbar span.title{
	font-size:10pt;
	margin-left:29px;
	font-variant: small-caps;
	line-height: 1.25;
	letter-spacing: 3pt;
	}
.bluebar span.portal,
.redbar span.portal {
	margin-left:260px;
	font-variant: small-caps;
	line-height: 1.5;
	letter-spacing: 7pt;
	}

.page {
	position: relative;
	background-image: url(../images/pagewrapper.gif);
	background-repeat: repeat-y;
	background-color: white;
	font-family: calibri, helvetica, verdana, san-serif;
	width: 770px;
	margin: 0 auto;
	padding-top: 0;
	}
.homelogo {
	background-repeat: no-repeat;
	margin: 20px 22px 20px 5px;
	text-align: left;
	padding-left: 10px;
	padding-top: 0px;
	}
.homelogo td h4{
	margin-top:0;
	}
td.logo{
	width:180px;
	padding-left:8px;
	border-right:1px solid #cccccc;
	}
div.logo{
	height:130px;
	width:160px;
	margin-bottom:20px;
	padding-bottom:0;
	text-align:left;
	}
td.intro{
	padding-left:15px;
	}
td.browserComp{
	padding-top:0;
	padding-left:10px;
	font-size:10pt;
	width:520px;
	color:#333333;
	}
.bodydiv {
	margin: 30px 22px;
	}
.instruct {
	display: block;
	position: absolute;
	top: 100px;
	margin: 0 0 0 120px;
	font-family: verdana, arial, sans-serif;
	font-size: small;
	}
.instructRed {
	color: rgb(220,100,60);
	font-family: calibri, helvetica, arial;
	font-size: 10pt;
	}

.instructOrange {
	display: none;
	color: black;
	background-color: rgb(235,235,235);  /*rgb(0,110,140);*/
	font-family: verdana, arial, sans-serif;
	font-size: small;
	font-variant: small-caps;
	padding: 0.25em;
	margin: -11px -13px 0 -13px;
	}
.red { color: #b82541;
	text-decoration: none;}
.redItalic{
 	color: #b82541;
	text-decoration: none;
	font-style:italic;
	font-size: 11pt;
	padding: 0 20px;
	text-align:center;
	}

.login {
	width: 18em;
	margin: 0 auto;
	padding: 0.5em;
	text-align: right;
	background-color: rgb(184,37,65);
	border: 1px solid black;
	color: white;
	line-height: 1.5em;
	}
.login #UserName,
.login #Password{
	width: 200px;
	margin-bottom:3px;
}

.colophon {
	background-image: url(../images/pagebottom.gif);
	color: rgb(184,37,65);
	color: #333333;
	text-align: center;
	font-size: 8pt;
	padding: 0 20px;
	height: 30px;
	letter-spacing: 0.6pt;
	line-height: 2.25;
	}
.colophon .right {
	float: right;
	}
.colophon .left {
	float: left;
	}

a {
	color: #002C52; //#b82541;
	text-decoration: none;
	border-bottom: 1px dotted #002C52;
	}
a:visited{
	color: #164268;
	border-bottom: 1px dotted  #164268;
	}
.colophon a{
	color: #333333;
	text-decoration: none;
	border-bottom: 1px dotted #333333;
	}
.colophon a:hover,
a:hover {
	color: #b82541;
	border-bottom: 1px solid #b82541;
	}

.help {
	position: relative;
	color: white;
	text-align: right;
	width: 5em;
	left: 620px;
	top: -17px;	
	font-family: helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	white-space: pre;
	}
a.white,
.white { 
	color: #eeeeee;
	text-decoration: none;
	border-bottom: 1px dotted white;
	}
.white:hover { 
	color: #ffffff;
	border-bottom: 1px solid white;
	}

form a,
form a:visited,
form a:hover{
	border-bottom-style:none;
	}


/******************   FORM:  ******************/
fieldset {
	width: 500px;
	margin: 0 auto;
	padding: 2px 2px 20px 2px;
	background-color: rgb(249,251,251);
	border: 1px solid rgb(230,228,220);
	font-family: calibri, helvetica, sans-serif;
	font-size: 10pt;
	}
fieldset.transects {
	margin-top: 32px;
	margin-top:2.5em;
	}
fieldset.siteInfo{
	margin-top:20px;
	}

legend,
.legend {
	position: relative;
	margin: 1px 1px 8px 1px;
	font-size: 12pt;
	color: white;
	font-variant: small-caps;
	background-image: url(../images/grey_bar.gif);
	border: 1px solid rgb(230,228,220);
	padding: 0px;
	white-space: pre;
	}

.legend {
	width: 504px;
	}

table.formtable {
	margin: 10px auto 15px auto;
	}
.formtable th {
	font-size: medium;
	vertical-align: bottom;
	}
.formtable td {
	padding: 0 2px 1px 2px;
	text-align: right;
	vertical-align: top;
	}
input#missingdata {
	float: left;
	}
img {
	border: none;
	vertical-align: sub;
	margin-right: -4px;
	margin-left: 2px;
	}

.formtable td.aligncenter{
	text-align: center;
	margin: 0 auto;
	}
.formtable td.alignleft{
	text-align: left;
	}

.formlist td {
	text-align: center;
	vertical-align: top;
	}

.buffer {
	height: 20px;
	}

.note {
	display: table-cell;
	width: 3.5em;
	font-size: 8.5pt;
	color: rgb(220,100,60);
	text-align: center;
	}

input.required {
	border-color: red;
	}

label.leftfloat {
	float: left;
	vertical-align: top;
	margin-bottom: 5px;
	}
#submit,
input#submit,
input#continue {
	float: right;
	margin: 20px 50px;
	}
input#other {
	float: left;
	margin: 20px -40px 20px 50px;
	}

.pagetop{
	display: block;
	height: 45px;
	margin: -20px 0px 0px 0px;
	}
.pagetop * {
	margin: 5px 50px;
	}

.select input {
	margin: 0.5em 0 0.5em 2em;
	}
.extralong{
	width: 280px;
	}
.big {
	width: 150px;
	}
.small {
	width: 50px;
	}
.medium {
	width: 100px;
	}


.readonly {
	background-color: rgb(255,253,220);
	border: 1px solid rgb(200,185,100);
	margin-left: 2px;
	padding-left: 2px;
	}


fieldset.siteInfo{
	width:600px;
	}
.siteInfo .legend{
	width:604px;
	}
.siteInfo .formtable{
	width:570px;
	}
.siteInfo textarea{
	width: 200px;
	}

/*************** For any Error Messages:  ***************/

.ErrorMsg { 
	display: block;
	margin: 5em auto;
	width: 280px;
	padding: 10px;
	text-align: left;
	background-color: rgb(200,200,200);
	border: 1px solid rgb(175,175,175);
	font-family: times, sans-serif;
	}
EM {
	font-weight: bolder;
	}



/*************** Pure CSS ToolTips **********************/

a#tooltip {
    position:relative; 	/*this is the key*/
    z-index:200;
    text-decoration:none;
	cursor: help;
	}

a#tooltip:hover{
	z-index:201;
	cursor: help;
	}

a#tooltip span{display: none}

a#tooltip:hover span{ 	/*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:1em; width:10em;
	background-color: #901010;
	border: 1px solid #7A1931;
	padding:2px;
	color:white;
	font-family: sans-serif;
	font-size: 9pt;
	font-weight:normal;
    text-align: center;
	text-decoration:none;
	z-index:202;
	-moz-opacity:0.93;
	}

a#tooltip:hover span.largeSpan{ 	/*the span will display just on :hover state*/
   	top:-4px; left:175px; width:25em;
	padding: 8px;
	background-color: #f3f7fa;
	border: 1px solid #cccccc;
	color:#2B5166;
	font-size: 10pt;
	font-weight:bold;
    text-align: left;
	text-decoration:none;
	cursor: default;
	-moz-opacity:1;
	}

a#tooltip span.normalstate{
	display: none;
	z-index:201;
	text-align:left;
	padding:3px;
	}

a#tooltip span.hoverstate{ 
    display:block;
    position:absolute;
    top:2em; left:1em; width:10em;
	background-color: #901010;
	border: 1px solid #7A1931;
	padding:2px;
	color:white;
	font-family: sans-serif;
	font-size: 9pt;
	font-weight:normal;
    text-align: center;
	text-decoration:none;
	z-index:202;
	}
	
	
/**************** Spiffy Curved Divs **************/

.spiffy{display:block;
	width: 750px;
	margin: 0 auto;}
.spiffyOrange{display:block}
.spiffy *{
       display:block;
       height:1px;
       overflow:hidden;
       font-size:.01em;
       background: rgb(200,200,200); 
	}
.spiffyOrange *{
       display:block;
       height:1px;
       overflow:hidden;
       font-size:.01em;
       background: rgb(29,64,92);
	}
.spiffy1{
       margin-left:3px;
       margin-right:3px;
       padding-left:1px;
       padding-right:1px;
       border-left:1px solid #966061;
       border-right:1px solid #966061;
       background:#b9a8a9;
	}
.spiffy2{
       margin-left:1px;
       margin-right:1px;
       padding-right:1px;
       padding-left:1px;
       border-left:1px solid #721616;
       border-right:1px solid #721616;
       background:#c0b6b7;
	}
.spiffy3{
       margin-left:1px;
       margin-right:1px;
       border-left:1px solid #c0b6b7;
       border-right:1px solid #c0b6b7;
	}
.spiffy4{
       border-left:1px solid #966061;
       border-right:1px solid #966061;
	}
.spiffy5{
       border-left:1px solid #b9a8a9;
       border-right:1px solid #b9a8a9;
	}


/**************** Hide / Show Divs *********************/

.click {
	cursor: pointer;
	}
#ClickyDiv {
	width: 42em;
	background-color: rgb(204,102,102);
	border: 1px solid rgb(255,204,204);
	padding: 0.75em;
	font-family: calibri, helvetica, arial;
	font-size: 10pt;
	margin: 0 auto;
	cursor: pointer;cursor:hand;
	}
#ClickyDiv:hover {
	background-color: rgb(157,198,235)
	}

#ToggledDiv {
	display: none;
	width: 42em;
	margin: -1px auto 0 auto;
	background-color: rgb(255,204,204);
	border: 1px solid rgb(204,102,102);
	border-top: none;
	padding: 0.75em;
	font-family: calibri, helvetica, arial;
	font-size: 10pt;
	}
#ToggledDiv1 {
}

#ToggledDiv2,
#ToggledDiv3,
#ToggledDiv4 {
	/*display: none;*/
	}

/*************    The Table of Contents / SUCKERFISH     **************/

.TOC {
	width: 725px;
	height: 38px;
	margin: 15px 15px -50px 25px;
	background-image: url(../images/graybar.gif);
	background-repeat: no-repeat;
	border: none;
	z-index: 45;
	}
#nav ul {
	vertical-align: middle;
	z-index: 46;
	}

.visited {
	background-image: url(../images/tealbar.gif);
	height: 38px;
	width: 90px;
	}
.visitedleft{
	background-image: url(../images/tealbar_left.gif);
	height: 38px;
	width: 90px;
	}
.visitedright{
	background-image: url(../images/tealbar_right.gif);
	height: 38px; width: 90px;
	margin-left: -1px;
	}
.not 	{
	background-image: none;
	height: 38px; width: 90px;
	}
.current {
	background-image: url(../images/greenbar.gif);
	height: 38px;
	width: 90px;
	}
.currentleft {
	background-image: url(../images/greenbar_left.gif);
	height: 38px; width: 90px;
	}	
.currentright {
	background-image: url(../images/greenbar_right.gif);
	height: 38px; width: 90px;
	margin-left: -1px;
	}
#nav a,
#nav p{
	text-decoration: none;
	width: 90px;
	font-family:arial;
	font-size:0.8em;
	height: 38px;
	margin-top: 0;
	border-bottom-style:none;
	}
#nav a:hover {
	-moz-opacity:0.35;
	}
#nav p:hover {
	cursor: default;
	-moz-opacity:0.35;
	}
#nav li {
	margin-top: 0px;
	text-align: center;
	width: 90px;
	vertical-align: middle;
	}
#nav li ul { /* second-level lists */
	background-color: rgb(252,255,255); /*rgb(255,250,231);*/
	border: 1px solid rgb(190,190,190); /*rgb(246,216,126);*/
	color: white;
	top:83px;
	}
#nav li ul li {
	margin-top: 10px;
	}
#nav li ul li a:hover {
	text-decoration: underline;
	background-image: none;
	}

.done
a:visited.done {
	color: rgb(0,64,128);
	}
.incomplete,
a:visited.incomplete {
	color: rgb(150, 145, 145);
	}
.error,
a:visited.error {
	color: rgb(185,30,60);
	}

#nav li.current,
#nav li.visited {
	width: 100px;
	}
#nav form {
	padding: 0;
	height: 15px;
	margin: -6px 0 0 0;
	}
#nav form.firstForm {
	height: 38px;
	margin: 0;
	}

.submitLink {
   	background-color: transparent;
   	border: none;
	border-left: 4px solid transparent;
   	cursor: pointer;
   	cursor: hand;
	margin: -1px 7px 3px 3px;
	padding-left: 1px;
	height: 18px;
	width: 95px;
	text-align: left;
  }

.siteLink{
   	background-color: transparent;
   	border: none;
   	cursor: pointer;
   	cursor: hand;
	text-decoration: none;
	font-family:arial;
	font-size:0.8em;
	height: 38px;
	margin-top: 0;
	}
.siteLink:hover {
	-moz-opacity:0.35;
	}
#nav li ul li input.done {
	color: rgb(0,153,102); /*rgb(0,64,128);*/
	background-image: url(../images/checkmark.gif);
	background-repeat: no-repeat;
	background-position: center right;
	}
#nav li ul li input.error {
	color:rgb(185,30,60);
	background-image: url(../images/xmark.gif);
	background-repeat: no-repeat;
	background-position: center right;
	}
#nav li ul li input.incomplete {
	color: rgb(150, 145, 145);
	}
#nav li ul li .submitLink:hover {
	border-left: 4px solid rgb(189, 39, 66);
	background-color: white;
	color: rgb(189, 39, 66);
	}



/*************   QUICK REVIEW PAGE     **************/

.reviewDiv {
	background-color: rgb(249,251,251);
	border: 1px solid rgb(230,228,220);
	margin: 15px auto;
	width: 660px;
	}

.displayTable {
	background-color: rgb(249,251,251);
	border: none; /*1px solid rgb(190,190,190);*/
	margin: 5px auto 10px auto;
	width: 650px;
	border-collapse: collapse;
	font-size: 11pt;
	white-space: pre;
	text-align: left;
	}
.displayTable th {
	border: 1px solid rgb(150,150,150);
	border-width: 0 0 1px 0;
	color: white;
	padding-left: 3px;
	height: 20px;
	background-color: rgb(164,162,153);
	}
.displayTable td {
	border: 1px solid rgb(220,220,220);
	border-width: 0 0 1px 0;
	padding-left: 3px;
	}
th.first{
	width:15px;
	}
th.second{
	width:100px;
	}

.displayTable td p {
	font-family: times, serif;
	font-size: 10pt;
	margin: 1px;
}

.displayTable td p.red{
	color: red;
}
.displayTable td p.black{
	color: black;
}
.displayTable td span.lower{
	text-transform: lowercase;
}

.displayTable td p:hover{
	text-decoration: none;
}

div.DiverOnly{
	margin: 20px;
	}
.DiverOnly #DiverSubmit{
	float: right;
	margin: 10px;
	}
div.AdminOnly{
	margin: 20px;
	background-color: rgb(255,255,204);
	border: 1px solid gold;
	}
.AdminOnly #AdminSubmit,
.AdminOnly #AdminSubmit2{
	float: right;
	margin: 10px;
	}

/****************  For notes  *********************/

.nb {
	color: rgb(220,100,60);
	font-family: helvetica, sans-serif;
	font-size: 8pt;
	margin-top:0px;
	}

/**************** Fish Form Switch  *********************/

div.switchform {
	position: absolute;
	top: 135px;
	top:12.0em;
	left: 127px;
	width: 10em; 
	height: 20px;
	background-color: rgb(249,251,251); 
	border: 1px solid rgb(230,228,220);
	border-bottom:2px solid rgb(255,253,246);
	padding: 5px;
	}
.switchform input {
	position: absolute;
	top: -15px;
	left: 6em;
	}
/******************  Top Buttons:  ******************/
div#topButtons{
	position:relative;
	top:-5px;
	width:100%; height:25px;
	margin:0;
	}
#topButtons input,
#topButtons input#Other{
	margin-top:0;
	}

div#skipUrchin{
	width:680px;
	margin:20px auto 10px auto;
	padding:5px;
	color:white;
	text-align:left;	
}
div#skipUrchin input{
	margin-left:5px;
	text-align:left;
}
.skipRed{
	background-color:red;
	border:1px solid darkred;
}
.skipBlue{
	background-color:#00968A;
	border:1px solid #00887C;
}
/**************** Fish & Invert Entry Tables  *********************/
table.fish {
	border-collapse: collapse;
	width: 510px;
	}
.fish td {
	padding: 2px;
	vertical-align: middle;
	}
.fish th {
	border-top: 1px solid rgb(230,228,220);
	border-bottom: 1px solid rgb(230,228,220);
	background-image: url(../images/grey_bar.gif);
	color: white;
	}
.fish a {
	color: white;
	}

/* ODD ROWS*/
.Row1 td, .Row3 td, .Row5 td, .Row7 td, .Row9 td, 
.Row11 td, .Row13 td, .Row15 td, .Row17 td, .Row19 td, 
.Row21 td, .Row23 td, .Row25 td, .Row27 td, .Row29 td, 
.Row31 td, .Row33 td, .Row35 td, .Row37 td, .Row39 td, 
.Row41 td, .Row43 td, .Row45 td, .Row47 td, .Row49 td,
.Row51 td, .Row53 td, .Row55 td, .Row57 td, .Row59 td,
.Row61 td, .Row63 td, .Row65 td, .Row67 td, .Row69 td, 
.Row71 td, .Row73 td, .Row75 td, .Row77 td, .Row79 td, 
.Row81 td, .Row83 td, .Row85 td, .Row87 td, .Row89 td,
.Row91 td, .Row93 td, .Row95 td, .Row97 td, .Row99 td  {
	background-color: rgb(249,251,251);
	}

/* EVEN ROWS */
.Row td, 
.Row0 td, .Row2 td, .Row4 td, .Row6 td, .Row8 td, 
.Row10 td, .Row12 td, .Row14 td, .Row16 td, .Row18 td,
.Row20 td, .Row22 td, .Row24 td, .Row26 td, .Row28 td,
.Row30 td, .Row32 td, .Row34 td, .Row36 td, .Row38 td,
.Row40 td, .Row42 td, .Row44 td, .Row46 td, .Row48 td, 
.Row50 td, .Row52 td, .Row54 td, .Row56 td, .Row58 td,
.Row60 td, .Row62 td, .Row64 td, .Row66 td, .Row68 td,
.Row70 td, .Row72 td, .Row74 td, .Row76 td, .Row78 td,
.Row80 td, .Row82 td, .Row84 td, .Row86 td, .Row88 td, 
.Row90 td, .Row92 td, .Row94 td, .Row96 td, .Row98 td, .Row100 td {
	background-color: rgb(208,211,214);
	}

.fish .center {
	text-align: center;
	}

.KelpRow {
	background-color: rgb(164,162,153);
	color: white;
	height: 40px;
	}





/******************   FAQs:  ******************/

.question {
	color: rgb(75,120,145);
	border-bottom: 1px solid white;
	cursor: pointer;
	cursor: hand;
	padding: 0 12px 0 0;
	margin-top: 15px;
	}
.question:hover{
	text-decoration: underline;
	}
.answer{
	display: none;
	width: 650px;
	border: 1px solid rgb(230,228,220);
	padding: 3px 10px;
	}

.all{
	display: block;
	float: right;
	font-size: 11pt;
	}
	
	
/******************  CALENDAR IMGs:  ******************/	
img#calendar1,
img#calendar2{
	cursor:pointer;
	}
	
	
	
/******************   NO SCRIPT:  ******************/

div.noscript{
	position: fixed;
	top: 0; left: 0;
	width: 100%; 
	background-color: red;
	color: white;
	font-weight:bold;
	z-index: 300;
	text-align: center;
	padding: 0;
	}
.noscript a{
	color:white; 
	text-decoration:underline;
	}
.noscript a:hover{
	color:yellow;
	}

	
.browser_warning{
	width:700px;
	margin: 0.5em auto;
	padding:5px;
	background-color: #901010;
	border: 1px solid rgb(180,40,0);
	color:white;
	font-size:11pt;
	}
.browser_warning a{
	color:white; 
	text-decoration:underline;
	}
.browser_warning a:visited{
	color:#cccccc;
	}
.browser_warning a:hover{
	color:yellow;
	}