html, body {
  height: 100%;
}
body {
  padding-top: 32px;
  padding-bottom: 32px;
}
.tools,
.footer {
  height: 32px;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}
.tools {
  top: 0;
  padding-top: 4px;
  border-bottom: 1px solid #ccc;
}
.tools button {
  font-size: 12px;
}
.footer {
  color: #999;
  font-size: 12px;
  bottom: 0;
  border-top: 1px solid #ccc;
  line-height: 30px;
}
.container {
  height: 100%;
  position: relative;
}
.container:before,
.container:after {
  content: " ";
  display: table;
}
.container:after {
  clear: both;
}
.preview,
.editor {
  float: left;
  height: 100%;
  width: 50%;
}
.editor textarea {
  width: 100%;
  height: 100%;
}
.preview {
  overflow: hidden;
}
.preview iframe {
  height: 100%;
  width: 100%;
}
.divider {
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  width: 2px;
  background-color: #ccc;
}
.CodeMirror {
  font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
  height: 100%;
  line-height: 1.42857143;
}