/* OUTLINE */
#frame{
background-image: url(../frame.png);
background-repeat: no-repeat;
background-position: 50% 50%;
padding: 91px 0px 89px 6px;
}
#out_wrap{
width:240px;
height:320px;
margin:0 auto;
overflow:hidden;
position:relative;
}
#menu_wrap{
margin-top:-40px;
width:300%;
height:360px;
}
#main{ height:320px; overflow:hidden; }
#left, #mid, #right{
height:320px;
width:240px;
float:left;
position:relative;
overflow:hidden;
}
#left, #mid, #right, #main, .popup {
background: #3d434a;
background: -moz-radial-gradient(center, ellipse cover, #3d434a 0%, #131a1c 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#3d434a), color-stop(100%,#131a1c));
background: -webkit-radial-gradient(center, ellipse cover, #3d434a 0%,#131a1c 100%);
background: -o-radial-gradient(center, ellipse cover, #3d434a 0%,#131a1c 100%);
background: -ms-radial-gradient(center, ellipse cover, #3d434a 0%,#131a1c 100%);
}
#top{ height:40px;clear:both;width:240px;}
#left, #right{ pointer-events:none; }
#left{ margin-left:-240px; }
.popup{ width:240px; height:320px; display:none; position:absolute; z-index:100; top:0;}
#state_select{top:auto;}

/* GENERAL */
body{
color:#fff;
font-family:Verdana;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
p, a, span{font-size:12px;}
h3{font-weight:normal;font-size:14px;text-align:center;}
.percentage, .toggle, .other{ color:#84db51; font-weight:bold; padding:0;}
*{cursor:default;}
a, a img, a span, a li, .expand span:first-child, button, .add, .deduct, #eco, #state_view, #state_view img, #top img, .small, .generic, .weekday, .ip div{
cursor:pointer;}
.locked, .no_links *{cursor:default;}

/* STYLES */
#main_header{
height:20px;
background-image:url(../images/corner_icons.png);
background-repeat:no-repeat;
}
#main_header span{display:inline-block;}
#header_middle{
text-align:center;
width:100%;
}
#header_right{
right:0;
position:absolute;
line-height:100%;
padding:5px 5px 0 0;
color:#5084db;;
}

#state_select h3{
margin-top:45px;
color:#84db51;
}

#circle, #canvas_overlay{
	width:100%;
	height:240px;
	text-align:center;
}
#canvas_overlay{
	position:absolute;
	background-image:url(../images/green_ring.png);
	top:20px;
	background-position:center center;
	background-repeat:no-repeat;
}
#state_view{
margin: 72px auto 43px auto;
padding: 10px 20px 20px 20px;
width: 70px;
}
#state_view img{
	display:block;
	margin:0 auto;
}

#top img{margin:0 auto;display: block;}

.menu_header{height:40px; border-bottom:1px solid #2c3033; box-shadow:1px 0 1px rgba(0,0,0,0.5);}
.menu_header a, .menu_header h3, .menu_header h5{position:relative; display:block; float:left; height:100%; margin:0;}
.menu_header a{width:16%; background-repeat:no-repeat; background-position:center center;}
.menu_header h3, .menu_header h5{width:68%; text-align:center;}
.menu_header h3{line-height:40px;}
.menu_header h5{line-height:20px;}

a#back{ background-image:url(../images/top_bar_back.png); }
a#back:active{ background-image:url(../images/top_bar_back_pressed.png); }
a#home{ background-image:url(../images/top_bar_home.png); }
a#home:active{ background-image:url(../images/top_bar_home_pressed.png); }

a.ball{
display:block;
float:left;
text-align:center;
background-image:url(../images/mode_button_normal.png);
background-repeat:no-repeat;
background-position:center 0;
margin-top:10px;
height:81px;
}
#state_select a.ball{
width:35%;
padding:0 7%;
}
#mid a.ball{
width:33%;
padding:0;
font-size:10px;
}
a.ball img{
display: block;
padding: 9px 0;
margin: 0 auto;
}
a.ball:active{background-image:url(../images/mode_button_pressed.png); }
a.ball.selected{background-image:url(../images/mode_button_selected.png); }

.submenu_wrap{
width:100%;
height:280px;
overflow-y:auto;
list-style-type:none;
padding:0;
margin:0;
}
.submenu_wrap.with_footer{height:230px;}

.submenu_wrap li{
position:relative;
display:block;
overflow:hidden;
height:45px;
width:96%;
line-height:45px;
border-bottom:1px solid #2c3033;
box-shadow:1px 0 1px rgba(0,0,0,0.5);
padding-left: 4%;
background-repeat: no-repeat;
background-position: 87%;
}

.message{padding:15px;}
.message img {margin:10px;}

.submenu_wrap h3{
color:#84db51;
margin:8px 0;
}
.submenu_wrap h5{margin: 10px 0 0 0;}

.submenu_wrap li.normal a{
display:inline-block;
height:45px;
width:100%;
background-image:url(../images/sub_menu_indicator.png);
background-repeat:no-repeat;
background-position:95% 40%;
}

.submenu_wrap li.normal:active{background-color:rgba(152,231,45,0.7);}


.expand{ /* transition:height 0.2s; -webkit-transition:height 0.2s; */ }
.expand:hover{
/*
padding-bottom:5px;
height:auto;
transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
*/
}
.expand.active{
padding-bottom:5px;
height:auto;
}

.tooltip{
display:inline-block;
width:96%;
font-size: 11px;
line-height: 13px;
color:#5084db;
}

.submenu_wrap > span{
width:100%;
display: block;
}

.longtext span:first-child{
width: 110px;
display: inline-block;
line-height: 15px;
vertical-align: middle;
}
.normal.longtext span{
width:180px;
}

.small{
display:block;
height:45px;
clear: right;
float: right;
position: relative;
max-width:100px;
text-align:right;
}

.small.arrow{
background-image:url(../images/sub_menu_indicator.png);
background-repeat:no-repeat;
background-position:center 40%;
width:45px;
}

.small.other, .small.locked{padding:0 10px;}

.other:active{
background-color:rgba(152,231,45,0.7);
}

.small.other.arrow{
padding-right: 40px;
background-position: 85% 40%;
text-align: right;
}

.locked{
color:#ddd;
font-weight:bold;
}

.deduct, .add{width:38px; height:38px; }
.deduct{background-image:url(../images/button_deduct.png); }
.deduct:active{background-image:url(../images/button_deduct_pressed.png); }
.add{background-image:url(../images/button_add.png); }
.add:active{background-image:url(../images/button_add_pressed.png); }
.deduct, .add, .percentage{display:inline-block;}
.percentage {vertical-align:top; line-height: 38px; width:80px; font-size:14px; }
.percentage_wrap{display:block;height:38px;text-align:center;}
#canvas_overlay .percentage{font-size:20px;color:#fff;line-height: 25px;}
#canvas_overlay .percentage:after{content:"19\00B0 C"; display:block; font-size:13px;line-height: 13px; color:#7bb028;}

.ip span{position: absolute;line-height: 12px}
.ip div{
height: 25px;
float: left;
width: 40px;
line-height: normal;
margin: 16px 1px 0 1px;
text-align:center;
background: #2f3337;
background: -moz-linear-gradient(top, #2f3337 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f3337), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #2f3337 0%,#000000 100%);
background: -o-linear-gradient(top, #2f3337 0%,#000000 100%);
background: -ms-linear-gradient(top, #2f3337 0%,#000000 100%);
border-top:1px solid rgba(255,255,255,0.25);
border-radius:3px;
}

#eco{
height: 48px;
width: 48px;
position: absolute;
top: 5px;
right: 5px;
background-image: url(../images/eco_corner_dim.png);
}

#eco.selected{background-image: url(../images/eco_corner.png);}

.menu_footer{
height:50px;
background: #1e2225;
background: -moz-linear-gradient(top, #1e2225 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e2225), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #1e2225 0%,#000000 100%);
background: -o-linear-gradient(top, #1e2225 0%,#000000 100%);
background: -ms-linear-gradient(top, #1e2225 0%,#000000 100%);
border-top:1px solid rgba(255,255,255,0.2);
text-align:center;
padding:10px;
}
.menu_footer a, .generic, .wizard_footer a{
background: #2f3337;
background: -moz-linear-gradient(top, #2f3337 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f3337), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #2f3337 0%,#000000 100%);
background: -o-linear-gradient(top, #2f3337 0%,#000000 100%);
background: -ms-linear-gradient(top, #2f3337 0%,#000000 100%);
border-top:1px solid rgba(255,255,255,0.25);
text-align:center;
border-radius:4px;
padding:8px 10px;
font-size:12px;
margin:0 3px;
}
.menu_footer a:active, .generic:active, .wizard_footer a:active{
background: #9d9d9d;
background: -moz-linear-gradient(top, #9d9d9d 0%, #747474 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9d9d9d), color-stop(100%,#747474));
background: -webkit-linear-gradient(top, #9d9d9d 0%,#747474 100%);
background: -o-linear-gradient(top, #9d9d9d 0%,#747474 100%);
background: -ms-linear-gradient(top, #9d9d9d 0%,#747474 100%);
color:#000;
}

.number_selection{ text-align:center; }
.generic{display:inline-block;margin:1%;}
.number_selection .generic{width:50px;}
.number_selection h3{color:#84db51;}

.popup li{
border:0;
box-shadow:none;
}

.popup > h3{display:block;height:40px;}
.popup .submenu_wrap.with_footer{height:210px;}

.submenu_wrap li.timer{
padding:5px 0 5px 23%;
line-height:15px;
width:77%;
background-repeat: no-repeat;
background-position: 6% center;
}

.timer h5, .timer p{
margin:0;
}

.timer h5{
font-weight:normal;
color:#84db51;
}

#action_screen li a{
vertical-align: top;
display: inline-block;
line-height: 25px;
}

#action_screen li img{
width:25px;
height:25px;
margin-right:8px;
}

#action img{
margin:10px 12px 0 0;
height:25px;
width:25px;
}

#action a{vertical-align:top;}

.time_selection{width:50%;float:left;text-align:center;}
.up, .down{height:50px;background-size:50px 50px;}
.up, .down, .scroller{background-repeat:no-repeat;background-position:center center;margin:2px 0;}
.up {background-image:url(../images/scroll_up_button.png);}
.down {background-image:url(../images/scroll_down_button.png);}
.up:active {background-image:url(../images/scroll_up_button_pressed.png);}
.down:active {background-image:url(../images/scroll_down_button_pressed.png);}
.scroller{line-height:60px;height:60px;background-image:url(../images/scroller_background.png);background-size:60px 60px;}

#weekday_screen .submenu_wrap{text-align:center;}
.weekday{width:71px;height:54px;line-height:54px;display:inline-block;text-align:center;margin-top:10px;background-image:url(../images/main_menu_button.png);}
.weekday.ticked{color:#000;background-image:url(../images/main_menu_button_bottom.png);}

.submenu_wrap.with_year .time_selection{width:33%;}

.submenu_wrap.no_links *:active{background-color:inherit;}

.alarm{padding:15px;text-align:center;}
.alarm h5{margin:0;}
.alarm p{color:#ccc;}
p.alarm_date{color:#fff;margin:0;}

.wizard_footer{
display:none;
position:absolute;
z-index:3;
bottom:0;
height:30px;
width:240px;
background: #1e2225;
background: -moz-linear-gradient(top, #1e2225 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e2225), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #1e2225 0%,#000000 100%);
background: -o-linear-gradient(top, #1e2225 0%,#000000 100%);
background: -ms-linear-gradient(top, #1e2225 0%,#000000 100%);
border-top:1px solid rgba(255,255,255,0.2);
text-align:center;
padding:9px 0;
}

#drops{
width:62px;
position:absolute;
left:50%;
bottom:58px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
.raindrop{
width:10px !important;
height:10px;
margin:1px;
border-radius:50%;
background-color:#fff;
float:left;
}
.green.raindrop{background-color:#84db51;}