body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  padding-top: 80px;
}
#buffer {
  font-family: 'Source Code Pro';
  position: absolute;
  top: 51px;
  bottom: 40px;
  left: 0;
  right: 0;
  color: #D6D6D6;
  padding: 0 20px;
  overflow: scroll;
  padding-bottom: 10px;
}
#chat {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 100px;
  height: 40px;
  background: #171717;
}
#send {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 40px;
  width: 100px;
}
#chat input {
  background: none;
  border: none;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-size: 15px;
}
#chat input:focus {
  outline: none;
}
#send input {
  width: 100%;
  height: 100%;
  border: none;
  background: #264369;
  color: #fff;
  text-align: center;
  padding: 0 10px;
  position: relative;
  z-index: 100;
}
#send input:focus {
  outline: none;
}

#players {
  position: fixed;
  top: 70px;
  right: 20px;
  width: 200px;
  background-color: rgba(255,255,255,0.1);
}

#players .header {
  padding: 10px;
  background-color: rgba(0,0,0,0.3);
}

#players .body {
  max-height: 400px;
  overflow-y: scroll;
  overflow-x: hidden;
}

#players ul {
  list-style: none;
  padding: 10px;
  margin: 0;
}

.color-a { color: #50FF38; }
.color-b { color: #5BFFFF; }
.color-c { color: #EA3A3F; }
.color-d { color: #EF1DFF; }
.color-e { color: #FAFF34; }
.color-f { color: #EDEDED; }
.color-0 { color: #000000; }
.color-1 { color: #19009C; }
.color-2 { color: #30A000; }
.color-3 { color: #379C9A; }
.color-4 { color: #9A0000; }
.color-5 { color: #99009C; }
.color-6 { color: #EF9B00; }
.color-7 { color: #9A9A9A; }
.color-8 { color: #43443E; }
.color-9 { color: #412BFF; }