@font-face { font-family: Inconsolata; src: url("fonts/Inconsolata.ttf"); } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } body { font-size: 12px; line-height: 21px; background-color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; color: #0a0a0a; } #wrapper { margin: 0; } #grid { position: fixed; top: 0; left: 0; width: 796px; background-image: url("i/grid.png"); z-index: 100; } pre { line-height: 18px; font-size: 13px; margin: 7px 0 21px; padding: 5px 10px; overflow: auto; background-color: #fafafa; border: 1px solid #e6e6e6; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } /* typography stuff */ .mono { font-family: "Inconsolata", Andale Mono, Monaco, Monospace; } .sans { font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; } .serif { font-family: "Georgia", Times New Roman, Times, serif; } a { color: #2e87dd; text-decoration: none; } a:hover { text-decoration: underline; } /* navigation */ #navBg { background-color: #f2f2f2; background-image: url("i/shadow.png"); background-position: right top; background-repeat: repeat-y; width: 220px; position: fixed; top: 0; left: 0; z-index: 0; } #nav { background-image: url("i/logo.png"); background-repeat: no-repeat; background-position: center 10px; width: 220px; float: left; margin: 0; padding: 150px 20px 0; font-size: 13px; text-shadow: 1px 1px #fff; position: relative; z-index: 1; } #nav .homeImageLink { position: absolute; display: block; top: 10px; left: 0; width: 220px; height: 138px; } #nav ul { list-style-type:none; padding: 0; margin: 21px 0 0 0; } #nav ul li { width: 100%; } #nav ul li.version { text-align: center; color: #4d4d4d; } #nav h1 { color: #4d4d4d; text-align: center; font-size: 15px; font-weight: normal; text-transform: uppercase; letter-spacing: 3px; } span.spacer { color: #2e87dd; margin: 0 3px 0 5px; background-image: url("i/dot.png"); background-repeat: repeat-x; background-position: left 13px; } /* icons */ span.icon { width: 16px; display: block; background-image: url("i/sprite.png"); background-repeat: no-repeat; } span.icon.home { background-position: center 5px; } span.icon.start { background-position: center -27px; } span.icon.download { background-position: center -59px; } span.icon.api { background-position: center -89px; } span.icon.optimize { background-position: center -119px; } span.icon.script { background-position: center -150px; } span.icon.question { background-position: center -182px; } span.icon.requirement { background-position: center -214px; } span.icon.history { background-position: center -247px; } span.icon.help { background-position: center -279px; } span.icon.blog { background-position: center -311px; } span.icon.twitter { background-position: center -343px; } span.icon.git { background-position: center -375px; } span.icon.fork { background-position: center -407px; } /* content */ #content { margin: 0 0 0 220px; padding: 0 20px; background-color: #fff; font-family: "Georgia", Times New Roman, Times, serif; position: relative; } #content p { padding: 7px 0; color: #333; font-size: 14px; } #content h1, #content h2, #content h3, #content h4, #content h5 { font-weight: normal; padding: 21px 0 7px; } #content h1 { font-size: 21px; } #content h2 { padding: 0 0 18px 0; margin: 0 0 7px 0; font-weight: normal; font-size: 21px; line-height: 24px; text-align: center; color: #222; background-image: url("i/arrow.png"); background-repeat: no-repeat; background-position: center bottom; font-family: "Inconsolata", Andale Mono, Monaco, Monospace; text-transform: uppercase; letter-spacing: 2px; text-shadow: 1px 1px 0 #fff; } #content h2 a { color: #222; } #content h2 a:hover, #content h3 a:hover, #content h4 a:hover { text-decoration: none; } span.sectionMark { display: block; color: #aaa; text-shadow: 1px 1px 0 #fff; font-size: 15px; font-family: "Inconsolata", Andale Mono, Monaco, Monospace; } #content h3 { font-size: 17px; } #content h4 { padding-top: 0; font-size: 15px; } #content h5 { font-size: 10px; } #content ul { list-style-type: disc; } #content ul, #content ol { /* border-left: 1px solid #333; */ color: #333; font-size: 14px; list-style-position: outside; margin: 7px 0 21px 0; /* padding: 0 0 0 28px; */ } #content ul { font-style: italic; } #content ol { border: none; list-style-position: inside; padding: 0; font-family: "Georgia", Times New Roman, Times, serif; } #content ul ul, #content ol ol { border: none; padding: 0; margin: 0 0 0 28px; } #content .section { padding: 48px 0; background-image: url("i/line.png"); background-repeat: no-repeat; background-position: center bottom; width: 576px; margin: 0 auto; } #content .section .subSection { padding: 0 0 0 48px; margin: 28px 0 0 0; display: block; border-left: 2px solid #ddd; } #content .section:last-child { background-image: none; } #content .note { color: #222; background-color: #ffff99; padding: 5px 10px; margin: 7px 0; display: inline-block; } /* page directory */ #content #directory.section { background-color: #fff; width: 576px; } #content #directory.section ul ul ul { margin: 0 0 0 48px; } #content #directory.section ul ul li { background-image: url("i/sprite.png"); background-repeat: no-repeat; background-position: left -437px; padding-left: 18px; font-style: normal; } #content #directory h1 { padding: 0 0 65px 0; margin: 0 0 14px 0; font-weight: normal; font-size: 21px; text-align: center; text-transform: uppercase; letter-spacing: 2px; color: #222; background-image: url("i/arrow-x.png"); background-repeat: no-repeat; background-position: center bottom; font-family: "Inconsolata", Andale Mono, Monaco, Monospace; } #content ul.index { padding: 0; background-color: transparent; border: none; -moz-box-shadow: none; font-style: normal; font-family: "Inconsolata", Andale Mono, Monaco, Monospace; } #content ul.index li { width: 100%; font-size: 15px; color: #333; padding: 0 0 7px 0; } /* intro page specific */ #content #intro { width: 576px; margin: 0 auto; padding: 21px 0; } #content #intro p, #content #intro h1 { font-size: 19px; line-height: 28px; color: green; letter-spacing: 2px; padding: 0 0 28px 0; } #content #intro p:last-child, #content #intro h1:last-child { padding: 0; } #content #intro p a { color: green; text-decoration: underline; } #content .section h4 { text-align: center; } #content .section h4 a.download { display: inline-block; margin-top: 1em; } /* download page */ #content h4 a.download { -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #F2F2F2; background-image: url("i/sprite.png"), -moz-linear-gradient(center top , #FAFAFA 0%, #F2F2F2 100%); background-image: url("i/sprite.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #f2f2f2)); background-position: 7px -58px, center center; background-repeat: no-repeat, no-repeat; border: 1px solid #CCCCCC; color: #333333; font-size: 12px; margin: 0 0 0 5px; padding: 0 10px 0 25px; text-shadow: 1px 1px 0 #FFFFFF; } /* footer */ #footer { color: #4d4d4d; padding: 65px 20px 20px; margin: 20px 0 0 220px; text-align: center; display: block; font-size: 13px; background-image: url("i/arrow-x.png"); background-repeat: no-repeat; background-position: center top; background-color: #fff; } #footer .line { display: block; } #footer .line a { color: #4d4d4d; text-decoration: underline; } /* Pygments manni style */ code {background-color: #fafafa; color: #333;} code .comment {color: green; font-style: italic} code .comment.preproc {color: #099; font-style: normal} code .comment.special {font-weight: bold} code .keyword {color: #069; font-weight: bold} code .keyword.pseudo {font-weight: normal} code .keyword.type {color: #078} code .operator {color: #555} code .operator.word {color: #000; font-weight: bold} code .name.builtin {color: #366} code .name.function {color: #c0f} code .name.class {color: #0a8; font-weight: bold} code .name.namespace {color: #0cf; font-weight: bold} code .name.exception {color: #c00; font-weight: bold} code .name.variable {color: #033} code .name.constant {color: #360} code .name.label {color: #99f} code .name.entity {color: #999; font-weight: bold} code .name.attribute {color: #309} code .name.tag {color: #309; font-weight: bold} code .name.decorator {color: #99f} code .string {color: #c30} code .string.doc {font-style: italic} code .string.interpol {color: #a00} code .string.escape {color: #c30; font-weight: bold} code .string.regex {color: #3aa} code .string.symbol {color: #fc3} code .string.other {color: #c30} code .number {color: #f60} /* webkit scroll bars */ pre::-webkit-scrollbar { width: 6px; height: 6px; } pre::-webkit-scrollbar-button:start:decrement, pre::-webkit-scrollbar-button:end:increment { display: block; height: 0; width: 0; } pre::-webkit-scrollbar-button:vertical:increment, pre::-webkit-scrollbar-button:horizontal:increment { background-color: transparent; display: block; height: 0; width: 0; } pre::-webkit-scrollbar-track-piece { -webkit-border-radius: 3px; } pre::-webkit-scrollbar-thumb:vertical { background-color: #aaa; -webkit-border-radius: 3px; } pre::-webkit-scrollbar-thumb:horizontal { background-color: #aaa; -webkit-border-radius: 3px; } /* hbox */ .hbox { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: stretch; display: -moz-box; -moz-box-orient: horizontal; -moz-box-align: stretch; display: box; box-orient: horizontal; box-align: stretch; width: 100%; } .hbox > * { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; display: block; } .vbox { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; display: -moz-box; -moz-box-orient: vertical; -moz-box-align: stretch; display: box; box-orient: vertical; box-align: stretch; } .vbox > * { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; display: block; } .spacer { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } .reverse { -webkit-box-direction: reverse; -moz-box-direction: reverse; box-direction: reverse; } .boxFlex0 { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; } .boxFlex1, .boxFlex { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } .boxFlex2 { -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2; } .boxGroup1 { -webkit-box-flex-group: 1; -moz-box-flex-group: 1; box-flex-group: 1; } .boxGroup2 { -webkit-box-flex-group: 2; -moz-box-flex-group: 2; box-flex-group: 2; } .start { -webkit-box-pack: start; -moz-box-pack: start; box-pack: start; } .end { -webkit-box-pack: end; -moz-box-pack: end; box-pack: end; } .center { -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; } /* clearfix */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } /** * Resposive Docs */ .off-canvas-button { display: none; } @media (max-width : 840px) { /** * hiding navigation */ #navBg { display: none; } #navBg, #nav { background-image: none; } .homeImageLink { background-image: url("i/logo.png"); } /** * off canvas nav */ #nav { left: -220px; transition: left .6s ease; position: fixed; display: block; height: 100%; background-color: #F2F2F2; overflow: auto; box-shadow: -20px -10px 10px -20px rgba(0, 0, 0, 0.3) inset; -webkit-box-shadow: -20px -10px 10px -20px rgba(0, 0, 0, 0.3) inset; -webkit-transition: left 0.4s ease-out; -moz-transition: left 0.4s ease-out; -o-transition: left 0.4s ease-out; transition: left 0.4s ease-out; } .off-canvas-button { background: none; border: none; position: absolute; left: 15px; display: block; top: 0; z-index: 10; width: 30px; height: 30px; cursor: pointer; -webkit-transition: left 0.4s ease-out; -moz-transition: left 0.4s ease-out; -o-transition: left 0.4s ease-out; transition: left 0.4s ease-out; } .off-canvas-button > span { color: #4D4D4D; width: 30px; position: absolute; left: 0; -webkit-transition: opacity 0.4s ease-out; -moz-transition: opacity 0.4s ease-out; -o-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; } .off-canvas-button .lines { opacity: 1; } .off-canvas-button .line { border-radius: 10px; height: 4px; margin-bottom: 4px; float: left; width: 100%; background-color: #4D4D4D; } .off-canvas-button .cross { opacity: 0; font-size: 35px; line-height: 20px; } /** * close / open states */ .off-canvas-button.open { left: 230px; } .off-canvas-button.open .cross { opacity: 1; } .off-canvas-button.open .lines { opacity: 0; } #nav.open { left: 0; } /** * reset containers margin */ #content, #footer { margin-left: 0; } /** * fluid containers */ #content .section { width: 100% !important; } }