.CodeMirror {
  font-family: monospace;
  line-height: 1.4;
}

.CodeMirror-focused {
  /* FIXME it would be great if we could directly use the browser's
     default focus outline, but it appears we can't, so this tries to
     approximate that */
  outline: 1px dotted #212121;
  outline: 5px auto -webkit-focus-ring-color;
}

.CodeMirror-content {
  box-sizing: border-box;
  line-height: inherit;
  font-family: inherit;
  padding: 4px 2px 4px 4px;
  tab-size: 4;
  -moz-tab-size: 4;
  outline: none;
}  

.CodeMirror-gutter {
  background: #f5f5f5;
  border-right: 1px solid silver;
}

.CodeMirror-gutter-element {
  box-sizing: border-box;
  /* FIXME this is line number specific */
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}
/* DEFAULT THEME */

.cm-keyword {color: #708;}
.cm-atom {color: #219;}
.cm-number {color: #164;}
.cm-def {color: #00f;}
.cm-variable,
.cm-punctuation,
.cm-property,
.cm-operator {}
.cm-variable-2 {color: #05a;}
.cm-variable-3, .cm-type {color: #085;}
.cm-comment {color: #a50;}
.cm-string {color: #a11;}
.cm-string-2 {color: #f50;}
.cm-meta {color: #555;}
.cm-qualifier {color: #555;}
.cm-builtin {color: #30a;}
.cm-bracket {color: #997;}
.cm-tag {color: #170;}
.cm-attribute {color: #00c;}
.cm-hr {color: #999;}
.cm-link {color: #00c;}