@font-face {
  font-family: "Libre Baskerville";
  src: url("librebaskerville-regular.eot");
  src: url("librebaskerville-regular.eot?#iefix") format("embedded-opentype"),
       url("librebaskerville-regular.woff") format("woff"),
       url("librebaskerville-regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("librebaskerville-bold.eot");
  src: url("librebaskerville-bold.eot?#iefix") format("embedded-opentype"),
       url("librebaskerville-bold.woff") format("woff"),
       url("librebaskerville-bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("librebaskerville-italic.eot");
  src: url("librebaskerville-italic.eot?#iefix") format("embedded-opentype"),
       url("librebaskerville-italic.woff") format("woff"),
       url("librebaskerville-italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("librebaskerville-bolditalic.eot");
  src: url("librebaskerville-bolditalic.eot?#iefix") format("embedded-opentype"),
       url("librebaskerville-bolditalic.woff") format("woff"),
       url("librebaskerville-bolditalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

#map_canvas {
  height: 100%;
  margin-left: 300px;
  box-sizing: border-box;
}

#map-key {
  background: #fff;
  font-size: 12px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 6px 10px;
  position: absolute;
  right: 10px;
  top: 10px;
}

#sidebar {
  background-color: #fefefe;
  box-sizing: border-box;
  color: #333333;
  font-family: "Libre Baskerville";
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  position: absolute;
  left: 0;
  text-align: left;
  top: 0;
  width: 300px;
}

#information {
  font-size: 14px;
}

#countryData dl {

}

#countryData dt {
  font-weight: bold;
  font-size: 12px;
  font-style: italic;
  border-bottom: 3px double #eee;
}

.label {
  background: #fff;
  padding: 10px;
  border: none;
  margin-top: 20px;
  position: absolute;
  left: 50%;
  font-size: 13px;
  white-space: nowrap;
}

#countryData dd {
  margin: 5px 0 20px 0;

}

@media screen and (max-width: 800px) {
  #map_canvas {
    margin-left: 0;
  }

  #sidebar {
    width: 100%;
    height: 200px;
    top: initial;
    bottom: 0;
  }
}