* {
  box-sizing: border-box;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

html, body {
  font-family: sans-serif;
}

#splash, #helppage {
  color: white;
  text-align: center;
}

#container {
  background: black;
  position: absolute;
}

#container > div:not(.camera):not(.popover), #container > table {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#container > div:not(#camera), #container > table {
  z-index: 10;
}

#stationBox {
  background: rgba(255, 255, 255, 0.5);
}

h1 {
  font-weight: bold;
  font-size: 12vmin;
  margin: 5vmin 0 2vmin;
  font-style: italic;
  text-align: center;
}

.splashText {
  display: inline-block;
  width: 95%;
  border: 1px solid black;
  background: rgba(128, 192, 96, .8);
  padding: 2vmin;
  text-align: justify;
  color: black;
}

#helppage h1 {
  font-style: normal;
  font-size:  12vmin;
}

#helppage p {
  margin: .5vh 0 0 0;
}

#helppage img {
  height: 4vh;
  vertical-align: bottom;
}

@keyframes blink {
  0% { color: black; }
  50% { color: transparent; }
}

#loading .animate {
  position: absolute;
  top: calc(50% - 12vmin);
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 20vmin;
  font-weight: bold;
  animation: blink .5s infinite;
}

#progress {
  position: absolute;
  top: calc(50% + 8vmin);
  width: 100%;
  left: 0;
  text-align: center;
  font-size: 5vmin;
}

canvas, img {
  -moz-image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  -webkit-optimize-contrast: pixelated;
}

#camera canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#camera canvas:first-of-type {
  background-color: #404040;
}

.bigbutton {
  display: inline-block;
  width: 40%;
  margin: 2vmin 2vw;
  padding: 2vmin 2vw;
  font-size: 6vmin;
  height: 12vmin;
  line-height: 8vmin;
  border: 2px solid black;
  border-radius: 5px;
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.popover .bigbutton {
  width: 80%;
}
.bigbutton.start {
  background: linear-gradient(rgb(128, 255, 128), rgb(0, 128, 0));
}
.bigbutton.easy {
  background: linear-gradient(rgb(128, 255, 255), rgb(0, 128, 0));
}
.bigbutton.help {
  background: linear-gradient(rgb(255, 255, 128), rgb(128, 128, 0));
}
.bigbutton.start:active {
  background: linear-gradient(rgb(32, 128, 32), rgb(100, 192, 100));
}
.bigbutton.easy:active {
  background: linear-gradient(rgb(32, 128, 128), rgb(100, 192, 100));
}
.bigbutton.help:active {
  background: linear-gradient(rgb(128, 128, 32), rgb(220, 220, 0));
}
#helppage td, #helppage th {
  text-align: center;
  padding: .1vmin;
}
#container > .popover {
  background: rgba(255, 255, 128, .9);
  text-align: center;
  vertical-align: middle;
  position: absolute;
  width: 50%;
  height: 50%;
  border: 1px solid black;
  top: 25%;
  left: 25%;
}

.popover > div {
  display: inline-block;
  vertical-align: middle;
  line-height: initial;
  width: 100%;
}

.popoverContent h2 {
  animation: blink 2s infinite;
}

#gameOver.popover {
  height: 80%;
  width: 90%;
  top: 10%;
  left: 5%;
  padding: 24px;
}

h2 {
  font-size: 6vmin;
  padding: 0;
  margin: 0 0 4vh;
  font-weight: bold;
}

#pauseBox h2, #pauseBox .bigbutton {
  margin: 5px;
}


.tui-InventoryUI, .tui-Station {
  border: 1px solid black;
  background: #80c0ff;
}

.tui-InventoryUI {
  width: 300px;
}

.tui-Station {
  width: 500px;
}

.tui-InventoryUI > h3, .tui-Station > h3, .tui-Computer th {
  margin: 0;
  padding: 4px;
  text-align: left;
}

.tui-Station .closeBar {
  text-align: center;
  border-top: 1px solid black;
  padding: 4px;
}

.contents {
  border-top: 1px solid black;
  overflow-y: scroll;
  background: #202060;
}

.tui-InventoryUI .contents {
  height: 800px;
  border-bottom: 1px solid black;
}

.tui-Station .contents {
  height: 400px;
}

.meter {
  display: inline-block;
  position: relative;
  background: #400000;
  border: 1px solid black;
  vertical-align: middle;
}

.meter > div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  color: white;
  font-weight: bold;
}

.meter > div:not(.display) {
  background: #00c000;
}

#energy {
  border-right: 1px solid black;
}

#energyDamage {
  background: #ffff00;
}

#hud > div {
  display: inline-block;
  font-family: monospace;
  margin: 0.5vh;
  padding: 0;
  border: 2px solid black;
  border-radius: 8px;
  font-weight: bold;
  vertical-align: top;
}

#hud > div > div {
  background: #000080;
  color: #ffffff;
  vertical-align: top;
  border: 2px solid white;
  border-radius: 8px;
  padding: 0.5vh 0.75vh;
}

#hud img {
  vertical-align: middle;
}

#gameOver td {
  font-size: 200%;
  padding: 0 0.5em;
}

#gameOver tr td:first-of-type {
  text-align: right;
}