* { box-sizing: border-box; }

body {
  font-family: "Helvetica Neue", Helvetica;
  font-size: 16px;
  background-image: url('../images/background.png');
  text-rendering: optimizeLegibility;
  padding: 1em;
  width: 1024px;
}

h1, h2, h3, h4, aside {
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0.5em 0em 0.5em;
}
h1 { font-size: 1.3em; }
h2 { font-size: 1.1em; }
h3 { font-size: 1.0em; }
h4 { font-size: 0.9em; }

input {
  margin-left: 10px;
  margin-right: 5px;
}

#notice {
  font-size: 3em;
  font-weight: 100;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background-color: white;
  background: -moz-radial-gradient(50% 50%, circle, white 150px, lightgray 600px);
  background: -webkit-gradient(radial, 50% 50%, 150, 50% 70%, 600, from(white), to(lightgray));
  display: none;
}
#notice > div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10em;
  height: 4em;
  margin: -2em 0px 0px -5em;
}

.actions {
  padding: 5px;
  font-size: 0.8em;
}

.search {
  font-family: "Courier New", monospace;
  overflow: hidden;
}

.search > div {
  float: left;
  padding: 5px;
}

.text, .total, .allocation, .offset, .duration {
  font-weight: bold;
}

.search > .time {
  width: 6em;
}

.search > .text {
  width: 22em;
}

.search > .total {
  text-align: right;
  width: 4em;
}

.search > .offset {
  text-align: right;
  width: 2em;
}

.search > .duration {
  text-align: right;
  width: 6em;
}

span#active, span#total {
  font-weight: bold;
}

#body > p {
  line-height: 1.5em;
  width: 800px;
  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;
}

#search-list {
  min-height: 1024px;
}

#search-list .date,
#search-list .day {
  margin-bottom: .4em;
}

#search-list .search {
  line-height: 1.5em;
  background: #eee;
  margin-bottom: 1px;
}

#search-list .time {
  color: #999;
}

#search-list .early {
  color: green;
}

aside.totals {
  float: right;
}