html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, hr
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration: none;
  list-style: none; }

html {
  width: 100%;
  height: 100%; }

body {
  background-color: #333;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  /* this will style the thumb, ignoring the track */ }
  body::-webkit-scrollbar {
    background-color: #222;
    width: 7px; }
  body::-webkit-scrollbar-thumb {
    background-color: #444; }

canvas {
  display: block;
  position: relative;
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -o-crisp-edges;
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  position: relative;
  z-index: 10000; }

div#main {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: fixed; }
  .showcase div#main {
    padding-right: 200px; }
    @media (max-device-width: 600px) {
      .showcase div#main {
        padding-right: 0; } }
  .admin div#main {
    padding-right: 20%;
    padding-bottom: 200px; }
    @media (max-device-width: 600px) {
      .admin div#main {
        display: none; } }
  div#main.screenshot {
    background-color: #fff; }

#mainAdmin {
  color: #ddd;
  height: 100%;
  font-family: Helvetica;
  font-size: 14px;
  line-height: 1.4em; }
  @media (max-device-width: 600px) {
    #mainAdmin {
      font-size: 18px;
      height: auto; } }
  #mainAdmin div#sidebar {
    background-color: #333;
    width: 200px;
    right: 0;
    border-left: 1px solid #000;
    box-sizing: border-box;
    padding-top: 20px;
    position: absolute;
    z-index: 10;
    min-height: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    @media (max-device-width: 600px) {
      #mainAdmin div#sidebar {
        display: none;
        position: relative; } }
    #mainAdmin div#sidebar div.inner {
      float: left;
      width: 100%; }
    .admin #mainAdmin div#sidebar {
      width: 20%; }
      @media (max-device-width: 600px) {
        .admin #mainAdmin div#sidebar {
          width: 100%;
          display: block;
          padding-bottom: 100px;
          position: relative;
          float: left; } }
    #mainAdmin div#sidebar ul {
      padding-bottom: 20px;
      clear: both;
      float: left;
      width: 100%; }
  #mainAdmin div#infobar {
    background-color: #333;
    position: fixed;
    bottom: 0;
    height: 200px;
    width: 100%;
    padding-right: 20%;
    box-sizing: border-box;
    border-top: 1px solid #000; }
    @media (max-device-width: 600px) {
      #mainAdmin div#infobar {
        bottom: 0;
        width: 100%;
        height: auto;
        position: fixed;
        z-index: 20; } }
    #mainAdmin div#infobar #serverLog {
      float: left;
      width: 70%;
      height: 100%;
      overflow-x: hidden;
      /* this will style the thumb, ignoring the track */
      padding: 20px;
      box-sizing: border-box;
      border-right: 1px solid #000; }
      #mainAdmin div#infobar #serverLog::-webkit-scrollbar {
        background-color: #222;
        width: 7px; }
      #mainAdmin div#infobar #serverLog::-webkit-scrollbar-thumb {
        background-color: #444; }
      @media (max-device-width: 600px) {
        #mainAdmin div#infobar #serverLog {
          display: none; } }
    #mainAdmin div#infobar #connectionLog {
      float: right;
      width: 30%;
      height: 100%;
      overflow-x: hidden;
      /* this will style the thumb, ignoring the track */
      box-sizing: border-box;
      border-left: 1px solid #000; }
      #mainAdmin div#infobar #connectionLog::-webkit-scrollbar {
        background-color: #222;
        width: 7px; }
      #mainAdmin div#infobar #connectionLog::-webkit-scrollbar-thumb {
        background-color: #444; }
      #mainAdmin div#infobar #connectionLog h1, #mainAdmin div#infobar #connectionLog div {
        padding-left: 20px;
        padding-right: 20px; }
      #mainAdmin div#infobar #connectionLog h1 {
        padding-top: 20px; }
      @media (max-device-width: 600px) {
        #mainAdmin div#infobar #connectionLog {
          width: 100%;
          height: auto;
          bottom: 0;
          z-index: 10000;
          position: fixed;
          background-color: #555; }
          #mainAdmin div#infobar #connectionLog div {
            display: none; } }

.red {
  color: #f00; }

.blue {
  color: #0ff; }

.green {
  color: #0f0; }

.yellow {
  color: #ff0; }

.grey {
  color: #aaa; }

.bold, strong {
  font-weight: bold; }

.time, .screensize {
  display: inline-block;
  width: 100px;
  font-weight: normal; }

.warning {
  color: #fff;
  background-color: #f00;
  font-weight: bold; }

h1 {
  padding-bottom: 20px; }

.client {
  border-bottom: 1px solid #ddd;
  padding: 10px 0; }

.button {
  display: block;
  background-color: #888;
  color: #333;
  position: relative;
  border-radius: 3px;
  padding: 5px 10px;
  margin-bottom: 10px;
  cursor: pointer;
  box-sizing: border-box;
  width: 90%;
  margin-left: 5%;
  float: left; }
  .button:hover {
    background-color: #bbb; }
  .button:active {
    background-color: #ddd;
    color: #999; }
  .button.less {
    opacity: 0.6; }
  @media (max-device-width: 600px) {
    .button {
      display: none; } }
  @media (max-device-width: 600px) {
    .button.important {
      display: block; } }
  .button.newrow {
    clear: both; }
  .button.slideControl {
    text-align: center; }
  .button.narrow {
    width: 42.5%; }
  .button .shortcut {
    color: #666;
    float: right;
    float: right;
    font-size: 12px;
    font-family: Courier; }

#slides {
  color: #777;
  font-weight: bold; }
  #slides li {
    clear: both;
    padding: 0 5%;
    cursor: pointer; }
    #slides li:hover, #slides li.current {
      color: #fff; }
      #slides li:hover strong, #slides li.current strong {
        color: #fff;
        text-decoration: underline; }
  #slides strong {
    display: inline-block;
    float: right;
    width: 80%;
    font-weight: normal;
    color: #bbb; }

#sliders {
  width: 100%;
  overflow: hidden;
  background-color: #222; }
  #sliders h2 {
    color: #aaa;
    text-transform: uppercase;
    padding-bottom: 0.7em;
    padding-top: 0.7em;
    margin-top: 1.4em;
    letter-spacing: 0.2em;
    font-size: 13px;
    background-color: #444;
    text-align: center;
    margin: 1.4em 2.5% 0;
    box-sizing: border-box;
    font-weight: bold;
    border-top: 1px solid #555;
    border-left: 1px solid #555;
    border-bottom: 1px solid #222;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px; }
  #sliders label {
    font-size: 13px;
    padding-left: 0.5em; }

.slider {
  margin: 0 2.5%;
  box-sizing: border-box;
  width: 95%;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 0.7em;
  padding-bottom: 1.8em;
  color: #888;
  background-color: #282828;
  border-top: 1px solid #444;
  border-left: 1px solid #444; }
  .slider .sliderWrap {
    position: relative; }
  .slider span {
    width: 20%;
    margin-left: 2px;
    position: absolute;
    top: 20px;
    text-align: center;
    color: #999;
    display: none; }
  .slider:hover {
    color: #fff; }
    .slider:hover input[type=range]::-webkit-slider-runnable-track {
      background: #888; }
    .slider:hover span {
      display: block; }

input {
  -webkit-appearance: none;
  border-radius: 0;
  border: none; }
  input[type=text] {
    background-color: #f00; }
  input[type=number] {
    font-size: 16px;
    color: #222;
    text-align: center;
    position: relative;
    background-color: #777;
    width: 100%;
    margin: auto;
    display: block;
    position: static; }
  input[type=range] {
    width: 100%;
    cursor: col-resize; }
    input[type=range]::-webkit-slider-runnable-track {
      height: 5px;
      background: #555; }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 12px;
      width: 10%;
      margin-top: -3px;
      background-color: #aaa;
      z-index: 100;
      position: relative; }
      @media (max-device-width: 600px) {
        input[type=range]::-webkit-slider-thumb {
          height: 20px;
          margin-top: -10px; } }
      input[type=range]::-webkit-slider-thumb:hover {
        background-color: #fff; }

img.screenshot {
  width: 100%;
  display: block;
  position: relative;
  top: 0;
  left: 0; }
  img.screenshot.fit {
    width: auto;
    margin: auto;
    max-width: 100%;
    max-height: 100%; }
  img.screenshot.stretch {
    height: 100%; }

div.screenshot {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #000; }

/*# sourceMappingURL=style.css.map */