/*@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/open-sans-v17-latin-regular.eot');
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('/fonts/open-sans-v17-latin-regular.woff2') format('woff2'),
       url('/fonts/open-sans-v17-latin-regular.woff') format('woff'),
       url('/fonts/open-sans-v17-latin-regular.ttf') format('truetype');
  font-display: swap;
}*/
	* {box-sizing: border-box;}
	body{
		 margin: 0;
		 /*font-family: 'Open Sans',sans-serif;*/
		 font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
		 background-color: #ededed;
		color: #666;
		}

#page {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  /*grid-gap: 20px;*/
  background-color: #fff;
}

#page > * {
  grid-column: col-start / span 12;
  padding: .8rem;
}
.block-grid{
	display: flex;
  flex-wrap:wrap;
  flex-direction:row;
  justify-content:  space-between;
  margin:0;
  padding: 0;
  align-items: stretch;
}
.block-grid > * {
	margin-bottom: .9rem;
}
	.block-grid.small-up-3 > *{
		flex: 0 0 28%;
	}
	.block-grid.small-up-2 > *{
		flex: 0 0 47%;
	}

#current-weather{
	display: grid;
  grid-template-columns: repeat(5, [col-start] 1fr);
}
#current-weather > * {
  grid-column: col-start / span 5;
  padding: .5rem 0;
}
#weather-text, #wind-text, #humidity-text{
    grid-column: col-start / span 3;

  }
#weather-icon, #wind-speed, #humidity{
    grid-column: col-start 4 / span 2;

}
#home-side {
    min-height: 250px;
  }

/* Links ---------------------- */
a img { border: none; }
a { color: #0095da; text-decoration: none; line-height: inherit; }
a:hover { color: #ff7e00;}
a:focus { color: #ff7e00;outline: none; }
p a, p a:visited { line-height: inherit; }

blockquote,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,li,ol,pre,td,th,ul {
    margin: 0;
    padding: 0
}
p {
    display: block;
    margin-bottom: 1rem;
    font-size: inherit;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}
em,i {
    font-style: italic;
    line-height: inherit
}
b,strong {
    font-weight: 700;
    line-height: inherit
}

ul, ol, dl { line-height: 1.6; margin-bottom: 1rem; list-style-position: outside; }
	li{
		list-style: none;
	}
h1{
	color: #006699;
	font-size: 2.2rem;
	padding-bottom: .8rem;
	font-weight: normal;
}
h2{
	color: #006699;
	font-size: 1.66rem;
	font-weight: normal;
	padding-bottom: .7rem;
}
h3{
	font-size: 1.3rem;
	padding-bottom: .6rem;
}


	p{
		font-size: 1.2rem;
	}
small{
	font-size: .8rem;
}


/*Menu*/
.topnav {
  overflow: hidden;
  background-color: #069;
}

.topnav a {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: .6rem 1rem;
  margin-top: .2rem;
  text-decoration: none;
  font-size: 1.2rem;
}

.topnav a:hover {
  color: #3399cc;
}


.topnav .icon {
  display: none;
  cursor: pointer;
}

form#search-box {
/*	display: inline;
	float: right;
	text-align: center;
	
  padding: .5rem 1rem 0;
  margin-top: .2rem;
  text-decoration: none;
  font-size: 1.2rem;*/
  /*display: block;*/
  padding-bottom: 0;
  position: relative;
  }
#livesearch{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 9999;
  border-radius: 4px;
  font-size: 1.25rem;
}
#search_keywords{
	display:block;
	font-size: 1.2rem;
	width: 100%;
	padding: .625rem 1rem;
  margin: .25rem 0;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
}

@media screen and (max-width: 768px) {
	.topnav a:not(:first-child) {display: none;}
  /*.topnav a {display: none;}*/
  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    font-size: 17px;
    padding: 1rem;
  }


	.bar1, .bar2, .bar3 {
	  width: 35px;
	  height: 5px;
	  background-color: #fff;
	  margin: 6px 0;
	  transition: 0.4s;
	}
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}


#side_map, #beach-guide{ margin-bottom: 1rem;}

#static-map{
	 width: 100%;
	 min-height:375px;
	 height: auto;
	 position:relative;
	 display: block;
}
#map-image{
	 position:relative;
	 top:0;
	 left:0;
	}
#map-icon{
	 position:absolute;
	 top:45%;
	 left: 50%;
	 transform: translate(-50%, -45%);
	}
#map-shadow{
	 position:absolute;
	 top:45%;
	 left: 51%;
	 transform: translate(-51%, -45%);
	}
#map-credit{
	 position:absolute;
	 bottom:2%;
	 right:0;
	 background: #eee;
	 padding:.2rem;
	 font-size:.75rem;
	}
#map_canvas{
 	height: 450px;
 	margin-bottom: .5rem;
}

#sad{
	margin-bottom: 1rem;
}
/*.accordion-title{
	font-size: 1.5em;
}*/
.accordion-item h2{
	margin: 0;
	font-size: 1em;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.4s;
  margin: .8rem 0;
}
.accordion h2{
	margin: 0;
	padding: .4rem;
	font-size: 1.5rem;
	display: inline-block;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  font-size: 2rem;
}

.active:after {
  content: "\2212";
  font-size: 2rem;
}

.acc-panel {
  padding: 0 .5rem;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

#breadcrumbs > nav {
    margin: 0.85rem 0 .4rem 0;
    
    display: block;
    width: 100%;
}
#breadcrumbs ul {
    margin: 0 0 1rem 0;
    list-style: none;
}
#breadcrumbs li {
    float: left;
    font-size: .8rem;
    color: #0a0a0a;
    cursor: default;
    text-transform: uppercase;
}
#breadcrumbs li:not(:last-child)::after {
    position: relative;
    margin: 0 .75rem;
    opacity: 1;
    content: "/";
    color: #cacaca;
}

.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-button{
	display: block;
	width: 100%;
	text-align: center;
	border: 1px solid #0095da;
	padding: .5em 0;
}
.month-button:hover{
	background: #eee;
}

table{
	font-size: 1em !important;
	border-collapse: collapse;
}
.striped-table tr:nth-child(even) {
  background-color: #f2f2f2;
}
td, th{
   padding: .5em .75em;
}
#tide-table th{
	text-align: left;
}
table caption{
	display: none;
}

	
#near a{
	display: inline-block;
	padding: .5rem 0;
}
#near li, .side-nav li{
	display: block;
	font-size: 1.1rem;
}
.dist{
	font-size: .8rem;
}
ul#right-stats{
	list-style: none;
	font-weight: bold;
	font-size: 1.5rem;
}

footer 
{
	display: block;
	padding: 0;
	background: #545850;
	width: 100%;
	clear: both;
	float: left;
	color: #fff;
}
footer a{
	color: #fff !important;
}

#copyright p{
	text-align: center;
	font-size: 1rem;
}
#foot-links{
	display: block;
}


.alpha-nav{
	width: 100%;
	
}


#sea-temperature span{
	font-size: 3rem;
	margin-bottom: .3em;
}
#sea-temperature p{
	font-size: 1rem;
}
#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:after{
	content: "";
  display: table;
	clear: both;
}

#scale-c, #scale-f{
	display: block;
	clear: both;
	width: 100%;
}
#scale-c div, #scale-f div{
	width: 2rem;
	text-align: center;
	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);
}

@media (max-width: 499px) {
	.block-grid{
		display: block;
	}
	.block-grid.small-up-2,.block-grid.small-up-3{
		display: flex;
	}
	#breadcrumbs li:first-child{
		display: none;
	}
	#breadcrumbs{
		padding: 0 .8rem;
	}
/*	header{
    grid-column: col-start / span 12;
    grid-row: 1;
	}*/
	.breadcrumbs{
		margin: 0;
	}
	#mob-head{
		min-height: 120px;
		max-height: 180px;
	}
	#inline-ad{
		min-height: 355px;
	}
	#map_canvas{
		display: none;
	}
	h1,h3{
		text-align: center;
	}
	h1{
		font-size: 1.6rem;
		line-height: 1.75;
		display: block;
		background-color: #363636;
		color: #fff;
		padding: .33rem .5rem;
		margin-bottom: .8rem;
	}
	h3{
		font-size: 1.4rem;
	}
	h1, .breadcrumbs, #report-head{
		margin-left: -0.8rem;
		margin-right: -0.8rem;
	}
	h2#report-head{
		font-size: 1.5rem;
		line-height: 1.667;
			text-align: center;
			background-color: #666;
			color: #fff;
    	display: block;
			padding: .4rem 0;
			margin-bottom: .8rem;
		}
	
	p{
		text-align: justify;
	}
		.place-list{
			margin: 0;
			display: block;
		}
		.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;  
			}
			
			#foot-links{
				text-align: center;
			}
		
		#sea-temperature{
			display: block;
			text-align: center;
			border-radius: 6px; 
			margin: 0.75rem -.5rem;
			padding: .75rem;
		}
		#sea-temperature p{
			padding: 0 1rem;
		}
		#sea-temperature.hot, #sea-temperature.warm, #sea-temperature.medium, #sea-temperature.cool, #sea-temperature.cold{
			color: #fff;
		}
		#sea-temperature.hot{
			background-color: #cc0000;
		}
		#sea-temperature.warm{
			background-color: #ff6600;
		}
		#sea-temperature.medium{
			background-color: #00cc33;
		}
		#sea-temperature.cool{
			background-color: #00ccff;
		}
		#sea-temperature.cold{
			background-color: #0033ff;
		}


}

@media (min-width: 500px) {

  #sidebar {
    grid-column: col-start 9 / span 4;
    grid-row: 2;
  }
  #main, .footer {
    grid-column: col-start / span 8;
  }
	#breadcrumbs > nav {
		border: 1px solid #dcdcdc;
    border-radius: 3px;
    background-color: #f6f6f6;
    padding: 0.5625em 0.875em 0.5625em;
	}
	#avg-top{
		display: grid;
	  grid-template-columns: repeat(5, [col-start] 1fr);
	}
	#monthly-temps {
    grid-column: col-start / span 2;
  }
	#monthly-chart {
	    grid-column: col-start 3 / span 3;
	}
	
	.block-grid.medium-up-4 > *{
	flex: 0 0 23%;
	}
	.block-grid.medium-up-3 > *{
		flex: 0 0 30%;
	}
	.block-grid.medium-up-2 > *{
		flex: 0 0 47%;
	}
	.sml-chart:hover{
		cursor: pointer; cursor: hand;
	}
}

@media (min-width: 800px) {
	body{
		background-color: #000;
		background-image:url('https://www.seatemperature.org/images/bkg.jpg');
		background-repeat:no-repeat;
		background-attachment:fixed;
		background-position:center; 
		background-size: 100%;
	}
	#page {
        max-width: 74.5rem;
        margin: 0 auto;
        padding: 0 .7rem;
   }
  header {
  	/*min-height: 250px;*/
    grid-column: col-start / span 12;
    grid-row: 1;
  }
  .tad{
  	min-height: 250px;
  	display: block;
  }

  #breadcrumbs {
    grid-column: col-start / span 12;
    grid-row: 2;
  }
  #main {
    grid-column: col-start / span 8;
    grid-row: 3;
  }
  #sidebar {
    grid-column: col-start 9 / span 4;
    grid-row: 3;
  }
  #home-info {
    grid-column: col-start / span 12;
    grid-row: 2;
  }
  #main-home {
    grid-column: col-start / span 10;
    grid-row: 3;
  }
  #home-side {
    grid-column: col-start 11 / span 2;
    grid-row: 3;
    min-height: 250px;
  }
  
  .sticky-container{
  	position: sticky;
 		top: 0;
  }

  footer {
    grid-column: col-start / span 2;
    display: flex;
    justify-content: space-between;
  }
  footer > *{
		flex: 0 0 47%;
	}
  footer ul {
		display: flex;
		padding: 0;
		margin: 0;
		justify-content:space-evenly;
		align-items: center;

		}
		
	footer li {
		display: contents;
		position: relative;

		}
  
  .block-grid.large-up-4 > *, .block-grid.medium-up-4 > *{
	flex: 0 0 23%;
	}
	.block-grid.large-up-3 > *, .block-grid.medium-up-3 > *{
		flex: 0 0 30%;
	}
	.block-grid.large-up-2 > *, .block-grid.medium-up-2 > *{
		flex: 0 0 47%;
	}

}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 2% auto; /* centered */
  padding: 20px;
  border: 1px solid #888;
  width: 66.7%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 30px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* pure-hidden-xs */
@media screen and (max-width:567px) {
    .pure-visible-sm:not(.pure-visible-xs){display:none}
    .pure-visible-md:not(.pure-visible-xs){display:none}
    .pure-visible-lg:not(.pure-visible-xs){display:none}
    .pure-visible-xl:not(.pure-visible-xs){display:none}
    .pure-hidden-xs {display:none}
}
/* pure-hidden-sm */
@media screen and (min-width:568px) and (max-width:767px) {
    .pure-visible-xs:not(.pure-visible-sm){display:none}
    .pure-visible-md:not(.pure-visible-sm){display:none}
    .pure-visible-lg:not(.pure-visible-sm){display:none}
    .pure-visible-xl:not(.pure-visible-sm){display:none}
    .pure-hidden-sm {display:none}
}
/* pure-hidden-md */
@media screen and (min-width:768px) and (max-width:1023px) {
    .pure-visible-xs:not(.pure-visible-md){display:none}
    .pure-visible-sm:not(.pure-visible-md){display:none}
    .pure-visible-lg:not(.pure-visible-md){display:none}
    .pure-visible-xl:not(.pure-visible-md){display:none}
    .pure-hidden-md {display:none}
}
/* pure-hidden-lg */
@media screen and (min-width:1024px) and (max-width:1279px) {
    .pure-visible-xs:not(.pure-visible-lg){display:none}
    .pure-visible-sm:not(.pure-visible-lg){display:none}
    .pure-visible-md:not(.pure-visible-lg){display:none}
    .pure-visible-xl:not(.pure-visible-lg) {display:none}
    .pure-hidden-lg{display:none}
}
/* pure-hidden-xl */
@media screen and (min-width:1280px) {
    .pure-visible-xs:not(.pure-visible-xl){display:none}
    .pure-visible-sm:not(.pure-visible-xl){display:none}
    .pure-visible-md:not(.pure-visible-xl){display:none}
    .pure-visible-lg:not(.pure-visible-xl){display:none}
    .pure-hidden-xl{display:none}
}