html,
body {
  margin: 0px;
  overflow: auto;
}

header {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  background-color: blue;
  color: white;
  text-align: left;
  margin-bottom: 10px;
  height: 150px;
}

header h1 {
  margin-bottom: 0px;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
  height: 20px;
}

main {
  position: relative;
  left: 0;
  top: 10px;
  right: 0;
  width: 100%;
  background-color: white;
  color: blue;
  text-align: center;
  border: 0px solid yellow;
  bottom: 30px;
}

#console-iframe {
  height: 100%;
  width: 100%;
}

#console {
  margin: 5px;
  border: 1px solid black;
  height: 60%;
  min-height: 500px;
}

#page {
  background-color: #ffffff;
  border: 0px solid silver;
}

#content {
  position: relative;
  border: px solid green;
  text-align: left;
}

#navigation {
  position: absolute;
  border: 0px solid red;
  bottom: 10px;
  width: inherit;
  text-align: center;
}

#navigation a {
  color: #ffffff;
}

#isOnline {
  color: lightgreen;
}

#isOffline {
  color: red;
}

.playerStatus {
  float: right;
  font-family: monospace;
  font-size: x-large;
}

#playerStatusOnline {
  color: darkgreen;
}

#playerStatusOffline {
  color: red;
}

#server-status-panel {
  background-color: black;
  color: white;
  width: 400px;
  position: absolute;
  padding: 10px;
  float: right;
  right: 10px;
  top: 10px;
  z-index: 10;
}

#server-image {
  float: left;
  margin: 10px;
}

.player {
  border: 1px solid black;
  width: 800px;
  cursor: pointer;
  overflow: auto;
  margin: 10 auto 10 auto;
  padding: 10;
}

.playerName {
  font-size: x-large;
  font-family: fantasy;
}

.player-image {
  float: left;
  margin: 10px;
  height: 100px;
}

#commandTextField {
  width: 300px;
}

#output {
  color: yellow;
  padding: 20px;
}