html { font: 62.5%/1.65 "Open Sans", sans-serif } body { font-size: 1.3rem } .CodeMirror { font-family: monospace; height: 300px } .CodeMirror-scroll { overflow: auto } .CodeMirror-lines { padding: 4px 0 } .CodeMirror pre { padding: 0 4px } .CodeMirror-scrollbar-filler { background-color: white } .CodeMirror-gutters { border-right: 1px solid #ddd; background-color: #f7f7f7 } .CodeMirror-linenumber { padding: 0 3px 0 5px; min-width: 20px; text-align: right; color: #999 } .CodeMirror div.CodeMirror-cursor { border-left: 1px solid black } .CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver } .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor { width: auto; border: 0; background: transparent; background: rgba(0,200,0,0.4); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600c800, endColorstr=#4c00c800) } .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor:not(#nonsense_id) { filter:progid:DXImageTransform.Microsoft.gradient(enabled=false) } .cm-s-default .cm-keyword { color: #708 } .cm-s-default .cm-atom { color: #219 } .cm-s-default .cm-number { color: #164 } .cm-s-default .cm-def { color: #00f } .cm-s-default .cm-variable { color: black } .cm-s-default .cm-variable-2 { color: #05a } .cm-s-default .cm-variable-3 { color: #085 } .cm-s-default .cm-property { color: black } .cm-s-default .cm-operator { color: black } .cm-s-default .cm-comment { color: #a50 } .cm-s-default .cm-string { color: #a11 } .cm-s-default .cm-string-2 { color: #f50 } .cm-s-default .cm-meta { color: #555 } .cm-s-default .cm-error { color: #f00 } .cm-s-default .cm-qualifier { color: #555 } .cm-s-default .cm-builtin { color: #30a } .cm-s-default .cm-bracket { color: #997 } .cm-s-default .cm-tag { color: #170 } .cm-s-default .cm-attribute { color: #00c } .cm-s-default .cm-header { color: blue } .cm-s-default .cm-quote { color: #090 } .cm-s-default .cm-hr { color: #999 } .cm-s-default .cm-link { color: #00c } .cm-negative { color: #d44 } .cm-positive { color: #292 } .cm-header, .cm-strong { font-weight: bold } .cm-em { font-style: italic } .cm-emstrong { font-style: italic; font-weight: bold } .cm-link { text-decoration: underline } .cm-invalidchar { color: #f00 } div.CodeMirror span.CodeMirror-matchingbracket { color: #0f0 } div.CodeMirror span.CodeMirror-nonmatchingbracket { color: #f22 } .CodeMirror { line-height: 1; position: relative; overflow: hidden } .CodeMirror-scroll { margin-bottom: -30px; margin-right: -30px; padding-bottom: 30px; padding-right: 30px; height: 100%; outline: none; position: relative } .CodeMirror-sizer { position: relative } .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler { position: absolute; z-index: 6; display: none } .CodeMirror-vscrollbar { right: 0; top: 0; overflow-x: hidden; overflow-y: scroll } .CodeMirror-hscrollbar { bottom: 0; left: 0; overflow-y: hidden; overflow-x: scroll } .CodeMirror-scrollbar-filler { right: 0; bottom: 0; z-index: 6 } .CodeMirror-gutters { position: absolute; left: 0; top: 0; height: 100%; padding-bottom: 30px; z-index: 3 } .CodeMirror-gutter { height: 100%; display: inline-block; *zoom:1; *display:inline } .CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4 } .CodeMirror-lines { cursor: text } .CodeMirror pre { -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; border-radius: 0; border-width: 0; background: transparent; font-family: inherit; font-size: inherit; margin: 0; white-space: pre; word-wrap: normal; line-height: inherit; color: inherit; z-index: 2; position: relative; overflow: visible } .CodeMirror-wrap pre { word-wrap: break-word; white-space: pre-wrap; word-break: normal } .CodeMirror-linebackground { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0 } .CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto } .CodeMirror-widget { display: inline-block } .CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden } .CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden } .CodeMirror-measure pre { position: static } .CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right: none; width: 0 } .CodeMirror-focused div.CodeMirror-cursor { visibility: visible } .CodeMirror-selected { background: #d9d9d9 } .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0 } .cm-searching { background: #ffa; background: rgba(255,255,0,0.4) } .CodeMirror span { *vertical-align:text-bottom } @media print { .CodeMirror div.CodeMirror-cursor { visibility: hidden } } @media (max-width: 860px), (max-width: 860px) { .features .editor .outer { padding: 0 40px } } @media (max-width: 800px), (max-width: 800px) { .features .editor .outer { padding: 0 30px } } @media (max-width: 400px), (max-width: 400px) { .features .editor .outer { padding: 0 15px } } .features .editor .editorwrap { max-width: 100%; padding: 40px 0; margin: 0 auto; position: relative; height: 450px } @media (max-width: 860px), (max-width: 860px) { .features .editor .editorwrap { height: 400px } } @media (max-width: 600px), (max-width: 600px) { .features .editor .editorwrap { height: 480px } } @media (max-width: 400px), (max-width: 400px) { .features .editor .editorwrap { height: 530px } } .features .editor .entry-markdown { left: 0; padding-left: 40px } .features .editor .entry-preview { right: 0; border-left: #fff 20px solid; box-shadow: #edece4 -1px 0 0 } .features .editor .entry-markdown, .features .editor .entry-preview { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 50%; position: absolute; bottom: 0; top: 0; background: #fff } @media (max-width: 860px), (max-width: 860px) { .features .editor .entry-markdown, .features .editor .entry-preview { bottom: 40px } } @media (max-width: 400px), (max-width: 400px) { .features .editor .entry-markdown, .features .editor .entry-preview { box-shadow: none } } @media (max-width: 860px), (max-width: 860px) { .features .editor .entry-markdown, .features .editor .entry-preview { top: 0; left: 0; right: 0; width: 100%; border: none; z-index: 100; box-shadow: #edece4 1px 0 0 inset, #edece4 -1px 0 0 inset, #edece4 0 -1px 0 inset } .features .editor .entry-markdown .markdown, .features .editor .entry-markdown .entry-preview-content, .features .editor .entry-preview .markdown, .features .editor .entry-preview .entry-preview-content { height: 50px; overflow: hidden } } @media (min-width: 860px) and (min-width: 860px), (min-width: 860px) and (min-width: 860px) { .features .editor .entry-markdown .floatingheader, .features .editor .entry-preview .floatingheader { padding-left: 0; padding-right: 18px; margin-right: 1px } } @media (max-width: 860px), (max-width: 860px) { .features .editor .entry-markdown .floatingheader, .features .editor .entry-preview .floatingheader { cursor: pointer; width: 50%; border: none; color: #fff; background: #aaa9a2; position: absolute; top: -40px; left: 0; box-shadow: rgba(0,0,0,0.1) 0 -2px 3px inset; padding: 10px 0; } .entry-preview { display: none !important; } .features .editor .entry-markdown .floatingheader a, .features .editor .entry-preview .floatingheader a { color: #fff } } .features .editor .entry-markdown .floatingheader a, .features .editor .entry-preview .floatingheader a { color: #aaa9a2 } .features .editor .entry-markdown.active, .features .editor .entry-preview.active { z-index: 200 } .features .editor .entry-markdown.active .markdown, .features .editor .entry-markdown.active .entry-preview-content, .features .editor .entry-preview.active .markdown, .features .editor .entry-preview.active .entry-preview-content { height: auto; overflow: auto } @media (max-width: 860px), (max-width: 860px) { .features .editor .entry-markdown.active header, .features .editor .entry-preview.active header { cursor: auto; color: #aaa9a2; background: #fff; box-shadow: #edece4 0 1px 0 inset, #edece4 1px 0 0 inset, #edece4 -1px 0 0 inset } .features .editor .entry-markdown.active header a, .features .editor .entry-preview.active header a { color: #aaa9a2 } } @media (max-width: 400px), (max-width: 400px) { .features .editor .entry-markdown .markdown-help, .features .editor .entry-markdown .entry-word-count, .features .editor .entry-preview .markdown-help, .features .editor .entry-preview .entry-word-count { display: none } } .features .editor .markdown-help { float: right } .features .editor .markdown-help:before { font-family: "Icons"; font-weight: normal; font-style: normal; vertical-align: -7%; text-transform: none; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\e01b"; color: #cfceca } .features .editor .markdown-help:hover { text-decoration: none } .features .editor .markdown-help:hover:before { font-family: "Icons"; font-weight: normal; font-style: normal; vertical-align: -7%; text-transform: none; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\e01b"; color: #aaa9a2 } .features .editor .markdown-help:hover:hover { text-decoration: none } .features .editor .entry-word-count { float: right; padding-right: 22px } @media (min-width: 860px) and (min-width: 860px), (min-width: 860px) and (min-width: 860px) { .features .editor .entry-markdown .floatingheader { padding-left: 40px } } .features .editor .entry-markdown-content textarea { border: 0; width: 100%; height: 100%; max-width: 100%; margin: 0; padding: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .features .editor .entry-markdown-content textarea:focus { outline: 0 } .features .editor .CodeMirror { height: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-family: Inconsolata, monospace; font-size: 1.4rem; line-height: 1.3em; color: #6c7379 } .features .editor .CodeMirror .CodeMirror-focused, .features .editor .CodeMirror .CodeMirror-selected { color: #242628; background: #b3d5f3; text-shadow: none } .features .editor .CodeMirror ::selection { color: #242628; background: #b3d5f3; text-shadow: none } .features .editor .CodeMirror-lines { padding: 65px 0 40px 0 } @media (max-width: 860px), (max-width: 860px) { } @media (max-width: 400px), (max-width: 400px) { .features .editor .CodeMirror-lines { padding: 15px 0 } } .features .editor .CodeMirror pre { padding: 0 40px 0 40px } @media (max-width: 860px), (max-width: 860px) { .features .editor .CodeMirror pre { padding: 0 30px } } @media (max-width: 400px), (max-width: 400px) { .features .editor .CodeMirror pre { padding: 0 15px } } .features .editor .cm-header { color: #000; font-size: 2rem; line-height: 1.4em } .features .editor .cm-string, .features .editor .cm-link, .features .editor .cm-comment, .features .editor .cm-quote { color: #000 } @media (max-width: 860px), (max-width: 860px) { .features .editor .entry-preview .floatingheader { right: 0; left: auto; border: none } } .features .editor .entry-preview-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 60px 40px 40px 30px; overflow: auto; font-size: 0.95em } @media (max-width: 860px), (max-width: 860px) { .features .editor .entry-preview-content { padding: 30px } } @media (max-width: 400px), (max-width: 400px) { .features .editor .entry-preview-content { padding: 15px 15px 10px 15px } } @media (max-width: 860px), (max-width: 860px) { .features .editor .scrolling .floatingheader { height: 39px; box-shadow: none } } @media (max-width: 860px), (max-width: 860px) { .features .editor .scrolling .floatingheader::before, .features .editor .scrolling .floatingheader::after { display: none } } @media (max-width: 860px), (max-width: 860px) { .features .editor .scrolling .CodeMirror-scroll, .features .editor .scrolling .entry-preview-content { box-shadow: 0 3px 5px rgba(0,0,0,0.05) inset } }