/* Standard Herbie header */

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

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; right: -340px; top: -15px;
    transform: rotate(90deg); transform-origin: top left;
    font-size: 24px; font-weight: normal; color: #aaa;
}

/* Big block for program input output */

#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; }

/* Error graphs */

#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; }

.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; }

/* Try it out section */

#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; }

/* Derivation */

.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 / debug info */

#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 > p { margin: 1em .75em 0; }

.timeline { height: 2em; border: 1px solid #888; border-width: 1px 0px; margin-bottom: 1em; }
.timeline-phase { height: 2em; border-left-style: solid; display: inline-block;}
@media print {
    .timeline { border: none; }
    .timeline-phase { outline: 1px solid black; }
}

/* Blocks of information */

.timeline-block { border-left: 1ex solid transparent; padding: 1px 1ex;}
.timeline-block h3 { margin: 0; font-size: 110%; font-weight: normal; }
.timeline-block p { margin: 0; }
.timeline-block h3 .time { float: right; }

.timeline-block dl { font-size: 90%; }
.timeline-block dt { min-width: 6em; float: left; font-size: 100%; }
.timeline-block dd { margin: 0 0 1ex 6em; max-width: 100%; overflow: auto; }
table.times td { text-align: right; min-width: 8ex; }
table pre { padding: 0; margin: 0; text-align: left; }

/* Timeline colors */

.timeline-start    { border-left-color: #d3d7cf; }
.timeline-setup    { border-left-color: #edd400; }
.timeline-localize { border-left-color: #729fcf; }
.timeline-series   { border-left-color: #fcaf3e; }
.timeline-rewrite  { border-left-color: #e9b96e; }
.timeline-simplify { border-left-color: #8ae234; }
.timeline-prune    { border-left-color: #ad7fa8; }
.timeline-regimes  { border-left-color: #a40000; }
.timeline-bsearch  { border-left-color: #8c0000; }

/* Code sample to reproduce */

#reproduce pre { padding: 1em; margin: 0; font-family: monospace; overflow-x: auto; }
pre.shell code:before { content: "$ "; font-weight: bold; }

/* Target / expected code block */

#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; }

/* Formatting backtraces */

#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; }