/* @charset "UTF-8"; */
/* Must be first item in stylesheet, in EXACTLY that format */
/* but for some reason the validator thinks that it's not first, so we let it assume UTF-8 */ 

/* Formatting sheet to support the NN14 Weather station website at www.nn14.co.uk */
/* Author   : John Powers                */
/* Revision : 1 28/04/2020 First Release */
/*            2      /2020 Responsive Web Design + HTML error fix */

/* ---------------------- Responsive Web Design Definitions --------------------------*/

//* {
//  box-sizing: border-box;
//}

/* Portrait Mobile Phone definitions (mobile first!) */
.DispExtraSmall {display: inline;}
.DispSmall {display: none;}
.DispMedium {display: none;}
.DispLarge {display: none;}
.MoonPic {display: none;}

img {
/*    width: 100%; */
/*    height: auto; */
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens */
/* Uses media queries  */

/* Create three equal columns that floats next to each other */
.gauge2column {
  float: left;
  width: 100%;
}

.gauge3column {
  float: left;
  width: 100%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

body {
	background-color: #FFFFFF;
	font-family: Verdana; /*, Helvetica, sans-serif; */
    font-size: 8pt;
	color: #585858;
	text-align: left;
}

#content {
	margin-top: 5%;
    margin-left: 0%;
	margin-bottom: 5%;
    margin-right: 0%;
}

h1,h2,h3,h4,h5,h6 {
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    font-size: 200%;
    font-weight: bold;
    text-transform: lowercase;
    color: #678090;
    letter-spacing: 0.5em;
    padding-bottom: 1em;
    text-align: left;
/*    color: red;*/ /* debug flag red = S */
}

h2 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 110%;
    color: #555555;
    letter-spacing: 0.15em;
    padding-bottom: .2em;
    text-align: left;
    padding-top: .2em;
    padding-right: 1em;
}
    
table {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    width: 100%;
    border: 0;
    border-collapse: collapse;
    float: left;
/*    table-layout: fixed; */
/*    word-break: break-all;*/ /* debug */
}

caption {
	font-size: 95%;
	font-style: normal;
	font-weight: bold;
	letter-spacing: .1em;
	padding-top: 0.5em;
	padding-bottom: 0.25em;
	text-align: left;
}

td {
	white-space:normal;
/*    text-align: left; */
    vertical-align: top;
	font-size: 100%;
	padding-top: 0.2em;
	padding-right: 0.5em;
	padding-bottom: 0.2em;
	padding-left: 0.5em;
	color: #222222;
}

.td_gauge_1u {
	background-color: #EFEFEF;
    width: 33.33%;
    padding-top:1.5em;    
    position:static;
}

.td_gauge_2u {
	background-color: #FFFFFF;
    width: 33.33%;
    padding-top:1.5em;    
    position:static;
}

.td_gauge_1l {
	background-color: #EFEFEF;
    width: 33.33%;
    padding-bottom:1.5em;    
    position:static;
}

.td_gauge_2l {
	background-color: #FFFFFF;
    width: 33.33%;
    padding-bottom:1.5em;    
    position:static;
}

.td_thumbnails {
	padding-top: 0.1em;
	padding-right: 0.2em;
	padding-bottom: 0.1em;
	padding-left: 0.0em;
    width: 20%;
    height: auto;
}

.tableseparator_1 {		             	/* Temperature, Forecast, Daylight, Equipment */
	font-size: 90%;
	font-weight: 400;
	background-color: #678090;
	color: #CCCCCC;
	padding: .5em;
	letter-spacing: .1em;
}
.td_cell_1 {
	background-color: #F1D3B7;
}

.tableseparator_2 {                     /* Sunshine */
	font-size: 90%;
	font-weight: 400;
	background-color: #8499A7;
	color: #CCCCCC;
	padding: .5em;
	letter-spacing: .1em;
}
.td_cell_2 {
	background-color: #F3D9BE;
}

.tableseparator_3 {                     /* Rainfall, Solar Day, WebInfo */
	font-size: 90%;
	font-weight: 400;
	background-color: #A2B1BD;
	color: #666666;
	padding: .5em;
	letter-spacing: .1em;
}
.td_cell_3 {
	background-color: #F5E0CC;
}

.tableseparator_4 {                     /* Wind */
	font-size: 90%;
	font-weight: 400;
	background-color: #C0CAD3;
	color: #666666;
	padding: .5em;
	letter-spacing: .1em;
}
.td_cell_4 {
	background-color: #F7E6D3;
}

.tableseparator_5 {                     /* Pressure, Lunar Day, News */
	font-size: 90%;
	font-weight: 400;
	background-color: #C0CAD3;
	color: #666666;
	padding: .5em;
	letter-spacing: .1em;
}
.td_cell_5 {
	background-color: #F9EDE1;
}

.tablespacer {                         /* Blank row for end of table */
	font-size: 90%;
	font-weight: 400;
	background-color: #FFFFFF;
	color: #FFFFFF;
	padding: .5em;
	letter-spacing: .1em;
}

/* Column width not working - errors with validator */
.rec_col_1 { } /*column-width: 45%;} */
.rec_col_2 { } /*column-width:  5%;} */
.rec_col_3 { } /*column-width: 50%;} */

.td_navigation_bar {
	width: 100%;
    text-align: left;
	font-weight: 400;
    font-size: 100%;
	padding-top: 1em;
	padding-bottom: 1em;
	letter-spacing: 0.2em;
}

a {
	color: #FF6600;
	text-decoration: none;
/*	font-weight: normal;   */
/*	background-color: #888888; */
 }

a:visited {
/*	text-decoration: none; */
	color: #CC6600;
}

a:hover {
/*	text-decoration: underline overline; */
	color: #6F9DBE;
}

a:active {
/*	text-decoration: none; */
}

.button {
    background-color: #678090;
    border: none;
    color: white;
    padding: 0px 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 75%;
    margin: 0px 0px;
    cursor: pointer;
    width: 16.66%;
    }

.disabled {
  opacity: 1;
  color: #678090; /* Same as background*/
  cursor: not-allowed;
}

.thispage {
  background-color: #F1D3B7; /* Same as TD1 */
  color: black;
  cursor: not-allowed;
}

.btn-group button {
  border: 1px solid #F1D3B7; /* Green border */
  padding: 0.5em 0.5em; /* Some padding */
  float: left;
  min-height: 4em;
}

.btn-group button:hover {
    background-color: white;
    color: black;
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
}

.credits {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 70%;
    font-style: italic;
    text-transform: lowercase;
    letter-spacing: 0.3em;
    text-align: right;
}

/* Device Specific Specifications */

/* Extra small devices (phones, 600px and down) */ 
/*@media only screen and (max-width: 600px) { */
/* Defined in defaults */
/*}*/

/* Small devices (portrait tablets and large phones, 600px and up) */ 
@media only screen and (min-width: 601px) {
    .DispExtraSmall {display: none;}
    .DispSmall {display: inline;}
    .DispMedium {display: none;}
    .DispLarge {display: none;}

    .MoonPic {display: inline;}
    .gauge2column {width: 50%;}
    .gauge3column {width: 33.33%;}
    
    body {font-size: 8pt;}
    
    #content {
        margin-right: 0%;
        margin-left: 0%;
    }
    
    h1 {
        font-size: 200%;
        letter-spacing: 0.5em;
/*        color: green;*/ /* debug flag green = S */
    }
    
    h2 {font-size: 110%;}
    
/*	.rec_col_1 {column-width: 50%;} */
/*  .rec_col_2 {column-width:  5%;} */
/*	.rec_col_3 {column-width: 45%;} */

    .button {width: 16.66%;}
    
    .td_navigation_bar {font-size: 100%;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .DispExtraSmall {display: none;}
    .DispSmall {display: none;}
    .DispMedium {display: inline;}
    .DispLarge {display: none;}

    .MoonPic {display: inline;}
    .gauge2column {width: 50%;}
    .gauge3column {width: 33.33%;}
    
    body {font-size: 10pt;}
    
    #content {
        margin-right: 10%;
        margin-left: 10%;
    }
    
    h1 {
        font-size: 300%;
        letter-spacing: 0.6em;
/*        color: blue;*/ /* debug flag blue = M */
    }
    
    h2 {
        font-size: 100%;
        font-weight: bold;
    }
	
/*	.rec_col_1 {column-width: 34%;} */
/*  .rec_col_2 {column-width: 24%;} */
/*	.rec_col_3 {column-width: 42%;} */

    .button {width: 8.33%;}
} 

/* Large devices (laptops/desktops, 992px and up) */ 
@media only screen and (min-width: 1170px) {
    .DispExtraSmall {display: none;}
    .DispSmall {display: none;}
    .DispMedium {display: none;}
    .DispLarge {display: inline;}

    .MoonPic {display: inline;}

    body {font-size: 10pt;}
    
    #content {
        margin-right: 10%;
        margin-left: 10%;
    }
    
    h1 {
        font-size: 300%;
        letter-spacing: 0.6em;
/*        color: black;*/ /* debug flag black = L */
    }
    
    h2 {
        font-size: 100%;
        font-weight: bold;
    }
	
/*	.rec_col_1 {column-width: 34%;} */
/*  .rec_col_2 {column-width: 24%;} */
/*	.rec_col_3 {column-width: 42%;} */

    .button {width: 8.33%;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
/*@media only screen and (min-width: 1200px) {...} */

/*Cascading Order
What style will be used when there is more than one style specified for an HTML element?
All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, 
where number one has the highest priority:

1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)*
3. Browser default

So, an inline style has the highest priority, and will override external and internal styles and 
browser defaults.

* Multiple Style Sheets:
If some properties have been defined for the same selector (element) in different style sheets, 
the value from the last read style sheet will be used. 
*/