style.css

body {
  margin: auto;
  font-family: sans-serif;
  overflow: hidden;
}
.background-image {
  background: url(images/howard-bouchevereau-cOfR4XmEzd8-unsplash.jpg) no-repeat center center fixed; 
  background-size: cover;
  display: block;
  filter: blur(2px) brightness(0.65) sepia(.5) opacity(.9);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 1;
}
.container {
  width: 700px;
  margin: auto;
  z-index: 2;
  padding: 20px;
  height: 2000px;
  border-right: 1px solid rgb(151, 151, 151);
  border-left: 1px solid rgb(151, 151, 151);
  box-shadow: -5px -5px 15px -5px rgb(151, 151, 151), 5px -5px 15px -5px rgb(151, 151, 151);
  background-color: rgb(255, 255, 255);
}
pre {
    font-size: 20px;
}
h3 {
    border-bottom: 1px solid #aaa;
}
.stage {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  background-color: #F2BB00;
  color: #FFF;
}
.container {
  position: relative;
}
.stage-control {
  cursor: pointer;
  position: absolute;
  top: 20px;
  font-weight: bold;
  font-size: 26px;
  line-height: 30px;
  color: #FFF;
}
.control-down {
  left: 30px;
}
.control-up {
  right: 30px;
}
.theme-example .x.axis .domain {
  stroke: lightblue;
}
.theme-example text {
  font-family: serif;
}
.area {
  fill: steelblue;
}
circle.marker {
  fill: darkblue;
}
#map {
  clear:both;
  height: 400px;
}
.chroniton {
  font: 10px sans-serif;
  outline:none;
}
.chroniton .play-button {
  fill:#444;
  cursor: pointer;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.x.axis, .slider text {
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}
.x.axis path.domain {
  stroke-width:10;
  stroke-linecap:round;
  stroke:#ddd;
}
.x.axis path.halo {
  stroke-width:12;
  stroke-linecap:round;
  stroke:#ccc;
}
.tick line {
  stroke:#d0d0d0;
  stroke-width:1;
  transform:translate(0px, -5px);
}
.slider .handle {
  fill: #fff;
  stroke-width:1;
  stroke:#333;
}
.slider .handle, .slider text {
  cursor: move;
  cursor: -webkit-grab;
  transition:fill 200ms ease-in-out;
}
.handle:active, .slider text:active {
  cursor: move;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
.slider.brushing .handle {
  fill: #F2BB00;
}
.label {
  font:bold 12px sans-serif;
}
.elevation-area {
    fill: #F2BB00;
    opacity:1;
}
.elevation-indicator {
    fill:black;
}
.chart text {
    font-size:10px;
}