/* Functional */
html,
#map,
#wrapper,
#map_container {
  height: 100%;
  width: 100%;
}
body: {
  width: 100%;
}
#map_container {
  /* prevent scroll bars */
  overflow: hidden;
}
#map {
  /* Customize map size */
  width: 100%;
  height: 600px;
}

/* Aesthetic */
body {
  background-color: #333;
  color: #fff;
  box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.container {
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
#map {
  background-color: #080808;
  box-shadow: inset 0 0 50px #333;
  border-radius: 10px;
}
p, dt, dd, li {
  text-align: justify;
}
.text-hexal {
  color: #f60;
}
nav li {
  margin-left: 10px;
  margin-top: 10px;
}

/* Fullscreen Styling */
#toggle_fullscreen {
  position: relative;
  top: 30px;
  height: 30px;
  outline: unset;
  /*color: #333;*/
  border-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
#toggle_fullscreen:focus {
  background-color: #fff;
}

#toggle_fullscreen.fs {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  border-top-right-radius: 0px;
}
#map.fs {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}
body.fs {
  overflow: hidden;
}


/* Performance? */
canvas {
  /*
  background-color: #000000;
  image-rendering: optimizeSpeed;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor;
  */
}