style.css

body {
    background: #000;
    font-family: "Helvetica Neue", Helvetica, Geneva, sans-serif;
}
#editor {
    font-size: 20px;
    position: absolute;
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
    opacity: 0.2;
    z-index: 10;
    -webkit-transition: opacity 0.5s ease;
}

.message {
    width: 80%;
    left: 10%;
    top: 0;
    position: absolute;
    color: red;
    font-size: 1.6em;
    font-family: 'Courier New';
    border: 5px solid red;
    z-index: 2;
}
.message p {
    margin: 0;
    padding: 5px;
}

#editor.active {
    opacity: 0.8;
}
#canvas {
    position: absolute;
    top: 0; left:0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    background-color: #000;
    z-index: 0;
}

#samplelist {
  right: 0;
}
#samplelist.hidden {
    right: -180px;
}
#keylist li {
    color: #fff;
}
#keylist li:first-child {
    text-align: left;
    width: 200px;
}

#keylist, #samplelist {
    position: absolute;
    top: 100px;
    width: 200px;
    list-style-type: none;
    background: rgba(50,50,50,0.5);
    padding: 0.5em;
    border-radius: 5px;
    opacity: 0.5;
    -webkit-transition: left 0.5s ease-in-out;
}

#keylist {
  left: 0;
}
#keylist.hidden {
    left: -180px;
}
#keylist, #samplelist li {
    display: block;
    color: #fff;
    background: rgba(70,70,70,0.5);
    border-radius: 5px;
    margin: 2px;
    padding: 5px;
    width: 180px;
}
#keylist li a {
    color: #fff;
}
#keylist li:first-child {
    text-align: right;
    width: 200px;
}

#progress.in-progress { -webkit-transform: translate3d(0, 100px, 0); }
#progress { color: #fff; border-radius: 10px; -webkit-transition: -webkit-transform 1s; position: absolute; top: -100px; height: 100px; background: #111; width: 80%; margin: 0 auto;}
#progress progress { width: 100%; }

.help-bubble {
  position: fixed;
  width: 100%;
  padding-top: 0.5em; padding-bottom: 0.5em;
  bottom: 1em;
  color: yellow;
  text-align: center;
}