body { width: 1200px; margin: 1em auto; font-family: sans; }

#about { float: left; width: 400px; }
#graphs { width: 400px; }
#graphs figure { margin: 1em 0; position: relative; padding-top: 200px; }
#graphs figcaption { text-align: left; }
#graphs figure img { position: absolute; top: 0; left: 0; }
#graphs figcaption button {
    float: right; margin: 0 .25em;
    border: 3px solid black; background: gray; color: transparent;
    height: 1.5em; width: 1.5em; border-radius: .75em;
    overflow: hidden;
}
#graphs figcaption button.Result { border-color: blue; background: lightblue; }
#graphs figcaption button.Target { border-color: green; background: lightgreen; }
#graphs figcaption button.Input { border-color: red; background: pink; }
#graphs figcaption button.inactive { background: white; }

#details { width: 800px; float: right; }
#output { margin: 2em 0; text-align: center; }

#large { margin: 2em 0; text-align: center; }
#large div { margin: 0 1em; display: inline-block; vertical-align: top; }
#large .number { font-size: 3em; display: block; }
#large .icon { font-size: 3em; display: block; }
a.icon { color: black; opacity: 0.5; text-decoration: none; font-weight: bold; }
a.icon:hover { opacity: 1.0; }

dt { font-weight: bold; float: left; width: 7em; }

#process-info, #process-info ol { list-style: square; width: 800px; }
#process-info h2 { margin-top: 3em; }
#process-info li {margin: .5em 0;}
#process-info .rule { text-decoration: underline; }
#process-info .event {
    list-style-type: none; display: block;
    margin: 1.5em 5em; font-size: 95%; color: gray;
}

li { position: relative; }
.error { position: absolute; right: 0; top: 0; color: #666; }
.error:after { content: " bits"; }

.timeline { height: 2em; }
.timeline-phase { height: 2em; display: inline-block; }
.timeline-phase.start    { background: #d3d7cf; }
.timeline-phase.setup    { background: #edd400; }
.timeline-phase.localize { background: #729fcf; }
.timeline-phase.series   { background: #fcaf3e; }
.timeline-phase.rewrite  { background: #e9b96e; }
.timeline-phase.simplify { background: #8ae234; }
.timeline-phase.prune    { background: #ad7fa8; }
.timeline-phase.regimes  { background: #a40000; }