* {
  border: 0;
  box-sizing: border-box;
  font-size: 14px;
  margin: 0;
  padding: 0;
  position: relative;
}

body {
  background: #eee;
  color: #333;
  font-family: Ubuntu, sans-serif;
}

header {
  box-shadow: 0 3px 3px #888;
  height: 32px;
  line-height: 20px;
  padding: 6px 4px;
  position: fixed;
  top: 0;
  width: 100%;
}

content {
  bottom: 0;
  position: fixed;
  top: 32px;
  width: 100%;
}

header h1 {
  display: inline-block;
}

header .right {
  float: right;
}

svg {
  vertical-align: middle;
}

header a {
  padding-left: 6px;
}

a {
  color: #2060d0;
  text-decoration: none;
}

a:hover {
  filter: brightness(1.2);
}

textarea {
  resize: none;
}

.left { left: 0; }
.right { right: 0; }
.top { top: 0; }
.bottom { bottom: 0; }

.panel {
  border: 1px inset #666;
  color: #ffffff;
  background: #1e1e1e;
  height: 100%;
  position: absolute;
  width: 50%;
}

.panel .shadow, .panel textarea {
  font-family: 'Ubuntu Mono', monospace;
  height: 100%;
  left: 0;
  overflow: auto;
  position: absolute;
  top: 0;
  white-space: pre;
  width: 100%;
}

.panel textarea {
  background: transparent;
  caret-color: #ffffff;
  color: transparent;
  z-index: 1;
}

.parse-errors {
  background: #500;
  bottom: 0;
  color: #fff;
  display: none;
  font-family: sans-serif;
  height: 25%;
  left: 0;
  position: absolute;
  right: 0;
  white-space: pre;
}

.x-attr {
  color: #9cdcfe;
}

.x-value {
  color: #ce9178;  
}

.x-cdata, .x-comment {
  color: #6a9955;  
}

.x-directive {
  color: #c369c1;  
}

.x-foreign {
  font-style: italic;
  color: #d3c9b1;
}

.x-text {
  color: #e3c981;  
}

.x-tag-name {
  color: #569cd6;  
}

.x-error {
  background: #a00;  
}