.graph {
  position: relative;
  background: rgba(255, 255, 255, 0); }

.graph:focus {
  outline: #76d2b8 solid 0.2em; }

.graph div.background {
  position: absolute;
  background: #efefef; }

.graph div.button-layer {
  position: absolute;
  text-align: right; }

.graph div.button-layer a {
  opacity: 0.3;
  color: black;
  font-size: 120%; }

.graph div.button-layer a:hover {
  opacity: 1; }

.graph canvas.overlay {
  position: absolute;
  background: rgba(0, 255, 0, 0.05); }

svg.graph:focus {
  outline: #76d2b8 solid 0.2em; }

svg.graph text.title {
  font-size: 0.9em; }

svg.graph text.ylabel {
  font-size: 0.8em; }

svg.graph text.xlabel {
  font-size: 0.8em; }

svg.graph text.axis {
  font-size: 0.8em; }

svg.graph text.axis:focus {
  outline: #76d2b8 solid 0.2em; }

svg.graph rect.draggable-axis {
  fill: rgba(255, 255, 255, 0); }

svg.graph rect.draggable-axis:hover {
  fill: rgba(196, 196, 196, 0.2); }

svg.graph .ruler.hidden {
  visibility: hidden; }

svg.graph circle {
  fill: none;
  fill-opacity: 0.2;
  stroke: steelblue;
  cursor: move; }

svg.graph circle.selected {
  fill: #ff7f0e;
  stroke: #ff7f0e; }

svg.graph circle:hover {
  fill: #ff7f0e;
  stroke: #707f0e; }

svg.graph circle.selected:hover {
  fill: #ff7f0e;
  stroke: #ff7f0e; }

svg.graph .brush .extent {
  opacity: 0.2; }

.bar-graph {
  text-align: center;
  padding: 0.2em 0.4em;
  border-radius: 0.6em;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.05);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.08)), color-stop(100%, rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
  color: #555555; }
  .bar-graph text {
    fill: #555555; }
  .bar-graph .top-area p, .bar-graph .bottom-area p {
    padding-bottom: 0.2em; }
  .bar-graph .hidden {
    display: none; }
  .bar-graph .triangle {
    stroke: #555555;
    stroke-width: 1px;
    fill: #eeeeee; }
  .bar-graph .grid-line {
    stroke: white;
    stroke-width: 1px;
    opacity: 0.8; }
  .bar-graph .tick text {
    font-size: 0.8em; }
  .bar-graph .title {
    font-size: 1em;
    text-anchor: middle;
    margin: 0; }