main.css

body
{
    background-color: #666;
    font-family: "DejaVu Sans", sans-serif;
    font-size: 8pt;
    margin: 10px;
    padding: 0;
}

a
{
    text-decoration: none;
    font-weight: bold;
    color: black;
}

a:hover
{
    text-decoration: underline;
}

#container
{
    margin: auto auto;
    margin-top: 40px;
    position: relative;
}

#viewport
{
    margin-bottom: 10px;
    position: relative;
}

#viewport canvas
{
    background-color: #ccc;
}

#selectionNodeInfo
{
    position: absolute;
    bottom: 4px;
    left: 4px;
}

#controls
{
    position: absolute;
    top: 0;
    right: 0;
}


#selectionControls, #genericControls
{
    margin-left: auto;
    margin-bottom: 10px;
    background-color: #ccc;
}

#selectionControls { display: none; }

#controls p { margin: 0; }

#controls h2
{
    margin: 0;
    margin-top: 0.5em;
    font-size: 1em;
    font-weight: bold;
}

#controls ul
{
    list-style: none;
    margin: auto;
    margin-top: 0.7em;
    margin-bottom: 20px;
}

#controls ul:last-child { margin-bottom: 0; }

#controls li { margin-bottom: 2px; }

#console
{
    overflow: auto;
    font-family: "DejaVu Sans Mono", monospace;
    white-space: pre;
    background-color: #ccc;
    display: none;
}

#console p { margin: 0; }



/* Borders, padding, width/height */
#container { width: 955px; }

#viewport
{
    border: 4px solid #000;
    width: 800px;
    height: 600px;
}

#controls { width: 140px; }

#controls ul
{
    width: 110px;
    padding: 0;
}

#selectionControls, #genericControls
{
    border: 4px solid #000;
    padding: 5px;
}

#controls input[type=button], #controls select { width: 110px; }
#controls input[type=text],
#controls input[type=range] { width: 60px; }

#console
{
    border: 4px solid #000;
    width: 790px;
    height: 150px;
    padding: 5px;
}