* 
{
    padding: 0;
    margin:  0;
	font-family: Arial, Helvetica, sans-serif;
}

html 
{
    background: #323232;
    height: 100%;
    width: 100%;
}

p {
    padding: 0.2em;
    color: #FFFFFF;
}

label {
    padding: 0.2em;
    color: #FFFFFF;
}

input {
    padding: 0.2em;
}

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

canvas 
{
    width: 100%;
    height: 100%;
    background: #646464;
    position: absolute;
    right: 0;
}

#ui {
    position: absolute;
    z-index: 1;
    color:rgba(0.0, 0.0, 0.0, 0.0);
    top: 20px;  
    left: 20px;
}

#ui p {
    color: white;
}

#notes {
    position: absolute;
    z-index: 1;
    color:rgba(0.0, 0.0, 0.0, 0.0);
    bottom: 20px;  
    left: 20px;
}

#controls {
    position: absolute;
    z-index: 1;
    color:rgba(0.0, 0.0, 0.0, 0.0);
    bottom: 20px;  
    right: 20px;
}

#controls p {
    color: white;
}

#notes p {
    color: white;
}

#size {
    position: absolute;
    z-index: 1;
    color:rgba(0.0, 0.0, 0.0, 0.0);
    top: 20px;  
    right: 20px;
}

#size p {
    color: white;
    text-align: right;
}

#loading {
    position: absolute;
    top: 50%;
    z-index: 1;
    color:rgba(0.0, 0.0, 0.0, 0.0);
    width: 100%;
}

#loading p {
    color: white;
    text-align: center;
}