* { MARGIn: 0; padding: 0; outline: 0 none; }
HTML { height: 100%; }
BODY { height: 100%; overflow: hidden; background-color: #FFF; }

.wrapper {
    padding: 5pt;
    height: 100%;
    max-width: 800px;
    margin: 0 auto;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

.wide-block {
    width: 100%;
    padding: 4px;
    border: 1px solid #666;
    background-color: #EEE;
    font-family: monospace;
    font-size: 10pt;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

TEXTAREA.program {
    resize: none;
}

.program {
    overflow-y: auto;
}

.controls {
    white-space: nowrap;
    padding: 5pt 0;
    height: 18pt;
}

.controls .log {
    line-height: 20pt;
    padding: 0;
    margin: 0;
}

.controls .button {
    float: right;
    margin-left: 5pt;
}

A.button {
    padding: 2px 4px;
    border: 1px solid #666;
    background-color: #DDD;
    text-decoration: none;
    font-size: 10pt;
    font-family: sans-serif;
    color: #666;
    line-height: 14pt;
}
A.button:hover {
    background-color: #EEE;
}

.placeholder-active {
    color: #BBB;
}

H1 {
    font-weight: normal;
    margin: 7pt 0 10pt 0;
    font-size: 18pt;
    text-align: center;
}

H1 .button {
    line-height: inherit;
    font-size: inherit;
    margin-left: 12pt;
}

#display-program {
    color: #999;
}

#display-program SPAN {
    color: #000;
}

#display-tape .current,
#display-program .current {
    padding: 1px;
    margin: -1px;
    background-color: #9F7;
    color: #000 !important;
}

#display-program .visited {
    color: #090;
}

#display-tape .error,
#display-program .error {
    padding: 1px;
    margin: -1px;
    background-color: #FCC;
}

#log.error {
    color: #A00;
}

#log.info {
    color: #0A0;
}

#log.warning {
    color: #B60;
}

#stats {
    font-family: monospace;
    color: #666;
    text-align: center;
}

#stats B {
    color: #333;
}