html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #ccc;
  padding: 1em;
  font-family: sans-serif;
}
textarea {
  width: 100%;
  height: 40em;
  font-family: 'Menlo', 'Monaco', 'Bitstream Vera Sans Mono', 'Lucida Sans Console', monospace;
  font-size: 11px;
}
button, label, input, select {
  cursor: pointer;
}

#container, #nav, #footer {
  width: 590px;
  margin: 0 auto;
  background: #fff;
}
#container {
  padding: 1em;
  border-style: solid;
  border-color: #666;
  border-width: 0px 2px 2px 2px;
}

#nav {
  padding: 0.5em 1em;
  background: #666;
  border: 2px solid #666;
}
#nav, #nav a {
  color: #fff;
}
#nav h1 {
  font-size: 100%;
}
#nav ul, #nav li {
  display: inline;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#nav a, #nav h1 {
  display: inline;
  padding: 0.5em 1em;
}

#nav a[href="#play"] {
  background: #f99;
}
#nav a[href="#docs"] {
  background: #6c6;
}
#nav a[href="#about"] {
  background: #99f;
}

#nav.play {
  border-bottom: 8px solid #f99;
}
#nav.docs {
  border-bottom: 8px solid #6c6;
}
#nav.about {
  border-bottom: 8px solid #99f;
}

#footer {
  background: transparent;
  font-size: small;
  text-align: center;
  margin-top: 1em;
}
#footer, #footer a {
  color: #333;
}

#game > div {
  float: left;
}
#arena {
  padding: 0;
  border-width: 10px;
  border-style: solid; /* 'inset' looks washed-out on Firefox */
  border-color: #555 #ccc #ccc #555;
  margin-right: 1em;
  line-height: 0; /* Extra space appears otherwise */
}
#controls {
  text-align: center;
  line-height: 200%;
}
#controls button {
  font-size: 120%;
  padding: 0.3em;
}
#errors {
  color: #c00;
  background: #fee;
  border: 2px solid #f00;
  padding: 1em;
  margin-bottom: 1em;
  font-family: monospace;
  white-space: pre-wrap;
}
#choices {
  padding: 0.2em;
  border: 2px solid #ccc;
}
#editor, #choices {
  margin-top: 1em;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}