/* --- layout --- */
html {
    height: 100%;
}

body {
    height: 100%;
}

#client {
    /* height: calc(100vh - 35px); */
    height: 100%;
    max-height: 100%;
    width: 100%;
}

#client #output {
    height: calc(100% - 20px /* padding */ - (1.5em + 18px) /* inputfield */);
    max-height: calc(100% - 20px /* padding */ - (1.5em + 18px) /* inputfield */);
    padding: 10px;
    white-space: pre-wrap;
    overflow-x: hidden;
    overflow-y: scroll;
}

#menu {
    float: right;
    position: fixed;
    top: 3px;
    right: 21px; /* to accommodate the scrollbar. Anyone know a better way to deal with this? */
}

#menu #stuffList {
}

#inputfield {
    position: fixed;
    width: calc(100vw - 18px); /* padding 3 + border 1 + margin 5 */
    height: 1.5em;
    margin: 5px;
    bottom: 0px;
    right: 0px;
    left: 0px;
}

#popup {
    position: fixed;
    top: 50%;
    left: 50%;
}

#directionPad {
    position: fixed;
    top: 50%;
    right: 21px;
    transform: translate(0%, -50%);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* modal popup with clickaway overlay */

input.modalTrigger {
  display: none;
}
#popupClose {
  position: fixed;
  top: 1em;
  left: 1em;
}

#popupCloseX {
  position: absolute;
  right: -0.5em;
  top: -0.5em;
  font-size: 200%;
}

label.popupBackground {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  background-color: lightgray;
  transition: all 0.3s ease;
  z-index: -100;
  display: none;
}

#popupClose:checked ~ div.popupContent {
  display: block;
  z-index: 100;
}

#popupClose:checked ~ label.popupBackground {
  display: block;
  z-index: 90;
}

div.popupContent {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #eeeeee;
  color: #050505;
  padding: 1em;
}

div.popupContent div {
  display: none;
}


table {border-collapse: collapse;}

body, #menu ul li {
    color: #bbbbbb;
    background-color: #272727;
} 

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

#inputfield {
    padding: 3px;
    font-family: monospace;
    color: #333333;
    background: #f3f3f3;
    border: 1px solid #ffffff;
    border-radius: 3px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.30);
}

#inputfield:focus {
    outline: none;
}

#client #output {
    padding: 10px;
    font-family: monospace;
    line-height: 14px;
    white-space: pre-wrap;
    color: #dddddd;
}

ul#menuitems {
    display: none;
}

#gearCheckbox:checked ~ ul#menuitems {
    display: inline;
}

#pauseCheckbox:checked ~ label#pause {
    color: red;
    background: white;
}

ul#menuitems > li {
    list-style-type:none;
    position: relative;
}

#menu label {
    float: right;
}

#menu ul li a, #menu ul li input {
    display:inline;
    padding:12px;
    color:#404040;
    background: #f0f0f0;
    text-decoration:none;
    transition:background .1s;
    white-space:nowrap;
}

#menu input {
    font-family: monospace;
    color: #333333;
    border: 3px solid #ffffff;
    border-radius: 10px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.70);
}

#menu ul li a:hover, #menu ul li input:hover {
    background: #b0b0b0;
}

#menu #stuffList {
    display: table;
    border-spacing: 5px;
    background-color: #272727;
    border: 2px solid #373737;
    padding-left: 0px;
}

#stuffListBox {
    display: none;
    position: fixed;
    top: 55px;
    right: 20px;
    max-width: 30%;
    min-width: 10em;
    /* max-height: calc(100% - 55px - (1.5em + 18px)); */
    max-height: 30%;
    overflow-y: auto;
}

#gearCheckbox:checked ~ #stuffList {
    display: table;
}

#stuffList li {
    list-style-type:none;
    border: 1px solid #ddd;
    padding: 8px;
    background-color: #020202;
    color: #101010;
    margin: 0px;
    display: table-row;
}

#stuffList li div {
    display: table-cell;
}

#stuffList li:nth-child(even) {
    background: #474747;
}

#stuffList li:hover {
    background: #d2ffd2;
    padding: 4px;
}

#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f2f2f2;
    padding: 1em;
    display: none;
}

#popup input, #popup select {
    margin: 1em;
    display: block;
}

#popup span, #popup input {
    display: block;
}

#directionPad {
    width: 3em;
    border-radius: 3px;
    font-size: 300%;
    color: #373737;
}

#directionPad div.active {
    color: #dddddd;
}

/* --- status bars --- */
div.statBars {
  position: fixed;
  bottom: 1em;
  right: 1em;
  opacity: 0.5;
  display: none; /* enabled when the JS loads */
  float: bottom;
}

@media only screen and (max-width: 600px) {
  div.statBars.horizontal {
    width: 80vw;
  }
}

div.statBars.vertical {
  height: 20em;
  bottom: 3em;
}

div.statBars.horizontal {
  width: 20em;
}

div.statBars.vertical div.statBar {
  text-align: center;
  vertical-align: bottom;
}

div.statBars.horizontal div.statBar {
  width: 100%;
  height: 1em;
}

div.statBar {
  display: none; /* not all classes need all bars, let the server decide */
}

div.statBar#hpBar {
  background-color: red;
}

div.statBar#manaBar {
  background-color: purple;
}

div.statBar#movesBar {
  background-color: gray;
}

div.statBar#pietyBar {
  background-color: gold;
}

div.statBar#lifeforceBar {
  background-color: green;
}

div.statBar#tnlBar {
  background-color: silver;
}

div.statBar#enemyBar {
  background-color: brown;
}

div.statBar#tankHpBar {
  background-color: blue;
}