/* Base style
   ========================================================================== */
   
/* Fonts */
@font-face {
	font-family: 'ostrich_sansheavy';
    src: url('fonts/ostrichsans-heavy-webfont.eot');
    src: url('fonts/ostrichsans-heavy-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ostrichsans-heavy-webfont.woff2') format('woff2'),
         url('fonts/ostrichsans-heavy-webfont.woff') format('woff'),
         url('fonts/ostrichsans-heavy-webfont.ttf') format('truetype'),
         url('fonts/ostrichsans-heavy-webfont.svg#ostrich_sansheavy') format('svg');
    font-weight: normal;
    font-style: normal;

}

html{ -webkit-user-select: none; -ms-user-select: none; user-select: none; background:#000;}

/*-- Content Wrapper -- */
#mainHolder{position:absolute; width:100%;height:100%;}

/*-- Browser Not Support -- */
#notSupportHolder{ width:90%; margin:5% auto; position:relative; color:#FFF; text-align:center; font-size:40px; font-family:'ostrich_sansheavy'; display:none;}

/*-- Mobile Rotate Instruction -- */
#rotateHolder{position:absolute;width:100%;height:100%;z-index:1000; display:none; background:#000;}
.mobileRotate{width:200px;height:auto;position:absolute;text-align:center;}
.rotateImg{-webkit-animation:spin .5s linear infinite; -moz-animation:spin .5s linear infinite; animation:spin .5s linear infinite; margin-bottom:10px;}
.rotateDesc{color:#fff; font-size:25px; line-height:25px; font-family:'ostrich_sansheavy';}

@-moz-keyframes spin { 50% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(0deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotate(90deg); } 100% { -webkit-transform: rotate(0deg); } }
@keyframes spin { 50% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } 100% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } }


/*-- Canvas Wrapper -- */
#canvasHolder{ display:none; width:100%; max-width:1024px; height:100%; margin:auto; position:relative;}
canvas{ position:fixed;}

/*-- Loader Wrapper -- */
#loaderHolder{ width:100%; height:auto; margin:auto; position:relative;}
#loaderHolder img{ width:100%; height:auto;}
.percentHolder{ width:90%; left:5%; top:75%; height:5%; background:#333; position:absolute; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.percentIndicator{ width:1%; left:1%; top:20%; height:60%; background:#fff; position:absolute; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

/*-- Form Wrapper -- */
#editWrapper{ display:none; font-size:12px; font-family: Arial, Helvetica, sans-serif;}
#floatForm{ position:fixed; left:0; top:0; z-index:100; background:#69C; padding:15px; color:#FFF; width:280px; border:#fff solid 2px; }
#floatForm #editTerminalWrapper, #floatForm #editRunwayWrapper, #floatForm #saveWrapper{ background:#0A55B2; padding:10px;}
#floatForm #saveStatus{ width:100%; text-align: center; color: #ff9900; }
#floatForm .modeWrapper, #floatForm .testWrapper, #floatForm .gateEditWrapper{ border:#FFF solid 1px; padding:5px;}
#floatForm input.button, #floatForm select.half, #floatForm label{ width:49%;}
#floatForm .formRow, #floatForm .formRowLong{ height:25px; }
#floatForm .extraHeight{ height:55px; }
#floatForm .formRow input, #floatForm .formRow select{ float:right; width:48%;}
#floatForm .formRow label{ float:left; width:48%;}
#floatForm .divider{ margin:10px 0; padding:10px 10px; border:#FFF solid 1px;}

#floatForm input{ width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#floatForm textarea{ float:left; width:100%; resize:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  }
#floatForm select, #floatForm option{ width:100%;}

select#modelist option[value="0"]   { background-color:orange; color:#fff; }
select#modelist option[value="1"]   { background-color:white;}
select#modelist option[value="2"]   { background-color:yellow;}
select#modelist option[value="3"]   { background-color:green; color:#fff; }
select#modelist option[value="4"]   { background-color:blue; color:#fff; }
select#modelist option[value="5"]   { background-color:yellow;}
select#modelist option[value="6"]   { background-color:white; }
select#modelist option[value="7"]   { background-color:orange; color:#fff; }