/* 

 * CSS for the weewx Standard skin

 * $Id: weewx.css 2749 2014-11-29 18:15:24Z tkeffer $

 */

  

/* Global */



body {

    margin: 0;

    padding: 0;

    border: 0;

    font-family: Verdana, Arial, Helvetica, sans-serif;

    font-size: 10pt;

    background-color: #f2f2f7;

    background-image: url('backgrounds/cloud-sky-background-fill.jpg');

    background-repeat: repeat;

    background-attachment: scroll;

}	



#container {

    margin: 0;

    padding: 0;

    border: 0;

}



/*

 * This is the big header at the top of the page

 */

#masthead {

    margin: 1% 1% 0 1%;

    padding: 5px;

    text-align: center;

    border-color:#517C96; /* added */

	border-radius:10px;  /* added */

	border-style:solid; /* added */

	border-width:2px;  

    background-color: #87CEFA; /* added */

	opacity: 0.9;

    filter: alpha(opacity=90); /* For IE8 and earlier */

}



#masthead h1 {

    color: #3d6c87;

}

#masthead h3 {

    color: #5f8ea9;

}



/*

 * This holds the statistics (daily high/low, etc.) on the left: 

 */

#stats_group {

    width: 33%;

    min-height: 500px;

    margin:10px 10px;

    float: left;

	border-color:#517C96;

	border-radius:10px; 

	border-style:solid;  

	border-width:2px;

    background-color: #fafaff;

	opacity: 0.85;

    filter: alpha(opacity=85); /* For IE8 and earlier */

}



#stats_group img{

  width: 200px;

  max-width: 100%;

  display: block;



}



table.stats  {

    border: thin solid #000000;

    width: 100%;

}

table.stats td {

    border: thin solid #000000;

    padding: 2px;

}



.stats_header  {

    background-color: #000000;

    color: #a8b8c8;

    font-size: 14pt;

    font-weight: bolder;

}



.stats_label {

    color: black;

}



.stats_data {

    color: red;

}



#W_group {

    width: 550px;

    min-height: 70px;

    margin: 1%;

    padding: 3px;

    margin-left: auto;

    margin-right: auto;

	border-color:#517C96;

	border-radius:10px; 

	border-style:solid;  

	border-width:2px;

    background-color: #fafaff;

	opacity: 0.85;

    filter: alpha(opacity=85); /* For IE8 and earlier */

}

.W_header  {

    color: #191970;

    font-size: 11pt;

    font-weight: bold;

	text-align:center

}



#M_group {

    width: auto;

	height: auto;

    margin: 1%;

    padding: 0px;

    margin: 3px;

	border-color:#517C96;

	border-radius:10px; 

	border-style:solid;  

	border-width:2px;

    background-color: #fafaff;

	opacity: 0.85;

    filter: alpha(opacity=85); /* For IE8 and earlier */

}

/*

 * This holds Z Forecast

 */

#Z_group {

    width: 550px;

    min-height: 40px;

    margin: 1%;

    padding: 3px;

    margin-left: auto;

    margin-right: auto;

	border-color:#517C96;

	border-radius:10px; 

	border-style:solid;  

	border-width:2px;

    background-color: #fafaff;

	opacity: 0.85;

    filter: alpha(opacity=85); /* For IE8 and earlier */

}



.Z table {

    border: thin solid #000000;

    width: 100%;

}

.Z td {

    border: thin solid #000000;

    padding: 2px;

}



.Z_header  {

    color: #191970;

    font-size: 11pt;

    font-weight: bold;

	text-align:center

}





.Z_label {

    color: red;

    font-size: 14pt;

    font-weight: bold;

	text-align:center

}

/*

 * This holds the "About", "Almanac", and plots on the right

 */

#content {
	width: 60%;
	/*    min-height: 500px; */

    margin: 1%;
	padding: 3px;
	float: right;
	border-radius:10px;
	border-style:solid;
	border-width:2px;
	border-color:#517C96;
	border-radius:10px;
	border-style:solid;
	border-width:2px;
	background-color: rgba(255,255,255,0.2);
	opacity: 1.0;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}

#fgframe {
	opacity: initial;
	z-index: 3;
	position: absolute;
}


#contentmetar {

    width: 1000px;

    min-height: 1200px;

    margin: 1%;

    padding: 3px;

    margin-left: auto;

    margin-right: auto;

	border-radius:10px; 

    border-style:solid;  

    border-width:2px;

	border-color:#517C96;

	border-radius:10px; 

	border-style:solid;  

	border-width:2px;

    background-color: #fafaff;

	opacity: 0.85;

    filter: alpha(opacity=85); /* For IE8 and earlier */

}

#W_content {

    width: 100%;

    min-height: 70px;

    margin: 0px;

    padding: 0px;

    float: left;

/*   border-radius:10px; 

    border-style:solid;  

    border-width:2px;

	border-color:#517C96;

	border-radius:10px; 

	border-style:solid;  

	border-width:2px;  */

    background-color: #fafaff;

	/* opacity: 0.85;

    filter: alpha(opacity=85); /* For IE8 and earlier */

	*/

}





#content .header {

    font-size: 14pt;

    font-weight: bolder;

    color: #3d6c87;

    margin-bottom: 10px;

}





#content .caption {

    font-weight: bold;

    color: #3d6c87;

}







#content .label {

    text-align: right;

    font-style: italic;

}



#content .data {

    text-align: left;

}



#about, #almanac {

    width: 90%;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 30px;

}



.celestial_group {
	text-align: center;

}



.celestial_body {

    width: 48%;

    vertical-align: top;

    display:inline-block;

}



#plots {
	width: 90%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFF;

}

    

#plots img {

    border: thin solid #3d6c87;

    margin: 3px;

    padding: 3px;

}



#radar_img {

    width: 100%;

    display: block;

    margin-left: auto;

    margin-right: auto;

    margin: 3px;

    padding: 3px;

}



#radar_img img {

    margin-left: auto;

    margin-right: auto;

    width: 90%;

    margin: 3px;

    padding: 3px;

}



#radar_img p {

    width: 90%;

    font-style: italic;

    font-size: smaller;

    text-align: center;

    margin-top: 0;

}



/*

 * Navigation bar (week, month, etc.) at the bottom

 */

#navbar {

    margin: 0 1% 1% 1%;

    padding: 5px;

    text-align: center;

    clear: both;

    border-radius:10px; 

    border-style:solid;  

    border-width:2px;

	border-color:#517C96;

	border-radius:10px; 

	border-style:solid;  

	border-width:2px;

    background-color: #fafaff;

	opacity: 0.85;

    filter: alpha(opacity=85); /* For IE8 and earlier */

}



/*************** Global Styles ***************/



h2, h3, h4, h5, h6 {

    color: #3d6c87;

}



/************** 24hour section *****************/

#hour_group {

    width: 550px;

    min-height: 40px;

    margin: 1%;

    padding: 3px;

    margin-left: auto;

    margin-right: auto;

	border-color:#517C96;

	border-radius:10px; 

	border-style:solid;  

	border-width:2px;

    background-color: #fafaff;

	opacity: 0.85;

    filter: alpha(opacity=85); /* For IE8 and earlier */

}

         table.hour {table-layout:fixed; width:500px;}/*Setting the table width is important!*/

         table.hour td {overflow:hidden; border:1px solid #FF0000; height:40px}/*Hide text outside the cell.*/

		 table.hour tr:nth-of-type(1) {font-weight: bold; text-align:center;}/*Setting the width of column 1.*/

         table.hour td:nth-of-type(1) {width:100px; text-align:right;  padding-right:5px}/*Setting the width of column 1.*/

         table.hour td:nth-of-type(2) {width:75px; text-align:center}/*Setting the width of column 2.*/

         table.hour td:nth-of-type(3) {width:50px; text-align:center}/*Setting the width of column 3.*/

         table.hour td:nth-of-type(4) {width:75px; text-align:center}/*Setting the width of column 1.*/

         table.hour td:nth-of-type(5) {width:200px; text-align:center}/*Setting the width of column 1.*/



.alignCenter {text-align:center;}



.hour_header  {

    color: #191970;

    font-size: 11pt;

    font-weight: bold;

}





/************** Forecast inc Styles ***********/

.forecast table {

  table-layout: fixed;

  width: 100%;

  white-space: nowrap;

}

.forecast td {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.forecast_header  {

    color: #191970;

    font-size: 11pt;

    font-weight: bold;

}

/* Column widths are based on these cells */

.col-date {

  width: 50px;

}

.col-outlook {

  width: 36px;

}

.col-obvis {

  width: 35px;

}

.col-temp {

  width: 25px;

}

.col-wind {

  width: 50px;

}

.col-tides {

  width: 140px;

}

.col-sun {

  width: 45px;

}

.col-moonphase {

  width: 100px;

}

.col-precip {

  width: 85px;

}

.col-pop {

  width: 50px;

}

.tide-time {

	width 70px;

	text-align: left;

}

.tide-hilo {

	width: 15px;

	text-align: center;

}

.tide-offest {

	width 15px

	text-align: right;

}



/* End */





#tide_table {



}



#tide_time {

  font-size: 100%;

}

#tide_hilo {

	font-size:100%;

	padding-left:30px; 

    padding-right:0px;

	       border: 1px solid black;

}

#tide_offset {

	font-size:100%;

	padding-left:auto; */

/*	text-align:right; */

}

.forecast {

	margin:0 auto;

	border-color:#517C96;

	border-radius:10px; 

	border-style:solid;  

	border-width:2px;

    background-color: #fafaff;

	opacity: 0.85;

    filter: alpha(opacity=85); /* For IE8 and earlier */

}

.legend {

}

.legend tr {

}

.summary {

}

.summary tr {

}

.period {

}

.disclosure {

}









.col-wind_data {

	border: 1px solid black;





}

.windgust {

  color: #ff0000;

  text-align:center

}

.notwindgust {

  color: black

  text-align:center

}

.winddir {

  color: #0000ff;

}

.winddir-img {

  width: 32px;

}



.col-moon {

  width: 30px;

  	  border: 1px solid black;



}



.units {

  color: #aaaaaa;

}

.day {

  font-size: 120%;

}

.hour {

  font-size: 80%;

}

.date {

  font-size: 80%;

}

.temphi {

  color: #ff4444;

}

.templo {

  color: #4444ff;

}



.outlook-img {

  width: 32px;

}

.legend-img {

  width: 15px;

}

.pop-img {

  width: 8px;

}

.precip-img {

  width: 32px;

}

.obvis-img {

  width: 32px;

}

.sources p {

  font-size: 8pt;

  font-style: italic;

  color: #aaaaaa;

}



/************** Advisory Alert Styles ***********/

.advisoryBox {

color: black;

font-size: 12px;

text-align: center;

background-color: #FFE991;

margin: 0 0 0 0;

padding: .5em 0em .5em 0em;

border: 1px dashed rgb(34,70,79);

}

.advisoryBoxnoactive {

color: black;

font-size: 12px;

text-align: center;

background-color: white;

margin: 0 0 0 0;

padding: .5em 0em .5em 0em;

border: 1px dashed rgb(34,70,79);

}