@import "//fonts.googleapis.com/css?family=Montserrat:400,700";
@import "//fonts.googleapis.com/css?family=Roboto:400,500";


a,a:focus,a:hover {
    color:#fff
}

html,body {
    margin:0;
    overflow:hidden
}

#map {
    height:650px;
    width:100%;
    position:relative;
    z-index:2;
    background:#CDD2D4;
	/*border: 5px #254146 solid;*/
}

.left-container {
    float:left;
    position:relative;
    left:0;
    z-index:100
}

.left-panel {
    position:relative;
    width:280px;
    height:650px;
    background:rgb(49,86,88);
    background:rgba(49,86,88,0.9);
    padding:15px;
    color:#fff;
    overflow-y:auto
}

.button-container {
    z-index:100;
    position:absolute;
    padding:11px 45px 10px 10px;
    top:0;
    right:0
}

.button-container .btn {
    background-color:#356265;
    color:#fff;
    box-shadow:0 1px 5px rgba(0,0,0,0.4)
}

.button-container .btn:hover {
    background-color:#254146
}

.button-container .btn:focus,.button-container .btn:active:focus,.button-container .btn.active:focus {
    outline:none!important
}

.dotted {
    border-bottom:dotted 1px #fff
}

#popupCustom td {
    word-wrap:break-word!important
}

#popupCustom .left {
    width:40%;
    border-right:dotted 1px #2C3E50;
    font-size:1.1em;
    text-align:right;
    vertical-align:middle;
    padding-right:15px
}

#popupCustom #shellfish.left {
    width:100%;
    border-right:none;
    font-size:1.1em;
    text-align:center;
    vertical-align:middle;
    padding-right:10px
}

#popupCustom .right {
    width:60%;
    font-size:1.7em;
    font-weight:700;
    text-align:center;
    vertical-align:middle;
    line-height:24px;
    padding-left:10px
}

#popupCustom .click {
    width:100%;
    text-align:center;
    vertical-align:middle;
    padding-top:8px
}

#popupCustom .small {
    font-size:.7em;
    line-height:18px!important;
    font-weight:400;
    display:block;
    margin-top:3px
}

.map-heading {
    font-size:1.3em;
    font-weight:700;
    display:block;
    letter-spacing:1px;
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:dotted thin #fff
}

.map-subheading {
    font-size:1.9em;
    line-height:30px;
    font-weight:700;
    text-transform:uppercase;
    display:block;
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:dotted thin #fff;
    text-shadow:2px 2px 2px #3B686B
}

.map-detail-text {
    font-size:1.1em;
    display:block
}

.one-edge-shadow {
    -webkit-box-shadow:0 8px 6px -6px #000;
    -moz-box-shadow:0 8px 6px -6px #000;
    box-shadow:0 8px 6px -6px #000
}

.one-edge-shadow-top {
    -webkit-box-shadow:0 -8px 6px -6px #000;
    -moz-box-shadow:0 -8px 6px -6px #000;
    box-shadow:0 -8px 6px -6px #000
}

.layer-panel-heading {
    display:block;
    color:#fff;
    font-size:1.8em;
    text-transform:uppercase;
    font-weight:700;
    font-family:'Montserrat';
    text-align:center;
    padding:8px 10px;
    margin-top:15px;
    margin-bottom:15px;
    border-bottom:thin dotted #111D25;
    border-top:thin dotted #111D25;
    text-shadow:2px 2px 3px #3B686B
}

#layer-panel-heading-legend {
    margin-top:0
}

.map-layers-text {
    font-size:.6em;
    color:#d2d2d2;
    font-weight:400;
    text-transform:none;
    display:block;
    text-shadow:none
}

a span.glyphicon-info-sign {
    font-size:1.2em;
    color:#1D333B;
    cursor:pointer
}

table#layer-table {
    display:table;
    margin-bottom:15px
}

table#layer-table:last-child {
    margin-bottom:40px
}

table#layer-table tr {
    padding-top:0
}

table#layer-table th {
    padding:0
}

table#layer-table th h5 {
    font-size:18px;
    line-height:24px;
    text-align:center;
    font-weight:700;
    margin:0 0 10px;
    padding-bottom:10px;
    border-bottom:thin dotted #fff
}

table#layer-table td {
    padding:5px 10px 5px 0
}

td.wide {
    display:table-cell;
    text-align:left;
    vertical-align:middle!important
}

td.narrow {
    vertical-align:middle!important;
    display:table-cell;
    text-align:right;
    padding:0!important
}

.data-source {
    display:block;
    color:#97AAAB;
    font-size:1em;
    margin-bottom:15px
}

.data-source a:link {
    color:#97AAAB
}

#legend-text {
    display:none;
    background:transparent;
    color:#fff;
    font-size:16px;
    font-style:italic;
    text-align:center
}

.attribution {
    font-size:11px;
    display:block
}

.coming-soon {
    font-family:'Roboto',sans-serif;
    font-weight:400!important;
    font-size:1.1em;
    color:#d2d2d2
}

.coming-soon label {
    font-family:'Roboto',sans-serif;
    font-weight:400!important;
    font-size:1em
}

.coming-soon td {
    padding:5px 0!important
}

.coming-soon td.narrow {
    color:#fff;
    font-weight:700;
    padding-left:10px!important
}


/* Legend styling */
#legend-accordion{
	border-radius: 0;
	border: none;	
}

#legend-accordion .panel-heading{
	background-color: #254146;
}

#legend-accordion .panel-heading a .panel-title{
	color: white;
	font-size: 1.1em;
	font-weight: bold;
	font-family: 'Montserrat';
	line-height: 20px;
}

#legend-accordion .panel-heading a:hover,
#legend-accordion .panel-heading a:focus {
	text-decoration: none;
}

#legend-accordion .units{
	font-size: 1.1em;
	font-weight: bold;
	display: block;
	padding-bottom: 6px;
	margin-bottom: 6px;
	border-bottom: thin dotted #254146; 
}

#legend-accordion .panel{
	color: #254146;
}

#legend-accordion .source{
	display: block;
}

.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
}

/* Bootstrap overrides */
h3 {
    margin-top:0
}

.checkbox label {
    font-family:'Roboto',sans-serif;
    font-size:1.1em;
    cursor:pointer
}

#layers .panel {
    background-color:transparent;
    border:none;
    border-radius:none
}

#layers .panel-body {
    padding:5px 0
}

.checkbox {
    display:table-cell
}

.checkbox:hover,.checkbox:focus {
    color:#F0F0E8
}

label + input[type=checkbox]:checked {
    color:#FBC935;
    font-weight:700
}

#accordion .panel-heading {
    margin-bottom:5px
}

#accordion {
    margin-top:20px
}

.leaflet-popup {
    position:absolute;
    text-align:center;
    z-index:999!important
}

#nav-container ul.nav-tabs {
    top:-15px;
    z-index:10;
    position:relative;
    text-align:center!important
}

#layers .nav-tabs > li > a {
    display:inline-block!important;
    font-size:1.1em;
    font-weight:700;
    margin-right:0;
    border:1px solid transparent;
    padding:8px 10px;
    border-radius:0;
    min-height:51px;
    color:#fff;
    background:#37595B;
    padding-top:15px
}

#layers .nav-tabs > li.active > a:hover,#layers .nav-tabs > li.active > a:focus,#layers .nav-tabs > li.active > a {
    background-color:#254146;
    color:#fff
}

#layers .nav-tabs > li > a {
    border-left:thin dotted #254146;
    border-right:thin dotted #254146;
    border-bottom:thin dotted #254146
}

#layers .nav-tabs > li > a:hover,#layers .nav-tabs > li > a:focus {
    color:#2c3e50;
    background-color:#F0F0E8;
    cursor:pointer
}

/* zoom control */
.leaflet-control-zoom-in,.leaflet-control-zoom-out {
    background-color:#356265!important;
    color:#fff!important;
    font:bold 24px;
    font-family:'Montserrat';
    text-indent:1px;
    border:1px solid #365355
}

.leaflet-control-zoom-out {
    font-size:24px
}

.leaflet-touch .leaflet-control-zoom-in {
    font-size:22px
}

.leaflet-touch .leaflet-control-zoom-out {
    font-size:24px
}

/* Begin tooltip CSS */
.tooltip {
    position:absolute;
    z-index:1030;
    display:block;
    visibility:visible;
    font-size:.9em;
    line-height:1.4;
    opacity:1;
    filter:alpha(opacity=0)
}

.tooltip.in {
    opacity:1;
    filter:alpha(opacity=0)
}

.tooltip.right {
    margin-left:24px;
    padding:0 15px
}

.tooltip-inner {
    max-width:170px;
    padding:10px 12px 10px 8px;
    color:#fff;
    text-align:right;
    text-decoration:none;
    background-color:#254146;
    border-radius:12px;
    -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.3);
    -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.3);
    box-shadow:3px 3px 6px rgba(0,0,0,0.3)
}

.tooltip-arrow {
    position:absolute;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid
}

.tooltip.top .tooltip-arrow {
    bottom:0;
    left:50%;
    margin-left:-16px;
    border-width:16px 16px 0;
    border-top-color:#254146
}

.tooltip.top-right .tooltip-arrow {
    bottom:0;
    right:16px;
    border-width:16px 16px 0;
    border-top-color:#254146
}

.tooltip.right .tooltip-arrow {
    top:50%;
    left:0;
    margin-top:-16px;
    border-width:16px 16px 16px 0;
    border-right-color:#254146
}

.tooltip.bottom-right .tooltip-arrow {
    top:0;
    right:16px;
    border-width:0 16px 16px;
    border-bottom-color:#254146
}

/* Scrollbar, styling only works now in Chrome */
::-webkit-scrollbar {
    width:10px
}

::-webkit-scrollbar-track {
    -webkit-box-shadow:inset 0 0 6px rgba(21,51,59,1);
    border-radius:0;
    background:#254146
}

::-webkit-scrollbar-thumb {
    border-radius:0;
    -webkit-box-shadow:inset 0 0 6px rgba(21,51,59,1);
    background:#95A8A9
}