body {
  margin: 0;
  padding: 0; }

.error {
  color: red;
  font-size: 5em;
  font-family: Helvetica; }

a, img, input, textarea {
  border: none;
  outline: none;
  text-decoration: none; }

#main-wrapper {
  width: 100%;
  height: 100%;
  background: url(../bg.jpg) 0 0; }

#main-wrapper #error {
  display: none; }

#main-wrapper .inline {
  display: inline-block; }

#main-wrapper #mascot-image {
  width: 100%;
  height: auto;
  vertical-align: middle; }

#main-wrapper #graph .time-period-selector {
  padding-left: 0px; }

#main-wrapper #graph .time-period-selector li {
  display: inline-block;
  margin: 5px;
  padding: 10px;
  border-radius: 2px;
  list-style: none;
  background: #21556b;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-align: center; }

#main-wrapper #graph .time-period-selector li:hover {
  background: #fd8431; }

#main-wrapper #graph .time-period-selector li a {
  margin: 5px;
  padding: 5px;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-align: center; }

#main-wrapper #graph .time-period-selector li.selected {
  background: #fd8431; }

#main-wrapper #graph .time-period-selector li.fetching {
  background: orange; }

#main-wrapper #graph #graph-canvas {
  width: 260px;
  height: 200px;
  margin-left: 23%; }

#main-wrapper #graph #graph-values p#value-delta.down:before {
  content: '\25BC'; }

#main-wrapper #graph #graph-values p#value-delta.up:before {
  content: '\25B2'; }

#main-wrapper #graph #graph-values p#value-delta.red {
  color: red; }

#main-wrapper #graph #graph-values p#value-delta.green {
  color: aqua; }

.value-delta.down:after {
  content: '\25BC'; }

.value-delta.up:after {
  content: '\25B2'; }

.value-delta.red {
  color: red; }

.value-delta.green {
  color: #00ff3c; }

#graph {
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  behavior: url(ie-css3.htc);
  background: #294954;
  width: 25%;
  vertical-align: top;
  min-height: 360px; }

h3#graph-title {
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  background: #000000;
  font-weight: 300;
  text-transform: uppercase;
  padding: 10px 10px;
  margin: 0 0;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
  behavior: url(ie-css3.htc); }

#graph-values {
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  background: #009b00;
  font-weight: 300;
  text-transform: uppercase;
  padding: 10px 10px;
  margin: 0 0; }

p#percentage {
  list-style-type: none;
  display: inline;
  padding: 10px 10%;
  margin: 0 2% 0 28%;
  background: #3e7206;
  text-align: center;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-transform: uppercase; }

p#value-delta {
  list-style-type: none;
  display: inline;
  padding: 10px 10%;
  margin: 0 2% 0 0;
  text-align: center;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-transform: uppercase; }

.tickLabel {
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 300;
  text-transform: none;
  padding: 0px 0px;
  margin: 0 0; }

#table {
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  behavior: url(ie-css3.htc);
  background: #294954;
  width: 55%;
  vertical-align: top;
  margin: 0px 0%;
  min-height: 360px; }

#table ul {
  margin: 0 0;
  padding: 0 0;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  behavior: url(ie-css3.htc); }

#table ul li.odd {
  background: #1a3a45;
  color: #FFF;
  padding: 1px 0;
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 10px 0; }

p.oddcont {
  list-style-type: none;
  display: inline;
  padding: 10px 2%;
  margin: 0 0 0 0;
  text-align: left;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-transform: none;
  width: 60%;
  float: left; }

h2.oddper {
  list-style-type: none;
  display: inline;
  padding: 10px 3%;
  margin: 0 1%;
  text-align: left;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-transform: none;
  width: 7%;
  float: left; }

h3.odddata {
  list-style-type: none;
  display: inline;
  padding: 10px 3%;
  margin: 0 1%;
  text-align: left;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-transform: none;
  width: 4%;
  float: left;
  background: #1a3a45; }

#table ul li.even {
  background: #21556b;
  color: #FFF;
  padding: 1px 0;
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 10px 0; }

p.evencont {
  list-style-type: none;
  display: inline;
  padding: 10px 2%;
  margin: 0 0 0 0;
  text-align: left;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-transform: none;
  width: 60%;
  float: left; }

h2.evenper {
  list-style-type: none;
  display: inline;
  padding: 10px 3%;
  margin: 0 1%;
  text-align: left;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-transform: none;
  width: 7%;
  float: left; }

h3.evendata {
  list-style-type: none;
  display: inline;
  padding: 10px 3%;
  margin: 0 1%;
  text-align: left;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-transform: none;
  width: 4%;
  float: left; }

#table ul li.black {
  background: #000000;
  color: #FFF;
  padding: 1px 0;
  list-style-type: none;
  float: left;
  width: 100%;
  margin: 10px 0 0;
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  border-radius: 0px 0px 5px 5px;
  behavior: url(ie-css3.htc); }

p.blackcont {
  list-style-type: none;
  display: inline;
  padding: 10px 2%;
  margin: 0 0 0 0;
  text-align: left;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-transform: none;
  width: 60%;
  float: left; }

h2.blackper {
  list-style-type: none;
  display: inline;
  padding: 10px 3%;
  margin: 0 1%;
  text-align: left;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-transform: none;
  width: 7%;
  float: left; }

h3.blackdata {
  list-style-type: none;
  display: inline;
  padding: 10px 3%;
  margin: 0 1%;
  text-align: left;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-transform: none;
  width: 4%;
  float: left; }

#mascot {
  width: 19%;
  vertical-align: bottom;
  margin: 5px 0%; }

/* Responsive */
@media \0screen {
  img {
    width: auto;
    /* for ie 8 */ } }

@media screen and (max-width: 1680px) {
  #main-wrapper #graph #graph-canvas {
    margin-left: 19%; } }

@media screen and (max-width: 1440px) {
  #main-wrapper #graph #graph-canvas {
    margin-left: 15%; } }

@media screen and (max-width: 1367px) {
  #main-wrapper #graph #graph-canvas {
    margin-left: 10%; } }

@media screen and (max-width: 1367px) {
  #main-wrapper #graph #graph-canvas {
    margin-left: 10%; } }

@media screen and (max-width: 1024px) {
  #graph {
    width: 30%; }
  #table {
    width: 50%; } }

@media screen and (max-width: 980px) { }

@media screen and (max-width: 800px) {
  #graph {
    width: 100%;
    min-height: 0px; }
  #table {
    width: 100%;
    min-height: 0px;
    margin: 5px 0; }
  #mascot {
    width: 100%;
    text-align: center; }
  #mascot-image {
    width: 40% !important; } }

@media screen and (max-width: 768px) { }

@media screen and (max-width: 736px) { }

@media screen and (max-width: 667px) { }

@media screen and (max-width: 600px) { }

@media screen and (max-width: 568px) {
  h2.evenper {
    text-align: center;
    width: 16%;
    padding: 10px 0; }
  h3.evendata {
    text-align: center;
    width: 16%;
    padding: 10px 0; }
  h2.oddper {
    text-align: center;
    width: 16%;
    padding: 10px 0; }
  h3.odddata {
    text-align: center;
    width: 16%;
    padding: 10px 0; }
  h2.blackper {
    text-align: center;
    width: 16%;
    padding: 10px 0; }
  h3.blackdata {
    text-align: center;
    width: 16%;
    padding: 10px 0; } }

@media screen and (max-width: 417px) { }

@media screen and (max-width: 384px) { }

@media screen and (max-width: 360px) {
  p.oddcont {
    text-align: center;
    width: 96%; }
  h2.oddper {
    text-align: center;
    width: 48%; }
  h3.odddata {
    text-align: center;
    width: 48%; }
  p.evencont {
    text-align: center;
    width: 96%; }
  h2.evenper {
    text-align: center;
    width: 48%; }
  h3.evendata {
    text-align: center;
    width: 48%; }
  p.blackcont {
    text-align: center;
    width: 96%; }
  h2.blackper {
    text-align: center;
    width: 48%; }
  h3.blackdata {
    text-align: center;
    width: 48%; } }

@media screen and (max-width: 320px) { }

@media screen and (max-width: 240px) { }