/* 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; }}

/* Arrow chart */

figure { float: left; margin: 0; }
#graph { cursor: pointer; }
#graph line { pointer-events: all; }
#graph .good * { stroke: black; fill: black; }
#graph .bad * { stroke: darkred; fill: darkred; }
#graph .nodiff * { stroke: gray; fill: gray; }
#graph .gridline { stroke: rgb(80%, 80%, 80%); }
#graph .guide { stroke: rgb(60%, 60%, 60%); }
#graph text { text-anchor: middle; }
#graph .arrow { stroke-width: 3px; stroke-opacity: 0.6; fill-opacity: 0.6; }
#graph .arrow:hover { stroke-opacity: 1.0; fill-opacity: 1.0; }
#graph.highlight-one .arrow {opacity: .5;}
#graph.highlight-one .arrow.highlight {opacity: 1;}

/* Per-input badges */

#test-badges {  cursor: pointer; list-style: none inside none; padding: 0; width: 300px; float: right; margin: 10px 0; font-size: 12pt; }
#test-badges li { height: 40px; line-height: 40px; width: 75px; float: left; text-align: center; }
#test-badges a { color: black; }
#test-badges a:hover { color: black; text-decoration: none; }
#test-badges li:hover { font-size: 15pt; }
#test-badges.highlight-one li { opacity: .333; }
#test-badges.highlight-one li.highlight { opacity: 1; }

li.imp-start  {background-color: #87fc70;}
li.apx-start  {background-color: #ff9500;}
li.uni-start  {background-color: #ff5e3a; color: #f7f7f7;}
li.ex-start   {background-color: #e0f8d8;}

li.gt-target  {background-color: #0bd318;}
li.eq-target  {background-color: #87fc70;}
li.lt-target  {background-color: #ffdb4c;}
li.eq-start   {background-color: #ff9500;}
li.lt-start   {background-color: #ff5e3a; color: #f7f7f7;}
#test-badges li.crash      {background-color:#ff9d87; color:#ed2b00; border: 2px solid #ff5e3a; width: 71px; height: 36px; line-height: 36px; }
li.error      {background-color: #4a4a4a; color: #f7f7f7;}
li.timeout    {background-color: #8e8e93; color: #f7f7f7;}

/* Flag list / configuration */

#about { margin: 3em 0; }
#about th { font-weight: bold; text-align: left; padding-right: 1em; }

#flag-list { position: relative; }
#flag-list kbd:not(:last-child):after {content: ", ";}
#flag-list a {float: right; margin: 0 .5em;}
#flag-list a:before { content: "("; }
#flag-list a:after { content: ")"; }
#flag-list #changed-flags { display: none; }
#flag-list #all-flags { display: block; }
#flag-list.changed-flags #changed-flags { display: block; }
#flag-list.changed-flags #all-flags { display: none; }

/* Table of results */

#results { border-collapse: collapse; width:100%; }
#results th { white-space: pre; }
#results td { text-align: right; padding: .5em; overflow: hidden; font-size: 15pt; }
#results tbody tr:hover {background-color: #e0f8d8; cursor: pointer;}

#results a {
    position: absolute; left: 0; right: 0; z-index: 100;
    padding: .5em; margin-top: -1.25em;
}

#results td:nth-child(1) { text-align: left; word-break: break-all; }
#results td:nth-child(7) {width: 0;}

tr.imp-start  td:nth-child(3) {background-color:#87fc70;}
tr.apx-start  td:nth-child(3) {background-color:#ff9500;}
tr.uni-start  td:nth-child(3) {background-color:#ff5e3a;color:#f7f7f7;}
tr.ex-start   td:nth-child(3) {background-color:#e0f8d8;}

tr.gt-target  td:nth-child(3) {background-color:#87fc70;}
tr.gt-target  td:nth-child(4) {background-color:#0bd318;}
tr.eq-target  td:nth-child(3) {background-color:#87fc70;}
tr.eq-target  td:nth-child(4) {background-color:#87fc70;}
tr.lt-target  td:nth-child(3) {background-color:#87fc70;}
tr.lt-target  td:nth-child(4) {background-color:#ff9500;}
tr.eq-start   td:nth-child(3) {background-color:#ff9500;}
tr.eq-start   td:nth-child(4) {background-color:#ffdb4c;}
tr.lt-start   td:nth-child(3) {background-color:#ff5e3a;color: #f7f7f7;}
tr.lt-start   td:nth-child(4) {background-color:#ffdb4c;color: #f7f7f7;}

tr.crash      td:nth-child(3) {background-color:#ff9d87; color:#ed2b00; border: 2px solid #ff5e3a; margin: -2px; }
tr.error      td:nth-child(3) {background-color:#4a4a4a;color:#f7f7f7;}
tr.timeout    td:nth-child(3) {background-color:#8e8e93;color:#f7f7f7;}

#results.no-target td:nth-child(4) {display: none;}
#results.no-target th:nth-child(4) {display: none;}
#results.no-inf td:nth-child(5) {display: none;}
#results.no-inf th:nth-child(5) {display: none;}

/* Help button */

.help-button {
 display: inline-block; background: #888;
 font-size: .8em; color: #eee; line-height: 1.3em;
 height: 1.25em; width: 1.25em; border-radius: .625em;
 vertical-align: top;
}
.help-button:hover { background: #444; cursor: pointer; }

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

/* 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; }