/**
* Game UI style.
**/
#game {
  max-width: 820px;
  max-height: 420px;
  position: relative;

  background-color: #171717;
  border: 10px solid #8e44ad;
}

#ui {
  width: 100%;
  height: 100%;

  position: absolute;
  text-align: left;

  /* We dont want users to be able to select stuff in UI. Must be explicitly specified in code. */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  user-select: none; /* non-prefixed version, currently not supported by any browser */
}
#ui #topbar {
  visibility: hidden;

  width: 100%;
  height: 30px;

  text-align: center;
  color: #fff;
  font-size: 12px;
}
#ui #topbar .left {
  height: 100%;
  width: 80%;

  line-height: 20px;
  padding: 5px 10px;

  float: left;
}
#ui #topbar .right {
  height: 100%;
  width: 20%;

  line-height: 20px;
  padding: 5px;

  float: right;
  text-align: right;
}
#ui #topbar::after { clear: both; }

#ui #topbar .mapauthor::after { content: " - "; }
#ui #topbar .mapcode::before { content: "@"; }
#ui #topbar .mapname::before { content: ": "; }
#ui #topbar .right #debug-mode.active {
  background-color: #2ecc71;
  color: #FFF;
}
#ui #topbar .right #debug-mode.active:hover {
  background-color: #FFF;
  color: #2ecc71;
}

#ui #topbar .right button {
  height: 25px;
  width: 25px;

  background: #8e44ad;
  color: #fff;

  border: none;
  cursor: pointer;
}
#ui #topbar .right button:hover {
  background-color: #fff;
  color: #8e44ad;
}