body {
    font-family: "Helvetica Neue";
    margin: 40px auto;
    width: 960px;
    min-height: 2000px;
}
#body {
    position: relative;
}
footer {
    padding: 2em 0 1em 0;
    font-size: 12px;
}
h1 {
    font-size: 96px;
    margin-top: .3em;
    margin-bottom: 0;
}
h1 + h2 {
    margin-top: 0;
}
h2 {
    font-weight: 400;
    font-size: 28px;
}
h1, h2 {
    font-family: "Yanone Kaffeesatz";
    text-rendering: optimizeLegibility;
}
#body > p {
    line-height: 1.5em;
    width: 640px;
    text-rendering: optimizeLegibility;
}
#charts {
    padding: 10px 0;
}
.chart {
    display: inline-block;
    height: 151px;
    margin-bottom: 20px;
}
.reset {
    padding-left: 1em;
    font-size: smaller;
    color: #ccc;
}
.background.bar {
    fill: #ccc;
}
.foreground.bar {
    fill: steelblue;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.axis text {
    font: 10px sans-serif;
}
.brush rect.extent {
    fill: steelblue;
    fill-opacity: .125;
}
.brush .resize path {
    fill: #eee;
    stroke: #666;
}
#hour-chart {
    width: 260px;
}
#delay-chart {
    width: 230px;
}
#distance-chart {
    width: 420px;
}
#date-chart {
    width: 920px;
}
#record-list {
    min-height: 1024px;
}
#record-list .date,
#record-list .day {
    margin-bottom: .4em;
}
#record-list .record {
    line-height: 1.5em;
    background: #eee;
    width: 640px;
    margin-bottom: 1px;
}
#record-list .time {
    color: #999;
}
#record-list .record div {
    display: inline-block;
    width: 100px;
}
#record-list div.distance,
#record-list div.delay {
    width: 160px;
    padding-right: 10px;
    text-align: right;
}
#record-list .early {
    color: green;
}
aside {
    position: absolute;
    left: 740px;
    font-size: smaller;
    width: 220px;
} 