html {
  position: relative;
  min-height: 100%;
  overflow-x: hidden;
}
body {
  font-family: 'Lato', sans-serif;
  border-top: 4px solid #CC3333; 
  /* Margin bottom by footer height */
  margin-bottom: 80px;
  background-color: #FFFFFF;
}
.back {
  margin-top: 10px;
}
.content {
  padding-top: 10px;
  padding-bottom: 10px;
}
h1, h2, h3 {
  margin-top: 0px;
  margin-bottom: 5px;
  font-weight: 400;
}
i {
  font-size: 16px;
  font-weight: 400;
}
.title {
  margin-bottom: 5px;
}
#us-states-chart {
  margin-top: -20px;
}
.state-title {
  font-size: 34px;
}
.data-wrapper, .data-error {
  padding: 20px;
}
.data-wrapper > div {
  padding-top: 10px;
  padding-bottom: 10px;
}
.legend {
  margin-top: 10px;
}

/*
  candidate styling
*/
.clinton { background: #99CCFF; }
.sanders { background: #5491CD; }
.cruz { background: #FFD6D6; }
.kasich { background: #FFAAAA; }
.rubio { background: #FF7777; }
.trump { background: #E55B5B; }

/*
  us states chart styling
*/
.background {
  fill: none;
  pointer-events: all;
}
.state {
  fill: #CCCCCC;
  cursor: pointer;
}
.state.active {
  fill: #666666 !important;
}
.state:hover {
  fill: #999999;
}
.mesh {
  fill: none;
  stroke: #FFFFFF;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 
  table styling
*/
th, td {
  text-align: center;
  background: #FFFFFF;
}

/* 
  bar chart styling
*/
.axis text {
  font-size: 12px;
}
.axis path, .axis line {
  fill: none;
  stroke: #333333;
  shape-rendering: crispEdges;
}

/*
  tooltip styling
*/
.tooltip {
  line-height: 1;
  font-weight: 400;
  font-size: 14px;
  padding: 5px;
  background: #34655F; 
  color: #FFFFFF;
  border-radius: 2px;
  border: 2px solid #333333;
}

/*
  legend styling
*/
.legend-label {
  height: 22px;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #333333;
  /* only trump has border-right */
}
.legend-text {
  font-weight: bold;
  color: #000000; /* Needs to be black for contrast */
}
.legend > .trump {
  border-right: 1px solid #333333;
}

/*
  mobile styling
*/
@media screen and (max-width: 1000px) {
  .tooltip { font-size: 12px; }
  #us-states-chart { margin-top: 0px; }
}

@media screen and (max-width: 767px) {
  .legend-label {
    height: 22px;
    border-top: 1px solid #333333;
    border-left: 1px solid #333333;
    border-bottom: none;
    /* only trump and rubio has border-bottom */
    /* only clinton, cruz, and rubio need border-right */
  }
  .legend > .rubio { border-bottom: 1px solid #333333; }
  .legend > .trump { border-bottom: 1px solid #333333; }
  .legend > .sanders { border-right: 1px solid #333333; }
  .legend > .kasich { border-right: 1px solid #333333; }

  .content { margin-top: 10px; }
  #us-states-chart { margin-top: 20px; }

  h1 { margin-top: 15px; font-size: 26px; }
  .title { margin-bottom: 5px; }
  .state-title { font-size: 24px; }
  h2 { font-size: 22px; }
  h3 { font-size: 20px; }
  i { font-size: 14px; }
}