/* Avoid involuntary text selection, 
 * especially important when clicking with virtual gamepad nipplejs */
.unselectable, 
  body, div,
  #canvas,
  #spinner, #status, #progress,
  #output,
  #butStart,
  #butRefresh, #butVRTrack, #butStartVR, #butFullscreen
  #jbut_left, #jbut_right, #jbut_x
{
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* html body: no margin, disable scrollbar, full black */
body {
  margin:0;
  overflow:hidden;
  background-color:black;
}

/* full page background div.
 * to hide the white at the bottom of the screen when going in 
 * full screen on ios */
#background_div {
  position: absolute; 
  left:0; 
  top:0; 
  width:100%; 
  height:100%; 
  z-index:-200; 
  background-color:black;
}

/* log output */ 
#output {
  /* 100% of the width, console font, remove borders, black. */
  width: 100%;
  height: 200px;
  margin: 0 auto;
  margin-top: 10px;
  border-left: 0px;
  border-right: 0px;
  padding-left: 0px;
  padding-right: 0px;
  display: block;
  background-color: black;
  color: white;
  font-family: 'Lucida Console', Monaco, monospace;
  outline: none;

  /* for log with <ul>: maximum height and scrolling behavior */
  max-height: 200px; 
  overflow-y: auto; 
  list-style: none;
  solid #000;
}

/* emscripten canvas takes 100% of screen width for fullscreen */
#canvas {
  width: 100%;
}

/* emscripten elements ... */
.emscripten 
{ 
  padding-right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  display: block; 
}

div.emscripten { 
  text-align: center; 
}

/* emscripten div containing the canvas.
 * no border, takes full width, 
 * by default 20% of the screen (before the canvas size is set) */
div.emscripten_border { 
  border: 0px solid black;
  position:relative; 
  width:100%; 
  height:20%;
}

/* canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { 
  border: 0px none; 
  background-color: black; 
}

/* start button. located in the center of the emscripten div, 
 * with a quite large size and a big font, with a z-index to make sure
 * this is a top-most item  */
#butStart {
  position: absolute; 
  left:50%; 
  top:50%; 
  width:50%; 
  height:50%; 
  transform: translateY(-50%) translateX(-50%); 
  font-size: 200%;
  z-index:200; 

  /* use an image for the button */
  background: url(../xengine/res/butStart.svg) no-repeat center;
  background-size: 100% 100%;
  border: none;

  /* have hand pointer to indicate click is possible */
  cursor: pointer;
  
}

#butStartInVR {
  position: fixed; 
  left:15%; 
  top:10%; 
  width:20%;
  height:20%;
  transform: translateY(-50%) translateX(-50%); 
  font-size: 200%;
  z-index:200; 

  /* use an image for the button */
  background: url(../xengine/res/butStartInVR.svg) no-repeat center;
  background-size: 100% 100%;
  border: none;

  /* have hand pointer to indicate click is possible */
  cursor: pointer;
  
}

/* the buttons_zone div is never hidden (while the buttons div can be), it
 * when clicking on it, it is unhide the buttons div, as well as the output */
#buttons_zone {
  width:100%; 
  height:40px;
}

/* by default hidden make smooth transition for the button visibility */
#output {
  visibility: hidden;
  transition:visibility 0.3s linear,opacity 0.3s linear;
}

#buttons {  
  visibility: hidden;
  transition:visibility 0.3s linear,opacity 0.3s linear;  
}

/* Nipple JS button zones configuration */ 
#jbut_left {
    position: absolute;
    left: 0;
    top: 0%;
    height: 100%;
    width: 50%;
    background: #00000000; /* rgba(0, 255, 0, 0.1); */
}

#jbut_right {
    position: absolute;
    right: 0;
    top: 0%;
    height: 100%;
    width: 50%;
    background: #00000000; /* rgba(0, 0, 255, 0.1); */
}

#jbut_x {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 70px;
    height: 50px;
    background: #00000000; /* rgba(0, 0, 255, 0.1); */
}