#root {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

#editor {
  position: absolute;
  top: 0;
  height: calc(100% - 2em);
  right: 0;
  left: 0;
}

.CodeMirror {
  height: 100%;
}

#button_bar {
  position: absolute;
  top: calc(100% - 2em);
  bottom: 0;
  right: 0;
  left: 0;
  white-space: nowrap;

  padding: 3px;
  font-family: sans;
}

#message_box {
  position: absolute;
  bottom: 10px;
  right: 10px;

  font-family: sans;
  font-weight: bold;

  background-color: #ddd;
  padding: 10px;

  display: none;
}

#initial_messages {
  visibility: hidden;
}

.msg-debug {
  color: #888;
}

.cm-trailingspace {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==);
  background-position: bottom left;
  background-repeat: repeat-x;
}
.cm-tab {
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
   background-position: right;
   background-repeat: no-repeat;
}

