codepen.alt-dark.css

.main-header{
	height: 3rem;
	border: none !important;
    background: #1D1F21;
    color:#ccc;
    box-shadow: none;
}
.CodeMirror-gutters{
   	border-right: solid 1px #e6e9eb;
}
.CodeMirror-linenumbers{
    color: #1D1F21 !important;
}
.box-title{
	font-size: 12pt;
    padding-left: 0;
    font-weight: 200;
}
.room-editor{
    padding-bottom: 30px;
}
.icon-codepen-box{
	fill: #666;    
}
.site-footer{
    padding: -0.1rem 0.3rem;
	height: 2rem;
	border: none !important;
    background: #1D1F21 !important;
    color:#666;
    box-shadow: none !important;
}
.main-header .button, .file-upload-button{
	font-size: 12px;
	padding: 0.2rem;
    background: transparent;
    color: #ccc;
    border: none;
}
.main-header .button:hover{
 	color:#fff;   
}
.pen-title{
	font-size: 15pt;   
    float: left;
	display: block;
    padding-top: 0.2rem;
}
.pen-title-area .by{
    float: left;
    margin-top: 0.5rem;
    margin-left: 0.5rem;
    color:#999;
}
.editor-resizer{
    background: #1D1F21 !important;
    width: 1px !important;
    border: none !important;
}
.box, .powers{
 background: #1D1F21;
}
.button-medium, .mini-button{
	background: transparent;
    color: #666 !important;
}
.button-medium:hover, .mini-button:hover{
	background: transparent;
    color: #ccc !important;
}
.button-medium svg, .mini-button svg{
	fill: #ccc;
}
.resizer{
	background: #1D1F21 !important;
    border: none !important;
    box-shadow: none !important;
    box-shadow: 0 0 -3px #ccc !important;
    border-top: none !important;
    border-bottom: none !important;

}
.CodeMirror-line{
    color: #ccc !important;
}
/*

    Name:       Base16 Default Light
    Author:     Chris Kempson (http://chriskempson.com)

    CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)

*/

.cm-s-default.CodeMirror { background: #1D1F21; color: #202020 !important; }
.cm-s-default div.CodeMirror-selected { background: #e0e0e0; }
.cm-s-default .CodeMirror-line::selection, .cm-s-default .CodeMirror-line > span::selection, .cm-s-default .CodeMirror-line > span > span::selection { background: #e0e0e0; }
.cm-s-default .CodeMirror-line::-moz-selection, .cm-s-default .CodeMirror-line > span::-moz-selection, .cm-s-default .CodeMirror-line > span > span::-moz-selection { background: #e0e0e0; }
.cm-s-default .CodeMirror-gutters { background: #1D1F21 !important; border-right: 0px; }
.cm-s-default .CodeMirror-guttermarker { color: #ac4142 !important; }
.cm-s-default .CodeMirror-guttermarker-subtle { color: #b0b0b0 !important; }
.cm-s-default .CodeMirror-linenumber { color: #b0b0b0 !important; }
.cm-s-default .CodeMirror-cursor { border-left: 1px solid #505050 !important; }

.cm-s-default span.cm-comment { color: #8f5536 !important; }
.cm-s-default span.cm-atom { color: #aa759f !important; }
.cm-s-default span.cm-number { color: #aa759f !important; }

.cm-s-default span.cm-property, .cm-s-default span.cm-attribute { color: #90a959 !important; }
.cm-s-default span.cm-keyword { color: #ac4142 !important; }
.cm-s-default span.cm-string { color: #f4bf75 !important; }

.cm-s-default span.cm-variable { color: #90a959 !important; }
.cm-s-default span.cm-variable-2 { color: #6a9fb5 !important; }
.cm-s-default span.cm-def { color: #d28445 !important; }
.cm-s-default span.cm-bracket { color: #666 !important; }
.cm-s-default span.cm-tag { color: #ac4142 !important; }
.cm-s-default span.cm-link { color: #aa759f !important; }
.cm-s-default span.cm-error { background: #ac4142; color: #505050 !important; }

.cm-s-default .CodeMirror-activeline-background { background: #DDDCDC; }
.cm-s-default .CodeMirror-matchingbracket { text-decoration: underline; color: #000 !important; }