body {
 background-color:#FFF;
 color:#000;
}
.content {
 font:.6875em Verdana, sans-serif;
}
a {
 color:#000;
 text-decoration:underline;
}
a:hover {
 text-decoration:none;
}
h1 {
 font-size:2.265em;
 font-weight:700;
}

.graph {
 width: 555px;
 height: 340px;
 margin-bottom:2em;
}
.graph-row {
 text-align: center;
}
.graph-container {
 width: 600px;
 height: 340px;
 display: inline-block;
}

.tooltip {
 -moz-border-radius:.5em;
 -webkit-border-radius:.5em;
 border-radius: .5em;
 background-color:#000;
 color:#FFF;
 display:none;
 opacity:0.8;
 padding:.25em;
 position:absolute;
}
.tooltip a:link, .tooltip a:active, .tooltip a:visited {
 color:#FFF;
 text-decoration: underline;
}
.tooltip a:hover {
 color:#FFF;
 text-decoration: none;
}

.closeable {
 padding: 15px;
 opacity: 1.0;
 text-align: left;
 padding-top: 8px;
}

.closeButton {
 color:#CCC;
 font-family: monospace;
 cursor: pointer;
 float: right;
}

.tiptext {
 background: #222;
 -moz-border-radius:.5em;
 -webkit-border-radius:.5em;
 border-radius: .5em;
 padding: 10px;
 clear: both;
}

#navcontainer {
 padding-top: 120px;
 display: inline;
 position: fixed;
 margin-left: -20px;
 left: 0;
 height: 100%;
}

.menu {
 text-align: left;
 list-style-type: none;
}

.menu li a {
 text-decoration: none;
}

.menu li a:hover {
 text-decoration: underline;
}

#legend {
 text-align: left;
 list-style-type: none;
}

#legend li {
 border-left: 1.2em solid #FFF;
 margin-right: 2em;
 padding-left: .3em;
 margin-bottom: .2em;
 font-size: 1.2em;
}

#about {
 display: none;
 margin-left: 350px;
 width: 700px;
}

#breakdown {
 display: none;
 margin-left: 350px;
 width: 700px;
}

.clicked {
 font-weight: bold;
}

.inactive {
 color: #aaaaaa;
}

#message {
  font-style: italic;
}

.axisLabel {
	position: absolute;
	text-align: center;
	font-size: 0.9em;
}

.yaxisLabel {
	top: 50%;
	left: 2px;
	margin: -25px;
	transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform:  rotate(-90deg);
	transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
}

.ie7 .yaxisLabel, .ie8 .yaxisLabel {
	top: 40%;
	font-size: 1.1em;
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.0, M12=0.33, M21=-0.33, M22=0.0,sizingMethod='auto expand');
}


header * {
	box-sizing: border-box;
}

header {
  background-color: #42637b;
  color: white;
  -webkit-box-shadow: 0px 0px 15px 0px black;
  -moz-box-shadow: 0px 0px 15px 0px black;
  box-shadow: 0px 0px 15px 0px black; }
  header .container {
    display: table; }
  header select {
    color: white;
    background-color: #42637b; }
  header #machines, header #types, header #dates {
    margin-left: 6px;
    margin-right: 6px; }
    header #machines select, header #machines input, header #machines div, header #types select, header #types input, header #types div, header #dates select, header #dates input, header #dates div {
      -moz-appearance: toolbox;
      -webkit-appearance: none;
      text-indent: 0.01px;
      text-overflow: '';
      display: inline-block;
      vertical-align: middle;
      padding-right: 18px; }
      header #machines select::-ms-expand, header #machines input::-ms-expand, header #machines div::-ms-expand, header #types select::-ms-expand, header #types input::-ms-expand, header #types div::-ms-expand, header #dates select::-ms-expand, header #dates input::-ms-expand, header #dates div::-ms-expand {
        display: none; }
    header #machines:after, header #types:after, header #dates:after {
      position: absolute;
      content: "\e114";
      display: inline-block;
      vertical-align: middle;
      font-family: 'Glyphicons Halflings';
      font-style: normal;
      font-weight: normal;
      font-size: 0.5em;
      height: 2.0em;
      margin-left: -12px;
      line-height: 2.0em;
      pointer-events: none; }
  header #dates:after {
    display: none; }
  header div {
    display: inline-block; }
  header h1 {
    position: relative;
    text-transform: uppercase;
    font-size: 18px; }
    body.ff header h1:after {
      background-image: url("../img/firefox.png");
      background-size: 75%;
      background-repeat: no-repeat;
      background-position: 0px -35px;
      width: 250px;
      top: -15px;
      bottom: -15px;
      content: "";
      display: block;
      left: -180px;
      position: absolute; }
  header h1, header .rightSide {
    display: table-cell;
    vertical-align: middle; }
  header .rightSide {
    text-align: right; }
    header .rightSide div {
      margin-left: 24px; }
  header a {
    text-decoration: none;
    color: white; }

.subheader {
  float: right;
  vertical-align: bottom;
  text-align: right; }
  .subheader .container {
    padding-top: 0px;
    padding-bottom: 0px; }
  .subheader .history {
    color: #222222;
    text-decoration: none; }
    .subheader .history:before {
      display: inline-block;
      vertical-align: middle;
      font-family: 'Glyphicons Halflings';
      font-style: normal;
      font-weight: normal;
      margin-left: 6px;
      margin-right: 6px;
      content: "\e023"; }
  .subheader .up {
    color: #222222;
    text-decoration: none; }
    .subheader .up:before {
      display: inline-block;
      vertical-align: middle;
      font-family: 'Glyphicons Halflings';
      font-style: normal;
      font-weight: normal;
      margin-left: 6px;
      margin-right: 6px;
      content: "\e113"; }
  .subheader .button {
    background-color: #f2f2f2;
    border: 1px SOLID #dddddd;
    padding: 12px 18px;
    display: inline-block;
    color: #222222;
    margin-left: 12px;
    margin-right: 12px; }
    .subheader .button:last-child {
      margin-right: 0px; }
    .subheader .button .title, .subheader .button .result {
      display: inline-block; }
    .subheader .button .title {
      text-transform: uppercase;
      font-size: 15px; }
    .subheader .button .result {
      color: #222222;
      font-weight: bold; }
      .subheader .button .result:before {
        display: inline-block;
        vertical-align: middle;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: normal;
        margin-left: 6px;
        margin-right: 6px;
        content: "\2212";
        color: #b67525; }
      .subheader .button .result.bad:before {
        content: "\e114";
        color: #d12600; }
      .subheader .button .result.good:before {
        content: "\e113";
        color: #2f7836; }

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.eot");
  src: url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.woff") format("woff"), url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.svg") format("svg"); }

body {
  font-family: lato;
}

html, body {
  margin: 0px;
  padding: 0px; }

.container {
  padding: 15px;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto; }

header {
	margin-bottom: 30px;
}