wsrpc/sample/canvas/web/vendor/hLayout/hLayout.css

@font-face {
  font-family: 'Open Sans';
  src: url('OpenSans-Regular.ttf')  format('truetype') /* Safari, Android, iOS */
}

body,html {
	position:relative;
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	
}
* {
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.layout-container {
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	
	
	
	padding:5px;
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	
	
	
	display:flex;
	background: #333;
	
}


section {
	
	display:flex;
	flex:1 0 auto;
	background:transparent;
	
}

section.vertical {
	flex-direction: row;
}
section.horizontal {
	flex-direction: column;
}


section.horizontal > .splitter {
	cursor:s-resize;
}
section.vertical > .splitter {
	cursor:e-resize;
}

.splitter {
	background: transparent;
	flex-basis:6px;
	flex-grow: 0;
	min-width:6px;
	min-height:6px;

}


/* AKA PAne */

.hpane {
	/*box-shadow: 0px 0px 10px #000;*/
	position:relative;
	overflow:hidden;
	flex: 1 1 auto;
	flex-direction: column;
	/* Theme part */
	
	background: #EEE;
	color: #333;
	
	transition: border 1s ease;
	opacity:1;
}

.hpane.discover {
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	
	gborder: solid 40px #999;
	transition: border 1s ease;
}

.hpane.detached {
	position:Fixed;
	/*width:20%;*/
	/*height:50%;*/
	z-index:99;
	 
	box-shadow: 0px 0px 10px #000;
	
	
}

.hpane.detached.moving {
	opacity: 0.5;
	pointer-events: none;
	
}



.hpane.preview {
	background: #555;
	border: dashed 1px #FFF;
}

.hpane >header {
	
	padding:10px;
	background: #555;
	color:#FFF;
	font-family: 'Open Sans';
	text-transform:uppercase;
	font-weight: 700;
	
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* IE/Edge */
	user-select: none;
	
}
.hpane .hcontent {
	overflow:auto;
	/*position:absolute;*/
	top:40px;
	bottom:0px;
	left:0px;
	right:0px;
	
	background: #EEE;
	color:#333;
	font-family: 'Open Sans';
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}


.attach-preview {
	position:fixed;
	background: rgba(0,0,0,0.2);
	border: dashed 1px #777;
	z-index:90;
	pointer-events:none;
	transition: all 0.2s;
}

section.horizontal {
	cursor:s-resize;
}
section.vertical {
	cursor:e-resize;
}
section.horizontal > *:first-child {
	rborder: solid 1px #F00;
	margin-bottom:7px;
}
section.vertical > *:first-child {
	rborder: solid 1px #F00;
	margin-right:7px;
}
	section > * {
		cursor:initial;
	}