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



/* debug
======================================================================
#nav_main a:hover {border-bottom:4px solid #08f;}
#nav_two a:hover {border-bottom:4px solid #08f;}
#nav_three a:hover {border-left:4px solid #08f;}*/
#valueTable a:hover {background-color: rgba(0,128,256,0.95)}


/* clears
======================================================================*/

#nav_main:after,
.edit_row_wrapper:after {clear:both;}
* { margin:0; padding:0; box-sizing: border-box; }


/* body & general classes
======================================================================*/
body {	background-color:#000;	color:#fff;	font-family:"Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;font-size:18px;	overflow-y: scroll; }
a {color:#fff;}

.text_center 	{text-align:center;}
.displaynone 	{display:none;}
.hoverItem			{ cursor:pointer; }
.hoverItem:hover	{ background-color:rgba(72,72,72,.4) !important; }
input { background-color:transparent; border:1px #aaaaaa solid; padding:5px 10px; font-weight:bold; color:#ffffff; font-size:larger; }

/* Login
======================================================================*/

#keypad_wrapper	{margin:0 auto; width:100%; max-width:960px; }
#keypad_id {font-size:24px;margin-top:15px; text-align: center;}
#keypad_id label {display: block;}
#keypad_wrapper .button_backspace {background: url("../images/_interface/iconsheet_backspace.png") top no-repeat; border:none;width:60px;height:60px;cursor:pointer;background-size:100%;display: block; position: absolute; left: 50%; margin-left: -30px; margin-top: -50px;}
#keypad_wrapper .button_backspace:hover {background-position:0 -60px;}
#keypad_wrapper .button_backspace:active {background-position:0 -180px;}

#keypad_input {text-align:center;}	

#user_id, #parameter_nr {border:none;background:none;color:#95b053; font-size:24px; letter-spacing: 13px; margin-left: 40px; width: 180px; height: 60px; margin-bottom: 30px;}

.button_number	{border: 1px solid #a3a3a3; background:none; font-size:32px; color:#a3a3a3; padding:15px 20px; margin:12px;cursor:pointer;}
.button_number:hover {border:1px solid #fff; color:#fff;}
.button_number:active {border:1px solid #fff; color:#fff; background:#95b053;}


/* navigations 
======================================================================*/

/* nav_main
----------------------------------------------------------------------*/
#nav_main {  height: 70px;background-color: rgba(0,0,0,0.95); position: fixed; top: 0; width: 100%; z-index:100; background-color:rgba(0,0,0,.9);}

#nav_main .headline { font-size: 20px; font-weight:bold; text-transform:uppercase; margin-top: 0px; padding: 6px 0 4px; text-align: center; color:#fff; background-color:#000; border-bottom: 1px solid #666;}
#nav_main .topright { position:fixed; top:30px; right:0; left:auto; display:table; font-size: 14px; }
#nav_main .topright li {display:inline-block; vertical-align:top;}
#nav_main .usericon,
#nav_main #logo { height:40px; width:40px;}

#nav_main .usericon {background-size: cover;}
#nav_main #logo img { height:100%; width:100%;}
#nav_main .topright li#timedate { display:none; }
#nav_main #timedate {padding:11px 15px; width:auto; height:auto; text-align:right;background-color: #333;}
#nav_main .time {padding:2px 0 3px;}

#nav_main #outsidetemp {background-image:url("../images/_interface/iconsheet_aussentemperatur.png");}
#outsidetemp:hover { background-position:0 0 !important; }
#nav_main #outsidetemp div {font-size:9px; margin:22px 0 0; text-align:center; color:#aaa; }



#nav_one { position:fixed; z-index:100; }
#nav_two { background-color: rgba(80,80,80,0.95); position: fixed; width: 100%;text-align:center;top: 70px;overflow:auto; z-index:100;}
#nav_three {background-color: rgba(0,0,0,0.5);border:1px solid #666;border-left:none;position:fixed; left:0;	top:130px; z-index:100;}
	
#nav_three li {display:list-item;border-bottom:1px solid #666;margin:5px;}
#nav_three li:last-child {border:none;}

#loading_spinner { position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,.75); z-index:999; display:none; }
#loading_spinner>div	{ position:absolute; top:30%; left:50%; width:300px; margin-left:-150px; text-align:center; text-transform:uppercase; }

/* nav_buttons
----------------------------------------------------------------------*/

.scroll { overflow:auto; }
ul.nav_buttons  {margin:0 auto; white-space:nowrap; display:table; /*height:100%;*/ overflow:hidden;}
.nav_buttons li {display:table-cell; width:40px; height:40px;}
.nav_buttons .edit_controls li {width:60px; height:60px;}
	
.nav_buttons li a, 
.nav_buttons li a:hover {display:block; width:100%; height:100%; background-size:100%; text-decoration:none; min-width: 40px;}

#nav_three ul.nav_buttons {display:list-item;}
#nav_three .nav_buttons li {width:30px;height:30px;}

.nav_buttons .active {background-position:0 33%;}
.nav_buttons li:hover {background-position:0 67%;}
.nav_buttons .act {background-position:0 100%;}


/* content
======================================================================*/

#content_wrapper {margin-top:102px;}
#content {}
#canvas_wrapper {  }
#canvas { background:url("../images/_interface/bg_gradient_grid.jpg") #000000 top center no-repeat; background-size: cover; max-width:800px; margin:0 auto; width:100vw; height:54vw; margin: 0 auto; position:relative;}
#canvas>div	{ position:absolute; display:block; }
#canvas.buttons { height:auto; max-height:auto; background:none; padding-top:20px; }

#canvas>div.btn {margin: 15px auto 29px;position: relative;	border: 1px solid #7F7F7F; 	background-color: #191919; 	width: 300px;font-size: 20px; display:table;	}
	
#canvas>div.btn.incolumns {	margin: 32px 49px -7px;}

.canvasTile {
	position:absolute;
	height: 16.66667%;
	width: 9%;
	vertical-align: text-bottom;
	padding: 5px;
	background-size: 100% auto;
	vertical-align:text-bottom;
	padding:5px; 
}
.canvasTile.clickable		{ cursor:pointer; }
.canvasTile.clickable:hover	{ background-position:0 -66.6666667%; }
.canvasTile span			{ position:absolute; display:block; bottom:5px; left:-20px; right:-20px; text-align:center; color:#eeeeee; font-size:smaller; }
.canvasTile:hover span		{ color:#ffffff; }
.tileIcon					{ width:72px; height:72px; background-position:top center; }

.btn a {display:table-cell;padding:10px 10px;height: 60px;width: 100%;color: #7F7F7F; box-sizing: border-box; vertical-align:middle; text-align:center; }
/*.btn a span { display:inline-block; vertical-align:middle; bas }*/
.btn a:hover {color: #aaaaaa;}

.indicator_ist>a, .indicator_ist>span, .indicator_soll>span, .indicator_soll>a { 
	white-space:nowrap; overflow:hidden; 
	background-position:12px center; 
	background-repeat:no-repeat;
	vertical-align:middle;
	padding-left:52px !important; 
	padding-top:12px !important;
	padding-bottom:12px !important;
	padding-right:12px !important;
	display:block; 
}
.indicator_ist>a,
.indicator_ist>span { background-image:url('../images/allgemein/indicator_ist.png');  }
.indicator_soll>span,
.indicator_soll>a { background-image:url('../images/allgemein/indicator_soll.png'); color:#999;}


#valueTable td:first-child img {width: 35px;}

#canvas #wp_preview {display:none;}


	
/* edit
======================================================================*/

.button_check {background: url("../images/_interface/iconsheet_check.png") top no-repeat;}
.button_cancel {background: url("../images/_interface/iconsheet_cancel.png") top no-repeat;}
.button_delete {background: url("../images/_interface/iconsheet_trash.png") top no-repeat;}

.edit_element {	
background: #000000; /* Old browsers */
background: -moz-linear-gradient(left,  #000000 0%, #2b2b2b 50%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#2b2b2b), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #000000 0%,#2b2b2b 50%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #000000 0%,#2b2b2b 50%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #000000 0%,#2b2b2b 50%,#000000 100%); /* IE10+ */
background: linear-gradient(to right,  #000000 0%,#2b2b2b 50%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
position:absolute;top:0;bottom:0;left:0;right:0;z-index:2;	}
	
.nav_buttons ul.edit_controls {right:20px; position: absolute; top: 140px;}	
.nav_buttons ul.edit_controls li:hover {background-position:0 33%;}	

.edit_row_wrapper {width:100%; background-color:rgba(0,0,0,.3);top:200px; position:absolute; border-top:1px solid #000;border-bottom:1px solid #000;}
.info_row_wrapper {width:100%; top:400px; position:absolute;}
.value_row { /*height:200px;*/}
.edit_row, .info_row {width:100%; max-width:800px; height:100%;margin:0 auto; position:relative;}

.edit_row_wrapper_2 {top:500px;}
#edit_table {width:100%;}

#edit_table td {min-width: 80px;}
.edit_element td{height: 190px; padding: 5px 10px; vertical-align: middle;}
.edit_element td:first-child{ text-align:right;}
.edit_scroll td {height: 55px;}
.edit_value {max-width:300px; width:300px; overflow: hidden; text-overflow: ellipsis;}

.info_row_wrapper td {height: 50px; color:#a3a3a3;}

.subline {padding:20px; background:rgba(256,256,256,0.05)}

#change_value a {width: 100%;height: 72px;display: block;}

#change_value_scroll {height: 72px;}	
#change_value_scroll a { width:100%; height:72px; width:72px; display:block; position:absolute;}

.change_up a {background: url("../images/allgemein/btn_hoch_white.png") center no-repeat; top:10px;}
.change_down a {background: url("../images/allgemein/btn_runter_white.png") center no-repeat; bottom:10px; margin-top:40px;}
.change_left a {background: url("../images/allgemein/btn_links_white.png") center no-repeat; left: 2%; top: 124px;}
.change_right a {background: url("../images/allgemein/btn_rechts_white.png") center no-repeat; right:2%;  top: 124px;}

.change_up a:hover {background: url("../images/allgemein/btn_hoch.png") center no-repeat;}
.change_down a:hover {background: url("../images/allgemein/btn_runter.png") center no-repeat;}
.change_left a:hover {background: url("../images/allgemein/btn_links.png") center no-repeat;}
.change_right a:hover {background: url("../images/allgemein/btn_rechts.png") center no-repeat;}

.scroll_data_left {position: absolute; color:#A7A7A7; left: 20%; top: 205px;}
.scroll_data_right {position: absolute; color:#A7A7A7; right: 20%; top: 205px; text-align:right;}

#slider {
	margin: auto;
	margin-top: 0;
	/*width: 450px;*/
	width: 60%;
	height: 1px;
	background: #ffffff;
	position: relative;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}
.ui-slider .ui-slider-handle {
	height: 25px;
	width: 50px;
	margin-left: -25px;
	margin-top: -8px;
	/**padding-left: 10px;**/
	/**padding-right: -10px;**/
	background: #3F3F3F;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-color: #FFFFFF;
	border-width: 2px;
	/**color: #FFFFFF;**/
}

#edit_table.wp_table {background:url("../images/_interface/bg_time.png") no-repeat; background-size:100% 50%}
#edit_table.wp_table td{cursor:default;text-align:center;width:14.2%;min-width:inherit;padding:0;}
#edit_table.wp_table td.clickable {cursor:pointer;}
#edit_table.wp_table td.clickable:hover {background-color:rgba(255, 255, 255, 0.1);}

.day.inactive,
.day.clickable {text-align:center; background:rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.03);border-bottom:3px solid #7fc41c;}
.day.clickable.inactive {background:rgba(255, 255, 255, 0.00); color:#666;border-bottom:3px solid rgba(0, 0, 0, 0.5);}

.time				{ text-align:center;  padding:5px 3px !important;}
.time.desat 		{ color:#666; max-width:20px; }

#change_value		{ pointer-events:none; }
#change_value a		{ pointer-events:all; }
#change_value a		{ cursor:pointer; }

#img img { width: 50px;}

/* controls & table
----------------------------------------------------------------------*/
#controls {font-size:18px; 
background: #2b2b2b; /* Old browsers */
background: -moz-linear-gradient(left,  #000000 10%, #2b2b2b 50%, #000000 90%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(10%,#000000), color-stop(50%,#2b2b2b), color-stop(90%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #000000 10%,#2b2b2b 50%,#000000 90%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #000000 10%,#2b2b2b 50%,#000000 90%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #000000 10%,#2b2b2b 50%,#000000 90%); /* IE10+ */
background: linear-gradient(to right,  #000000 10%,#2b2b2b 50%,#000000 90%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */ 
}
#controls table,
.fake_table_container {width:100%; max-width:800px; margin:0 auto;}
#controls table td {vertical-align:middle;}

.col_flex {width:auto;}
/*.col_description {width:60%;}
.col_value {width:20%;}*/

#controls table td a {display:block;padding:15px;text-decoration:none;background-color:rgba(256,256,256,0.1); 	}
.fake_table .tr:nth-child(odd),
#controls table tr:nth-child(odd) {	background-color:rgba(0,0,0,0.4); }

#valueTable td {padding:5px; font-size: 75%; white-space:nowrap; }
#valueTable .valueTableID {font-size: 60%; width:40px; min-width:0; display:list-item; margin-bottom:-3px; color:#999;}
#valueTable .valueTableDesc {text-align:left;white-space:normal; display:list-item;}
#valueTable.noID .valueTableDesc {display:table-cell;}
#valueTable .valueTableEdit {max-width:100px; overflow:hidden; text-overflow:ellipsis;}
#valueTable .valueTableData	{text-align:center;	height:60px;}

.chartSettings { position:absolute; right:0; z-index:5; width:72px; height:72px; background:url(../images/_interface/tab/iconsheet_Einstellungen_32x32px_40grau.png) top center no-repeat; cursor:pointer; }
.chartSettings:hover { background-position:0 -72px; }
.chartParams { display:none; margin:0 auto 50px; width:800px; position:relative; }
.chartParams>form { display:table; table-layout:fixed; width:100%; border-collapse: separate; border-spacing: 10px; }
.chartParams>form>div.part { display:table-cell; min-width:190px; }
.chartParams label { font-size:12px; color:#ccc; }
.chartParams input, .chartParams input[type="number"] { width:100%; }
.chartParams .btn { margin:0 0 0 0; width:100%; }
.chartParams .btn a { height:20px; padding:0 0 0 0; width:100%; }


/*     fake table
----------------------------------------------------------------------*/

.fake_table_container {}
.fake_table {text-align:right; font-size:15px; padding-bottom:40px; padding-right:5px;}

.email_addr  {width:120px !important;}

.tr {display:block;padding:10px 0;}
.th {display:inline-block; width:80px; color:#ccc; padding-top:30px; text-align:center;}
.td {display:inline-block; width:80px; padding:3px;}
.td a {overflow:hidden; text-overflow:ellipsis; padding:10px; white-space:nowrap; }


.td span {display:none;}

.fake_table .button {
	text-decoration:none;
    background-color: rgba(255, 255, 255, 0.1);
    display: block;
    padding: 10px 2px;
	text-align:center;
	min-height:35px;
}

.fake_table .button:hover {background-color: rgba(0,128,256,0.95)}

/** THOMAS STUFF **/
.tile					{ position:absolute; height:61px; width:61px; vertical-align:text-bottom; padding:5px; cursor:pointer; }
.tile:hover				{ background-position:0 -72px; }
.tile span				{ position:absolute; display:block; bottom:5px; left:-20px; right:-20px; text-align:center; color:#eeeeee; font-size:smaller; }
.tile:hover span		{ color:#ffffff; }
.nav_buttons	li		{ background-size:100%; }


@media screen and (max-width: 820px) {	
	.tr {border-bottom:3px solid #555;}
	.th {display:none;}
	.td {display:block; width:auto !important; padding:10px;}
	.td span {display:inline-block; width:120px; color:#ccc;}
	.fake_table {font-size:inherit;text-align:left;}
	#valueTable .valueTableDesc.break {display:block !important; padding-top:20px;}
	#valueTable .valueTableData.break {display:block !important; overflow:visible;}
	.tileIcon					{ width:42px; height:42px; background-size:100% auto; }
}
@media screen and (max-width: 400px) {
	.tr	 {margin-left:0;}
	.tileIcon					{ width:32px; height:32px; background-size:100% auto; }
}
@media screen and (min-device-width: 280px) and (min-width: 280px) and (max-width: 600px) {
	.fake_table {font-size: 75%;}
	.td span {width:90px;}
}
	
@media screen and (max-width: 600px) {
	#edit_table td {height: 120px;}
	#edit_table .edit_value { position: absolute;left: 50%; margin-left: -150px; top: 158px; height: auto;}
	#change_value { margin-top: -40px;}
	#change_value_scroll {margin-top: 40px;margin-bottom: 30px;}	
	.canvasInvoText { font-size:12px; }
}

@media screen and (min-device-width: 400px) and (min-width: 400px) {	/* iphone 6 plus*/


	#valueTable td {padding:5px; font-size: 85%;}
	#valueTable .valueTableEdit {max-width:160px;}
	#valueTable .valueTableID {display:table-cell;  margin-bottom:0;}
	#valueTable .valueTableDesc {display:table-cell;}
	#valueTable td:first-child img {width: 50px;}
}

@media screen and (min-device-width: 500px) and (min-width: 500px) {	/* Login Screen */

	#keypad_wrapper .button_backspace { margin-left: 170px; margin-top: -70px;}
	#user_id, #parameter_nr { height: 60px; margin-bottom: 10px;}
	#keypad_id label {display: inline;}
	#valueTable .valueTableEdit {max-width:100%;}
	#valueTable td.indicator_ist, 
	#valueTable td.indicator_soll {	display: table-cell;}


}

@media screen and (min-device-width: 600px) and (min-width: 600px) {	/* android odys next: portrait */

	#valueTable td {padding:5px 10px; font-size:100%; }
	#valueTable .valueTableID {font-size: 100%; width:60px;}
	#valueTable td:first-child img {width: inherit;}
	#img img { width: initial;}

	#change_value {height: 200px; position: absolute; right: 113px; top: 0; width: 72px;}	
	#change_value a { width:100%; height:72px; width:72px; display:block; position:absolute;}

	.nav_buttons ul.edit_controls {top: 140px;}	
	.edit_row_wrapper {top:200px; }
	#slider {margin-top:50px;}
	.change_left a  {left: 10%; top:64px;}
	.change_right a  {right: 10%; top:64px;}
	
	.scroll_data_left,
	.scroll_data_right {top: 135px;}

}

@media screen and (min-device-width: 700px) and (min-width: 700px) {	/* ipad 2 & ipad air 2*/
	
	#valueTable td {padding:5px 15px;}

	#image {height:300px;}
	#nav_three, #nav_main .nav_buttons {visibility:visible;}

	#nav_main {height: 60px;}
	#nav_main .topright li#timedate { display:inline-block; }
	
	#nav_main .topright,
	#nav_main #nav_one { top:0px; position:fixed; }
	
	#nav_main .headline {margin-top: 13px; border-bottom: none;}
	#nav_main .usericon,
	#nav_main #logo { height:60px; width:60px; }
	
	#nav_main #outsidetemp div {font-size:inherit; margin:40px 0 0;}
	
	#nav_two {top: 60px;}
	.nav_buttons li {width:60px; height:60px;}	
		
	#nav_three .nav_buttons li {width:50px;height:50px;}

	#content_wrapper {margin-top:120px;}
	#canvas #wp_preview {display:table;}
	
}

@media screen and (min-width: 885px) {
	.nav_buttons ul.edit_controls {	left: 50%; padding-left: 220px; }
}

@media screen and (min-device-width: 800px) and (min-width: 800px) { /* android odys next: landscape (bei refresh, nicht rotation) */
	
}

@media screen and (min-device-width: 900px) and (min-width: 900px) {
	#image {height:450px;}
}