@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700);

body
{
    font-family: "Roboto Slab", sans-serif;
    background: white;
    color: #333;
    font-size: 93.75%;
    line-height: 1.4;
    margin: 0;
}

code
{
    font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;
    background: #F5F5F5;
    border-radius: 4px;
    padding: 0.1em 0.3em;
}

a code, h1 code
{
    background: none;
    padding: 0;
}

a
{
    color: #B03931;
}

a:hover
{
    color: #742620;
}

h1, h2, h3
{
    font-weight: normal;
    line-height: normal;
}

h1
{
    font-size: 2.0em;
    margin: 1.5em 0 0.5em;
}

h2
{
    font-size: 1.5em;
    margin: 2em 0 0.5em;
}

table
{
    border-collapse: collapse;
}

td, th
{
    text-align: left;
    vertical-align: top;
    padding: 0.3em;
}

td
{
    border-bottom: 1px solid #E6E6E6;
}

th
{
    border-bottom: 1px solid #333;
}

td:not(:last-child), th:not(:last-child)
{
    padding-right: 1em;
}

td + td, th + th
{
    text-align: right;
    white-space: nowrap;
}

.significant
{
    font-weight: bold;
}

button, input[type=date]
{
    font: inherit;
    color: #333;
    background: white;
    border: 1px solid #CCC;
    border-radius: 4px;
    padding: 0.3em 0.6em;
}

button
{
    cursor: pointer;
}

button:hover, #range .active
{
    background: #E6E6E6;
    border-color: #ADADAD;
}

#range
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin: 1.5em 0;
}

#reset
{
    margin-left: auto;
}

.container, #top .helper
{
    margin: auto;
    max-width: 76em;
    padding: 0 1em;
}

/* top bar */

#top
{
    background: #B03931;
    border-bottom: 1px #98312A solid;
}

#top .helper
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#top a
{
    color: white;
    text-decoration: none;
    padding: 0.6em 1em;
    white-space: nowrap;
}

#top a:hover
{
    background: #98312A;
}

#top .logo
{
    margin-left: -5.4em;
    margin-right: -4em;
    padding: 1px 0 0;
}

#top .logo:hover
{
    background: none;
}

#top .logo img
{
    height: 2.533em;
    width: 13.69em;
    vertical-align: middle;
}

#top .title
{
    margin-right: auto;
}

#top nav
{
    display: flex;
}

@media only screen and (max-width: 40em)
{
    #top nav
    {
        display: none;
    }
}

/* charts */

#charts
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28em, 1fr));
    gap: 2em 3em;
}

.chart
{
    min-width: 0;
}

.chart h3
{
    font-size: large;
    margin: 0 0 0.5em;
}

.readout
{
    color: #555;
    font-size: small;
    margin: 0.3em 0 0;
}

.readout b
{
    color: #333;
}

.u-hz .u-cursor-x
{
    border-right: 1px solid #ADADAD;
}

.smallprint, .smallprint a
{
    color: #999;
    font-size: small;
}

.smallprint a:hover
{
    color: #555;
}

#copyright
{
    margin: 3em 0 1.5em;
    text-align: center;
}