body {
    color: #222;
    margin: 0;
    padding: 0;
    font-family: 'Quicksand', sans-serif;
    background: #fafaf8;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Merriweather', serif;
}

a {
    color: #337ab7;
}

a:hover {
    color: #337ab7;
}

p, li, figcaption {
    font-size: 18px;
}

p.lead {
    font-size: 24px;
}

.header {
    text-align: center;
    padding: 10px 0 15px;
    border-bottom: 1px solid #eee;
}

.header h1 a {
    color: #222;
    text-decoration: none;
}

.content {
    background: #fff;
    padding: 20px 0 30px 0;
}

.footer {
    border-top: 1px solid #eee;
    text-align: center;
    padding: 20px 0 40px 0;
}

table {
    font-family: sans-serif;
    font-size: 18px;
}

.top-form {
    background: #fafaf8;
    border: 1px solid #eee;
    margin: 15px 0 20px;
    padding: 20px 10px 10px;
}

.help-block {
    font-size: 100%;
}

.autocomplete-menu {
    position: absolute;
    top: 100%;
    left: 10px;
    right: 10px;
    z-index: 1000;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    max-height: 320px;
    overflow-y: auto;
}

.autocomplete-item {
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete-item.active {
    background: #f0f4f8;
}

.autocomplete-type {
    color: #999;
    margin-right: 8px;
}

.autocomplete-name {
    font-weight: 500;
}

.autocomplete-desc {
    color: #999;
    margin-left: 8px;
    font-size: 90%;
}

.chart {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 200px;
    padding: 0;
    margin: 0;
    margin-bottom: 3em;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
}

.chart li {
    position: relative;
    display: table-cell;
    vertical-align: bottom;
    height: 200px;
}

.chart span {
    margin: 0 15%;
    display: block;
    background: #337ab7;
}

.chart span.active {
    background: #d9534f;
}

.chart span.all {
    background: #999;
}

.chart span.all.active {
    background: #d9534f;
}

.chart span:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding-top: 5px;
    display: block;
    text-align: center;
    content: attr(month);
    font-size: 90%;
    font-weight: bold;
    color: #333;
}

.minichart {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 24px;
    padding: 0;
    margin: 0;
}

.minichart li {
    position: relative;
    display: table-cell;
    vertical-align: bottom;
    height: 24px;
}

.minichart span {
    margin: 0 0.5px;
    display: block;
    background: #337ab7;
}

.minichart span.active {
    background: #d9534f;
}

/* keep column headers visible while scrolling a long table. !important is
   needed because bootstrap-sortable.css sets position: relative on sortable
   headers (th:not([data-defaultsort=disabled])) at a higher specificity, which
   would otherwise clobber the sticky positioning. */
table.sortable thead th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
    background: #fff;
    /* Bootstrap's 2px header border is dropped in favor of a box-shadow: under
       border-collapse the real border doesn't travel with a sticky cell, and
       keeping both showed a double line before scrolling. The shadow is the
       single separator in both states. */
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 #ddd;
    z-index: 2;
}

/* Grouped header row: labels ("Evidence", "Sampling", "Score") that span
   related numeric columns to explain why so many columns exist. It is not
   sortable and, unlike the main header row, not sticky — it scrolls away while
   the real header below stays pinned. Overriding the sticky rule above needs
   !important on position for the same reason that rule does. */
table.sortable thead tr.group-row th {
    position: static !important;
    top: auto;
    box-shadow: none;
}

.group-row .grp {
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: bold;
    color: #999;
    border-bottom: 1px solid #ddd;
    padding-bottom: 2px;
}

/* Subtle vertical separators at the left edge of each column group (Evidence,
   Sampling, Score). Drawn as an inset box-shadow rather than a real border
   because border-collapse drops borders on sticky header cells when they stick
   — the same reason the header's bottom hairline is a shadow. Body and header
   both inset from the same column edge, so the line stays continuous. */
.table td.grp-start,
.table th.grp-start {
    box-shadow: inset 1px 0 0 #eee;
}

/* Main header cells also carry the sticky bottom hairline; keep both. */
table.sortable thead th.grp-start {
    box-shadow: inset 1px 0 0 #eee, inset 0 -1px 0 #ddd;
}

/* Group-row labels are static and keep their own bottom border, so only add
   the left separator here (higher specificity than the group-row reset above). */
table.sortable thead tr.group-row th.grp-start {
    box-shadow: inset 1px 0 0 #eee;
}

/* Supporting count columns sit on a magnitude tint, so their text is muted to
   let the scored columns read as the row's headline numbers. */
.num-cell {
    color: #555;
}

.hero-cell {
    font-weight: bold;
    color: #222;
}