/** LCARS SDK 16323.311
* This file is a part of the LCARS SDK.
* https://github.com/AricwithanA/LCARS-SDK/blob/master/LICENSE.md
* For more information please go to http://www.lcarssdk.org.
**/

#wpr_viewport{
	width:100%; 
	height:100%; 
	padding:10px; 
	text-align:right; 
	min-width:575px; 
	min-height:375px;
}

#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;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;	
}

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

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

#wpr_mainView > .header .column .elbow .bar{
	width:209px; 
	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;}
.main .row.frame{padding-left:209px;}

.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;}

/* 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;}  
}