* {
    FONT-FAMILY: Arial, Helvetica, sans-serif;
}
p {
    FONT-FAMILY: Arial, Helvetica, sans-serif;
	COLOR: #545454;
	FONT-SIZE: 12px;
    text-align: justify;
    text-justify: newspaper;
}

html {
    overflow-y: scroll;
}

html, body, form {
    PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-LEFT: 0px;
	PADDING-RIGHT: 0px;
	PADDING-TOP: 0px;
}
.clear {
    CLEAR: both
}
h1,h2,h3,h4,h5,h6 {
    PADDING-BOTTOM: 0px;
    MARGIN: 10px 0px 0px;
    PADDING-LEFT: 0px;
    PADDING-RIGHT: 0px;
    PADDING-TOP: 0px;
}
h1 {
	COLOR: #007bb6;
	FONT-SIZE: 18px;
	FONT-WEIGHT: bold;
}
h2 {
	COLOR: #007bb6;
	FONT-SIZE: 16px;
}
h3 {
	COLOR: #545454;
	FONT-SIZE: 16px;
	FONT-WEIGHT: bold;
}
h4 {
	COLOR: #545454;
	FONT-SIZE: 14px;
	FONT-WEIGHT: bold;
}
h5 {
	COLOR: #000000;
	FONT-SIZE: 16px;
}
h6 {
	COLOR: #000000;
	FONT-SIZE: 14px;
}
a:link, a:visited, a:active, a:hover {
    COLOR: #007bb6
}
a:hover {
    TEXT-DECORATION: none;
}
a img {
    border: none;
}
table {
  empty-cells: show;
}
.errorMessage {
    color: red;
    font-weight: bold;
}
#container {
    PADDING-BOTTOM: 0px;
	MARGIN: 0px auto;
	PADDING-LEFT: 18px;
	WIDTH: 960px;
	PADDING-RIGHT: 12px;
	PADDING-TOP: 7px;
}
#innercontent {
    COLOR: #444444;
	FONT-SIZE: 12px;
}
.banner_bg {
    BACKGROUND-IMAGE: url(http://www.health-e-waterways.org/images/body_bg.gif);
	BACKGROUND-REPEAT: repeat-y;
	HEIGHT: 200px;
}
UL#navigation {
    PADDING-BOTTOM: 0px;
	LIST-STYLE-TYPE: none;
	MARGIN: 0px;
	PADDING-LEFT: 0px;
	WIDTH: 213px;
	PADDING-RIGHT: 0px;
	LIST-STYLE-IMAGE: none;
	PADDING-TOP: 0px;
}
UL#navigation LI {
    PADDING-BOTTOM: 0px;
	LINE-HEIGHT: 0;
	MARGIN: 0px;
	PADDING-LEFT: 0px;
	WIDTH: 205px;
	PADDING-RIGHT: 0px;
	DISPLAY: block;
	PADDING-TOP: 0px;
}
UL#navigation A:link {
    PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-LEFT: 0px;
	PADDING-RIGHT: 0px;
	FONT-FAMILY: Arial, Helvetica, sans-serif;
	FONT-SIZE: 12px;
	FONT-WEIGHT: bold;
	TEXT-DECORATION: none;
	PADDING-TOP: 0px;
}
UL#navigation A:visited {
    PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-LEFT: 0px;
	PADDING-RIGHT: 0px;
	FONT-FAMILY: Arial, Helvetica, sans-serif;
	FONT-SIZE: 12px;
	FONT-WEIGHT: bold;
	TEXT-DECORATION: none;
	PADDING-TOP: 0px;
}
UL#navigation A:active {
    PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-LEFT: 0px;
	PADDING-RIGHT: 0px;
	FONT-FAMILY: Arial, Helvetica, sans-serif;
	FONT-SIZE: 12px;
	FONT-WEIGHT: bold;
	TEXT-DECORATION: none;
	PADDING-TOP: 0px;
}
UL#navigation A:hover {
    PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-LEFT: 0px;
	PADDING-RIGHT: 0px;
	FONT-FAMILY: Arial, Helvetica, sans-serif;
	FONT-SIZE: 12px;
	FONT-WEIGHT: bold;
	TEXT-DECORATION: none;
	PADDING-TOP: 0px;
}
UL#navigation A SPAN {
    PADDING-BOTTOM: 7px;
	LINE-HEIGHT: normal;
	BACKGROUND-COLOR: #00557e;
	MARGIN: 0px;
	PADDING-LEFT: 12px;
	WIDTH: 183px;
	PADDING-RIGHT: 10px;
	DISPLAY: block;
	BORDER-TOP: #ffffff 1px solid;
	CURSOR: pointer;
	PADDING-TOP: 7px;
}
UL#navigation UL {
    Z-INDEX: 2000;
	PADDING-BOTTOM: 0px;
	LIST-STYLE-TYPE: none;
	MARGIN: 0px;
	PADDING-LEFT: 0px;
	WIDTH: 205px;
	PADDING-RIGHT: 0px;
	DISPLAY: none;
	FLOAT: none;
	LIST-STYLE-IMAGE: none;
	PADDING-TOP: 0px;
}
UL#navigation UL LI {
    FLOAT: none
}
UL#navigation UL UL {
    POSITION: absolute
}
UL#navigation LI A:link {
    BACKGROUND-COLOR: #dde9ef;
	COLOR: #76868e
}
UL#navigation LI A:visited {
    BACKGROUND-COLOR: #dde9ef;
	COLOR: #76868e
}
UL#navigation LI A SPAN {
    BACKGROUND-COLOR: #dde9ef
}
UL#navigation LI A:active {
    BACKGROUND-COLOR: #c9dde8;
	COLOR: #ffffff
}
UL#navigation LI A:active SPAN {
    BACKGROUND-COLOR: #c9dde8
}
UL#navigation LI A:hover {
    BACKGROUND-COLOR: #0372ac;
	COLOR: #ffffff
}
UL#navigation LI A:hover SPAN {
    BACKGROUND-COLOR: #0372ac;
	COLOR: #ffffff
}
UL#navigation UL LI A SPAN {
    PADDING-BOTTOM: 7px;
	BACKGROUND-COLOR: #c9dde8;
	PADDING-LEFT: 20px;
	WIDTH: 174px;
	PADDING-RIGHT: 10px;
	PADDING-TOP: 7px;
}
UL#navigation UL LI A:hover SPAN {
    PADDING-BOTTOM: 7px;
	BACKGROUND-COLOR: #0372ac;
	PADDING-LEFT: 20px;
	WIDTH: 174px;
	PADDING-RIGHT: 10px;
	PADDING-TOP: 7px;
}
.active {
    FONT-FAMILY: Arial, Helvetica, sans-serif;
	COLOR: #80818e;
	FONT-SIZE: 10px;
	FONT-WEIGHT: bold
}
#main_body {
    BACKGROUND-IMAGE: url(http://www.health-e-waterways.org/images/body_bg.gif);
	PADDING-BOTTOM: 0px;
	MARGIN: -4px 0px -1px;
	PADDING-LEFT: 0px;
	WIDTH: 960px;
	PADDING-RIGHT: 0px;
	BACKGROUND-REPEAT: repeat-y;
	PADDING-TOP: 0px;
}
.body_container {
    PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-LEFT: 0px;
	WIDTH: 747px;
	PADDING-RIGHT: 0px;
	FLOAT: left;
	PADDING-TOP: 0px;
}
.body_container ul li {
    COLOR: #545454;
	LIST-STYLE-IMAGE: url(http://www.health-e-waterways.org/images/list_bullet.gif)
}
dl  {
    color: #444444;
    font-size: 10pt;
}
dt {
    color: #545454;
    font-weight: bold;
    margin-top: 3ex;
    margin-bottom: 1ex;
    clear: none;
}
dd {
    margin-left: 1em;
    text-align: justify;
    text-justify: newspaper;
}
.gradeDescriptionList img {
    vertical-align:middle;
    float: right;
    margin-left: 0.3em;
}
#footer {
    PADDING-BOTTOM: 0px;
	LINE-HEIGHT: 1em;
	MARGIN: 0px auto;
	PADDING-LEFT: 0px;
	PADDING-RIGHT: 0px;
	PADDING-TOP: 0px;
}
.left_footer {
    FLOAT: left;
	COLOR: #76868e;
	FONT-SIZE: 12px;
}
.left_footer A, .right_footer A {
    PADDING-BOTTOM: 0px;
	PADDING-RIGHT: 8px;
	COLOR: #76868e;
	FONT-SIZE: 12px;
	PADDING-TOP: 0px;
}
.right_footer {
	FLOAT: right;
	COLOR: #76868e;
	FONT-SIZE: 12px;
}

.body_text p {
    PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-LEFT: 0px;
	PADDING-RIGHT: 0px;
	COLOR: #545454;
	FONT-SIZE: 12px;
	PADDING-TOP: 12px;
}
.body_text {
    PADDING-BOTTOM: 0px;
	MARGIN: 0px 0px -20px;
	PADDING-LEFT: 13px;
	WIDTH: 713px;
	PADDING-RIGHT: 15px;
	PADDING-TOP: 0px;
}
#left_col {
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-LEFT: 0px;
	WIDTH: 213px;
	PADDING-RIGHT: 0px;
	FLOAT: left;
	PADDING-TOP: 0px;
}

.left {
    float:left;
}
.right {
    float:right;
}
.clear {
    clear:both;
}

div.sideBarLogo {
    text-align: center;
    padding: 1.5ex 10px 1.5ex 0;
}

table.partnersOverview {
    margin-top:3ex;
}

table.partnersOverview td {
    padding-top:1ex;
    padding-bottom:2ex;
    text-align: justify;
}

table.partnersOverview td.imageCell {
    vertical-align: top;
    padding-top: 0.5ex;
    padding-right: 2em;
}

table.partnersOverview th {
    color: #007bb6;
    font-size: 16px;
    text-align: left;
}

table.hwTable {
    margin-top: 0.5ex;
    border-collapse: collapse;
    width: 100%;
}

table.hwTable tr.hwTableHeader {
    background-color:#E8E8E8;
}

table.hwTable li {
    margin-left: 20px;
}

/***********************************Grade Card CSS*************************************/
.gradeCardBanner {
    background-color: #ffffff;
    width:100%;
    margin-top:15px;
    color: #444444;
}
.gradeCardEntityName {
    float: left;
    position:relative;
    top:0;
    left:0;
    font-size: 16pt;
    font-weight: bold;
	padding: 0.2ex 0.2em;
}
.gradeCardContinuedSelector {
    float: right;
    padding: 0.2ex 0.2em;
}
.gradeCardYearSelector {
    border-collapse: collapse;
    margin-right:5px;
}
.gradeCardYearSelector .menuItem {
    text-align: center;
    cursor: pointer;
}
.gradeCardYearSelector .continuedItem {
  font-size: 8pt;
  white-space: nowrap;
}
.gradeCardYearSelector .continuedItem ul {
  padding-left: 1.5em;
  margin: 0.25em 0.5em;
}
.gradeCardYearSelector .continuedItem ul li {
}
.gradeCardGrade {
    font-size:16pt;
    font-weight: bold;
    width: 2em;
    margin-bottom: -3%;
}
.gradeCardYear {
    font-size:8pt;
}
.gradeCardInfoCell {
    width: 100%;
    text-align: left;
    vertical-align: bottom;
}
.estuarineGradeCard .gradeCardYearSelector {
    color: #444444;
}
.estuarineGradeCard .gradeCardYearSelector .menuItem {
    background-color: #bed5a9;
    border-top: 2pt solid #69a54b;
    border-left: 2pt solid #69a54b;
    border-right: 2pt solid #69a54b;
}
.estuarineGradeCard .gradeCardYearSelector .activeItem {
    background-color: #69a54b;
    color: #ffffff;
}
.estuarineGradeCard .gradeCardYearSelector .menuItem:hover {
    color: black;
    background: #accc8e;
}
.estuarineGradeCard .tabberlive {
    background-color: #69a54b;
}
.estuarineGradeCard ul.tabbernav li a {
    background-color: #bed5a9;
}
.estuarineGradeCard ul.tabbernav li a:hover {
    color: black;
    background-color: #accc8e;
}
table.estuarineSiteList {
    margin-top: 0.5ex;
    border-collapse: collapse;
}
table.estuarineSiteList tr.odd {
    border-top: 1px solid #69a54b;
    vertical-align: top;
}
table.estuarineSiteList tr.even {
    border-bottom: 1px solid #69a54b;
    vertical-align: top;
}
table.estuarineSiteList th {
    text-align: left;
    background-color: #bed5a9;
    white-space: nowrap;
}
table.estuarineSiteList .siteList_siteCode {
    padding-right: 0.4em;
}

th.estuarineTabSectionTitle {
    padding: 0.3em 0.6em;
    background-color: #bed5a9;
}

.marineGradeCard .gradeCardYearSelector {
    color: #444444;
}
.marineGradeCard .gradeCardYearSelector .menuItem {
    background-color: #cfe4ef;
    border-top: 2pt solid #2e85b4;
    border-left: 2pt solid #2e85b4;
    border-right: 2pt solid #2e85b4;
}
.marineGradeCard .gradeCardYearSelector .activeItem {
    background-color: #2e85b4;
    color: #ffffff;
}
.marineGradeCard .gradeCardYearSelector .menuItem:hover {
    color: black;
    background: #83c3e4;
}
.marineGradeCard .tabberlive {
    background-color: #2e85b4;
}
.marineGradeCard ul.tabbernav li a {
    background-color: #cfe4ef;
}
.marineGradeCard ul.tabbernav li a:hover {
    color: black;
    background-color: #83c3e4;
}
table.marineSiteList {
    margin-top: 0.5ex;
    border-collapse: collapse;
}
table.marineSiteList tr.odd {
    border-top: 1px solid #2e85b4;
    vertical-align: top;
}
table.marineSiteList tr.even {
    border-bottom: 1px solid #2e85b4;
    vertical-align: top;
}
table.marineSiteList th {
    text-align: left;
    background-color: #cfe4ef;
    white-space: nowrap;
}
table.marineSiteList .siteList_siteCode {
    padding-right: 0.4em;
}

th.marineTabSectionTitle {
    padding: 0.3em 0.6em;
    background-color: #cfe4ef;
}

.freshwaterGradeCard .gradeCardYearSelector {
    color: #444444;
}
.freshwaterGradeCard .gradeCardYearSelector .menuItem {
    background-color: #ded3c6;
    border-top: 2pt solid #b56928;
    border-left: 2pt solid #b56928;
    border-right: 2pt solid #b56928;
}
.freshwaterGradeCard .gradeCardYearSelector .activeItem {
    background-color: #b56928;
    color: #ffffff;
}
.freshwaterGradeCard .gradeCardYearSelector .menuItem:hover {
    color: black;
    background: #d8b486;
}
.freshwaterGradeCard .tabberlive {
    background-color: #b56928;
}
.freshwaterGradeCard ul.tabbernav li a {
    background-color: #ded3c6;
}
.freshwaterGradeCard ul.tabbernav li a:hover {
    color: black;
    background-color: #d8b486;
}
table.freshwaterSiteList {
    margin-top: 0.5ex;
    border-collapse: collapse;
}
table.freshwaterSiteList tr.odd {
    border-top: 1px solid #b56928;
    vertical-align: top;
}
table.freshwaterSiteList tr.even {
    border-bottom: 1px solid #b56928;
    vertical-align: top;
}
table.freshwaterSiteList th {
    text-align: left;
    background-color: #ded3c6;
    white-space: nowrap;
}
table.freshwaterSiteList .siteList_siteCode {
    padding-right: 0.4em;
}

th.freshwaterTabSectionTitle {
    padding: 0.3em 0.6em;
    background-color: #ded3c6;
}



table.ehibhr {
    margin-top: 0.5ex;
    border-collapse: collapse;
    width: 100%;
}

table.ehibhr th.estuarine {
    background-color: #bed5a9;
    white-space: nowrap;
}

table.ehibhr th.marine {
    background-color: #cfe4ef;
    white-space: nowrap;
}

table.ehibhr td {
    text-align: center;
}

table.ehibhr td.fgrade {
    background-color: #ff99cc;
}
table.ehibhr td.dgrade {
    background-color: #ff9900;
}
table.ehibhr td.cgrade {
    background-color: #ffff99;
}
table.ehibhr td.bgrade {
    background-color: #ccffcc;
}
table.ehibhr td.agrade {
    background-color: #ccffff;
}

table.cutoffs {
    width: 30%;
    border-collapse: collapse;
}

table.cutoffs td {
    text-align: center;
}

table.cutoffs td.fgrade {
    background-color: #ff99cc;
}
table.cutoffs td.dgrade {
    background-color: #ff9900;
}
table.cutoffs td.cgrade {
    background-color: #ffff99;
}
table.cutoffs td.bgrade {
    background-color: #ccffcc;
}
table.cutoffs td.agrade {
    background-color: #ccffff;
}

.ecohPlot {
    margin: 0;
    padding: 0;
}
.ecohPlot img {
  display: none;
}
.ecohPlots:hover .ecohPlot img {
  display: block;
}

/**********************************End of Grade Card CSS**************************************/

/**********************************Report Card Map CSS****************************************/

#mapMain {
    float: left;
    width: 65%;
    margin-top: 12px;
}
#openlayersmap {
    margin-top:10px;
    width: 100%;
    height: 550px;
    border: 1px solid black;
    clear:both;
}
#displayArea{
    float:left;
    width: 32%;
    padding-left: 1em;
}
div.yearSelector {
    width: 99%;
    clear:both;
    margin: 1ex 0;
    text-align: center;
}
a.yearBlock, a.yearBlockActive {
    display:block;
    border: 1px solid darkgrey;
    margin: 0.2ex 0.2em;
    padding: 0.5ex 0.8em;
    float: left;
    font-weight: bold;
    text-decoration:none;
}
a.yearBlockActive, a.yearBlock:hover {
    background-color: #0372ac;
    color: #ffffff;
}
a.yearBlock {
    background-color: #c9dde8;
    color: #76868e;
    cursor:pointer;
}
.olControlAttribution { bottom: 0px!important }
.gradeHeader,
.gradeHeader:link,
.gradeHeader:hover,
.gradeHeader:visited,
.gradeHeader:active {
    color: #545454;
    display: block;
    background-position:97%;
    background-repeat:no-repeat;
    vertical-align:middle;
    font-size:11pt;
    font-weight:bold;
    padding:0.2ex 0.7em;
    margin-top:0.3ex;
    margin-left: 0.5em;
    cursor:pointer;
    text-decoration: none;
    min-height: 20px;
}
.gradeHeader-fw {
    background-color: #ded3c6;
}
.gradeHeader-fw-highlight {
    background-color: #d8b486;
}
.gradeHeader-bay {
    background-color: #cfe4ef;
}
.gradeHeader-bay-highlight {
    background-color: #83c3e4;
}
.gradeHeader-est {
    background-color: #bed5a9;
}
.gradeHeader-est-highlight {
    background-color: #accc8e;
}
.breadcrumbs {
    font-size:0.95em;
    margin:1em 0;
    padding:0.3em 0.6em;
    background-color:#e8e8e8;
    border-bottom:1px solid #bbb;
}
.breadcrumbs,
.breadcrumbs a {
    color: #888;
}

.news-item {
  margin: 1em 0;
}
.news-item-title {
  margin: 1em 0 0.5em 0;
  font-size: 1.2em;
  font-weight: bold;
}
.news-item-description {
  margin: 0.5em 0;
}
.news-item-link {
  margin: 0.5em 0 1em 0;
}

h2.quicklinks {
  color: #444444;
  font-weight: bold;
  font-size: 1.2em; 
  margin-bottom: 0.5em;
}

.quicklink {
  list-style: none;
  height: 22px;
  line-height: 22px;
  margin: 0.2em 0;
  padding: 10px 10px 10px 50px;
  background-repeat: no-repeat;
  background-position: 10px 6px;
  border: 1px solid #e0e0e0;
}

.quicklink a {
  font-weight: bold;
}

.quicklink-reportcard {
  background-image: url(http://www.health-e-waterways.org/images/grades/Aplus_est.png);
}
.quicklink-msbing {
  background-image: url(http://www.health-e-waterways.org/images/bing-logo.png);
}
.quicklink-googleearth {
  background-image: url(http://www.health-e-waterways.org/images/google-earth.png);
}
.quicklink-project {
  background-image: url(http://www.health-e-waterways.org/images/logo.png);
}

/**********************************End of Report Card Map CSS*************************************/

/*------------------------------------------Tabber CSS-------------------------------------------*/
.tabberlive .tabbertabhide {
    display:none;
}

.tabber{
}

.tabbertab {
  min-height: 500px; /* avoid "jumpiness" when changing to short tab */
}

.tabberlive {
    background-color: #ffffff;
    margin-top:0em;
}

ul.tabbernav {
    margin:0;
	padding: 10px 0 3px 0;
    border-bottom: 1px solid #444444;
    font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li {
    list-style: none;
    margin: 0;
    display: inline;
}

ul.tabbernav li a {
	padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #444444;
    border-bottom: none;
    background: #83c3e4;
    text-decoration: none;
}

ul.tabbernav li a:link {
    color: #444444;
}
ul.tabbernav li a:visited {
    color: #444444;
}

ul.tabbernav li a:hover {
    color: #444444;
    background: #AAE;
    border-color: #227;
}

ul.tabbernav li.tabberactive a {
    background-color: #fff;
    border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover {
    color: #444444;
    background: white;
    border-bottom: 1px solid white;
}

.tabberlive .tabbertab {
	padding:5px;
    background-color: #ffffff;
    border:1px solid #aaa;
    border-top:0;

    /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

    /* height:200px; */

    /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

    /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
    display:none;
}
.tabberlive .tabbertab h3 {
    display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}
/*------------------------------------------End Tabber CSS-------------------------------------------*/

/*------------------------------------------jQuery tooltip CSS-------------------------------------------*/
#tooltip {
    position: absolute;
    z-index: 3000;
    border: 1px solid #111;
    background-color: #eee;
    padding: 5px;
    opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }
/*------------------------------------------jQuery tooltip CSS-------------------------------------------*/