body {
    background-color: gray;
    background-image: url('med-tile.png');
}

div#fft_paint_gui {
    background-color: #996;
    border: solid black 3px;
    display: table;
    margin: auto;
    padding: 16px;
    min-height: 580px;
    height: 580px;
}

div#fft_paint_gui > table,
div#fft_paint_gui > table > tr,
div#fft_paint_gui > table > td {
    height: 100%;
}

div#image_side {
    background-color: #ffc;
    border: solid black 1px;
    padding: 12px;
}

div#image_side > img,
div#image_side > canvas {
    margin-left: auto;
    margin-right: auto;
}

div#image_side > div.canvas_container {
    border: solid black 1px;
    position: relative;
}

div#image_side > div.canvas_container:first-child {
    margin-bottom: 8px;
}

div#image_side > div.canvas_container > canvas {
    position: absolute;
    top: 0;
    left: 0;
}

div#control_side {
    position: relative;
    width: 405px;
}

div#tool_bar {
    display: table-row;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

div#tool_bar > div.tool_bar_button {
    display: inline;
    margin: 0;
    position: relative;
    height: 64px;
    width: 64px;
}

div#tool_bar > div.tool_bar_button > img,
div#tool_bar > div.tool_bar_button > input {
    height: 64px;
    width: 64px;
}

div#tool_bar > div.tool_bar_button > img {
    position: absolute;
    bottom: 4px;
    left: 0;
    z-index: 1;
}

div.controls {
    background-color: #ffc;
    border: solid black 1px;
    padding: 8px;
    visibility: hidden;
}

div.controls {
    position: absolute;
    left: 0;
    right: 0;
    top: 70px;
    height: 450px;
}

div.controls > h2 {
    background-color: #330;
    border: solid black 1px;
    color: #cc9;
    font-variant: small-caps;
    margin-top: 0px;
    text-align: center;
}

div.collapsed {
    visibility: collapse;
    height: 0;
    width: 0;
    line-height: 0;
    overflow: hidden;
}

canvas#real_color,
canvas#imag_color,
canvas#paint_brush,
table#brush_palette img,
table#symmetries img {
    border: solid black 1pt;
}