#button_settings,
#button_socialize,
#button_messages,
#button_geolocation,
#button_inventory,
#button_travellist {
  position: absolute;
  left: 1%;
  top: 1%;
  height: 4%;
}

#button_inventory,
#button_travellist,
#button_messages {
  left: inherit;
  right: 1%;
}

#button_settings img,
#button_socialize img,
#button_messages img,
#button_geolocation img,
#button_inventory img,
#button_travellist img {
  height: 100%;
}

#button_socialize,
#button_messages {
  top: 6%;
}

#button_travellist {
  top: 11%;
}

#button_geolocation {
  top: 10.5%;
}

#button_geolocation,
#button_travellist {
  display: none;
}

.blocker {
  z-index: 400;
  background-color: sandybrown;
  padding: 10px;
}

.modal {
  padding: 1% 2%;
  overflow-x: hidden;
  overflow-y: auto !important;
  max-width: none;
  width: 100%;
}

.modal h1 {
  text-align: center;
  margin: 2%;
  font-size: 300%;
  text-stroke: 1px #444;
  -webkit-text-stroke: 1px #444;
}

.modal a.close-modal {
  position: fixed;
  top: 0;
  right: 0;
  border: solid 2px ghostwhite;
  border-radius: 100%;
}

.dropMenu {
  text-align: center;
}

.dropMenu input {
  width: 20%;
  text-align: center;
  margin-bottom: 8%;
}

#tos,
#settings,
#socialize,
#messages,
#inventory,
#travellist {
  background-image: url(/img/modal_wood.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: brown;
  color: ghostwhite;
  width: 100%;
  height: 100%;
}

#tos {
  color: sandybrown;
}

#tos .tos_check {
  margin-top: 2%;
}

#inventory .item {
  width: 10%;
  min-height: 42px;
  margin: 2%;
  float: left;
  border: solid 1px lightgray;
  padding: 2%;
  text-align: center;
  background: black;
  font-family: "Kingthings Petrock", "Times New Roman", Times, serif;
  font-size: 80%;
}

#inventory .itemimage {
  height: 20px;
}

#inventory .item img {
  max-width: 25px;
  max-height: 20px;
  background: black;
}

#inventory .item .amount {
  position: relative;
  bottom: -5px;
}

#travellist .listitem {
  border-bottom: 1px solid #222;
  height: 25px;
}

#travellist .feathers {
  float: right;
  height: 20px;
}

#travellist .feathers img {
  height: 100%;
}

#settings table {
  width: 100%;
}

#settings td {
  white-space: nowrap;
}

#settings input,
#settings select,
#dropMenu input {
  background: sandybrown;
  border: solid 2px #222;
  font-family: "Kingthings Petrock", "Times New Roman", Times, serif;
}

#settings input[type="number"] {
  text-align: right;
}

#tosform,
#submit_tos {
  font-family: "Kingthings Petrock", "Times New Roman", Times, serif;
}

#tosform {
  font-size: 120%;
  text-align: justify;
}

#tos h1 {
  color: whitesmoke;
}

#tosform h3 {
  clear: both;
  margin-top: 0 !important;
  color: white;
}

#tosform .agreement,
#submit_tos {
  float: right;
}

#tosform .agreement {
  padding-bottom: 10%;
  color: whitesmoke;
}

#tosform .agreement input {
  position: relative;
  bottom: 0;
}

#tosform .tositem {
  margin-top: 12%;
  padding: 2% 3% !important;
  color: silver;
}

#socialize h1 {
  text-align: left;
  margin-left: 0;
}

#friendslist {
  margin-bottom: 10%;
}

#friendslist div,
#enemieslist div {
  border-bottom: 1px solid #222;
}

#friendslist div:last-child,
#enemieslist div:last-child {
  border: none;
}

#socialize .nosocial {
  color: dimgray;
}

#inboundmail,
#friendslist,
#enemieslist,
#citylist,
#settingsform,
#tosform .tositem .text {
  color: ghostwhite;
  opacity: .8;
  background: #000;
  border-radius: 5px;
  padding: 1% 2%;
}

#inboundmail .unseen {
  color: ghostwhite;
}

#inboundmail {
  color: dimgray;
}

#inboundmail table {
  width: 100%;
}

#inboundmail th {
  vertical-align: bottom;
}

#inboundmail td {
  vertical-align: top;
}

#inboundmail td:nth-child(3) {
  white-space: nowrap;
}

#inboundmail tr:not(:last-child) td {
  padding-bottom: 2%;
  border-bottom: dotted 1px darkgray;
}

#inboundmail .message,
#inboundmail .mailReply {
  display: none;
}