/* BODY { font-family: Georgia, "Book Antiqua", Helvetica, "sans-serif"; 
       color: black;
       margin: 0;
} */

BODY { font-family: "Exo", "Acumen Pro", "Calibri", Helvetica, "sans-serif";
       color: black;
       margin: 0;
}

A:link {color: black; text-decoration: none}
A:visited {color: black; text-decoration: none}
A:active {color: black; text-decoration: none}

table { table-layout: fixed }

td, th, p {
  padding-left:6px;
  padding-right:6px;
  font-family: "Exo", "Acumen Pro", "Calibri", Helvetica, "sans-serif";
}

td, th {
  vertical-align:center;
}

.number {
  font-family: "Lato", "Courier New", "sans-serif";
}

.candidate_name td{
  width:250px;
  text-align: left;
}

/* .votes td{
  max-width:100px;
  font-family: "Lato", "Courier New", "sans-serif";
  text-align: right;
}

.percent td{
  max-width:75px;
  font-family: "Lato", "Courier New", "sans-serif";
  text-align: right;
} */

 .votes, .percent {
  font-family: "Lato", "Courier New", "sans-serif";
  text-align: right;
}

@media only screen 
and (min-device-width : 1024px) 
and (orientation : landscape) {
    #content, html, body {
      height: 93.4%;
  }

  #top {
      float: left;
      width: 100%;
      background: #eaeaea;
      font-family: "Exo", "Sofia Pro", Helvetica, "sans-serif";
      text-align: center;
  }

  #left {
      float: left;
      width: 17.25%;
      background: #fafafa;
      height: 100%;
      overflow: auto;
      padding-left: 10px;
  }

  #right {
      float: left;
      width: 82.1%;
      background: #ffffff;
      height: 100%;
      overflow: auto;
  }

  #wide-left {
      float: left;
      width: 41%;
      background: #fafafa;
      height: 100%;
      overflow: auto;
      padding-left: 10px;
  }

  #narrow-right {
      float: left;
      width: 57%;
      background: #ffffff;
      height: 100%;
      overflow: auto;
  }
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
  #content, html, body {
      height: 93.4%;
  }

  #top {
      float: left;
      width: 100%;
      background: #eaeaea;
      font-family: "Exo", "Sofia Pro", Helvetica, "sans-serif";
      text-align: center;
  }

  #left {
      float: left;
      width: 20%;
      background: #fafafa;
      height: 100%;
      overflow: auto;
      padding-left: 10px;
  }

  #right {
      float: left;
      width: 75%;
      background: #ffffff;
      height: 100%;
      overflow: auto;
  }

  #wide-left {
      float: left;
      width: 41%;
      background: #fafafa;
      height: 100%;
      overflow: auto;
      padding-left: 10px;
  }

  #narrow-right {
      float: left;
      width: 57%;
      background: #ffffff;
      height: 100%;
      overflow: auto;
  }
}


/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}