/*05/11/2018 10:48:24*/
body{
	font-family: 'Open Sans', sans-serif;
	color: #666;
}
h1{
	color: #006699;
	font-size: 2rem;
}
h2{
	color: #006699;
	font-size: 1.66rem;
}
h3{
	color: #006699;
	font-size: 1.2rem;
}
a{
	color: #3399cc;
}
ul{
	list-style: none;
}
.sticky.sticky.is-stuck{
	z-index:5000;
}
.top-bar, .top-bar ul, .title-bar{
	background-color: #006699;
}
/*.top-bar{
	padding: 0 .5rem;
}*/
.top-bar a{
	color: #fff;
}
.top-bar a:hover{
	color: #ddf;
}
#logo a{
	padding: .5rem 1rem;
}
.top-bar-right ul{
	margin: .2rem 1rem;
}
.title-bar-title{
	width: 100%;
	display: inline-block;
}
.title-bar-title img{
	float: right;
	margin-right: .5rem;
}
.close-button{
	z-index: 999;
}
li.select2-results__option.select2-results__option--highlighted a{
	color: #fff;
}
.breadcrumbs{
		padding: 0.5625em 0.875em 0.5625em;
		display: block;
		width: 100%;
	}
footer, footer a{
	background: #666;
	color: #fff;
}

li.alpha{
	font-weight: bold;
	font-size: 1.5rem;
}

.unit{
	font-size: .8rem;
	font-weight: normal;
}

caption{
	display: none;
}
th{
	text-align: left;
}

#map_canvas{
	height: 450px;
}

#monthly-average-table th:before, #weather-stats th:before{
	font-family: FontAwesome;
    font-size: 1.2rem;
    padding-right: .8rem;
}
th#tmp:before{
    content: "\f2c9"; 
 }
 th#min-tmp:before, #coldest>th:before{
    content: "\f2cb"; 
 }
 th#max-tmp:before, #hottest>th:before{
    content: "\f2c7"; 
 }
 th#sun:before, #sunniest>th:before{
    content: "\f185"; 
 }
 th#rainfall:before, #wettest>th:before{
    content: "\f043"; 
 }
th#sst:before, #hottest_sea>th:before{
    content: "\f0c9"; 
 }
 th#rain-days:before{
    content: "\f0e9 "; 
 }
 th#rh:before{
    content: "\f0c2"; 
 }
 th#wind:before{
    content: "\f11d"; 
 }
 #driest>th:before{
    content: "\f080"; 
 }
 
 #weather-stats{
 	font-weight: bold;
}
 

ul#right-stats{
	list-style: none;
	font-weight: bold;
	font-size: 1.5rem;
}

#region-list h3, #region-list h2{
	background-color: #eee;
	display: block;
	clear: both;
	width: 100%;
	padding: .3rem;
	border-radius: .3rem;
	text-indent: .5rem;
}

.place-list li{
	font-size: 1.25rem;
}
.place-list li.alpha{
	width: 2.5rem;
	height: 2.5rem;
	line-height: 2.5rem;
	border: 1px solid #999;
	border-radius: 50%;
	background: #eee !important;
	color: #000;
	text-align: center;
	margin: .5rem auto;
	padding: 0 !important;
}

.month-list{
	list-style: none;
	margin-left: 0;
}
.button.hollow:hover{
	background: #eee;
}
.show-all{
	margin-top: 1em;
}

.sml-chart:hover{
	cursor: pointer; cursor: hand;
}
.accordion-title{
	font-size: 1.5em;
}
.accordion-item h2{
	margin: 0;
	font-size: 1em;
}

#near.menu a{
	display: inline-block;
	padding-right: 0;
}
#near.menu li{
	display: block;
}
.dist{
	font-size: .8rem;
}

.summaryChart{
	min-width: 250px;
	display: block;
}
.summaryChart h3{
	font-size: 1.33rem;
	display: block;
	text-align: center;
	background-color: #3399cc;
	color: #fff;
	padding: .4rem;
}
.summaryChart h3 a{
	color: #fff;
	display: block;
}
.colWrapper{
    height:285px;
    width: 21%;
    position:relative;
    float: left;
    display: inline-block;
    margin-right: 1px;
    font-size: .8rem;
    color: #000;
}
.colWrapper.colLegend{
	width: 14%;
}
.barContainer{
    position:absolute;
    bottom:0;
    width:100%;
    text-align: center;
}
.bar{
    width:100%;
    height:40px;
    text-align: center;
    margin-bottom: 1px;
}
.bar i{
	font-size: 1.9rem;
	color: #666;
}
.bar.max-tmp-col{
	background-color: #f4ac2e;
}
.bar.max-tmp-col, topBar{
	display: flex;
  justify-content: center;
  align-items: flex-end;
}
.bar.min-tmp-col{
	background-color: #829acc;
}
.bar.min-tmp-col:before{
    content: "\f186"; 
    font-family: FontAwesome;
    color: #eee;
    font-size: 2rem;
    opacity: 0.3;
 }
.bar.rain-col{
	background-color: #6da1c9;
}
.bar.sun-col{
	background-color: #eee333;
}
.bar.month-legend{
	font-weight: bold;
}
.sun-col strong, .rain-col strong{
	display: block;
	margin-bottom: 0;
}


#sea-temperature{
	font-size: 3rem;
	margin-bottom: .3em;
}
#monthly-temps h3{
	font-size: 1.66rem;
}

.hot{
	color: #cc0000;
}
.warm{
	color: #ff6600;
}
.medium{
	color: #00cc33;
}
.cool{
	color: #00ccff;
}
.cold{
	color: #0033ff;
}

.extremely-cold{border-color:#0074ff !important}
.very-cold{border-color:#0094ff !important}
.cold{border-color:#00e4ff !important}
.quite-cold{border-color:#00ffd0 !important}
.cool{border-color:#00ff36 !important}
.pleasant{border-color:#b0ff00 !important}
.warm{border-color:#FFbe00 !important}
.hot{border-color:#FF5a00 !important}
.very-hot{border-color:#FF8c00 !important}
.extremely-hot{border-color:#FF5a00 !important}

/*Temp Scale*/

#scale-c, #scale-f{
	display: block;
	clear: both;
	width: 100%;
}
#scale-c div, #scale-f div{
	margin-top: .5em;
	padding: .3em .5em;
	display: inline;
	float: left;
	color: #fff;
	font-weight: bold;
}
.tk{
background-color: #333;
}
.t0{
background-color: rgb(0,51,255);
}
.t1{
background-color: rgb(0,204,255);
}
.t2,.t3{
background-color: rgb(0,255,255);
}
.t4,.t5{
background-color: rgb(102,255,204);
}
.t6,.t7{
background-color: rgb(0,255,51);
}
.t8,.t9{
background-color: rgb(0,204,51);
}
.t10,.t11{
background-color: rgb(153,255,102);
}
.t12{
background-color: rgb(255,255,102);
color: #000 !important;
}
.t15{
background-color: rgb(255,255,0);
color: #000 !important;
}
.t17{
background-color: rgb(255,153,0);
}
.t19{
background-color: rgb(255,102,0);
}
.t21{
background-color: rgb(255,51,0);
}
.t24{
background-color: rgb(204,0,0);
}
.t27{
background-color: rgb(153,0,0);
}
.t30{
background-color: rgb(153,0,153);
}
.t35{
background-color: rgb(255,0,255);
}


.alpha-nav{
	width: 100%;
	
}

/* Small only */
@media screen and (max-width: 39.9375em) {
	.title-bar{
		padding: .625rem .5rem;
	}
	#mob-head{
		height: 250px;
		display: block;
		margin:0;
		padding:0;
		text-align:center;
		margin-bottom: .5rem;
	}
	.breadcrumbs{
		margin: 0;
	}

	h1,h3{
		text-align: center;
	}
	h1{
		font-size: 1.6rem;
		display: block;
		background-color: #069;
		color: #fff;
		padding: .2rem .5rem;
	}
	h3{
		font-size: 1.4rem;
	}
	h1, .breadcrumbs, #report h2{
		margin-left: -0.625rem;
		margin-right: -0.625rem;
	}
	p{
		text-align: justify;
	}
	#page{
		padding: 0;
	}
		.place-list{
			margin: 0;
		}
		.place-list li{
			display: block;
			padding: 0 !important;
			margin-bottom: 2px;
		}
		.place-list li a{
			/*background: linear-gradient(#0044ff,#0022ff);*/
			display: inline-block;
			width: 100%;
		  vertical-align: middle;
		  margin: 0;
		  font-family: inherit;
		  padding: 0.85em 1em;
	  	-webkit-appearance: none;
		  font-size: 1.25rem;
		  line-height: 1;
		  color: #fff;
		}
		.place-list li:nth-child(odd) {
			background-color: #017db9;  
			}
			
		.place-list li:nth-child(even) {
			background-color: #006699;  
			}
		
		#map_canvas{
			/*height: 300px;*/
			display: none;
		}	
		
		#report{
			padding-top: .6rem;
			border-bottom: 1px solid #ccc;
			margin-bottom: .8rem;
			display: block;
		}
		#report h2{
			text-align: center;
			background-color: #999;
			color: #fff;
		}
		#sea-temperature{
			text-align: center;
			font-size: 3.33rem;
		}
		#current-weather{
			padding: 0 1.25rem;
		}
		#monthly-temps h3{
			font-size: 2rem;
		}
		span.adtester-container,fn-block-content>span{width:100%; text-align:center}
		#share42{
			display: none;
		}
	}

/* Medium and up */
@media screen and (min-width: 40em) {
	header{
		display:  block;
		padding-top: 1rem;
	}
	.breadcrumbs{
		margin: 0.85rem 0 .4rem 0;
	  border: 1px solid #dcdcdc;
	  border-radius: 3px;
	  background-color: #f6f6f6;
	}
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {
	#home-accordion .accordion-content, #average-accordion .accordion-content{
		display: block !important;
	}

	body{
		background-color: #000;
		background-image:url('https://cdn.seatemperature.org/images/bkg.jpg');
		background-repeat:no-repeat;
		background-attachment:fixed;
		background-position:center; 
		background-size: 100%;
		
	}
	#page{
	background: #fff;
	}
}

.off-canvas-wrap, .inner-wrap {
    @media (min-width: 768px) {
        -webkit-backface-visibility: visible; 
    }
}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}