#container {
    position: relative;
    width: 100%;
    margin-bottom: 1em;
    margin-top: 2em;
}

.layer {
    position: absolute;
    left: 0px;
    top: 0px;
    cursor: crosshair;
}

#boxLayer {
    width : 100%;
    z-index: 2;
    display: none;
}

#fractLayer {
    width : 100%;
    z-index: 1;
}

#back_button {
    display: none;
    float: right;
}

#reset_button {
    margin: 0 0 3em 0;
}

#render_again_button {
    float: left;
}

#reset_func_button {
    float: right;
}

#imageURL {
    float: right;
}

table#data_tab {
    width: 100%;
    border-collapse:collapse;
    table-layout: fixed;
    margin: 0 0 0.5em 0;
}

div#data {
    margin: 0.5em 0 2em 0;
    width: 30em;
}

div#logs {
    margin: 2em 0 0em 0;
    padding: 1em 0 0 0;
    border-top: 1px solid #000;
}

div#prog {
    margin: 2em 0 0em 0;
    padding: 0em 0 0 0;
    border-top: 1px solid #000;
}

#winJSON {
    width: 100%;
    height: 3em;
    margin: 0.5em 0 0.5em 0;
}

.fractButton {
    text-align: center;
    font-size: 100%;
    font-style: oblique;
    background: #f8f8f8;
    border: solid;
    border-color: #cccccc;
    border-width: 1px;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    transition-property: font-size;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    margin-bottom: 0.2em;
}

.fractButton:hover {
    font-size: 110%;
}

#shader_code {
    font-size : 110%;
}

#shader_code:focus, #shader_code:active {
    outline: none;
    border: none;
}

.reserved {
    color: #660066;
}

.comments {
    color: #a4a4a4;
}

.error {
    color: red;
}