body {
  color: white;
  background-color: #1d1d1d;
  font-family: sans-serif;
}
a {
  color: white;
  text-decoration: none;
}

ul#flash {
  padding:10px;
  margin:10px 0;
  background-color: #FFBABA;
  color: #D8000C;
}

ul#flash > li:before {
  content: "\26A0";
}

ul#flash > li {
  font-style:normal;
  font-weight:400;
  speak:none;
  display:inline-block;
  text-decoration:inherit;
  margin-right:.2em;
  text-align:center;
  font-variant:normal;
  text-transform:none;
  line-height:1em;
  margin-left:.2em;
}

ul#menu {
  list-style-type: none;
  margin-bottom: 20px;
  padding: 0;
  overflow: hidden;
  /* background-color: #ff00ff; */
}

li.menu {
  float: left;
  padding: 0 5px;
}

li a {
  display: block;
  width: 150px;
  text-align: center;
  text-decoration: none;
}

li.app {
  float: right;
}

li a:hover {
  background-color: #ff0000;
}

.joinbutton {
  color: white;
  background-origin: padding-box;
  background-image: linear-gradient(to bottom, rgb(164, 208, 7) 5%, rgb(83, 105, 4) 95%);
  font-size: 12px;
  line-height: 20px;
  padding: 4px 6px 4px 6px;
  border-radius: 4px;
}

.joinbutton:hover {
  background-image: linear-gradient(to bottom, rgb(164, 208, 7) 25%, rgb(83, 105, 4) 75%);
}

/* Playerbox with Playerstats / Gamestats inside */
div.player {
  display: inline-block;
  width: 360px;
  min-height: 150px;
  text-align: center;
  margin: 2px 5px 2px 5px;
  padding: 0;
  /* border: 1px solid black; */
}
/* Intern box of playerbox */
div.interna {
  display: inline-block;
  vertical-align: top;
  width: 150px;
  height: 165px;
  margin: 0;
  padding-bottom: 5px;
  overflow: hidden;
  /* background-color: pink; */
}
/* Additional settings for box with serverstats */
div.stats {
  font-size: small;
  width: 200px;
  /* background-color: purple; */
}
div.form {
  border: 1px dashed gray;
  text-align: center;
}
div#premades {
  border: 1px dashed rgb(150, 150, 0);
  height: 500px;
}
div#info {
  text-align: center;
}

div.error {
  border: 1px dashed red;
  padding: 50px;
  font-size: 150%;
  text-align: center;
}

svg {
  width: 100%;
  height: 100%;
}
xmp {
  margin: 5px;
}

/* Some special colors for 3rdpartygames, serverinfo, warnings etc */
.error { color: rgb(200, 0, 0); font-weight: bold; }
.info { color: rgb(200, 200, 0); font-size: smaller; font-weight: bold; }
#disclaimer {
  color: rgb(150, 150, 0);
  font-size: smaller;
  padding-left: 50px;
  margin-top: 20px;
  margin-bottom: 10px;
}
div.buttons { margin-top: 10px; }
div.serverinfo { margin-top: 10px; margin-bottom: 10px; font-size: x-small; }
img.avatar { width: 100px; height: 100px; margin: 1px 5px 1px 5px; }
span.gamename { font-size: small; color: rgb(87, 203, 222); }
span.ingameother { color: rgb(52, 132, 0); font-style: italic; }
span.maininfo { font-size: x-small; }
span.steamname { font-size: medium; /* font-family: serif; */ font-weight: bold; width: 110px; word-wrap: break-word; }
img.gameimage { width: 95%; }

div.server {
  display: inline-block;
  width: 450px;
  min-height: 500px;
  text-align: center;
  margin: 2px 5px 2px 5px;
  padding: 0;
  overflow: hidden;
  /* border: 1px solid lightblue; */
}

div.serverheader {
  display: inline-block;
  vertical-align: top;
  width: 448px;
  height: 20px;
  margin: 0;
  padding-bottom: 5px;
  overflow: hidden;
  /* background-color: pink; */
  /* border: 1px solid pink; */
}

div.serverdata {
  display: inline-block;
  vertical-align: top;
  width: 440px;
  height: 478px;
  margin: 0;
  padding-bottom: 0;
  overflow: hidden;
  overflow-y: auto;
  /* overflow: scroll; */
}

a.servername {
  color: lightblue;
  font-weight: bold;
  /* text-decoration: underline; */
}

ul.server {
  list-style-type: none;
  margin: 0 10px 10px 10px;
  padding: 0;
  overflow: hidden;
  /* background-color: #ff00ff; */
}

li.servermap {
  float: left;
  padding: 0 5px;
}

li.playerinfo {
  float: right;
}

table.playerlist {
  width: 100%;
  margin: 0 20px 0 20px;
}

td {
  text-align: center;
}

td.name {
  text-align: left;
}

/***************************************/
/* Colors for different online states: */
/*   offline online busy away snooze   */
/*    lookingtotrade lookingtoplay     */
/***************************************/
/* Whole player info box */
div.online  { border: 1px solid rgb(87, 203, 222); }
div.ingame  { border: 1px solid rgb(144, 186, 60); }
div.away { border: 1px solid rgb(255, 235, 0);
  opacity: 0.6;
  filter: alpha(opacity=60);
}
div.busy { border: 1px solid rgb(48, 134, 149);
  opacity: 0.5;
  filter: alpha(opacity=50);
}
div.snooze { border: 1px solid rgb(135, 134, 135);
  opacity: 0.5;
  filter: alpha(opacity=50);
}
div.lookingtotrade { border: 1px solid rgb(255, 255, 0); }
div.lookingtoplay  { border: 1px solid rgb(0, 255, 0); }
div.offline {
  border: 1px dashed rgb(137, 137, 137);
  opacity: 0.4;
  filter: alpha(opacity=40);
}

/* avatar */
img.online         { border: 1px solid rgb(87, 203, 222); }
img.ingame         { border: 1px solid rgb(144, 186, 60); }
img.away           { border: 1px solid rgb(255, 235, 0); }
img.busy           { border: 1px solid rgb(48, 134, 149); }
img.snooze         { border: 1px solid rgb(135, 134, 135); }
img.lookingtotrade { border: 1px solid rgb(255, 255, 0); }
img.lookingtoplay  { border: 1px solid rgb(0, 255, 0); }
img.offline        { border: 1px dashed rgb(137, 137, 137); filter: grayscale(1); -webkit-filter: grayscale(1); }

/* color for username / gameinfo */
span.ingame,a.ingame   { color: rgb(144, 186, 60); }
span.online,a.online   { color: rgb(87, 203, 222); }
span.away,a.away       { color: rgb(255, 235, 0); }
span.busy              { color: rgb(48, 134, 149); }
span.snooze            { color: rgb(135, 134, 135); }
span.lookingtotrade    { color: rgb(255, 255, 0); }
span.lookingtoplay     { color: rgb(0, 255, 0); }
span.offline,a.offline { color: rgb(137, 137, 137); }