:root {
	--title-high : rgb(115, 55, 150);
	--title-low : rgb(115, 55, 150);
	--accent-color:rgb(115, 55, 150);
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  }


body {
	color: #333333;
	font: 16px 'Roboto', 'Arial',  sans-serif;

}

.grid-container {
	padding-left: 0px;
	padding-right: 0px;
}

h1,th { font-family: 'Roboto Slab', serif; color : var(--title-low);}
h1 a {text-decoration: none; color: inherit;}
#content { margin: 1em 1em;}

.left-icon { float: left; width: 170px;}
.unitlabel { font-size: 50%;}
.tinylabel { font-size: 1rem; color: #999999;}
.boxheading { font-size: 1rem; color: #999999; margin-top: 20px;}
.extrainfo { font-size: 1rem; color: #999999; margin-top: 20px; clear: both; margin-left: 170px;}
.extrainfo p { margin-bottom: 10px;}

#temp-reading { font-size: 300%; }
#rain-reading { font-size: 300%; }
#wind-reading { font-size: 300%;}

#forecast { font-size: 200%; text-align: center; margin-bottom: 20px;}
#forecast2 { font-size: 110%; text-align: center; margin-bottom: 60px;}

#current-obv h1 { font-size: 150%;}
#current-obv h2 { font-size: 140%; margin-top: 30px; margin-bottom: 10px;}
#current-obv #right { padding-left:80px;}

#today-yest h1 { font-size: 150%; margin-bottom: 30px;}
#today-yest th { text-align: left; font-size: 120%;}
#today-yest .table-col2 { width: 300px;} 
#today-yest .grey { color:#a1a1a1; font-size: 85%;}

#today-last h1 { font-size: 150%; margin-bottom: 30px;}
#today-last th { text-align: left; font-size: 120%;}
#today-last .table-col2 { width: 300px;} 
#today-last .grey { color:#a1a1a1; font-size: 85%;}


#records h1 { font-size: 150%; margin-bottom: 10px;}
#records h2 { font-size: 80%; margin-bottom: 30px;}
#records th { text-align: left; font-size: 120%;}
#records .table-col2 { width: 150px;} 
#records .grey { color:#a1a1a1; font-size: 85%;}


#charts { margin-bottom: 30px;}
#charts input { background-color: #a1a1a1; color: #000; font-size: 80%;}

#about h1 { font-size: 150%; margin-bottom: 30px;}
#about h2 { font-size: 140%; margin-top: 30px; margin-bottom: 10px;}
#about p { margin-bottom: 15px; line-height: 125%;}
#about a { color: #333; text-decoration: none; border-bottom: 1px dotted #999;}

#error h1 { font-size: 150%; margin-bottom: 30px;}
#error p { margin-bottom: 15px; line-height: 125%;}
#error a { color: #333; text-decoration: none; border-bottom: 1px dotted #999;}

.table-col1 { width: 300px;} 

#nav { background-color: #000; color :#fff; padding: 5px; margin-bottom: 20px;}
#nav li { display: inline; margin-right: 40px; }
#nav a { text-decoration: none;color: #fff; }

#header { height:100px; box-shadow: 0px 15px 10px -15px #111; }
#header h1 { font-size: 250%; color: var(--title-high); text-align: center;padding-top: 10px;font-family: 'Roboto Slab', serif;}
#header h2 { font-size: 100%; text-align: center; color : var(--title-low);}

#charts input { background-color: var(--accent-color); padding: 10px 20px; color: #fff; border: none; margin-top: 10px;}

.warning { margin-top: 50px; text-align: center; color: #780000; margin-bottom: 10px; font-size: 100%;}
#footer { clear:both;  padding-top: 10px; color: #999999; font-size: 80%; margin-top: 50px; box-shadow: 0px -15px 10px -15px #111; min-height: 60px;}
#footer .left p {text-align: left;}
#footer .right p {text-align: right;}
#footer a { color: #999; text-decoration: none; border-bottom: 1px dotted #999;}
#socialicons { text-align: center;}
#socialicons img { margin: 0px 10px}
#socialicons a { border-bottom: none;}

.wicon { float: left; width 75px; text-align: center; margin: 0; padding: 0;}
.wicon img { width: 50px; margin: 5px auto 5px; display: block;}

#forecast--banner { width: 305px; margin: 10px auto;}
#forecast--banner p { margin: 0; padding: 0; font-size: 12px;}



@media only screen and (max-width: 1200px) {

	#box-temp,#box-wind,#box-rain { margin-bottom: 50px; text-align: center;}
	#footer .left p,#footer .right p {text-align: center; margin-bottom: 10px;}
	.rreading { clear:both;}
	.lleft-icon { float: none; width: 100%; text-align: center;}
	.extrainfo { margin-left: 0px;}

	.reading { clear:both;}
	.left-icon { float: none; width: 100%; text-align: center;}
	.extrainfo { margin-left: 0px;}
	#current-obv #right { padding-left:10px;}
}



@media only screen and (max-width: 640px) {
	body { font-size: 16px;}
		#header h1 { font-size: 7vw;}
	#header h2 { font-size: 4vw;}
}
@media only screen and (max-width: 360px) {


}


@media only screen and (max-width: 480px) {
	body { font-size: 16px;}

	.left-icon img { max-width: 100px; }
	#current-obv .table-col1 { width:200px;}
	#records .table-col2 { width: 100px;} 
	#records .table-col1 { width: 100px;} 
}