/* Base style
   ========================================================================== */
   
/* Fonts */
html{ -webkit-user-select: none; -ms-user-select: none; user-select: none; background:#0A1529;}

/*-- Content Wrapper -- */
#mainHolder{position:absolute; width:100%;height:100%; background:url(../assets/bg.jpg) repeat;}

/*-- Browser Not Support -- */
#notSupportHolder{ position:absolute;width:100%;height:100%;color:#FFF; display:none;}
.notSupport{text-align:center; font-size:25px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; margin-top:20%;}

/*-- Mobile Rotate Instruction -- */
#rotateHolder{position:absolute;width:100%;height:100%;z-index:1000; display:none;background:url(../assets/bg.jpg) repeat;}
.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:18px; line-height:18px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}

@-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); } }

#videoHolder{ display:none; position:fixed; z-index:1; left:0; top:0;}
#cameraGuide{ position:absolute; top:0; left:0;}
#webCanvas{ position:absolute; top:0; left:0;}

#shareHolder{display:none; position:absolute; z-index:1; left:0; top:41%; width:100%; text-align:center;}
#shareHolder input{text-align:center; width:50%; border:none; padding:1%; background:#28A372; color:#FFF;}
.fontLink{ font-size:18px;}

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

/*-- Loader Wrapper -- */
#loaderHolder{ width:100%; max-width:1000px; height:auto; margin:auto; position:relative;}
#loaderHolder img{ width:100%; height:auto;}
.percentHolder{ width:80%; left:10%; top:48%; 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 #editCuepointWrapper, #floatForm #editMusicWrapper, #floatForm #saveWrapper{ background:#0A55B2; padding:10px;}
#floatForm #saveStatus{ width:100%; text-align: center; color: #ff9900; }
#floatForm #editSwitchWrapper, #floatForm #editEnemyDotsWrapper{ 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%;}

#floatPlayer{ position:fixed; background:#69C; height:100px; width:100%; bottom:0; z-index:101; text-align:center; border:#fff solid 2px; padding-top: 20px; }
#floatPlayer .playerBar, #floatPlayer .playerPosition{position:absolute; left:5%; width:90%; height:15px; top:70px;}
#floatPlayer .playerBar{ background:#fff;}
#floatPlayer .playerPosition{ background:#FFCE00; width:50%;}

#floatPlayer #dragArea{ position:absolute; left:5%; height:35px; width:90%; top:40px;}
#floatPlayer .dragStart, #floatPlayer .dragEnd{ left:5%; top:60px; width:5px; height:35px; background:#F00; position:absolute;}
#floatPlayer .dragEnd{background:#C00; left:10%;}
#floatPlayer .musicPosition{ font-size: 13px; color: #fff; margin-top: 5px; }

.fitImg img{ width:100%; height:auto;}

@media (max-width:600px){
	.fontLink{ font-size:15px;}
}

@media (max-width:400px){
	.fontLink{ font-size:10px;}
}