@font-face {font-family: 'Noto Sans';font-style: normal;font-weight: 400;src: local('Noto Sans'), local('NotoSans'), url(http://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');}

/* ClearFix */
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}

a{color:#990000; text-decoration:none;}
a:hover{color:#29ADBC; text-decoration:none;}

/*Innitial*/
body {color:#333;font-family:'Noto Sans', sans-serif; margin:0 auto; font-size:14px; line-height:1.8em; background:#fff;}

/*Common*/
* {
    box-sizing: border-box;  box-shadow:0;
}
.container-fluid{padding:0; margin:0;}
.container{padding:0;/*border:1px solid #00FF00;*/ width:90%; margin:0 auto;}
.row { margin:0; padding:0;}
.fltLft{float:left;}
.fltRgt{float:right;}
.fixed-ratio-resize { max-width: 100%;height: auto;width: auto\9; /* IE8 */}
.clear{clear:both;}
.padTopBot20{padding:20px 0;}
.marginBot20{margin:0 0 20px 0;}
.gray{background:#E2E2E2; margin:20px 0;}
.bodytext {padding:10px;}
.textCenter{text-align:center;}

.clear{clear:both;}
h1{color:#278DAF; font-size:22px; padding:20px 0;}
h2{color:#278DAF; font-size:18px; padding:0 0 10px 0;}
h3{color:#990000/*#333*/; font-size:16px; padding:10px 0 0 0;}
h4{color:#CC6600; font-size:15px; font-weight:bold; /*padding:10px;*/ }

/*header*/
/*.header{height:100px; background:#f3f3f3; opacity:0.85; filter: alpha(opacity=85); z-index:1; float:left;}*/
.header{height:100px; background:#f3f3f3; opacity:0.85; filter: alpha(opacity=85); z-index:1; float:left; width:840px;}
.logo{float:left; border-right:1px solid #ccc; padding:5px;}
/*.text{float:right; text-align:left; padding:10px;}*/
.text{ padding:30px; margin-left:20px;font-family:Gadugi; font-size:26px;font-style:normal;}
a.login{float:right;background:#f3f3f3; padding:3px 5px; margin:5px; color:#009999; text-decoration:none; font-weight:bold; font-size:13px; text-transform:lowercase;}
a.login:hover{ color:#666; text-decoration:none;}
/*banner*/
.banner{height:500px; width:100%;}
.hmpgBanner{height:500px; background:url(../images/banner/hmpgBan.jpg) no-repeat; z-index:-1;}
/*.overviewBan{height:500px; background:url(../images/banner/overview_ban.jpg) no-repeat; z-index:-1;}*/
.overviewBan{height:500px; background:url(../images/banner/overview_ban1.PNG) no-repeat; z-index:-1;}
.historyProgramBan{height:500px; background:url(../images/banner/historyProgramBan.jpg) no-repeat; z-index:-1;}
.stakeholderBan{height:500px; background:url(../images/banner/Stakeholder.JPG) no-repeat; z-index:-1;}
/*.stakeholderBan{height:500px; background:url(../images/banner/stakeholder_banner.jpg) no-repeat; z-index:-1;}*/
/*.stakeholderBan{height:500px; background:url(../images/banner/stakeholder_banner.jpg) no-repeat; z-index:-1;}*/
.waterQualityBan{height:500px; background:url(../images/banner/water_quality.jpg) no-repeat; z-index:-1;}
.streamCond_HT_Ban{height:500px; background:url(../images/banner/stream_condition.jpg) no-repeat; z-index:-1;}

.swimBan{height:500px; background:url(../images/banner/swim_banner.jpg) no-repeat; z-index:-1;}
.swim_HT_Ban{height:500px; background:url(../images/banner/swim_safety_historical_trends.jpg) no-repeat; z-index:-1;}
.swim_SC_Ban{height:500px; background:url(../images/banner/swim_safety_site_clean.jpg) no-repeat; z-index:-1;}

.fishBan{height:500px; background:url(../images/banner/fishingNew.jpg) no-repeat; z-index:-1;}
.fishBan_OLD{height:500px; background:url(../images/banner/fishing.jpg) no-repeat; z-index:-1;}
.fish_ht_Ban{height:500px; background:url(../images/banner/fish_ht.jpg) no-repeat; z-index:-1;}
.fish_SC_Ban{height:500px; background:url(../images/banner/fish_sc.jpg) no-repeat; z-index:-1;}

.dataBan{height:500px; background:url(../images/banner/data_portal.jpg) no-repeat; z-index:-1;}

.otherBan{height:300px; background:url(../images/banner/other.jpg) no-repeat; z-index:-1;}
.faqBan{height:300px; background:url(../images/banner/faqs.jpg) no-repeat; z-index:-1;}


/*Navigation*/
.navbar-default {
    background-image: linear-gradient(to bottom, #009999 0px, #009999 100%);
    background-repeat: repeat-x;
    border-radius:0;
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.15) inset, 0px 0px 0px rgba(0, 0, 0, 0.075);border:none;
}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom:0;
    border:none;
}
.navbar {width: auto;font-family:'Noto Sans', sans-serif;line-height:1;background:#009999; border:none;border-radius:0; height:auto;font-size:13px; text-transform:uppercase;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color:#008888; box-shadow:none;
}
.navbar-collapse {
    padding-right: 0px;
    padding-left: 0px;
    overflow-x: visible;
    border-top: none ;
   
}
.navbar-collapse collapse{ box-shadow:none; padding:0 5px;}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    color:#fff;
    background-color: none; 
}
.navbar-default .navbar-nav > li > a {
    color: #fff;
    font-family: Roboto; /*Added on 23.04.2020*/
    font-size: 15px; /*Added on 23.04.2020*/
}
.dropdown-menu > li > a {
    font-family: Roboto !important; /*Added on 23.04.2020*/
    font-size: 14px !important; /*Added on 23.04.2020*/
}
.navbar-brand, .navbar-nav > li > a {
    text-shadow:none;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #Fff;
}
.navbar-default .navbar-toggle {
    border-color: #fff;
}
.navbar-toggle:focus {
    outline: 0px none;
}
.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right:15px;
    margin-bottom: 8px;
    background-color:#ddd;
    background-image: none;
    border: 1px solid #fff;
    border-radius: 4px;
}
.navbar-nav.sm-collapsible .caret, .navbar-nav.sm-collapsible ul .caret {
    position: absolute;
    right:0px;
    margin: -3px 15px 0px 0px;
    padding: 0px;
    width: 32px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    border-width: 1px;
    border-style: solid; color:#000;
}
.dropdown-menu {position:absolute;top:100%;left:0px; z-index:3;display: none;float:left;margin:0px 0px 0px;font-size:12px;text-align:left;list-style:outside none none;background-color:#fff; min-width:200px; text-transform:capitalize;}

.navbar {font-size:14px; text-transform:uppercase;}
.navbar .current {background:#ccc; color:#fff;}

.breadcrumb {padding:10px; background:#eee;/* border-bottom:1px solid #ccc;background:none;*/ margin:10px 0 0 0; font-size:12px;}
.breadcrumb a{color:#333; /* padding:10px 0;*/text-decoration:none;}
.breadcrumb a:hover{color:#DF392A; text-decoration:none;}
.breadcrumb b{color:#DF392A; font-weight:normal;}

.text1{font-size:15px; padding:10px; color:#333;}
.map {height:auto; border:1px solid #ccc; padding:10px;}
.viewBtn {border-radius:5px; background:#eee; color:#fff; padding:8px 10px; float:right; margin-top:20px; /*width:50px;*/ text-align:center; border:1px solid #ccc;}
.viewBtn:hover{background:#ddd; color:#333; padding:8px 10px;}

ol.bulletList{padding:10px;}
ol.bulletList li{background:url(../images/bullet.jpg) no-repeat 5px 13px; padding:5px 20px;}
ol.bulletList li ul{padding:10px 20px;}
ol.bulletList li ul li{ background:url(../images/arrowBreadcrumb.jpg) no-repeat 5px 3px; padding:0 0px 5px 20px;}

ol.bulletList2{/*padding:10px;*/}
ol.bulletList2 li{background:url(../images/bullet1.png) no-repeat 5px 13px; padding:5px 20px; display:block;}
ol.bulletList2 li a{width:280px;}

.table{display:table;margin:0 auto; text-align:center;}
ul#horizontal-list {list-style:none;padding-top:20px;text-align:center}
ul#horizontal-list li {display:inline-block; padding:5px;text-align:center; margin-right:5px;background:#fff;}
ul#horizontal-list li:hover{background:#eee;}
ul#horizontal-list li a {color:#333; text-decoration:none; }
ul#horizontal-list li a:hover{color:#29ADBC; text-decoration:none; }
#circle {display:inline-block; padding:15px 10px;text-align:center; margin-right:10px; width:130px;height:130px;-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);}
.yellow{background:#E9D33A;}
.blue{background:#80CBE3;}
.orange{background:#CC6600;}
.white{background:#fff;}
.gray{background:#eee;}
ul#horizontal-list p{padding:10px;}

.table1{margin:10px 0;}
.table1 thead{background:#ccc;}
.table1 thead th {padding:5px 10px; border-right:1px solid #fff; background:#ccc;}
.table1 tbody td{padding:5px 10px; border-right:1px solid #fff; background:#eee;}

.table2 thead th{text-align:center; font-weight:bold;}

/*footer*/
.footer{background:#009999;padding:10px; margin-top:20px; color:#fff;font-size:13px;}
.copy{}
.footLinks{text-align:right;}
.footLinks a{color:#fff; text-decoration:none;}
.footLinks a:hover{color:#ccc; text-decoration:none;}

ol.topLinks{padding:10px; background:#eee;margin:10px 0 0 0; font-size:13px;}
ol.topLinks li {background:url(../images/bullet.jpg) no-repeat 5px 10px; padding:5px 20px; display:inline; text-transform:uppercase;}
ol.topLinks li a{color:#333; text-decoration:none;}
ol.topLinks li a:hover{color:#990000; text-decoration:none;}

#historyPrg .lkhistoryPrg a, #keyQues .lkkeyQues a,#stakeHolder .lkstakeHolder a{color:#990000;}

#streamCon .lkstreamCon a,#bioticCon .lkbioticCon a,#physicalHabitat .lkphysicalHabitat a,#waterQuality .lkwaterQuality a,#summeryST .lksummeryST a{color:#990000;}

#swimSaftyMain .lkswimSftyMain a, #swimSaftyMatrix .lkswimSaftyMatrix a, #swimRecentCon .lkswimRecentCon a, #swimsaftyHT .lkswimsaftyHT a, #swimSiteClean .lkswimSiteClean a{color:#990000;}

#swimSaftyMain .lkswimSftyMain a, #swimSaftyMatrix .lkswimSaftyMatrix a, #swimRecentCon .lkswimRecentCon a, #swimsaftyHT .lkswimsaftyHT a, #swimSiteClean .lkswimSiteClean a{color:#990000;}

#fishCon .lkfishCon a, #wqMatrix .lkwqMatrix a, #fishRecentCon .lkfishRecentCon a, #fishHT .lkfishHT a, #fishSiteClean .lkfishSiteClean a{color:#990000;}

#pubPres .lkpubPres a, #publications .lkpublications a, #meeting .lkmeeting a, #qapp .lkqapp a, #annualReport .lkannualReport a, #programDesign .lkprogramDesign a{color:#990000;}


@media screen and (max-width:1024px) {
.navbar {font-size:12px;}
.navbar-default .navbar-nav > li > a { padding:15px 10px;}
}

@media screen and (max-width:980px) {
	
}

@media screen and (max-width:800px) {
.navbar {font-size:11px;}
.navbar-default .navbar-nav > li > a { padding:15px 3px;}	
}

@media screen and (max-width:768px) {
.navbar {font-size:10px;}
.navbar-default .navbar-nav > li > a { padding:15px 5px;}	
}


@media screen and (max-width:640px) {
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    color:#fff;
    background-color:#333; 
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    color:#fff;
    background-color:#eee; margin:0 15px;
}
.navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0px;
    background-color:#eee; color:#FFF;
    border: 0px none;
    box-shadow: none;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .open > a {
    background-image: linear-gradient(to bottom, #333 0px, #333 100%);
    background-repeat: repeat-x;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.075) inset; color:#fff; }
.navbar-default .navbar-nav > li > a { margin:0 15px; padding:10px; color:#fff; background-color:#006C6C;}
.nav .navbar-nav .sm-collapsible{background:#006C6C;}
.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color:#ddd;
    background-image: none;
    border: 1px solid #fff;
    border-radius: 4px;
}
.navbar-nav.sm-collapsible .caret, .navbar-nav.sm-collapsible ul .caret {
    position: absolute;
    right:10px;
    margin: -3px 15px 0px 0px;
    padding: 0px;
    width: 32px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    border-width: 1px;
    border-style: solid; color:#000;
}

}

@media screen and (max-width:480px) {
a.login{float:left;}
a.login:hover{ color:#666; text-decoration:none;}	
}

@media screen and (max-width:360px) {
.header{height:auto;float:none; width:100%;}
.logo{float:none; padding:5px;}
.text{float:none; text-align:left; padding:5px; font-size:11px;}

}