/* this is for weather2 page look */
body {
 background-color: #222222;
 color: #B8B8B8;
 font-family: "Arial";
 /*font-size:90%;*/
}
 /*font-size: 0.9em;*/

table {
 background-color: #222222;
 color: #B8B8B8;
 font-family: "Arial";
 /*font-size: 0.9em;*/
 font-size:90%;
}

img {
  /* width: 600px; */
  /* height: 450px; */
  background: url(/common/loading.gif) 50% no-repeat;
  alt: " ... waiting ... ";
  border: 1px solid green;
  /* border-radius: 5px; */
}

/* links over the default ... replace the dark blue */
a:link {color:#BBBB00;}    /* unvisited link */
a:visited {color:#999900;} /* visited link */
a:hover {color:#FFFF00;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

/* ===== id single elements with # ===== */
#refreshNow a:link {color:#009900;}    /* unvisited link */  
#refreshNow a:visited {color:#008800;} /* visited link */
#refreshNow a:hover {color:#00FF00;}   /* mouse over link */
#refreshNow a:active {color:#00FFFF;}  /* selected link */

#credsNstats a:link {color:#000099;}    /* unvisited link */ 
#credsNstats a:visited {color:#009999;} /* visited link */
#credsNstats a:hover {color:#0000FF;}   /* mouse over link */
#credsNstats a:active {color:#00FFFF;}  /* selected link */

#credsNstats {
 background-color:#AAAAAA;
 margin-left:auto;
 margin-right:auto;
}

#imageInfo {
 color:#555555;
}
  
/* ===== class multiple elements . ===== */

.imageAndWeather {
 background-color:#000000;
 /*width:980;*/
 width: auto;
 /* centered */
 margin-left:auto;
 margin-right:auto;
 border:1px #001100;
 border-style:solid;
}

.imageRefreshCount {
 background-color:#001100;
}

.imageAndWeather a:link {color:#00BB00;}    /* unvisited link */
.imageAndWeather a:visited {color:#009900;} /* visited link */
.imageAndWeather a:hover {color:#00FF00;}   /* mouse over link */
.imageAndWeather a:active {color:#00FFFF;}  /* selected link */

.weatherHeading a:link {color:#00BB00;}    /* unvisited link */
.weatherHeading a:visited {color:#009900;} /* visited link */
.weatherHeading a:hover {color:#00FF00;}   /* mouse over link */
.weatherHeading a:active {color:#00FFFF;}  /* selected link */

.weatherGreenBackground {
 background-color:#006600;
}

.weatherGreenBackgroundDull {
 background-color:#003300;
}

.energy {
 background-color:#000000;
 /* width */
 /* centered */
 margin-left:auto;
 margin-right:auto;
 border:1px #001100;
 border-style:solid;

}

.energyPV {
 background-color:#000000;
}

.energyMeter {
 background-color:#000000;
}

.energy a:link {color:#00BB00;}    /* unvisited link */
.energy a:visited {color:#009900;} /* visited link */
.energy a:hover {color:#00FF00;}   /* mouse over link */
.energy a:active {color:#00FFBB;}  /* selected link */

.meterBlue {
 background-color:#000066;
}

.pvGreen {
 background-color:#006600;
}

/* placeholder spacing for images */

.houseCisternLevel-Container {
    position:relative;
    background: #202030;
    colour:#00ff00;
    width:385px;
    height: 233px;
    /*display:inline;*/
}

.houseCisternLevel-Container:before{
	content: "";
	display: block;
	padding-top: 100%; 
}

.houseCisternLevel-Wrap {
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.cistern3dayGraph-Container {
    position:relative;
    background: #204020;
    colour:#00ff00;
    width:400px;
    height: 355px;
    /*display:inline;*/
}

.cistern3dayGraph-Container:before{
	content: "";
	display: block;
	padding-top: 100%; 
}

.cistern3dayGraph-Wrap {
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.cistern365Graph-Container {
    position:relative;
    background: #404040;
    colour:#00ff00;
    width:400px;
    height: 390px;
}

.cistern365Graph-Container:before{
	content: "";
	display: block;
	padding-top: 100%; 
}

.cistern365Graph-Wrap {
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}


.temps3dayGraph-Container {
    position:relative;
    background: #304030;
    colour:#00ff00;
    width:400px;
    height: 390px;
}

.temps3dayGraph-Container:before{
	content: "";
	display: block;
	padding-top: 100%; 
}

.temps3dayGraph-Wrap {
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}



.temps365Graph-Container {
    position:relative;
    background: #304040;
    colour:#00ff00;
    width:200px;
    height: 390px;
}

.temps365Graph-Container:before{
	content: "";
	display: block;
	padding-top: 100%; 
}

.temps365Graph-Wrap {
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.swrOut1 {
	background-color: #505f50;
}

.swrOut2 {
	background-color: #5f505f;
}

/* placeholder spacing for images */

.Geography {
 background-color: #404040;
 color: #B8B8B8;
 font-family: "Times New Roman";
 /*font-size: 0.9em;*/
 font-size: 90%;
 margin-left:auto;
 margin-right:auto;
 width:40%;
}

table.Geography {
 border:1px #B8B8B8;
 border-style:solid;
}

th.Geography {
 border:1px #B8B8B8;
 border-style:solid;
}

td.Geography {
 border:1px #787878;
 border-style:solid;
 /*width:400;*/
 width:400px;
}

.Geography a:link {color:#BBBB00;}    /* unvisited link */
.Geography a:visited {color:#00FF00;} /* visited link */
.Geography a:hover {color:#FFFF00;}   /* mouse over link */
.Geography a:active {color:#0000FF;}  /* selected link */

.tideText {
  /* class */
  font-size: 1.2em;
  background-color: #222255;
  color: #dddddd;
}

.tideTextHi {
  /* class */
  font-size: 1.2em;
  background-color: #22cccc;
  color: #222222;
}