html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
  font-family:"Verdana", Geneva, sans-serif;
  overflow: hidden;
 
}
//#myCanvas{background-color:#000000;z-index:-1;overflow: hidden;position:fixed;}
#canvas{
background-color: #111;
}
#hud{
width:300px;
height: 100%;
background-color:#666666;
z-index:0;
position:absolute;
left:-250px;
opacity: 0.8;
}
#controls{
text-align: center;
float: left;
width:250px;
height:100%;
position:relative;
font-size: 20px;
}
#divSlider{
float: left;
width:50px;
height:100%;
position:relative;
text-align:center;
background-color: #666666;

}

#divSlider h1{
-webkit-transform: rotate(90deg);
-moz-transform:rotate(90deg);
}

input[type='range'] {
    -webkit-appearance: none !important;
    
    height:7px;
    width:80%;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background:#000000;
    height:20px;
    width:15px;
}