
@font-face {
    font-family:'uni0553';
    src:url('fonts/uni0553-webfont.eot');
    src:url('fonts/uni0553-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/uni0553-webfont.woff') format('woff'),
         url('fonts/uni0553-webfont.ttf') format('truetype'),
         url('fonts/uni0553-webfont.svg#propcouriersansregular') format('svg');
    font-weight:normal;
    font-style:normal;
}
body {
	margin:0; padding:0; height:100%;
	background-color:#000;
	color:#FFF;	
    overflow:hidden;
}
html, body, input, textarea {
    font-family:'uni0553', Arial, Helvetica, sans-serif;
    font-size:12px;
}
* {
    -ms-interpolation-mode:nearest-neighbor;
    image-rendering:-webkit-optimize-contrast;
    image-rendering:-webkit-crisp-edges;
    image-rendering:-moz-crisp-edges;
    image-rendering:-o-crisp-edges;
    image-rendering:pixelated;
}
canvas { background-color:#000; position:relative; z-index:1; }
.hidden { display:none; }
.ui { margin:60px auto 0 auto; width:220px;
	background-color:#000; padding:20px;
    border:solid 1px #0F0; color: #0F0;
    display:none;
}
.ui label, .ui input, .ui select {
	display:block;
}
#ui_container { position:fixed; z-index:99999; width:100%; /*width:0; height:0;*/ }
#ui_container .ui {  }

#optionspanel { font-size:10px; /* scalable */ width:22em;
    position:absolute; z-index:999999; margin:0; right:1.6em; bottom:1.6em; padding:0 1em 0 1em; }
#optionspanel .handle { height:1.6em; background-color:#FFFFFF; opacity:0.5; }
#optionspanel p { margin:0 0 1em 0; }
#optionspanel .slider { position:relative; /* conteneur */ }
#optionspanel input.range { width:80%; margin:0; }
#optionspanel span.val { position:relative; float:right; right:0; top:-2.4em; color:#FFFF00; }
#optionspanel span.default { position:absolute; right:0; top:0; font-size:0.8em; cursor:pointer; color:#00C0C0; }
#optionspanel span.default:hover { color:#00C0C0; }
#optionspanel .close, #uifile-opener .close { position:absolute; right:0; top:0; width:19px; height:19px; cursor:pointer;
    background:url('../assets/img/close.png') no-repeat;
    background-size: 100% 100%; }

.clear { clear:both; }

ul, li { margin:0; padding:0; list-style:none; }

#html_overlay { position: absolute; top: 0; left: 0; }
.group { display:none; position:relative; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; }
.mod { position:absolute; z-index:10; left:0; top:0; opacity:1; }
.mod img { width: 100%; }
.mod p { /* background-color: red; */ display: block; text-align: center; color: black;
    position:absolute; left:4%; top:2%; width: 100%; /* font-size:400%; */ margin: 0; padding: 0; }
/* font-size via calculs JS in Common.overlay._set_in_place */

/* #homepage .mod img, #hud .mod img { width: 100%; } */
/* #homepage .mod p.score_display, #hud .mod p.score_display { width: 10%; right: -20%; font-size: 400%; position: absolute; top: 0; margin:0; } */
/* .mod { transform-origin: 50% 50%; } */

#panels { position: absolute; left:0; top:0; }
#panels .panel { position: absolute; left:0; top:0; font-size:10px; }
#panels .panel#modele { display:none; }
#panels .panel { }
#panels .panel .head { position: relative; width:4em; }
#panels .panel .handle { width:3em; height:1em; opacity: 0.7; background-color: #FFF; }
#panels .panel .toggler { background-color: #F00; width:1em; height:1em; position: absolute; right:0; top:0; cursor:pointer; }
#panels .panel.closed .toggler { background-color: #0F0; }
#panels .panel .body { background-color: #000; /*min-height:3em;*/ border: solid 0.1em #0F0; }
#panels .panel .body .btn { float:left; width:1em; height:1em; border: solid #000 0.15em; cursor:pointer; 
    background-size:800%; /* 8 columns */ }
#panels .panel .body .btn.active { border-color: #FFF; }
#panels .panel .body .btn.empty { cursor:auto; }
#panels .panel .body .btn.line { cursor:auto; width:95%; }

#preloader {
    position:absolute; left:0; top:0; width:100%; 
    z-index:104;
    text-align:center;
}
#preloader > div {  max-width:340px; margin:20vh auto 0 auto; }
#preloader img { width:100%; }
#preloader p { margin:2rem 0 0 0; font-size:16px; }