* {line-height: 1.2;}

.layer-main{
	display: flex;

	position: absolute;
	width: 100%;
	height: 100%; 
	margin: 0; 
	padding: 0;  
	background: lightgray; 
}
	.layer-view,
	.layer-gui{}
	.layer-view{
		width: 100%;
		height: 100%;
		background-image: 
			url(/cont/cityscape.png),
            linear-gradient(0deg, #00a50d 0%, #a4d24c calc(100% * 0.7), #d0eac5 calc(100% * 0.75), #9bd4d1 calc(100% * 0.9), #68bfdf calc(100% * 1));
		background-repeat: repeat-x, no-repeat;
		background-position: 0 115px, 0 bottom;
		background-size: auto 86px, auto;

		background-color: red;
	}
		.layer-render{width: 100%; height: 100%; box-sizing: border-box;}
			.viewport{width: 100%; height: 100%; padding: 0; margin: 0; border: 0;}
		.layer-renderGui{position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 2;}
			.gui-fps{position: absolute; top: 0; left: 0; width: 25px; height: 20px; box-sizing: border-box; border: 1px solid black; text-align: center; background: white;}
	.layer-gui{padding: 5px; box-sizing: border-box; color: honeydew; background: #2b2b2b;}
	.layer-gui.-type-top {
		flex-grow: 1;
		right: 0; 
		width: 450px; 
		height: 900px; 
		overflow: auto;
	}
	.layer-gui.-type-bottom{top: 40%; left: 0; width: 100%; height: 60%;}

/* Gui */

.gui-group{margin-bottom: 5px;}

/* Button */

.button::-moz-focus-inner{border: 0; padding: 0;}
  
.button{
	display: inline-block;
	padding: 5px 10px;
	margin: 0;
	cursor: pointer;
	border: 1px solid #bbb;
	overflow: visible;
	font: bold 12px arial, helvetica, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	color: #555;
	
	background-color: #ddd;
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
	background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
	
	-webkit-transition: background-color .2s ease-out;
	-moz-transition: background-color .2s ease-out;
	-ms-transition: background-color .2s ease-out;
	-o-transition: background-color .2s ease-out;
	transition: background-color .2s ease-out;
	background-clip: padding-box;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
	text-shadow: 0 1px 0 rgba(255,255,255, .9);
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
  
.button:hover{background-color: #eee; color: #555;}
.button:active{
	background: #e9e9e9;
	position: relative;
	top: 1px;
	text-shadow: none;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.button[disabled], 
.button[disabled]:hover, 
.button[disabled]:active{
	border-color: #eaeaea;
	background: #fafafa;
	cursor: default;
	position: static;
	color: #999;
	/* Usually, !important should be avoided but here it's really needed :) */
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
  
.button.-type-small{padding: 2px 6px; }
  
.button.-type-large{padding: 10px 20px;	text-transform: uppercase;}
.button.-type-large:active{top: 2px;}
  
.button.-type-green, 
.button.-type-red, 
.button.-type-blue{
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.2);

	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
	background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
}

.button.-type-green{background-color: #57a957; border-color: #57a957;}
.button.-type-green:hover{background-color: #62c462;}
.button.-type-green:active{background: #57a957;}
.button.-type-green[disabled], 
.button.-type-green[disabled]:hover, 
.button.-type-green[disabled]:active{border-color: #57A957; background: #57A957; color: #D2FFD2;}

.button.-type-red{background-color: #ca3535; border-color: #c43c35;}
.button.-type-red:hover{background-color: #ee5f5b;}
.button.-type-red:active{background: #c43c35;}
.button.-type-red[disabled], 
.button.-type-red[disabled]:hover, 
.button.-type-red[disabled]:active{border-color: #C43C35;	background: #C43C35; color: #FFD3D3;}

.button.-type-blue{background-color: #269CE9; border-color: #269CE9;}
.button.-type-blue:hover{background-color: #70B9E8;}
.button.-type-blue:active{background: #269CE9;}

.button.-type-blue[disabled], 
.button.-type-blue[disabled]:hover, 
.button.-type-blue[disabled]:active{border-color: #269CE9; background: #269CE9; color: #93D5FF;}

/* Select */

.select{
	width: 100px;
    height: 20px;
    box-sizing: border-box; -webkit-box-sizing: border-box;
	border: 1px solid #bbb;
	border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
    cursor: pointer;
    text-align: left;
    background: #ddd;
}
    .select option{background: rgba(255, 255, 255, 0.2);}















.column{display: inline-block; vertical-align: top; white-space: normal;}


.slider-wrp > *,
.input-wrp > *{display: inline-block; vertical-align: middle;}

.slider-wrp input,
.input-wrp input[type="number"]{width: 50px;}

.slider{width: 150px; margin: 10px 5px;}


.matrix-wrp {display: inline-block; vertical-align: middle;}

    .matrix {width: 200px; white-space: normal; text-align: center;}

        input.matrixElem {display: inline-block; width: 40px; margin: 3px 1px; text-align: right;}

.matrix-operator {display: inline-block; vertical-align: middle;}

.matrix-operator[data-operator="x"]{cursor: pointer;}