body { overflow: hidden; /***never show the scrollbars***/
	  }

html, body{ 
 font-family: Consolas, monaco, monospace;
 color: white;
} 

.bgContainer {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-position: center center;
 background-size: cover;
 display: none;
}

#overallContainer {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
}

#header {
 width: 96%;
 padding: 0 2%;
 height: 15%;
}

#chartContainer, #currentContainer {
 position: relative;
 left: 2%;
 width: 73%;
 top: 6%;
 height: 77%;
}

#chartContainer {
 background-color: rgba(32,32,32,0.6);
 border-radius: 10px;
 border-top-right-radius: 0;
}

#infos h2 {
 margin-top: 2%;
}

#infos p {
 margin-top: 1%;
}

#infos a {
 color: white;
}

#infos li {
 text-indent: 2%;
}

#forecast a {
 display: block;
 float: left;
}

#forecast a { width: 10%; }
#forecast a+a { width: 40%; }
#forecast a+a+a { width: 6%; }
#forecast a+a+a+a { width: 6%; }
#forecast a+a+a+a+a { width: 8%; }
#forecast a+a+a+a+a+a { width: 6%; }
#forecast a+a+a+a+a+a+a { width: 6%; }
#forecast a+a+a+a+a+a+a+a { width: 6%; }

#forecast a.topLine {
 clear:both;
}

#forecast a.wxDate {
 width: 88%;
 clear:both;
 background: white;
 color: black;
}

#forecast ul li ul li {
 clear: both;
}

#rhsContainer {
 position: absolute;
 right: 2%;
 width: 22%;
 top: 15%;
 height: 85%;
}

#rhs h2, #rhs a {
 color: #202020;
 background-color: #c0c0c0;
 padding-left: 5%;
 line-height: 150%;
 height: 150%;
}

#rhs li {
 display: inline-block;
 padding: 1%;
}

#rhs h2 {
 clear: both;
 margin-top: 10%;
}

#controls {
 position: absolute;
 bottom: 79%;
 right: 25%;
 width: auto;
 padding: 0.4%;
 background-color: rgba(32,32,32,0.6);
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
}

.toolbar {
 display: inline-block;
}

.weatherMeter {
 position: relative;
 width: 10%;
 margin-left: 1%;
 background-color: rgba(32,32,32,0.6);
 border-radius: 10px;
 float: left;
}

.wMtop {
 position: absolute;
 width: 90%;
 height: 17.5%;
 top: 0;
 left: 5%;
}

.wMempty {
 position: absolute;
 background-color: rgba(255,255,255,1);
 width: 50%;
 height: 65%;
 top: 25%;
 left: 25%;
}

.wMfull {
 position: absolute;
 background-color: rgba(96,96,96,1);
 width: 100%;
 height: 40%;
 bottom: 0;
 left: 0;
}

.wMoverPic {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 background-position: center center;
 background-size: cover;
}

.wMbottom {
 position: absolute;
 width: 90%;
 height: 4%;
 top: 96%;
 left: 5%;
}

/* 24h min/max, markers sit over the bar in the same box as .wMempty */
.wMmarkers {
 position: absolute;
 width: 50%;
 height: 65%;
 top: 25%;
 left: 25%;
}

.wMmax, .wMmin {
 position: absolute;
 display: none;
 width: 140%;
 left: -20%;
 height: 3px;
 margin-bottom: -1px;
}

.wMmax {
 background-color: #FF9E80;
}

.wMmin {
 background-color: #80C8FF;
}

/* font-size set in resizeContainerCurrent() so min and max match */
.wMmaxText, .wMminText {
 position: absolute;
 width: 96%;
 left: 2%;
 text-align: center;
 white-space: nowrap;
 font-weight: bold;
 text-shadow: 0 0 2px #000, 0 0 2px #000;
}

.wMmaxText {
 height: 7%;
 top: 18%;
 color: #FF9E80;
}

.wMminText {
 height: 6%;
 top: 90%;
 color: #80C8FF;
}

#test {
 position: fixed;
 background: blue;
 top:0;
 left:0;
 width: 400px;
 z-index: 1000;
}

/* uPlot history chart, #chart is sized and placed in resizeContainerChart() */
#chart {
 position: relative;
}

.u-cursor-x, .u-cursor-y {
 border-color: #c0c0c0;
}

/* cursor readout, font-size set in doChart() */
.chartTooltip {
 position: absolute;
 display: none;
 pointer-events: none;
 padding: 0.3em 0.5em;
 background-color: rgba(32,32,32,0.85);
 border-radius: 5px;
 white-space: nowrap;
 font-family: Consolas, monaco, monospace;
 z-index: 100;
}