html { font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-family: proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; color: #484848; line-height: 1.28 } p { margin: 0 0 10px } .subHeader { font-size: 21px; font-weight: 200; line-height: 30px; margin-bottom: 10px } em { font-style: italic } h1, h2, h3, h4, h5, h6 { margin: 10px 0; font-family: inherit; font-weight: bold; line-height: 20px; color: inherit; text-rendering: optimizelegibility } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-weight: normal; color: #7b7b7b } h1, h2, h3 { line-height: 40px } h1 { font-size: 39px } h2 { font-size: 31px } h3 { font-size: 23px } h4 { font-size: 17px } h5 { font-size: 14px } h6 { font-size: 11px } h1 small { font-size: 24px } h2 small { font-size: 18px } h3 small { font-size: 16px } h4 small { font-size: 14px } ul, ol { margin: 0 0 10px 25px; padding: 0 } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0 } li { line-height: 20px } a { color: #c05b4d; text-decoration: none } a:hover, a:focus { color: #a5473a; text-decoration: underline } a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px } .center { text-align: center } .cm-s-solarized-light { background-color: #f8f5ec; color: #637c84 } .cm-s-solarized-light .emphasis { font-weight: bold } .cm-s-solarized-light .dotted { border-bottom: 1px dotted #cb4b16 } .cm-s-solarized-light .CodeMirror-gutter { background-color: #eee8d5; border-right: 3px solid #eee8d5 } .cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text { color: #93a1a1 } .cm-s-solarized-light .CodeMirror-cursor { border-left-color: #002b36 !important } .cm-s-solarized-light .CodeMirror-matchingbracket { color: #002b36; background-color: #eee8d5; box-shadow: 0 0 10px #eee8d5; font-weight: bold } .cm-s-solarized-light .CodeMirror-nonmatchingbracket { color: #002b36; background-color: #eee8d5; box-shadow: 0 0 10px #eee8d5; font-weight: bold; color: #dc322f; border-bottom: 1px dotted #cb4b16 } .cm-s-solarized-light span.cm-keyword { color: #268bd2 } .cm-s-solarized-light span.cm-atom { color: #2aa198 } .cm-s-solarized-light span.cm-number { color: #586e75 } .cm-s-solarized-light span.cm-def { color: #637c84 } .cm-s-solarized-light span.cm-variable { color: #637c84 } .cm-s-solarized-light span.cm-variable-2 { color: #b58900 } .cm-s-solarized-light span.cm-variable-3 { color: #cb4b16 } .cm-s-solarized-light span.cm-comment { color: #93a1a1 } .cm-s-solarized-light span.cm-property { color: #637c84 } .cm-s-solarized-light span.cm-operator { color: #657b83 } .cm-s-solarized-light span.cm-string { color: #36958e } .cm-s-solarized-light span.cm-error { font-weight: bold; border-bottom: 1px dotted #cb4b16 } .cm-s-solarized-light span.cm-bracket { color: #cb4b16 } .cm-s-solarized-light span.cm-tag { color: #657b83 } .cm-s-solarized-light span.cm-attribute { color: #586e75; font-weight: bold } .cm-s-solarized-light span.cm-meta { color: #268bd2 } .cm-s-solarized-dark { background-color: #002b36; color: #839496 } .cm-s-solarized-dark .emphasis { font-weight: bold } .cm-s-solarized-dark .dotted { border-bottom: 1px dotted #cb4b16 } .cm-s-solarized-dark .CodeMirror-gutter { background-color: #073642; border-right: 3px solid #073642 } .cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text { color: #586e75 } .cm-s-solarized-dark .CodeMirror-cursor { border-left-color: #fdf6e3 !important } .cm-s-solarized-dark .CodeMirror-matchingbracket { color: #fdf6e3; background-color: #073642; box-shadow: 0 0 10px #073642; font-weight: bold } .cm-s-solarized-dark .CodeMirror-nonmatchingbracket { color: #fdf6e3; background-color: #073642; box-shadow: 0 0 10px #073642; font-weight: bold; color: #dc322f; border-bottom: 1px dotted #cb4b16 } .cm-s-solarized-dark span.cm-keyword { color: #839496; font-weight: bold } .cm-s-solarized-dark span.cm-atom { color: #2aa198 } .cm-s-solarized-dark span.cm-number { color: #93a1a1 } .cm-s-solarized-dark span.cm-def { color: #268bd2 } .cm-s-solarized-dark span.cm-variable { color: #cb4b16 } .cm-s-solarized-dark span.cm-variable-2 { color: #cb4b16 } .cm-s-solarized-dark span.cm-variable-3 { color: #cb4b16 } .cm-s-solarized-dark span.cm-comment { color: #586e75 } .cm-s-solarized-dark span.cm-property { color: #b58900 } .cm-s-solarized-dark span.cm-operator { color: #839496 } .cm-s-solarized-dark span.cm-string { color: #6c71c4 } .cm-s-solarized-dark span.cm-error { font-weight: bold; border-bottom: 1px dotted #cb4b16 } .cm-s-solarized-dark span.cm-bracket { color: #cb4b16 } .cm-s-solarized-dark span.cm-tag { color: #839496 } .cm-s-solarized-dark span.cm-attribute { color: #93a1a1; font-weight: bold } .cm-s-solarized-dark span.cm-meta { color: #268bd2 } html { background: #f9f9f9 } .left { float: left } .right { float: right } .container { padding-top: 50px; padding-left: 0; padding-right: 0; width: 100%; min-width: 960px } .wrap { width: 960px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px } .skinnyWrap { width: 690px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px } hr { height: 0; border-top: 1px solid #ccc; border-bottom: 1px solid #eee } ul, li { margin-left: 20px } h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor, h5 .anchor, h6 .anchor { margin-top: -50px; position: absolute } h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-link, h5:hover .hash-link, h6:hover .hash-link { display: inline } .hash-link { color: #aaa; display: none } .nav-main { background: #222; color: #fafafa; position: fixed; top: 0; height: 50px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); width: 100%; z-index: 100 } .nav-main:after { content: ""; display: table; clear: both } .nav-main a { color: #e9e9e9; text-decoration: none } .nav-main .nav-site { float: right; margin: 0 } .nav-main .nav-site li { margin: 0 } .nav-main .nav-site a { padding: 0 8px; text-transform: uppercase; letter-spacing: 1px; line-height: 50px; display: inline-block; height: 50px; color: #aaa } .nav-main .nav-site a:hover { color: #fafafa } .nav-main .nav-site a.active { color: #fafafa; border-bottom: 3px solid #cc7a6f; background: #333 } .nav-main .nav-home { color: #00d8ff; font-size: 24px; line-height: 50px; height: 50px; display: inline-block } .nav-main .nav-logo { vertical-align: middle; display: inline-block; margin-bottom:5px; } .nav-main ul { display: inline } .nav-main li { display: inline } .hero { height: 300px; background: #2d2d2d; padding-top: 50px; color: #e9e9e9; font-weight: 300 } .hero .text { font-size: 64px; text-align: center } .hero .minitext { font-size: 16px; text-align: center; text-transform: uppercase } .hero strong { color: #61dafb; font-weight: 400 } .buttons-unit { margin-top: 60px; text-align: center } .buttons-unit a { color: #61dafb } .buttons-unit .button { font-size: 24px; background: #cc7a6f; color: #fafafa } .buttons-unit .button:active { background: #c5695c } .buttons-unit.downloads { margin: 30px 0 } .nav-docs { color: #2d2d2d; font-size: 14px; float: left; width: 210px } .nav-docs ul { list-style: none; margin: 0 } .nav-docs ul ul { margin: 6px 0 0 20px } .nav-docs li { line-height: 16px; margin: 0 0 6px } .nav-docs h3 { text-transform: uppercase; font-size: 14px } .nav-docs a { color: #666; display: block } .nav-docs a:hover { text-decoration: none; color: #cc7a6f } .nav-docs a.active { color: #cc7a6f } .nav-docs .nav-docs-section { border-bottom: 1px solid #ccc; border-top: 1px solid #eee; padding: 12px 0 } .nav-docs .nav-docs-section:first-child { padding-top: 0; border-top: 0 } .nav-docs .nav-docs-section:last-child { padding-bottom: 0; border-bottom: 0 } .nav-blog li { margin-bottom: 5px } .home-section { margin: 50px 0 } .home-divider { border-top-color: #bbb; margin: 0 auto; width: 400px } .skinny-row:after { content: ""; display: table; clear: both } .skinny-col { float: left; margin-left: 40px; width: 305px } .skinny-col:first-child { margin-left: 0 } .marketing-row { margin: 50px 0 } .marketing-row:after { content: ""; display: table; clear: both } .marketing-col { float: left; margin-left: 40px; width: 280px } .marketing-col h3 { color: #2d2d2d; font-size: 24px; font-weight: normal; text-transform: uppercase } .marketing-col p { font-size: 16px } .marketing-col:first-child { margin-left: 0 } #examples h3, .home-presentation h3 { color: #2d2d2d; font-size: 24px; font-weight: normal; margin-bottom: 5px } #examples p { margin: 0 0 25px 0; max-width: 600px } #examples .example { margin-top: 60px } #examples #todoExample { font-size: 14px } #examples #todoExample ul { list-style-type: square; margin: 0 0 10px 0 } #examples #todoExample input { border: 1px solid #ccc; font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; padding: 3px; width: 150px } #examples #todoExample button { font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; margin-left: 5px; padding: 4px 10px } #examples #markdownExample textarea { border: 1px solid #ccc; font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; margin-bottom: 10px; padding: 5px } .home-bottom-section { margin-bottom: 100px } .docs-nextprev:after { content: ""; display: table; clear: both } .docs-prev { float: left } .docs-next { float: right } footer { font-size: 13px; font-weight: 600; margin-top: 36px; margin-bottom: 18px; overflow: auto } section.black content { padding-bottom: 18px } .blogContent { padding-top: 20px } .blogContent:after { content: ""; display: table; clear: both } .blogContent blockquote { padding: 5px 15px; margin: 20px 0; background-color: #f8f5ec; border-left: 5px solid #f7ebc6 } .documentationContent { padding-top: 20px } .documentationContent:after { content: ""; display: table; clear: both } .documentationContent .subHeader { font-size: 24px } .documentationContent h2 { margin-top: 30px } .documentationContent blockquote { padding: 15px 30px 15px 15px; margin: 20px 0; background-color: rgba(204, 122, 111, 0.1); border-left: 5px solid rgba(191, 87, 73, 0.2) } .documentationContent blockquote h4 { margin-top: 0 } .documentationContent blockquote p { margin-bottom: 0 } .documentationContent blockquote p:first-child { font-weight: bold; font-size: 17.5px; line-height: 20px; margin-top: 0; text-rendering: optimizelegibility } .docs-prevnext { padding-top: 40px; padding-bottom: 40px } .jsxCompiler { margin: 0 auto; padding-top: 20px; width: 1220px } .jsxCompiler label.compiler-option { display: block; margin-top: 5px } .jsxCompiler #jsxCompiler { margin-top: 20px } .jsxCompiler .playgroundPreview { padding: 0; width: 600px } .jsxCompiler .playgroundPreview pre { font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace; font-size: 0.8em; line-height: 1.5 } .jsxCompiler .playgroundError { padding: 15px 20px } .button { background: -webkit-linear-gradient(#9a9a9a, #646464); background: linear-gradient(#9a9a9a, #646464); border-radius: 4px; padding: 8px 16px; font-size: 18px; font-weight: 400; margin: 0 12px; display: inline-block; color: #fafafa; text-decoration: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); text-decoration: none } .button:hover { text-decoration: none } .button:active { box-shadow: none } .hero .button { box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3) } .button.blue { background: -webkit-linear-gradient(#77a3d2, #4783c2); background: linear-gradient(#77a3d2, #4783c2) } .row { padding-bottom: 4px } .row .span4 { width: 33.33%; display: table-cell } .row .span8 { width: 66.66%; display: table-cell } .row .span6 { width: 50%; display: table-cell } p { margin: 10px 0 } .highlight { padding: 10px; margin-bottom: 20px } figure { text-align: center } .inner-content { float: right; width: 650px } .nosidebar .inner-content { float: none; margin: 0 auto } h1:after { content: ""; display: table; clear: both } .edit-page-link { float: right; font-size: 16px; font-weight: normal; line-height: 20px; margin-top: 17px } .post-list-item + .post-list-item { margin-top: 60px } /*div.CodeMirror pre, div.CodeMirror-linenumber, code {*/ /*font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;*/ /*font-size: 0.8em;*/ /*line-height: 1.5*/ /*}*/ /*div.CodeMirror-linenumber:after {*/ /*content: '.'*/ /*}*/ /*.CodeMirror, div.CodeMirror-gutters, div.highlight {*/ /*border: none*/ /*}*/ /*.CodeMirror-readonly div.CodeMirror-cursor {*/ /*visibility: hidden*/ /*}*/ /*small code, li code, p code {*/ /*color: #555;*/ /*background-color: rgba(0, 0, 0, 0.04);*/ /*padding: 1px 3px*/ /*}*/ .cm-s-default span.cm-string-2 { color: inherit } .playground:after { content: ""; display: table; clear: both } .playground-tab { border-bottom: none !important; border-radius: 3px 3px 0 0; padding: 6px 8px; font-size: 12px; font-weight: bold; color: #c2c0bc; background-color: #f1ede4; display: inline-block; cursor: pointer } .playgroundCode, .playground-tab, .playgroundPreview { border: 1px solid rgba(16, 16, 16, 0.1) } .playground-tab-active { color: #222 } .playgroundCode { border-radius: 0 3px 3px 3px; float: left; overflow: hidden; width: 600px } .playgroundPreview { background-color: white; border-radius: 3px; float: right; padding: 15px 20px; width: 280px } .playgroundError { color: #c5695c; font-size: 15px } .MarkdownEditor textarea { width: 100%; height: 100px } .hll { background-color: #f7ebc6; border-left: 5px solid #f7d87c; display: block; margin-left: -14px; margin-right: -14px; padding-left: 9px } .highlight .javascript .err { background-color: transparent; color: inherit } .highlight { position: relative; margin-bottom: 14px; padding: 30px 14px 14px; border: none; border-radius: 0; overflow: auto } .highlight pre { padding: 0; margin-top: 0; margin-bottom: 0; background-color: transparent; border: 0 } .highlight pre code { display: block; background: none; padding: 0 } .highlight pre .lineno { display: inline-block; width: 22px; padding-right: 5px; margin-right: 10px; color: #bebec5; text-align: right } .highlight:after { position: absolute; top: 0; right: 0; left: 0; padding: 3px 7px; font-size: 12px; font-weight: bold; color: #c2c0bc; background-color: #f1ede4; content: "Code" } .downloadCenter { text-align: center; margin-top: 20px; margin-bottom: 25px } .downloadSection:hover { text-decoration: none !important } @media screen and (max-width: 960px) { .nav-main { position: static } .container { padding-top: 0 } } .post { margin-bottom: 30px } .pagination { margin-bottom: 30px; width: 100%; overflow: hidden } .pagination .next { float: right } div[data-twttr-id] iframe { margin: 10px auto !important } .three-column:after { content: ""; display: table; clear: both } .three-column > ul { float: left; margin-left: 30px; width: 190px } .three-column > ul:first-child { margin-left: 20px } .nav-tabs { margin-left: 0; margin-bottom: 1px;border-bottom:none; } .nav-tabs>li{margin-left:0} .preview-title{display:block; padding:10px 15px 13px; line-height: 1.42857; color: #333; margin-left:30px; } .large-text-area { border:1px solid #ddd; border-radius: 0 4px 4px 4px; /*height: 400px;*/ /*min-height: 100px;*/ /*height: 100%;*/ /*margin: 10px;*/ } .code-area, .result-area{ box-sizing:border-box; } .code-area.horizontal { width: 70%; float: left; } .code-area.vertical { width: 100%; float: none; } .result-area.horizontal { width: 30%; float: left; } .result-area.vertical { width: 100%; float: none; } .result-area { width: 50%; float: left; } .sample-view { border:1px solid #ddd; border-radius: 4px; background-color: #f8f8f5; padding: 20px 30px; margin-left:30px; } .sample-view button { margin: 5px; } .sample-view input[type=checkbox] { margin-right: 5px; }