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

  padding-bottom: 0.5em;
}

#chart {
    padding-top: 0.5em;
}

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

.chart text {
  font: 10px sans-serif;
  color: black;
  stroke-width: 0px;
  fill: black;
}

.chart text.counter {
  fill: black;
}

.chart text.rule {
  fill: black;
}

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

text.axislabel {
  font-size: 16px;
}

h2 { margin-bottom: 1em; }

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;
}