app.css

/** css for crossfilter demo only **/

/** not sure why this is needed. foundation should be clearing rows.
#timeline {
  margin-top: 40px;
} **/

.titlebar {
  background: rgba(254, 206, 60, 0.8)
}

#progressbar {
  margin-bottom: 10px;
  font: 8px sans-serif;
  text-transform: uppercase;
}

.title {
  margin-bottom: 5px;
}

form span {
  margin-left: 5px;
}

form label {
  height: 20px;
}

form {
  margin-bottom: 10px;
}

/* for billets vendus input */
input[disabled] ~ span {
  opacity: 0.2;
}

.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: #ffbb78;
}

.previewing .foreground.bar {
  fill: #ccc;
}

.bar {
  cursor: pointer;
}

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.brush rect.extent {
  fill: #F2CFAC;
  fill-opacity: .125;
}

.brush .resize path {
  fill: #eee;
  stroke: #666;
}

.units {
  max-width: 100px;
  float: right;
  font-size: 12px;
  border: 0;
  margin: 0;
}

.crosshairs {
  cursor: move;
  font: 8px sans-serif;
}

.crosshairs line {
  stroke: #888;
}

.chart.sparse .scroller {
  height: 200px;
  overflow: auto;
  overflow-x: hidden;
}

.chart.sparse .mode {
  fill: #777;
  margin: 2px;
  font: 10px sans-serif;
  float:right;
  cursor: pointer;
}

.chart.sparse text {
  fill: #777;
  font: 10px sans-serif;
}

.chart.sparse .measure text.start {
  fill: #777;
  font: 8px sans-serif;
}

.chart.sparse .measure text.end {
  fill: #fff;
  font: 8px sans-serif;
}

.foreground.bar .preview {
  display: none;
}

.preview.active {
  fill: red;
}

.preview {
  stroke: white;  /* creates invisible surrounding area that's easier to hover over */
  fill: #aaa;
}

/* not working... check this */
#timeline .scroller {
  width: 1000px;
  overflow: auto;
  overflow-y: hidden;
}