#chart {
  margin-left: auto;
  margin-right: auto;
  width: 840px;
}

#buttonbar {
  margin-left: auto;
  margin-right: auto;
  width: 110px;
}


#chart rect {
  stroke: white;
  fill:   steelblue;
}

#chart rect.retweets {
  fill:   darkblue;
}

#chart text {
  font: 10px sans-serif;
  color: white;
  stroke-width: 0px;
  /* fill: #cccccc; */
  fill: #333333;
}

#chart text.counter {
  fill: black;
}

#chart text.rule {
  fill: black;
}

#timelines text, #tfchart text {
  font: 12px sans-serif;
  color: white;
  stroke-width: 0px;
  /* fill: #cccccc; */
  fill: #333333;
}

#timelines .axis text {
  font-size: 14px;
}

#tfchart .axislabel , #tfchart .title {
  font-size: 14px;
}

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

#timelines .x.axis path {
  display: none;
}

#timelines .line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

#scalebar {
  padding-top: 5px;
  passing-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
  /* width: 520px; */
  width: 40em;
}

#tfchart line.connect {
  stroke: #33c;
}

#tfchart circle {
  stroke: black;
  fill: #33c;
}
  
#tfchart circle.start {
  fill-opacity: 0.4;
}

p.highlight {
  font: 14px Helvetica Neue;
  background-color: #222;
  background-color: rgb(65,102,133);
  background-image: -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(255,255,255,.11));
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,.25)),color-stop(1, rgba(255,255,255,.11)));
  background-image: -webkit-linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.11));
  color: #fff;
  text-rendering: optimizeLegibility;
  text-shadow: 0 -1px 1px #222;
  padding: 6px 10px 6px 10px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #222;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  margin: 1em 0;
  -moz-box-shadow: 0 1px 3px #999;
  -webkit-box-shadow: 0 1px 3px #999;
}