/* JSreal online? */

* { margin: 0; padding: 0; }
html, body { height: 100%; }
body { overflow: hidden; font-family: Verdana, sans-serif; }

#code-cont, body {
	background-color: hsl(190, 15%, 10%);
}
#code-cont, #real-cont, #butt, #hint-cont, .code {
	position: absolute;
}

#code-cont {
	top: 60px; /* #hint-cont height+padding+13 */
	top: 13px; /* enlever */
	left: 10px; right: 0;
	bottom: 30%;
	/*padding: 8px 0 9px;*/
}
.code {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	resize: none;
	border: none;
	background: none;
	font-size: 15px !important;
}
#code    {
	z-index: 1;
	color: hsl(160, 5%, 60%);
}
#code-hl {
	z-index: 2;
	padding-left: 1px;
	/*color: red !important;*/
	pointer-events: none;
}

#butt {
	z-index: 3;
	left: 50%;
	text-align: center;
	width: 40px;
	padding: 2px 10px;
	margin-left: -30px;
	bottom: 30%;
	background-color: hsl(180, 50%, 45%); /* #real-cont border-top */
	font-weight: bold;
	color: hsl(200, 40%, 15%);
	cursor: pointer;
	
	-webkit-border-top-left-radius: 9px;
	-moz-border-radius-topleft: 9px;
	border-top-left-radius: 9px;
	-webkit-border-top-right-radius: 9px;
	-moz-border-radius-topright: 9px;
	border-top-right-radius: 9px;
}
#butt:hover {
	color: white !important;
	text-shadow: 0 0 4px white !important;
}

#real-cont {
	top: 70%;
	left: 0; right: 0;
	bottom: 0;
	border-top-width: 1px;
	border-top-style: solid;
	font-size: 15px;
	color: hsl(180, 25%, 90%);
}


#real-in {
	height: 100%;
	overflow-y: auto !important;
}
#real {
	padding: 8px 9px;
}
#real a { color: aqua; }

#real-cont, #hint-cont {
	background-color: hsl(200, 40%, 15%);
	border-color: hsl(180, 50%, 45%);
	z-index: 2;
	
	/* Dégradé hexagones */
	overflow: hidden;
	background-image: url('../../Util/Images/bg-hex2.png');
	background-repeat: repeat-x;
}

#hint-cont {
	display: none; /* enlever */
	top: 0;
	left: 0; right: 0;
	height: 45px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	font-size: 13px;
	color: hsl(180, 20%, 70%);
}
#hint-in {
	height: 100%;
	overflow-y: auto !important;
}
#hint {
	padding: 6px 7px;
}

/* Gradients: suffit d'insérer 
 <div class="grad-top"></div><div class="grad-bot"></div>
*/
.grad-top, .grad-bot {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 1;
	pointer-events: none;
}
.grad-top {
	top: 0;
	height: 75px;
	background: -moz-linear-gradient(top, hsla(200,40%,35%,0.5) 0%, hsla(200,40%,35%,0.25) 25%, hsla(200,40%,35%,0.05) 75%, hsla(200,40%,35%,0) 100%);
	background: -webkit-linear-gradient(top, hsla(200,40%,35%,0.5) 0%, hsla(200,40%,35%,0.25) 25%, hsla(200,40%,35%,0.05) 75%, hsla(200,40%,35%,0) 100%);
	background: -o-linear-gradient(top, hsla(200,40%,35%,0.5) 0%, hsla(200,40%,35%,0.25) 25%, hsla(200,40%,35%,0.05) 75%, hsla(200,40%,35%,0) 100%);
	background: -ms-linear-gradient(top, hsla(200,40%,35%,0.5) 0%, hsla(200,40%,35%,0.25) 25%, hsla(200,40%,35%,0.05) 75%, hsla(200,40%,35%,0) 100%);
	background: linear-gradient(to bottom, hsla(200,40%,35%,0.5) 0%, hsla(200,40%,35%,0.25) 25%, hsla(200,40%,35%,0.05) 75%, hsla(200,40%,35%,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsla(200,40%,35%,0.5)), color-stop(25%, hsla(200,40%,35%,0.25)), color-stop(75%, hsla(200,40%,35%,0.05)), color-stop(100%, hsla(200,40%,35%,0)));
}
.grad-bot {
	bottom: 0;
	height: 40px;
	background: -moz-linear-gradient(top, hsla(200,40%,35%,0) 0%, hsla(200,40%,35%,0.03) 25%, hsla(200,40%,35%,0.15) 75%, hsla(200,40%,35%,0.3) 100%);
	background: -webkit-linear-gradient(top, hsla(200,40%,35%,0) 0%, hsla(200,40%,35%,0.03) 25%, hsla(200,40%,35%,0.15) 75%, hsla(200,40%,35%,0.3) 100%);
	background: -o-linear-gradient(top, hsla(200,40%,35%,0) 0%, hsla(200,40%,35%,0.03) 25%, hsla(200,40%,35%,0.15) 75%, hsla(200,40%,35%,0.3) 100%);
	background: -ms-linear-gradient(top, hsla(200,40%,35%,0) 0%, hsla(200,40%,35%,0.03) 25%, hsla(200,40%,35%,0.15) 75%, hsla(200,40%,35%,0.3) 100%);
	background: linear-gradient(to bottom, hsla(200,40%,35%,0) 0%, hsla(200,40%,35%,0.03) 25%, hsla(200,40%,35%,0.15) 75%, hsla(200,40%,35%,0.3) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsla(200,40%,35%,0)), color-stop(25%, hsla(200,40%,35%,0.03)), color-stop(75%, hsla(200,40%,35%,0.15)), color-stop(100%, hsla(200,40%,35%,0.3)));
}