#canvas {
  -webkit-transform: translateZ(0); /* force hardware acceleration in chrome */
}

#levels {
     position: absolute;
         left: 124px;
          top: 0px;
        color: white;
  line-height: 20px;
}

#levels #next  { 
  position: absolute;
  width: 12px;
  top: 2px;
}
#levels #prev  { 
  position: absolute; 
  top: 12px; 
  width: 12px;
}
#levels #label { 
  padding-left: 20px; 
  color: white
}
#levels #level { font-size: 14pt; padding-left: 5px; font-weight: bold; color: white; }

#levels img                 { cursor: pointer; }
#levels img.disabled        { opacity: 0.3; cursor: default; }
#levels img:active          { margin-top: 1px; margin-left: 1px; }
#levels img.disabled:active { margin-top: 0; margin-left: 0; }

#instructions {
  background: #262b33;
      border: 2px solid #333;
       color: white;
     padding: 0.5em 1em;
 white-space: nowrap;
  text-align: center;
       width: 24em;
      margin: 0 auto;
    position: relative;
         top: 173px;
}
#instructions b { color: white; }

#instructions       .keyboard { display: block; }
#instructions       .touch    { display: none;  }
#instructions.touch .keyboard { display: none;  }
#instructions.touch .touch    { display: block; }

#controls {
  position: absolute;
    bottom: 0.5em;
      left: 0.5em;
}
#controls input,
#controls label { vertical-align: middle; }

#canvas       { display: block; width: 322px; height: 250px; }
#instructions { font-size: 10pt; }

#arkanoid {
  position: absolute; 
  left: 44px; 
  top: 133px; 
  height: 250px;
}
#arkanoid #canvas {
  background-color: white;
}