/* import von test module.css */

#wpr_viewport{
	width:10%;
	height:10%;
	padding:10px;
 text-align:left;
	width:100px;
	height:60px;
}

#wpr_viewport > .column:first-child{
	width:305px;
	margin-right:5px;
}

#wpr_viewport > .column:first-child .button-wrap:last-child{margin-top:195px;}

.bracket{
	width:305px;
	height:255px;
}

.button-wrap{
	flex-wrap:wrap;
	width:100%;
	margin-top:0;
	padding-top:5px;
}

.button-wrap .button{
	margin-bottom:5px;
	margin-left:5px;
}

.button-wrap .button:nth-last-child(2),
.button-wrap .button:nth-last-child(2) ~ .button{margin-bottom:0px;}
.button-wrap .button:nth-child(odd){margin-left:0px !important;}

.header .title{
	width: auto;
#	margin-left:15px;
	overflow: hidden;
	text-overflow: clip;
	white-space: normal;
#	font-size:25px;
#	letter-spacing: -1px;
}

.header .subtitle{
	padding-top:10px;
	padding-left:5px;
	font-size:32px;
	color:yellow;
}

#wpr_mainView{margin-left:10px;}
#wpr_mainView > .header{height:170px;}

#wpr_mainView > .header .column{
	width:150px;
	overflow:visible;
}

#wpr_mainView > .header .column .elbow .bar{
	width:209px;
#	height:15px;
	right:-204px;
}

.header .row.frame{padding-left:204px;}

.main .column{
	left:0px;
	top:0px;
	bottom:0px;
	width:150px;
	overflow:visible;
}

.main .column:first-child .elbow .bar{
	width:209px;
#	height:15px;
}


.main .column .BodyHeader {
	height:59px;
}

.main .column .ZoneStatus {
	padding-top:20px;
	padding-left:45px;
	max-width:150px;
	height:77px;
	text-align:left;
	vertical-align:middle;
	font-size:42px;
}

.main .column .Timer {
	padding-top:20px;
	padding-left:15px;
	width:250px;
	height:77px;
	text-align:left;
	vertical-align:middle;
	text-align:left;
	color:blue;
	font-size:42px;
}

.main .column .On {
	padding-top:20px;
	width:175px;
	height:77px;
#	text-align:left;
#	color:green;
}

.main .column .Off {
	padding-top:20px;
	width:175px;
	height:77px;
}

.main .column .Schedule {
	padding-top:20px;
	padding-left:200px;
	width:375px;
	height:77px;
}

.main .row.frame {
	padding-left:209px;
	height:15;
}

.main .content{
	padding-top:35px;
	padding-left:35px;
}

.frame .bar:nth-child(2){
	width:100%;
	max-width:150px;
}

.frame .bar:nth-child(5){
	width:100%;
	max-width:305px;
}

.frame .bar:nth-child(6){
	width:100%;
	max-width:110px;
}

.frame .bar:nth-child(7){
	width:100%;
	max-width:35px;
}

.header .button-wrap{
	position:absolute;
	bottom:35px;
	right:0px;
	width:460px;
}

.header .button-wrap .button{margin-left:5px !important;}
.header .button-wrap .button:first-child:nth-last-child(2),
.header .button-wrap .button:first-child:nth-last-child(2) ~ .button{margin-bottom:0px;}
.header .button-wrap .button:nth-child(3n+1),
.header .button-wrap .button:first-child{margin-left:0px !important;}

.titlebar_col1 {
	width:555px;
}

.titlebar_col2 {
	width:100px;
}


/* Static Pattern Heights */
.step-two{flex:1; max-height:125px;}
.step-three{flex:2; max-height:190px; min-height:125px}
.step-four{flex:3; max-height:255px;}

 @media (max-width:1150px), (max-height:745px){
	body{zoom:.75;}
}

@media (max-width:860px), (max-height:558px){
	body{zoom:.5;}
}