*{ border:0; margin:0 }

@font-face
{
	font-family:"arialx";
	src:url('../fonts/arial.ttf'), url('../fonts/arial.eot'), url('../fonts/arial.otf');		
}
@font-face
{
	font-family:"arialbd";
	src:url('../fonts/arialbd.ttf'), url('../fonts/arialbd.eot'), url('../fonts/arialbd.otf');		
}

body {
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  -webkit-user-modify:none;
  -webkit-highlight:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  font:11px "arialx";
}

body, input, label { font:11px "arialx" }
input { padding-left:2px;}
span {color:white;}

html,body {
  height:100%;
  cursor:default;
}

input { border:0 solid black; margin:2px; padding:1px 0; padding-left:1px; width:44px }
label { color:white }

#mainWrapper { 
	width:413px !important;
	height:660px !important;
	position:relative;
	margin:0 auto;
	overflow: hidden;
}

/* globals */
#preload, #innerDiv , #progessTxt, #mainContainer, #logo, #tittleTag, #tower, #towerBall,
#topPanel, #sideContainer, #landscape, #leftContainer, #kw, #meterVal, #propeller, .val { position:absolute }

/* preloads */
#preload {left:0;top:48%;width:213px;margin:0 auto;height:23px;background-color:white;right:0 }
#innerDiv {left:0;top:0;width:0%;height:100%;background-color:rgb(61, 122, 110) }
#progessTxt {padding:0;margin:0;left:217px;top:2px;font-size:18px;font-weight:bold;color:rgb(7, 82, 105);display:none }

#mainContainer {left:2%;top:4px; width:96.5%;display:none;height:98%;margin:0 auto }
#logo { top:75px; left:29px; width:38% }
#bg { width:100%; height:100% }

/* gradient */
#topPanel { background:url('../images/gradBig.png') repeat-y right; }
#sideContainer div, #leftContainer div { background:url('../images/grad.png') repeat-y right }

/* top panel */
#topPanel { float:right; right:0; padding:8px; padding-top:6px; width:385px; text-align:right;  z-index:0; }
#dropdown { 
	width:99.5%; border:1px solid grey; -webkit-border-radius: 3px; border-radius: 3px; height:21px;
	float:right; 
	font:11px "arialx" !important;
	background: #feffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #feffff 0%, #ddf1f9 4%, #7fc7df 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(4%,#ddf1f9), color-stop(100%,#7fc7df)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #feffff 0%,#ddf1f9 4%,#7fc7df 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #feffff 0%,#ddf1f9 4%,#7fc7df 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #feffff 0%,#ddf1f9 4%,#7fc7df 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #feffff 0%,#ddf1f9 4%,#7fc7df 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#7fc7df',GradientType=0 ); /* IE6-9 */
}

#dropdown:hover{
background: #feffff; /* Old browsers */
background: -moz-linear-gradient(top,  #feffff 0%, #ddf1f9 3%, #b1d2dd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(3%,#ddf1f9), color-stop(100%,#b1d2dd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #feffff 0%,#ddf1f9 3%,#b1d2dd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #feffff 0%,#ddf1f9 3%,#b1d2dd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #feffff 0%,#ddf1f9 3%,#b1d2dd 100%); /* IE10+ */
background: linear-gradient(to bottom,  #feffff 0%,#ddf1f9 3%,#b1d2dd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#b1d2dd',GradientType=0 ); /* IE6-9 */

border:1px solid #7fc7df;
}

#dropdown #content{ text-align:left; padding:4px 0 0 5px; white-space:nowrap; overflow-x:hidden; }
#dropdown #arrow{
	float:right; 
	padding:4px 0 0 3px; 
	height:17px; width:21px; 
	border:0px solid red; border-left:1px solid grey; 
	background: url('../images/downArrow.png') no-repeat 9px;
}
#drops{
	display:none;
	position:absolute;
	border:1px solid grey;
	width:96%;
	background:white;
	z-index:1;
	margin-top:4px;
	top: 26px;
	left: 6px;
}

#drops div{
	text-align:left;
	padding:2px 0 2px 2px;
	border-bottom:1px solid grey;
	width:99%;
	white-space:nowrap;
	overflow:hidden;
	cursor:default;
}
#drops div:hover{
	background-color:#E0F7FF;
}
.active{ background-color:#9FE7FF; }

#airDensity { margin:0; margin-top:4px; }

#tower { left:181px; bottom:30px; width:37px;}
#towerBall { left:182px; top:170px; width:35px }

#propeller { 
	top:-14px; left:-2px; width:400px; height:400px; 
	/* important - allow background events to trigger */
	pointer-events:none; 
	padding: 0px;
}

#pc { position:absolute; top:185.5px; left:185.5px; width:30px; height:30px; border: 1px solid none; border-radius: 100px; }
#propeller #pid1,#pid2,#pid3{position: absolute; width: 15px; top:7.5px; 
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	transform-origin: 50% 100%; 
	border: 0.1px solid none;
}
#propeller #pid1 {left: 190px; top:7.5px; padding-top: 0px; padding-bottom: 15px; }
#propeller #pid2 {left: 196px; padding-bottom: 12px; 
	-moz-transform: rotate(122deg);
	-webkit-transform: rotate(122deg);
	-o-transform: rotate(122deg);
	-ms-transform: rotate(122deg);
	transform: rotate(122deg);
}
#propeller #pid3 {left: 194px; top: 12px; padding-bottom: 12px; 
	-moz-transform: rotate(238deg);
	-webkit-transform: rotate(238deg);
	-o-transform: rotate(238deg);
	-ms-transform: rotate(238deg);
	transform: rotate(238deg);
}
#propeller img {
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	transform-origin: 50% 100%; 
	-moz-transform: scale(1, 0.8);
	-webkit-transform: scale(1, 0.8);
	-o-transform: scale(1, 0.8);
	-ms-transform: scale(1, 0.8);
	transform: scale(1, 0.8);
 }

#windSpeed, #bladeLength, #meterContainerx img { margin:3px 5px 3px 1px }
#townHomes, #orHouses, #lights { margin-right:4px }

/* side Container */
#sideContainer { top:55px; width:160px; right:0; text-align:right; border:0px solid none; }
#sideContainer div { margin-top:11px; padding-right:3px; }
#meterContainer { width:98%; height:153px; }
#meter{ position:absolute; left:0; margin:6px; padding:6px 10px 11px 4px; width:83%; background:white; -webkit-border-radius: 4px; border-radius: 4px; }
#pointer{ position:relative; right:6.5px; bottom:-125.65px; width:123px; padding:0 }
#kw{ top:84px; left:20px; background:none !important; font:17px "arialbd" }
.val{ text-align:left; background:none !important; font:11px "arialbd" }
#v1{ top:191px; left:31px}
#v2{ top:143px; left:47px}
#v3{ top:107px; left:84px}
#v4{ top:96px; left:127px}
#meterVal { 
	top:161px; left:50px; 
	background:#E6E8DD !important; 
	padding:0px; padding-left:2px; font-size:27px; 
	-webkit-border-radius:2px; border-radius:2px; 
	width:92px; height:30px; 
	text-align:left 
}
#info1 { padding-left:12px; margin-top:105px !important; background:none !important; text-align:left;}

/* left Container */
#leftContainer { left:3px; bottom:125px; width:168px; text-align:right; cursor:default; }
#leftContainer div{ margin-top:12px }
#info2 { color:white; text-align:left; padding:6px; padding-left:6px; }
#leftContainer input { color:black; border:1px solid black; background-color:white; padding-left:2px; width:54px; min-height:16px; cursor:text; }

/* bottom image - landscape */
#landscape { bottom:6px; width:100% }