body {
  font-family:'Lucida Grande',Verdana,Helvetica,sans-serif;
	font-size:12px;
	line-height:150%;

  overflow: hidden;

  -webkit-touch-callout: none;  /* prevent callout to copy image, etc when tap to hold */
  -webkit-user-select: none;    /* prevent copy paste, to allow, change 'none' to 'text' */
}

#webgl-container {
  overflow: hidden;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}
#webgl-container>canvas {
  float: left;
  width: 100%;
  height: 100%;
}

#debug-box {
  position:absolute;
  bottom: 0;
  color: #ffffff;
  font-size: 32px;
  line-height:100%;
}

#help-box {
  width: 350px;
  height: 350px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;

  padding: 50px;
  color: white;
  background: rgba(0,0,0,0.5);
  text-align: center;
}
#help-box img {
  width: 120px;
  margin-top: 10px;
  margin-bottom: 10px;
}
#help-box a {
  color: cyan;
}
#help-box {
  transition: opacity 0.5s, visibility 0.5s;
  visibility: visible;
  opacity: 1.0;
}
#help-box.hidden {
  visibility: hidden;
  opacity: 0.0;
}

.gradient-bg-cyan-black {
  /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top, #005C7A 0%, #000000 100%);

  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #005C7A 0%, #000000 100%);

  /* Opera */
  background-image: -o-linear-gradient(top, #005C7A 0%, #000000 100%);

  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #005C7A), color-stop(1, #000000));

  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #005C7A 0%, #000000 100%);

  /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to bottom, #005C7A 0%, #000000 100%);
}

.gradient-bg-gray-black {
  /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top, #666666 0%, #000000 100%);

  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #666666 0%, #000000 100%);

  /* Opera */
  background-image: -o-linear-gradient(top, #666666 0%, #000000 100%);

  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, #000000));

  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #666666 0%, #000000 100%);

  /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to bottom, #666666 0%, #000000 100%);
}

.gradient-bg-darkgray-black {
  /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top, #333333 0%, #000000 100%);

  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #333333 0%, #000000 100%);

  /* Opera */
  background-image: -o-linear-gradient(top, #333333 0%, #000000 100%);

  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #333333), color-stop(1, #000000));

  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #333333 0%, #000000 100%);

  /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to bottom, #333333 0%, #000000 100%);
}