#header {

  position: absolute;
  top: 0.5em;
  left: 0;
  right: 0;
  height: 6em;

  border-top-style: solid;
  border-top-color: #D7D7D8;
  border-top-width: 0.2em;

  border-bottom-style: solid;
  border-bottom-color: #D7D7D8;
  border-bottom-width: 0.2em;

  color: #6D6E70;

  padding-left: 1em;

}

#siteTitle {

  position: relative;

  font-weight: 100;
  font-size: 1.75em;

  width: 83%;

}

.heavier {
  font-weight: 500;
}

.parentToMetric:hover {
  text-decoration: underline;
  cursor: pointer;
}

.link:hover {
  text-decoration: underline;
  color: #333;
}

.legendBlock {
   float: left;
   height: 100%;
   width: 10%;
   text-align: center;
   font-weight: 700;
}

#logo {
  height: 3em;
  float: left;
  padding-right: 2em;
  padding-right: 0;
}

.instructions {

  text-align: center;
  color: #D7D7D8;
  font-style: italic;
  font-weight: lighter;
  font-size: 3em;
  /*padding: 2em;*/
  /*height: 100%;*/
  width: 100%;
  position: absolute;
}

#countryEscapeButton {
  height: 1.5em;
  width: 1.5em;
  position: absolute;
  left: 0.8em;
  top: 0.8em;
}

#countryTitle {
  color: #3e5255;
  font-size: 2.6em;
  margin: 0;
  letter-spacing: -1px;
}

#metricScores {
  height: 30%;
}

#back-button-container {
  height: 2em;
  width: 6em;
}

#back-button-container {
  width: 100%;
}

.button {
  display: block;
  margin: auto;
  opacity: 0;
}

.inactive {
  opacity: 0.1;
  pointer-events: none;
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

.active {
  opacity: 0.4;
}

.active:hover {
  cursor: pointer;
  opacity: 1;
}

sup {
  font-size: 0.5em;
  padding-left: 0.2em;
}