@charset "utf-8";
/* CSS Document */

html, body {height: 100%;	width: 100%;}
html{
	background: url(../images/background/bg.jpg) no-repeat fixed;
	/*	The following stretches the background (without distortion) this is the hack for ie8, ie9 ... 
		-ms-behavior: url(lib/backgroundsize.min.htc); 
		ms-behavior: url(lib/backgroundsize.min.htc);*/
	background-size: cover;
}
body {
	margin: 0; 
	font: 1em/1.35em 'AlternateGothic', Verdana, Arial, Helvetica, sans-serif;
	color:#fff;
	font-smooth: always;
	text-shadow: 0 0 1px rgba(255,255,255,0.5);
	
	-webkit-font-smoothing: subpixel-antialiased !important; 
	-webkit-backface-visibility: hidden; 
	-moz-backface-visibility: hidden; 
	-ms-backface-visibility: hidden;
}
header, nav, section, article, aside, footer {display:block;}
#background{
	display:none;
	position:fixed;
	/*min-width:100%; min-height:100%;*/
	top: 0; right: 0; bottom: 0; left: 0;
}
#gradient{
	position: absolute;
	display:table-cell;
	
	background:url(../images/background/gradient.png) repeat-y;
	background-size: contain;
	min-width:100%; min-height:100%;
	/*top: 0; right: 0; bottom: 0; left: 0;*/
}
#topbar{
	position: fixed;
	width: 100%;
	height: 9px;
	z-index:1;
	background:#44b749;	
}
#wrapper {
	position:relative;
	display:table;
	width:100%;
	height:100%;
	margin: 0 auto;
}
#poweredby{
	position:fixed;
	position: fixed;
	bottom: -5px;
	left: 50%;
	margin-left: 153px;
}
#container{
	display: table-cell;
	vertical-align: middle;	
}
#window{
	position:relative;
	margin: 0 auto;
	width:980px;
	z-index:1;
	/*border: 1px solid blue;*/
}
#window #logo{
	margin: 16px 0 -102px 6px;
}
#window #title{
	width: 545px;
	height: 137px;
	margin: 30px 0 -50px 358px;
	background:url(../images/background/window-main-title.png) no-repeat;
}
#window #window-bg{
	margin: 0 auto;
	width: 801px;	/*827px;*/
	height: 538px;	/*622px;*/
	padding: 12px 13px;
	background:url(../images/background/window-main-bg.png) no-repeat;
}

#tabmore{
	position: relative;
	margin: 0 auto;
	width: 240px;
	left: -293px;
	top: -50px;
}


.block{		position:relative; display:block; padding:0 12px;}

.w100{width:100%;	min-width:100%;}
.w90{width:90%; 	min-width:90%;}
.w80{width:80%; 	min-width:80%;}
.w75{width:75%; 	min-width:75%;}
.w70{width:70%; 	min-width:70%;}
.w66{width:66.666%; min-width:66.666%;}
.w60{width:60%; 	min-width:60%;}
.w50{width:50%; 	min-width:50%;}
.w40{width:40%; 	min-width:40%;}
.w30{width:30%; 	min-width:30%;}
.w33{width:33.333%; min-width:33.333%;}
.w25{width:25%; 	min-width:25%;}
.w20{width:20%; 	min-width:20%;}
.w16{width:16.666%; min-width:16.666%;}
.w15{width:15%; 	min-width:15%;}
.w10{width:10%; 	min-width:10%;}

section[id^="col-"]{margin:10px 0 0; max-height: 390px; overflow-y: hidden;}
#col-1{width:266px;}
#col-2{width:269px;}
#col-3{width:266px;}
#ad-space{
	position: absolute;
	top: 572px;
	left: 89px;
	width: 801px;
	height: 120px;
	max-height: 120px;
	overflow-y:hidden;
}
#divider-wide{
	width:241px;
	height:3px;
	margin: 3px 0;
	background: url(../images/divider-241.png) no-repeat;
}

/* ////////////////////////////// */
/* //// - COLUMN 1 - WEATHER //// */

	section #weather{width:241px; text-align:center;}
	#weather #icon{display:inline-block; padding-right:8px; height:92px;}
	#weather #icon img{max-width: 142px !important; max-height: 92px !important;}
	#weather #info{
		display:inline-block;
		vertical-align: top;
		text-align:left;
		max-width: 147px;
		margin-top: 8px;	
	}
	#weather #desc{font-size: 19px;}
	#weather #temp{
		font-size: 70px;
		line-height: 40px;
		margin-bottom: 8px;
	}
	#temp sup{font-size: 34px; margin-left: -3px;}
	
/* //// - COLUMN 1 - STRENGTH //// */

	section #strength{
		width:241px;
		padding: 3px 0 2px;
		text-align:center;
	}
	section #strength div{
		font-size: 19px;
		display:inline-block;
		text-align:left;	
	}
	section #strength #icon-sun{width: 31px;}
	section #strength #icon-wind{width: 34px;}
	section #strength #sun, section #strength #wind{ margin-right:15px; /*min-width: 55px;*/}
	section #strength #sun, section #strength #wind-speed span.num{ display: inline-block; font-size: 50px; padding-top:11px;}
	section #strength #sun, section #strength #wind-speed span.unit{padding-left:8px;}
	
/* //// - COLUMN 1 - POWER //// */

	section #power{
		width:241px;
		padding: 10px 0 0;
		text-align:center;
	}
	#power #power-title{font-size:27px;	line-height:0.9em;}
	#power #solar-container, #power #wind-container{ height:77px; margin: 12px 0;}
	#solar-dial, #wind-dial{
		position: relative;
		width: 78px;
		height: 77px;
		z-index: 1;
	}
	#solar-dial{background: url(../images/dial_sun.png) no-repeat;}
	#wind-dial{background: url(../images/dial_wind.png) no-repeat;}
	#solar-dial #needle, #wind-dial #needle{
		width: 78px;
		height: 77px;
		background: url(../images/dial_needle.png) no-repeat;
	}
	#solar-box, #wind-box{
		position: relative;
		top: -72px;
		left: 42px;
		width:199px;
		height:64px;
		text-align:left;
		font-size: 18px;
	}
	#solar-box{background:url(../images/box_solar.png) no-repeat;}
	#wind-box{background:url(../images/box_wind.png) no-repeat;}
	#solar-today, #solar-ytd, #wind-today, #wind-ytd{
		position: relative;
		width: 159px;
		height: 22px;
		max-height: 22px;
		margin-left: 39px;
	}
	#solar-today, #wind-today{top: 8px;}
	#solar-ytd, #wind-ytd{top: 16px;}
	
/* /////////////////////////////// */
/* //// - COLUMN 2 - ODOMETER //// */

	section #odometer{
		width: 245px;
		height: 370px;
		padding: 5px 0 0;
		/*background:rgba(255,0,0,0.3);*/
	}
	#odo-bg{
		top: 24px;
		width: 245px;
		height: 262px;
		position: relative;
		background:url(../images/odometer_bg_large.png) 50% 50% no-repeat;
	}
	#odo-bg #highlight{
		position: absolute;
		top: 41px;
		left: 40px;
		width:164px;
		height:94px;
		background:url(../images/odometer_highlight_large.png) no-repeat;	
	}
	#odo-data{
		position: relative;
		top: 75px;
		left: 33px;
		width: 180px;
		height: 150px;
		/*background: rgba(255,0,0,0.3);*/
	}
	#odo-data #today{
		position: relative;
		width: 100%;
		height: 57px;
		/*background: rgba(255,0,0,0.3);*/
	}
	#counter-today{
		position: absolute;
		/*left: 27px;*/
		right: 29px;
		text-align: right;
	}
	#unit-today{
		position: absolute;
		left: 154px;
		top: 11px;
	}
	#title-today{
		position: absolute;
		left: 62px;
		top: 36px;	
	}
	
	#divider-odo{
		position: relative;
		width: 100%;
		height: 3px;
		margin: 6px 0 3px;
		background: url(../images/divider-241.png) no-repeat;
	}
	
	#odo-data #ytd{
		position: relative;
		/*background: rgba(255,0,0,0.3);*/
	}
	#since-ytd{
		width: 100%;
		text-align: center;
	}
	#counter-ytd{
		position: relative;
		/*left: 27px;*/
		left: -28px;
		text-align: right;
	}
	#unit-ytd{
		position: relative;
		display: inline;
		left: 155px;
		top: -19px;
	}
	#title-ytd{
		position: relative;
		width: 173px;
		text-align: center;
		top: -17px;
	}
	
/* ///////////////////////////// */
/* //// - COLUMN 3 - CHARTS //// */

	section #charts-container{width:241px; min-height: 164px; margin: 18px 0 0; text-align:center;}
	
	#chart-daily-wrapper figure.legend{
		position: absolute;
		top: 136px;		left: 12px;
		width: 110px;
		height: 12px;
		margin: 0;
		font-size: 11px;
		/*background: #f00;*/
	}
	#chart-daily-wrapper figure.legend section div{
		display: inline-block;
		float: left;
		margin: 0 10px 0 4px;
	}
	#chart-daily-wrapper figure.legend .bar{
		width: 15px;
		height: 2px;
		margin: 10px 0;
	}
	#chart-daily-wrapper figure.legend #bar-wind{background: #46c8f3;}
	#chart-daily-wrapper figure.legend #bar-solar{background: #ffb339;}
	
/* ///////////////////////////// */
/* //// - COLUMN 3 - BATTERY //// */

	section #batt-power{
		width:241px; 
		padding: 10px 0 0; 
		text-align:center;
	}
	#battery-display{
		width: 241px;
		height: 88px;
		/*margin: 12px 0 0;*/
		/*background: rgba(255,0,0,0.3);*/
	}
	#batt-title{
		font-size:27px;
		line-height:0.9em;
		margin-bottom:20px;	
	}
	#batt-bar{
		position: relative;
		top: 5px;
		left: 25px;
		width: 166px;
		height: 78px;
		background:url(../images/battery_power.png) no-repeat;
	}
	#batt-img{
		position: relative;
		top: -78px;
		left: 18px;
		width: 206px;
		height: 88px;
		background:url(../images/battery_empty.png) no-repeat;
	}
	#batt-percent{
		position: relative;
		top: -133px;
		width: 225px;
		font-size: 50px;
	}

#cover {
	position:absolute;
	display:block;
	top:0;	bottom:0;
	left:0; right:0;
	text-align: center;
	/*background:rgba(0,0,0,0.8);*/
	background:rgba(150,150,150,0.8);
	z-index:1000;
}
.table{
	display: table;
	width: 100%;
	height: 100%;	
}
.table-cell{display: table-cell; vertical-align: middle;}
#cover #box{
	display: inline-block;
	width: 400px;
	padding: 25px;
	text-align: center;
	font-size: 22px;
	line-height:35px;
	background:rgba(0,0,0,0.8);
	border: 4px solid #C52E2E;
}
#cover #box .title{
	font-size: 26px;
	text-transform: uppercase;
	/*margin: 24px 0 12px 0;*/
}

#cover #box .msg{/*margin: 12px 0 24px;*/}


/* Ad Slider (bxslider) */
#adsliderContainer{width:801px;}
#ad-space svg{position: absolute; top: 68px;}
/*#corner-covers{position:absolute; top:68px; width:801px; height:51px; background:url(../images/background/corner_covers.png) no-repeat; pointer-events:none;}
.ie10 #corner-covers{background:none !important;}*/
.bxslider li .content{
	position: absolute;
	top: 46px;
	left: 240px;
	font-size: 43px;
	color:#fff348;
}