
html, body {
    width: 100%;
}

#cover {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color:#232221;

    height: 100%; /* ???? */
}

#cover-content {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:30px;
/*    bottom:0; */
}




#cover-content canvas {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
/*
    opacity: 0;
    -webkit-transition: opacity .8s;
    -moz-transition: opacity .8s;
    transition: opacity .8s; 
*/    
}

#controls {
    position: absolute;
    width: 100%;
    text-align: center;
    display: none;
    font-size:0;
}

#controls .button {
    display: inline-block;
    width: 80px;
    height: 24px;
    margin: 1px;

    font-family: "Verdana", "sans-serif";
    font-size: 10px;
    line-height: 24px;
    text-decoration: none;
    text-align: center;

/*    background-color: rgb(0,0,0); */
    background-color: rgba(0,0,0,.45);
/*    color: #FFF; */
    color: rgba(255,255,255,.75);
}

#controls .button:hover,
#controls .button:focus {
    color: #FFF;
/*    background-color: rgb(0,0,0); */
    background-color: rgba(0,0,0,.65);
}

.saving-text {
    width:100%;
    text-align: center;
    font-family: "Verdana", "sans-serif";
    font-size: 10px;
}
