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

#large {margin: 2em 0; text-align: center;}
#large div {margin: 0 1em; display: inline-block;}
#large .number {font-size: 3em; display: block;}

.column-container { margin: 2em 0; }

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

#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 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;}
li.crash      {background-color: #4a4a4a; color: #f7f7f7;}
li.timeout    {background-color: #8e8e93; color: #f7f7f7;}

#about { margin: 3em auto; }
#about th { font-weight: bold; }

#flag-list kbd:not(:last-child):after {content: ", ";}

#results { border-collapse: collapse; width:100%; }
#results td { text-align: right; padding: .5em; overflow: hidden; font-size: 15pt; }
#results td.bad-est {border-right: 5px solid #c86edf;}
#results tbody tr:hover {background-color: #e0f8d8; cursor: pointer;}

#results td:nth-child(1) {text-align: left;}
#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:#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;}