/* Standard Herbie header */

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

a {color: #2A6496; text-decoration: none; cursor: pointer}
a:hover {text-decoration: underline; color: #295785}

#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; }
@media print { #large { margin-top: 0; }}

/* Detail page layout */

section { margin: 5em 0; position: relative; }
@media print { section { margin: 3em 0; } }
section h1 {
    position: absolute; width: 300px; text-align: left; right: -340px; top: -15px;
    font-size: 24px; color: #aaa; transform: rotate(90deg); transform-origin: top left;
}

#program { background: #ddd; padding: 1em; text-align: center; font-size: 24px; }
@media print { #program { padding: 0; background: transparent; margin: 2em 0; } }
#program .program { display: inline-block; }
#program .arrow { color: transparent; font-size: 0; }
#program .arrow:after { content: "↓"; color: black; font-size: 24px; }
#program.horizontal .arrow { display: inline-block; }
#program.horizontal .arrow:after { margin: 0 1em; content: "→"; font-size: 40px; }

#graphs figure { margin: 1em auto; position: relative; padding-top: 300px; width: 800px; }
#graphs figcaption { text-align: left; }
#graphs figure img { position: absolute; top: 0; left: 0; }
#graphs figcaption button {
    float: right; margin: 0 .25em; cursor: pointer;
    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; }

#try-result output { font-size: 108%; margin: 0 .5em; float: right; }
#try-result div { overflow: auto; }
#try-result table { line-height: 1.5; margin-top: .25em; }
#try-result { width: 39%; float: right; }
#try-result p.header { margin: 0 0 .5em; font-size: 120%; color: #444; border-bottom: 1px solid #ccc; line-height: 1.5; }
#try-result label:after { content: ":"; }

#try-inputs-wrapper { width: 59%; display: inline-block; }

#try-inputs ol { list-style: none; padding: 0; display: inline-block; margin: 0 0 0 -1em; }
#try-inputs ol label { min-width: 4ex; text-align: right; margin-right: .5em; display: inline-block; }
#try-inputs li { margin-left: 1em; display: inline-block; font-size: 110%; font-family: monospace; line-height: 2; }
#try-inputs label:after { content: ":"; }
#try-inputs input { padding: 1px 4px; width: 25ex; }
#try-inputs p.header { margin: 0 0 .5em; font-size: 120%; color: #444; border-bottom: 1px solid #ccc; line-height: 1.5; }

#try-error { color:  red; font-size: 120%; display: none; }

.error #try-error { display: block; }
#try-result.error table { display: none; }

.tabbar { margin: -1.25em 0 0; padding: 0; list-style-type: none; list-style-position: inside; text-align: left; }
.tabbar p { display: inline-block; margin: 0 .5em 0 0}
.tabbar li { padding: .5ex; display: inline-block; margin: .1em; cursor: pointer; }
.tabbar li:hover { background: #e4e4e4; }
.tabbar li.selected { background: #d3d3d3; }
h1 { margin: .67em .33em; text-align: center; vertical-align: top; font-size: 3em; font-weight: normal; }

.history, .history ol { list-style: none inside; width: 800px; margin: 0 0 2em; padding: 0; }

.history li p { width: 150px; display: inline-block; margin: 0 25px 0 0; }
.history li .error { display: block; color: #666; }
.history li > div { display: inline-block; margin: 0; width: 600px; vertical-align: middle; }
.history li > div > div { margin: 0; display: inline-block; text-align: right !important; }

.history h2 { margin: 1.333em 0 .333em; }
.history li {margin: .5em 0; border-top: 1px solid #ddd; padding-top: .5em; }
.history li:first-child { border-top: none; padding-top: 0; }
.history .rule { text-decoration: underline; }
.history .event { display: block; margin: .5em 0; }

#process-info { background: #ddd; }
#process-info p.header { font-size: 110%; padding: 1em 1em .5em; margin: 0; }
#process-info p.header .attachment { float: right; margin: 0 0 0 1em; }
#process-info pre { padding: 1em; margin: 0; font-family: monospace; overflow-x: auto; }
#process-info p { margin: 1em .75em 0; }
pre.shell code:before { content: "$ "; font-weight: bold; }

#comparison table { width: 300px; display: inline-table; vertical-align: top; }
#comparison table th { text-align: left; }
#comparison table td { text-align: right; }
#comparison div { display: inline-block; width: 500px; }

.timeline { height: 2em; border-top: 1px solid #888; border-bottom: 1px solid #888; }
.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; }
@media print {
    .timeline { border: none; }
    .timeline-phase { outline: 1px solid black; }
}

#backtrace table { width: 100%; }
#backtrace th[colspan] { text-align: left; }
#backtrace th { text-align: right; }
#backtrace td:nth-child(3), #backtrace td:nth-child(4) { text-align: right; }
#backtrace td.procedure { font-family: monospace; }