/* Base style
   ========================================================================== */
   
/* Fonts */
   @font-face {
      font-family: 'nexaheavy';
      src: url('fonts/nexa-heavy-webfont.woff2') format('woff2'),
           url('fonts/nexa-heavy-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  
  }

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

/*-- Percent Loader -- */
#mainLoader{position:absolute;z-index:5; display:none; font-size:25px; line-height:25px; color:#fff; text-align:center; width:100%; font-family:'nexaheavy';}

/*-- 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:25px; font-family:'nexaheavy'; display:none;}

/*-- Rotate Animation -- */
@-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:1280px; height:100%; margin:auto; position:relative;}
canvas{ position:fixed;}

/*-- 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:#E0804B; padding:15px; color:#FFF; width:280px; border:#fff solid 2px;}
#floatForm{ font-size:12px;}
#floatForm #puzzleEditWrapper, #floatForm #charactersEditWrapper, #floatForm #objectsEditWrapper{ background:#D36225; padding:10px;}
#floatForm input.button, #floatForm select.half, #floatForm label{ width:49%;}
#floatForm .formRow, #floatForm .formRowLong{ height:25px; }
#floatForm .extraHeight{ height:48px; }
#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%;}

.clearfix:after { content: "."; visibility: hidden; display: block; clear: both;}