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


/***** trying to get rid of focus dotted line *****/


.btn:focus, .btn:active:focus, .btn.active:focus {
    outline-offset: -2px;
    outline: 0px dotted;
}

a:focus, *:focus {
    noFocusLine: expression(this.onFocus=this.blur());
}

:focus{
    outline:0; /*removes the dotted border*/
}

a {
    _noFocusLine: expression(this.hideFocus=true); 
}

a:link{ outline-style: none; }

a 
    {
        outline-style:none;
    }


/***** trying to get rid of focus dotted line *****/

body {
	background-image: url(../img/bg.jpg);
	background-repeat: no-repeat;
	}

.navbar-form pull-right {display: none;}

a, a:link, a:visited, a:focus, a:hover, a:active {
outline: none; 
}


	
#navigation li.active a {
	color: #fff;
	
}

#navigation {
	position: absolute;
	top: 45px;
	left: 10px; 
	max-width: 30%;
}

#navigation ul {
	list-style-type: none;
	}

#navigation li {
	line-height: 22px;
	background: url(../img/smallChevron.png) 4px -79px no-repeat;
	padding-left: 15px;
	font-size: 0.95em;
	padding-bottom: 2px;
	padding-top: 2px;
	}
	
#navigation li.active {
	color: #fff;
	background-color: #0a5f7b;
	background: url(../img/smallChevron.png) #0a5f7b 4px -10px no-repeat;
	}

.largebtn {
	margin-top: 6px;	
}


a {
   outline: 0 !important;
   _noFocusLine: expression(this.hideFocus=true);
   color: #0270B9;
}

a:hover {
	color: #039;
	text-decoration: none;
	}

a:focus, *:focus {
    _noFocusLine: expression(this.hideFocus=true);
}

a:focus {
	outline:0 !important;
	}
	
:focus { 
    outline: 0; 
    ie-dummy: expression(this.hideFocus=true); /*IE9 Fix*/
  }	

a:active, a:selected, a:visited { 
    border: none !important;
    outline: none !important;
}

label {
    display: inline;
    margin-bottom: 5px;
}


input[type="radio"], input[type="checkbox"] {
    line-height: normal;
    margin: -3px 1px 0px 10px;
}

.span3 {
    margin-bottom: 22px;
    width: 220px;
}

.rating {
	width: 100%;
	height: 9px;
	
	}

.beginner {
	float: left;
	text-align: left;
	padding: 5px 0px 5px 0px;
	font-size: 11.844px;
	}
	
.expert {
	float: right;
	clear: none;
	text-align: right;
	padding: 5px 0px 5px 0px;
	font-size: 11.844px;
	}
	
hr { margin: 22px 0px;}

.slideyman { margin-top: 23px;}


.ui-widget-header {
background: #0088CC;
background: linear-gradient(to bottom, #0088CC, #0044CC);
}

.one, .two, .three, .four, .five, .six { margin-right: 15.286%; }

.badge { vertical-align: top; } 

.rating { text-align: right; }

h3 { font-size: 20.5px}

#stay {
	display: block;
	position: absolute;
	top: -65px;
	right: 10px; 
	max-width: 660px;
	}
	
#stay img  {
	/* width: 100%;
	position: absolute;
	top: -10px;
	right: 0px; 
	max-width: 820px; */
	}	

img {
	opacity: 1;
	
	} 

#play {
	z-index: 9933;
/*	display: block;
	position: absolute;
	top: 20px;
	left: 210px; */
	}
	
#showMenu {
	z-index: 933;
	display: none;
	position: absolute;
	top: 0px;
	left: 0px; 
	}

#overlay, #pause {
	z-index: 934;
	display: block;
	position: absolute;
	top: 20px;
	left: 360px;
	}



#arrow {
	z-index: 333;
	display: none;
	}

#arrow2 {
	z-index: 334;
	display: none;
	}

#arrow3 {
	z-index: 335;
	display: none;
	position: relative;
	top: 150px;
	left: 340px;
	}
	
#pic {
	display: block;
	z-index: 35;	
	}
	

	

	
#tick00 {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 337;
	display: none;
	}

#tick01 {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 338;
	display: none;
	}
	
#tick02 {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 339;
	display: none;
	}
	
#tick03 {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 340;
	display: none;
	}
	
#tick04 {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 341;
	display: none;
	}
	
#tick05 {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 342;
	display: none;
	}

#tick06,#tick07,#tick071,#tick08,#tick09,#tick10,#tick11,#tick12,#tick13,#tick14,#tick15,
#tick16,#tick17,#tick18,#tick19,#tick20,#tick21 {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 342;
	display: none;
	}
	
#loading {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1142;
	display: block;
	}


.finger {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 42;
	display: none;
	}
	
#press_menu, #select_budgets {
	position: absolute;
	top: 0px;
	left: -840px;
	z-index: 543;
	display: block;
	opacity:0;
	}
	
#select {
	position: absolute;
	top: 0px;
	left: -840px;
	z-index: 644;
	display: block;
	opacity:0;
	}
	
	
	
#signal_strength, #alert, #overview, #electricity_consumption_rate, #gas_con, #home_button, #led_consumption, #main_menu, #message, #navigation_buttons, #tariff_ind, #thermometer, #unit_selectors, #battery_status {
	
	position: absolute;
	top: 0px;
	z-index: 644;
	display: none;
	
	}
	

	
#change, #pointer,  #pointer_e, #pointerplus, #pointerplusfive, #pointer_mid, #pointertwo,  #pointerfour, #pointerplustwo, #pointer_midtwo, #pointerthree, #pointerplusthree, #pointer_midthree, #pointerlarge, #pointerbglogo, #pointermessage, #pointer_pound {
	position: absolute;
	top: 0px;
	z-index: 644;
	display: none;
	}
	
#period {
	position: absolute;
	top: 0px;
	left: -840px;
	z-index: 644;
	display: block;
	opacity:0;
	}
	
#next_two {
	position: absolute;
	top: 0px;
	left: -840px;
	z-index: 644;
	display: block;
	opacity:0;
	}
	
#toggle_units {
	position: absolute;
	top: 0px;
	left: -840px;
	z-index: 644;
	display: block;
	opacity:0;
	}
	
#next_gas, #set_gas_budget, #set_ele_budget {
	position: absolute;
	top: 0px;
	left: -840px;
	z-index: 644;
	display: block;
	opacity:0;
	}
	
#save {
	position: absolute;
	top: 0px;
	left: -840px;
	z-index: 644;
	display: block;
	opacity:0;
	}

#end {
	position: absolute;
	top: 0px;
	left: -840px;
	z-index: 644;
	display: block;
	opacity:0;
	}

.div1 {
	display: none;
	width: 200px;
	height: 200px;
	background-color: red;
	}

.steps {
	position: absolute;
	left: 740px;
	top: 0px;	
	opacity: 0;
	z-index: 1001;
	display: none;
	}
	
#menu {
	
	position: absolute;
	right: 15px;
	top: 10px;
	z-index: 9999999999999; 
	}

/*
#menu li, #menu li a {
	color: white;
	padding: 5px 5px 5px 0px;
	width: 250px;
	list-style: none;
	}
	
#menu li a.active {
	font-weight: bold;
	padding-left: 18px;
	background: url(../img/arrow.png) left center no-repeat;
	padding: 5px 5px 5px 20px;
	}

#menu ul {
	margin: 30px 0px 10px 10px;	
}
*/

#myModal {
	z-index: 11123455;
	
	}

.desc {
	background-color: blue;
	position:absolute;
	top: 555px;
	z-index: 4444444;
	}
	
#description {
	position: absolute;
	top: 380px;
	left: 0px;
	background-color: #f2f1f0; 
	width: 100%;
	min-height: 200px;
	opacity: 1;
	z-index: 922;
	}

#description .first {
	padding: 0px 190px 5px 250px;	
}

#description p {
	color: #666;
	padding: 0px 190px 5px 250px;
	font-size: 17px;
	}

#description h3 {
	color: #666;
	padding: 0px 190px 5px 250px;
	line-height: 1.2em;
	}

#description h1 {
	font-size: 24px;
	padding: 0px 190px 5px 250px;
	line-height: 1.2em;
	}
	
.wordsOne, .wordsOne_2, .wordsOne_3, .wordsTwo, .wordsTwo_2, .wordsTwo_3, .wordsThree, .wordsThree_1, .wordsThree_2, .wordsFour, .wordsFour_1, .wordsFive, .wordsFive_1, .wordsFive_2 {
	display: none;
	}
	
	
.home, .signal, .battery, .units {
	display: none;
	}
	
.words {
	display: block;
	}

.btn-large {
	border-radius: 0px; 

}

#pagination {
	width: 186px;
	height: 31px;
	background: url(../img/pagination.png) 2px 14px;
	position: absolute;
	right: 5px;
	top: 10px;
	display: none;
	}

#paginationshort {
	width: 186px;
	height: 31px;
	background: url(../img/pagination3part.png) 2px 14px;
	position: absolute;
	right: 5px;
	top: 10px;
	display: none;
	}
	
#pagination4 {
	width: 186px;
	height: 31px;
	background: url(../img/pagination4part.png) 2px 14px;
	position: absolute;
	right: 5px;
	top: 10px;
	display: none;
	}

#hideMenu {
	min-width: 124px;
	}

.btn-primary {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #129adb;
  *background-color: #129adb;
  background-image: -moz-linear-gradient(top, #129adb, #129adb);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#129adb), to(#129adb));
  background-image: -webkit-linear-gradient(top, #129adb, #129adb);
  background-image: -o-linear-gradient(top, #129adb, #129adb);
  background-image: linear-gradient(to bottom, #129adb, #129adb);
  background-repeat: repeat-x;
  border-color: #129adb #129adb #129adb;
 /* border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#129adbcc', endColorstr='#129adbcc', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  border: 0px solid #129adb;
  border-style: none;
}



.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  color: #ffffff;
  background-color: #7fc811;
  *background-color: #7fc811;
}


.btn:hover,
.btn:focus {
  color: #fff;
  text-decoration: none;
  background-position: 0 -120px;
  -webkit-transition: background-position 0.1s linear;
     -moz-transition: background-position 0.1s linear;
       -o-transition: background-position 0.1s linear;
          transition: background-position 0.1s linear;
}

.btn-large {
	padding: 22px 25px;	
}

#task {
	position: absolute;
	top: -9px;
	left: 0px; 
	}

h1 {
	
	color: #666;
	}
	
#stopAnims {
	position: absolute;
	top: 200px;
	z-index:111111;
	left: 700px;
	}

#stepOne, #stepTwo, #stepThree, #stepFour, #stepFive, #stepFreeze {
	position: absolute;
	top: 10px;
	left: 130px;
	display: none;
	/* z-index:111111; */
	}

#stepOne {
	position: absolute;
	top: 10px;
	left: 130px;
	display: block;
	}

#stepOnePrev, #stepTwoPrev, #stepThreePrev, #stepFourPrev, #stepFivePrev, #stepFreezePrev {
	position: absolute;
	top: 10px;
	left: 10px;
	display: none;
	margin-bottom: 22px;
	}


.btn {
	padding: 10px 20px;
 	color: white;
	text-shadow: none;
  background-color: #5d9b00;
  *background-color: #5d9b00;
  background-image: -moz-linear-gradient(top, #5d9b00, #5d9b00);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5d9b00), to(#042e6f));
  background-image: -webkit-linear-gradient(top, #5d9b00, #5d9b00);
  background-image: -o-linear-gradient(top, #5d9b00, #5d9b00);
  background-image: linear-gradient(to bottom, #5d9b00, #5d9b00);
  background-repeat: repeat-x;
  border: 0px solid #5d9b00;
  border-style: none;
  *border: 0;
  border-color: #5d9b00 #5d9b00 #5d9b00;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #042e6f;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5d9b00', endColorstr='#ff5d9b00', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}


.btn-lg {
	padding: 20px 28px; 
	font-size: 24px;
	}
	

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  color: #fff;
  background-color: #7fc811;
  *background-color: #7fc811;
}

.freeze {
	background-color: #919191;
  *background-color: #919191;
  background-image: -moz-linear-gradient(top, #919191, #919191);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#919191), to(#919191));
  background-image: -webkit-linear-gradient(top, #919191, #919191);
  background-image: -o-linear-gradient(top, #919191, #919191);
  background-image: linear-gradient(to bottom, #919191, #919191);
  color: #c1c1c1;
 	z-index: 5555555;
}


@media (max-width: 1285px) {



} 


@media (max-width: 960px) {
	

} 



@media (max-width: 845px) {

h1 {
	font-size: 14px;
	padding: 5px 10px 5px 10px;	
}

#description h1 {
    font-size: 18px;
    padding: 0px 190px 5px 250px;
	line-height: 24px;
}
	
#description p {
    margin: 5px 0px ;
    font-size: 13px;
}	
	
#description { 
	top: 340px;
	min-height: 195px;
}

#stay  {
	width: 100%;
	position: absolute;
	top: -60px;
	right: 0px; 
	max-width: 560px;
	}

#navigation {
    position: absolute;
    top: 10px;
    left: 10px;
    max-width: 30%;
}


}

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {

#pagination {
	
	background: url(../img/pagination@3x.png) 2px 14px;
	background-size: 186px 166px;
	}

}

@media only screen and (max-device-width: 640px) and (orientation: portrait)  {
    h1 {
	font-size: 14px;
	padding: 5px 10px 5px 10px;	
}

#description h1 {
    font-size: 18px;
    padding: 0px 190px 5px 250px;
	line-height: 24px;
}
	
#description p {
    margin: 5px 0px ;
    font-size: 13px;
}	
	
#description { 
	top: 340px;
	min-height: 195px;
}

#stay  {
	width: 100%;
	position: absolute;
	top: -80px;
	right: 5px; 
	max-width: 600px;
	}

#navigation {
    position: absolute;
    top: 10px;
    left: 10px;
    max-width: 30%;
}
}



@media (max-width: 770px) {






@media (max-width: 640px) {
	



}

@media (max-width: 530px) {



}

@media (max-width: 360px) {

h1 {
	font-size: 14px;
	padding: 6px;
	font-weight: normal;
}
	
#description { 
	top: 250px;
}


}



/* Image map styles */
.imageMap {width:100%; position:relative; margin-bottom:200px;}
.imageMap img {display:block; width:100%; border-radius:20px;}
.imageMap .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden;}
.imageMap a {display:block; position:absolute; background:#000; z-index:100; opacity:0.2; filter: alpha(opacity=20); border:1px solid transparent; border-radius:10px;}
.imageMap a.p1 {left:11%; top:5%; width:25%; height:34%;}
.imageMap a.p2 {left:76%; top:13%; width:21%; height:30%;}
.imageMap a.p3 {left:5%; top:44%; width:22%; height:42%;}
.imageMap a.p4 {left:28%; top:41%; width:26.5%; height:43%;}
.imageMap a.p5 {left:55%; top:64%; width:15%; height:26%;}
.imageMap a.p6 {left:72%; top:53%; width:25%; height:35%;}
.imageMap a + p {position:absolute; left:0%; top:102%; width:100%; color:#000; display:none;}

.imageMap:hover .hotspots {visibility:visible;}
.imageMap p strong {display:block; padding:0; margin:0; font: bold 25px/30px 'times new roman',serif; color:#000;}
.imageMap p {padding:0; margin:0; font: normal 18px/22px 'times new roman',serif; color:#444;}

.imageMap b {display:block; position:absolute; background:url(trans.gif); z-index:200; opacity:0.2; filter: alpha(opacity=20); padding:1px;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.imageMap b.b1 {left:11%; top:5%; width:25%; height:34%;}
.imageMap b.b2 {left:76%; top:13%; width:21%; height:30%;}
.imageMap b.b3 {left:5%; top:44%; width:22%; height:42%;}
.imageMap b.b4 {left:28%; top:41%; width:26.5%; height:43%;}
.imageMap b.b5 {left:55%; top:64%; width:15%; height:26%;}
.imageMap b.b6 {left:72%; top:53%; width:25%; height:35%;}

.imageMap .hotspots div:hover b {width:0; padding:0;}
.imageMap .hotspots div:hover p {display:block;}
.imageMap .hotspots div:hover a {background:#fff; z-index:100; opacity:0.3; filter: alpha(opacity=30); border:1px solid #000;}