html,
body {
  height: 100%;
  margin: 0;
}
* {
  user-select: none;
  -webkit-user-select: none;
}
body {
  color: White;
  background: Black;
  font-family: monospace;
}
label,
select,
button,
input {
  cursor: pointer;
  border: none;
  font: inherit;
  color: White;
  background: rgba(0, 0, 0, 0.8);
}
select {
  -webkit-appearance: none;
}
label,
button {
  padding: 0.5em;
}
#fps {
  z-index: 102;
  top: 0;
  right: 0;
  position: absolute;
  color: White;
  background: rgba(0, 0, 0, 0.7);
  padding: 0.5em;
}
/*# sourceMappingURL=style.css.map */#Stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 3.5em;
  overflow: hidden;
  background: url(../assets/img/bg.jpg) center center no-repeat;
  background-size: cover;
}
#Stage > div {
  position: absolute;
}
#Stage > div.Body {
  border-radius: 50%;
  will-change: transform;
  background-size: 100% 100%;
  background-position: center;
}
#Stage > div.Body[data-name='Sun'] {
  background-image: url(../assets/img/bodies/sun.jpg);
}
#Stage > div.Body[data-name='Mercury'] {
  background-image: url(../assets/img/bodies/mercury.jpg);
}
#Stage > div.Body[data-name='Venus'] {
  background-image: url(../assets/img/bodies/venus.jpg);
}
#Stage > div.Body[data-name='Earth'] {
  background-image: url(../assets/img/bodies/earth.jpg);
}
#Stage > div.Body[data-name='Moon'] {
  background-image: url(../assets/img/bodies/moon.jpg);
}
#Stage > div.Body[data-name='Mars'] {
  background-image: url(../assets/img/bodies/mars.jpg);
}
#Stage > div.Body[data-name='Deimos'] {
  background-image: url(../assets/img/bodies/deimos.jpg);
}
#Stage > div.Body[data-name='Phobos'] {
  background-image: url(../assets/img/bodies/phobos.jpg);
}
#Stage > div.Body[data-name='Jupiter'] {
  background-image: url(../assets/img/bodies/jupiter.jpg);
}
#Stage > div.Body[data-name='Io'] {
  background-image: url(../assets/img/bodies/io.jpg);
}
#Stage > div.Body[data-name='Europa'] {
  background-image: url(../assets/img/bodies/europa.jpg);
}
#Stage > div.Body[data-name='Ganymede'] {
  background-image: url(../assets/img/bodies/ganymede.jpg);
}
#Stage > div.Body[data-name='Callisto'] {
  background-image: url(../assets/img/bodies/callisto.jpg);
}
#Stage > div.Body[data-name='Saturn'] {
  background-image: url(../assets/img/bodies/saturn-c.jpg);
}
#Stage > div.Body[data-name='Saturn']:after {
  content: "";
  display: block;
  width: 232%;
  height: 50%;
  position: absolute;
  margin-left: -67%;
  margin-top: 25%;
  background: url(../assets/img/bodies/saturn-r.jpg);
  background-size: 100% 100%;
}
#Stage > div.Body[data-name='Titan'] {
  background-image: url(../assets/img/bodies/titan.jpg);
}
#Stage > div.Body[data-name='Rhea'] {
  background-image: url(../assets/img/bodies/rhea.jpg);
}
#Stage > div.Body[data-name='Iapetus'] {
  background-image: url(../assets/img/bodies/iapetus.jpg);
}
#Stage > div.Body[data-name='Dione'] {
  background-image: url(../assets/img/bodies/dione.jpg);
}
#Stage > div.Body[data-name='Tethys'] {
  background-image: url(../assets/img/bodies/tethys.jpg);
}
#Stage > div.Body[data-name='Enceladus'] {
  background-image: url(../assets/img/bodies/enceladus.jpg);
}
#Stage > div.Body[data-name='Mimas'] {
  background-image: url(../assets/img/bodies/mimas.jpg);
}
#Stage > div.Body[data-name='Uranus'] {
  background-image: url(../assets/img/bodies/uranus.jpg);
}
#Stage > div.Body[data-name='Titania'] {
  background-image: url(../assets/img/bodies/titania.jpg);
}
#Stage > div.Body[data-name='Oberon'] {
  background-image: url(../assets/img/bodies/oberon.jpg);
}
#Stage > div.Body[data-name='Umbriel'] {
  background-image: url(../assets/img/bodies/umbriel.jpg);
}
#Stage > div.Body[data-name='Ariel'] {
  background-image: url(../assets/img/bodies/ariel.jpg);
}
#Stage > div.Body[data-name='Miranda'] {
  background-image: url(../assets/img/bodies/miranda.jpg);
}
#Stage > div.Body[data-name='Neptune'] {
  background-image: url(../assets/img/bodies/neptune.jpg);
}
#Stage > div.Body[data-name='Triton'] {
  background-image: url(../assets/img/bodies/triton.jpg);
}
#Stage > div.Body[data-name='Pluto'] {
  background-image: url(../assets/img/bodies/pluto.jpg);
}
#Stage > div.Body[data-name='Charon'] {
  background-image: url(../assets/img/bodies/charon.jpg);
}
#Stage > div.Body[data-name='Nix'] {
  background-image: url(../assets/img/bodies/nix.jpg);
}
#Stage > div.Body[data-name='Styx'] {
  background-image: url(../assets/img/bodies/styx.jpg);
}
#Stage > div.Body[data-name='Hydra'] {
  background-image: url(../assets/img/bodies/hydra.jpg);
}
#Stage > div.Body[data-name='Kerberos'] {
  background-image: url(../assets/img/bodies/kerberos.jpg);
}
#Stage > div.Body[data-name='Player'] {
  z-index: 20;
  border-radius: 0;
}
#Stage > div.Body[data-name='Player'] + .Label {
  margin-top: 3em;
  z-index: 100;
}
#Stage > div.Body[data-name='Player'][data-throttle='1']:before {
  content: "";
  position: absolute;
  overflow: hidden;
  width: 46px;
  height: 8px;
  display: block;
  margin-top: calc(50% - 4px);
  margin-left: calc(50% - 46px);
  background: url(../assets/img/flame.gif);
}
#Stage > div.Body[data-name='Player']:after {
  content: "";
  position: absolute;
  background-image: url(../assets/img/ship.png);
  background-size: 100%;
  width: 100%;
  height: 100%;
  display: block;
}
#Stage > div.Label {
  z-index: 10;
  padding: 0.5em;
  text-align: center;
  white-space: nowrap;
  will-change: transform;
  background: rgba(0, 0, 0, 0.7);
  color: White;
}
/*# sourceMappingURL=stage.css.map */#Bottom {
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  position: absolute;
  border-top: solid 1px White;
  display: flex;
  flex-flow: row nowrap;
}
#Bottom > label,
#Bottom > button {
  padding: 1em;
  margin: 0 0.5em;
  min-width: 4em;
}
#Bottom > label:hover,
#Bottom > button:hover {
  background: rgba(255, 255, 255, 0.3);
}
#Bottom > label:first-child,
#Bottom > button:first-child {
  margin-left: 0;
}
#Bottom > label:last-child,
#Bottom > button:last-child {
  margin-right: 0;
}
#Bottom > label {
  width: 15em;
}
#Bottom > div {
  flex: 1;
  padding: 0.5em;
  text-align: center;
}
#Bodies {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 3.5em;
  background: rgba(0, 0, 0, 0.9);
  z-index: 102;
  overflow: auto;
}
#Bodies > table {
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
#Bodies > table > thead > tr > td {
  border-bottom: solid 1px White;
  padding: 1em 1em;
}
#Bodies > table > tbody > tr.Main {
  font-size: 1.1em;
  font-weight: bold;
}
#Bodies > table > tbody > tr:not(.Main) {
  color: #ddd;
  font-size: 0.8em;
  font-style: italic;
}
#Bodies > table > tbody > tr:not(.Main) > td:first-child {
  padding-left: 2rem;
}
#Bodies > table > tbody > tr:hover > td {
  background: rgba(255, 255, 255, 0.25);
}
#Bodies > table > tbody > tr > td {
  padding: 0.5rem;
}
#Bodies > table > tbody > tr > td > label,
#Bodies > table > tbody > tr > td > button {
  height: 3em;
  line-height: 3em;
  background: none;
  display: block;
  padding: 0 0.5rem;
  vertical-align: middle;
}
#Bodies > table > tbody > tr > td > label:hover,
#Bodies > table > tbody > tr > td > button:hover {
  text-decoration: underline;
}
#Bodies > table > tbody > tr > td > label > input {
  vertical-align: middle;
  margin-right: 0.8rem;
}
/*# sourceMappingURL=ui.css.map */