/* 
 * 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/band.gif');
    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-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fafaff;
}

#masthead h1 {
    color: #3d6c87;
}
#masthead h3 {
    color: #5f8ea9;
}
/*************** About Styles *************/
#about_group{
	clear: both;
}

.about_header  {
    background-color: #000000;
    color: #a8b8c8;
    font-size: 14pt;
    font-weight: bolder;
	padding: 2px 5px 2px 5px;
	text-align: left;
}

#about_group .caption {
	font-size: 12pt;
    font-weight: bold;
    color: #3d6c87;
	border: none;
	text-align: left;
}
#about_group table {
    border: thin solid #000000;
    width: 100%;
}
#about_group td {
    border: thin solid #000000;
    padding: 2px;
	margin: 2px;
	width: auto;
}
#about_group tr {
	width: 100%
}


/*
 * This holds the statistics (daily high/low, etc.) on the left: 
 */
#stats_group {
    width: 30%;
    min-height: 500px;
    margin: 1%;
    padding: 5px;
    float: left;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fafaff;
}

#stats_group .header {
    font-size: 14pt;
    font-weight: bolder;
    color: #3d6c87;
    margin-bottom: 10px;
}


#stats_group .caption {
	font-size: 12pt;
    font-weight: bold;
    color: #3d6c87;
	border: none;
}


.stats table {
    border: thin solid #000000;
    width: 100%;
}
.stats td {
    border: thin solid #000000;
    padding: 2px;
	width: 52%;
}
.stats tr {
	width: 100%
}

.stats_header  {
    background-color: #000000;
    color: #a8b8c8;
    font-size: 14pt;
    font-weight: bolder;
	padding: 2px 5px 2px 5px;
}

.stats_label {
    color: green;
}

.stats_data {
    color: red;
}

.celestial_label{
	color: black;
}

.celestial_data{
	color: #b8860b;
}
.celestial_extra{
	color: #e8a016;
}

.sofi_label{
	color: black;
}

.sofi_data{
	color: #b8860b;
}
.sofi_extra{
	color: #e8a016;
}

#stats_group .radar_img{
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 3px;
	border: none
}
.radar_img img {
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    margin: 3px;
    padding: 3px;
}
.radar_img iframe {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 98%;
    aspect-ratio: 1 / 1;
    margin: 3px;
    padding: 3px;
    border: none;
    box-sizing: border-box;
}
#stats_group .moon_img{
    background-color: #000000;
    width: 190%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 3px;
	border: none;
}
.moon_img img {
    margin-left: auto;
    margin-right: auto;
    width: 97%;
    margin: 3px;
    padding: 3px;
}
#stats_group .sofi_img{
    width: 190%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 3px;
	border: none;
}
.sofi_img img {
    margin-left: auto;
    margin-right: auto;
    width: 97%;	
    margin: 3px;
    padding: 3px;
}
	
#stats_group .uwz_img{
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin: 3px;
    padding: 3px;
	border: none;
}
.uwz_img img {
    margin-left: auto;
    margin-right: auto;
    width: 94%px;
    margin: 3px;
    padding: 3px;
}
#stats_group .bo{
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin: 3px;
    padding: 3px;
	border: none;
}	
.bo{
	position: relative;
	z-index: 10;
}
.bo img {
	margin-left: auto;
	margin-right: auto;
	margin: 3px;
	padding: 3px;
	width: 94%;
	}
.bo img:hover{
	width: 700px;
}

/*
 * This holds the "About", "Almanac", and plots on the right
 */
#content {
    width: 63%;
    min-height: 500px;
    margin: 1%;
    padding: 5px;
    float: right;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fafaff;
    text-align: center;
}

#content .header {
    font-size: 14pt;
    font-weight: bolder;
    color: #3d6c87;
    margin-bottom: 10px;
}


#content .caption {
    font-weight: bold;
    color: #3d6c87;
}



#content .label {
    text-align: left;
    
}

#content .data {
    text-align: left;
}



#almanac {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

.celestial_group {
}

.celestial_body {
    width: 100%;
    vertical-align: top;
    display:inline-block;
}

#plots {
    display: block;
    margin-left: auto;
    margin-right: auto;
	clear: both;
	border: thin solid #000000;
}

.plots_header  {
    background-color: #000000;
    color: #a8b8c8;
    font-size: 14pt;
    font-weight: bolder;
	padding: 2px 5px 2px 5px;
	text-align: left;
}
    
#plots img {
	max-width: 100%;
	height: auto;
    border: thin solid #3d6c87;
    margin: 3px;
    padding: 3px;
}

#radar_img {
    width: 90%;
    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;
}

#uwz_img {
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin: 3px;
    padding: 3px;
}

#uwz_img img {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    margin: 3px;
    padding: 3px;
}

#uwz_img p {
    width: 90%;
    font-style: italic;
    font-size: smaller;
    text-align: center;
    margin-top: 0;
}

#sofi_img {
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin: 3px;
    padding: 3px;
}

#sofi_img img {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    margin: 3px;
    padding: 3px;
}

#sofi_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: 1% 1% 0 1%;
    padding: 5px;
    text-align: center;
    clear: both;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fafaff;
}
/*************** Style Almanac Page ************/
#almanac_group {
    width: 30.3%;
    min-height: 300px;
    margin: 1%;
    padding: 5px;
    float: left;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fafaff;
}

#almanac_group .header {
    font-size: 14pt;
    font-weight: bolder;
    color: #3d6c87;
    margin-bottom: 10px;
}


#almanac_group .caption {
	font-size: 12pt;
    font-weight: bold;
    color: #3d6c87;
	border: none;
}	

.almanac_header  {
    background-color: #000000;
    color: #a8b8c8;
    font-size: 14pt;
    font-weight: bolder;
	padding: 10px 5px 10px 5px;
    text-align: center;
}

#almanac_imggroup {
    width: 63.6%;
    min-height: 300px;
    margin: 1%;
    padding: 5px;
    float: left;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fafaff;
}

#almanac_imggroup img
{
	width: 100%;
}

#almanac_imggroup .caption {
	font-size: 12pt;
    font-weight: bold;
    color: #3d6c87;
	border: none;
}	

.almanac table {
    border: thin solid #000000;
    width: 100%;
}
.almanac td {
    border: thin solid #000000;
    padding: 2px;
}
.almanac tr {
	width: 100%
}

.almanac_left{
	width: 35%;
	vertical-align: top;
	
}	

.almanac_right{
	width: 70%;
	vertical-align: top;
}

.clear {
    clear: both;
}

/*
 * This is the big header in the middle of the page
 */
#subhead {
    margin: 0 1% 0 1%;
    padding: 5px;
    text-align: center;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fafaff;
}

#subhead h1 {
    color: #3d6c87;
}
#subhead h3 {
    color: #5f8ea9;
}
/*************** Global Styles ***************/

h2, h3, h4, h5, h6 {
    color: #3d6c87;
}
/*************** Forecast Styles *************/

#forecast_group {
  clear: both;
  border: thin solid #000000;
}

#forecast_group table {
    text-align: center;
    width: 100%;
}

#forecast_group td {
    width: 50%;
}

.forecast_header  {
    background-color: #000000;
    color: #a8b8c8;
    font-size: 14pt;
    font-weight: bolder;
	padding: 2px 5px 2px 5px;
	text-align: left;
}


.forecast {
  clear: both;
  margin: 6px;
 }
.forecast td {
  font-size: 80%;
  
}
.forecast table {
  table-layout: fixed;
  width: 100%;
}
.legend {
}
.legend tr {
  vertical-align: top;
}
.summary {
}
.summary tr {
  vertical-align: top;
}
.period {
}
.disclosure {
  width: 20px;
}
.col-outlook {
  width: 36px;
}
.col-date {
  width: 64px;
  text-align: left;
}
.col-temp {
  width: 30px;
}
.col-dewpoint {
  width: 30px;
}
.col-humidity {
  width: 30px;
}
.col-wind {
  width: 60px;
  height: 48px;
}
.col-pop {
  width: 40px;
}
.col-precip {
}
.col-obvis {
}
.col-tides {
  width: 80px;
}
.col-sun {
  width: 30px;
}
.col-moon {
  width: 30px;
}
.col-moonphase {
  width: 30px;
}
.units {
  color: #aaaaaa;
}
.day {
  font-size: 120%;
}
.hour {
  font-size: 80%;
}
.date {
  font-size: 80%;
}
.temphi {
  color: #ff4444;
}
.templo {
  color: #4444ff;
}
.windgust {
  color: #aaaaaa;
}
.winddir {
  color: #aaaaaa;
}
.winddir-img {
  width: 32px;
}
.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;
  text-align: left;
}

.radar-placeholder {
    width: 95%;
    aspect-ratio: 1 / 1;
    margin: 3px auto;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    border: 1px dashed #8a97a3;
    border-radius: 6px;
    font-size: 0.9rem;
}
.radar-placeholder button {
    cursor: pointer;
    border: 1px solid #2a6496;
    background: #2a6496;
    color: #fff;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.9rem;
}