Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- Please don't edit this file directly.
- Instead, edit the stylus (.styl) files and compile it to CSS on your machine.
- */
- /* ----------------------------------------------------------------------------
- * Fonts
- */
- @import url("//fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:300");
- /* ----------------------------------------------------------------------------
- * Base
- */
- html,
- body,
- div,
- span,
- applet,
- object,
- iframe,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- p,
- blockquote,
- pre,
- a,
- abbr,
- acronym,
- address,
- big,
- cite,
- code,
- del,
- dfn,
- em,
- img,
- ins,
- kbd,
- q,
- s,
- samp,
- small,
- strike,
- strong,
- sub,
- sup,
- tt,
- var,
- dl,
- dt,
- dd,
- ol,
- ul,
- li,
- fieldset,
- form,
- label,
- legend,
- table,
- caption,
- tbody,
- tfoot,
- thead,
- tr,
- th,
- td {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- font-weight: inherit;
- font-style: inherit;
- font-family: inherit;
- font-size: 100%;
- vertical-align: baseline;
- }
- body {
- line-height: 1;
- color: #000;
- background: #fff;
- }
- ol,
- ul {
- list-style: none;
- }
- table {
- border-collapse: separate;
- border-spacing: 0;
- vertical-align: middle;
- }
- caption,
- th,
- td {
- text-align: left;
- font-weight: normal;
- vertical-align: middle;
- }
- a img {
- border: none;
- }
- html,
- body {
- height: 100%;
- }
- html {
- overflow-x: hidden;
- }
- body,
- td,
- textarea,
- input {
- font-family: Helvetica Neue, Open Sans, sans-serif;
- line-height: 1.6;
- font-size: 13px;
- color: #111111;
- }
- @media (max-width: 480px) {
- body,
- td,
- textarea,
- input {
- font-size: 12px;
- }
- }
- a {
- color: #33AACC;
- text-decoration: none;
- }
- a:hover {
- color: #33AACC;
- }
- /* ----------------------------------------------------------------------------
- * Content styling
- */
- .content p,
- .content ul,
- .content ol,
- .content h1,
- .content h2,
- .content h3,
- .content h4,
- .content h5,
- .content h6,
- .content pre,
- .content blockquote {
- padding: 10px 0;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- .content h1,
- .content h2,
- .content h3,
- .content h4,
- .content h5,
- .content h6 {
- font-weight: bold;
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
- }
- .content pre {
- font-family: Menlo, monospace;
- }
- .content ul > li {
- list-style-type: disc;
- }
- .content ol > li {
- list-style-type: decimal;
- }
- .content ul,
- .content ol {
- margin-left: 20px;
- }
- .content ul > li {
- list-style-type: none;
- position: relative;
- }
- .content ul > li:before {
- content: '';
- display: block;
- position: absolute;
- left: -17px;
- top: 7px;
- width: 5px;
- height: 5px;
- -webkit-border-radius: 4px;
- border-radius: 4px;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background: #fff;
- border: solid 1px #EEEEEE;
- }
- .content li > :first-child {
- padding-top: 0;
- }
- .content strong,
- .content b {
- font-weight: bold;
- }
- .content i,
- .content em {
- font-style: italic;
- }
- .content code {
- font-family: Menlo, monospace;
- background: #272724;
- padding: 1px 3px;
- font-size: 0.95em;
- }
- .content pre > code {
- display: block;
- background: transparent;
- font-size: 0.85em;
- letter-spacing: -1px;
- }
- .content blockquote :first-child {
- padding-top: 0;
- }
- .content blockquote :last-child {
- padding-bottom: 0;
- }
- .content table {
- margin-top: 10px;
- margin-bottom: 10px;
- padding: 0;
- border-collapse: collapse;
- clear: both;
- float: left;
- }
- .content table tr {
- border-top: 1px solid #ccc;
- background-color: #fff;
- margin: 0;
- padding: 0;
- }
- .content table tr :nth-child(2n) {
- background-color: #f8f8f8;
- }
- .content table tr th {
- text-align: auto;
- font-weight: bold;
- border: 1px solid #ccc;
- margin: 0;
- padding: 6px 13px;
- }
- .content table tr td {
- text-align: auto;
- border: 1px solid #ccc;
- margin: 0;
- padding: 6px 13px;
- }
- .content table tr th :first-child,
- .content table tr td :first-child {
- margin-top: 0;
- }
- .content table tr th :last-child,
- .content table tr td :last-child {
- margin-bottom: 0;
- }
- /* ----------------------------------------------------------------------------
- * Content
- */
- .content-root {
- min-height: 90%;
- position: relative;
- }
- .content {
- padding-top: 30px;
- padding-bottom: 40px;
- padding-left: 40px;
- padding-right: 40px;
- zoom: 1;
- max-width: 700px;
- }
- .content:before,
- .content:after {
- content: "";
- display: table;
- }
- .content:after {
- clear: both;
- }
- .content blockquote {
- color: #33AACC;
- }
- .content h1,
- .content h2,
- .content h3 {
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
- font-family: montserrat;
- padding-bottom: 0;
- color: #000000;
- }
- .content h1 + p,
- .content h2 + p,
- .content h3 + p,
- .content h1 ul,
- .content h2 ul,
- .content h3 ul,
- .content h1 ol,
- .content h2 ol,
- .content h3 ol {
- padding-top: 10px;
- }
- .content h1,
- .content h2 {
- text-transform: uppercase;
- letter-spacing: 1px;
- font-size: 1.5em;
- }
- .content h3 {
- font-size: 1.2em;
- }
- .content h1,
- .content h2,
- .content .big-heading,
- body.big-h3 .content h3 {
- padding-top: 80px;
- }
- .content h1:before,
- .content h2:before,
- .content .big-heading:before,
- body.big-h3 .content h3:before {
- display: block;
- content: '';
- background: -webkit-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0));
- background: -moz-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0));
- background: -o-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0));
- background: -ms-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0));
- background: linear-gradient(to right, #dfe2e7 80%, rgba(223,226,231,0));
- -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.4);
- box-shadow: 0 1px 0 rgba(255,255,255,0.4);
- height: 1px;
- position: relative;
- top: -40px;
- left: -40px;
- width: 100%;
- }
- @media (max-width: 768px) {
- .content h1,
- .content h2,
- .content .big-heading,
- body.big-h3 .content h3 {
- padding-top: 40px;
- }
- .content h1:before,
- .content h2:before,
- .content .big-heading:before,
- body.big-h3 .content h3:before {
- background: #dfe2e7;
- left: -40px;
- top: -20px;
- width: 120%;
- }
- }
- .content h4,
- .content h5,
- .content .small-heading,
- body:not(.big-h3) .content h3 {
- border-bottom: solid 1px rgba(0,0,0,0.07);
- color: #000000;
- padding-top: 30px;
- padding-bottom: 10px;
- }
- body:not(.big-h3) .content h3 {
- font-size: 0.9em;
- }
- .content h1:first-child {
- padding-top: 0;
- }
- .content h1:first-child,
- .content h1:first-child a,
- .content h1:first-child a:visited {
- color: #33AACC;
- }
- .content h1:first-child:before {
- display: none;
- }
- @media (max-width: 768px) {
- .content h4,
- .content h5,
- .content .small-heading,
- body:not(.big-h3) .content h3 {
- padding-top: 20px;
- }
- }
- @media (max-width: 480px) {
- .content {
- padding: 20px;
- padding-top: 40px;
- }
- .content h4,
- .content h5,
- .content .small-heading,
- body:not(.big-h3) .content h3 {
- padding-top: 10px;
- }
- }
- body.no-literate .content pre > code {
- background: #272724;
- border: solid 1px #e7eaee;
- border-top: solid 1px #dbdde2;
- border-left: solid 1px #e2e5e9;
- display: block;
- padding: 10px;
- -webkit-border-radius: 2px;
- border-radius: 2px;
- overflow: auto;
- }
- body.no-literate .content pre > code {
- -webkit-overflow-scrolling: touch;
- }
- body.no-literate .content pre > code::-webkit-scrollbar {
- width: 15px;
- height: 15px;
- }
- body.no-literate .content pre > code::-webkit-scrollbar-thumb {
- background: #ddd;
- -webkit-border-radius: 8px;
- border-radius: 8px;
- border: solid 4px #272724;
- }
- body.no-literate .content pre > code:hover::-webkit-scrollbar-thumb {
- background: #999;
- }
- @media (max-width: 1180px) {
- .content pre > code {
- background: #272724;
- border: solid 1px #e7eaee;
- border-top: solid 1px #dbdde2;
- border-left: solid 1px #e2e5e9;
- display: block;
- padding: 10px;
- -webkit-border-radius: 2px;
- border-radius: 2px;
- overflow: auto;
- }
- .content pre > code {
- -webkit-overflow-scrolling: touch;
- }
- .content pre > code::-webkit-scrollbar {
- width: 15px;
- height: 15px;
- }
- .content pre > code::-webkit-scrollbar-thumb {
- background: #ddd;
- -webkit-border-radius: 8px;
- border-radius: 8px;
- border: solid 4px #272724;
- }
- .content pre > code:hover::-webkit-scrollbar-thumb {
- background: #999;
- }
- }
- .button {
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
- font-family: montserrat, sans-serif;
- letter-spacing: -1px;
- font-weight: bold;
- display: inline-block;
- padding: 3px 25px;
- border: solid 2px #33AACC;
- -webkit-border-radius: 20px;
- border-radius: 20px;
- margin-right: 15px;
- }
- .button,
- .button:visited {
- background: #272724;
- color: #fff;
- text-shadow: none;
- }
- .button:hover {
- border-color: #33AACC;
- background: #33AACC;
- color: #fff;
- }
- .button.light,
- .button.light:visited {
- background: #272724;
- color: #fff;
- border-color: #33AACC;
- text-shadow: none;
- }
- .button.light:hover {
- border-color: #33AACC;
- background: #33AACC;
- color: #fff;
- }
- .content .button + em {
- color: #EEEEEE;
- }
- @media (min-width: 1180px) {
- body:not(.no-literate) .content-root {
- background-color: #272724;
- -webkit-box-shadow: inset 780px 0 #fff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0,0,0,0.1);
- box-shadow: inset 780px 0 #fff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0,0,0,0.1);
- }
- }
- @media (min-width: 1180px) {
- body:not(.no-literate) .content {
- padding-left: 0;
- padding-right: 0;
- width: 930px;
- max-width: none;
- }
- body:not(.no-literate) .content > p,
- body:not(.no-literate) .content > ul,
- body:not(.no-literate) .content > ol,
- body:not(.no-literate) .content > h1,
- body:not(.no-literate) .content > h2,
- body:not(.no-literate) .content > h3,
- body:not(.no-literate) .content > h4,
- body:not(.no-literate) .content > h5,
- body:not(.no-literate) .content > h6,
- body:not(.no-literate) .content > pre,
- body:not(.no-literate) .content > blockquote {
- width: 550px;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- padding-right: 40px;
- padding-left: 40px;
- }
- body:not(.no-literate) .content > h1,
- body:not(.no-literate) .content > h2,
- body:not(.no-literate) .content > h3 {
- clear: both;
- width: 100%;
- }
- body:not(.no-literate) .content > pre,
- body:not(.no-literate) .content > blockquote {
- width: 380px;
- padding-left: 20px;
- padding-right: 20px;
- float: right;
- clear: right;
- }
- body:not(.no-literate) .content > pre + p,
- body:not(.no-literate) .content > blockquote + p,
- body:not(.no-literate) .content > pre + ul,
- body:not(.no-literate) .content > blockquote + ul,
- body:not(.no-literate) .content > pre + ol,
- body:not(.no-literate) .content > blockquote + ol,
- body:not(.no-literate) .content > pre + h4,
- body:not(.no-literate) .content > blockquote + h4,
- body:not(.no-literate) .content > pre + h5,
- body:not(.no-literate) .content > blockquote + h5,
- body:not(.no-literate) .content > pre + h6,
- body:not(.no-literate) .content > blockquote + h6 {
- clear: both;
- }
- body:not(.no-literate) .content > p,
- body:not(.no-literate) .content > ul,
- body:not(.no-literate) .content > ol,
- body:not(.no-literate) .content > h4,
- body:not(.no-literate) .content > h5,
- body:not(.no-literate) .content > h6 {
- float: left;
- clear: left;
- }
- body:not(.no-literate) .content > h4,
- body:not(.no-literate) .content > h5,
- body:not(.no-literate) .content > .small-heading,
- body:not(.big-h3) body:not(.no-literate) .content > h3 {
- margin-left: 40px;
- width: 470px;
- margin-bottom: 3px;
- padding-left: 0;
- padding-right: 0;
- }
- body:not(.no-literate) .content > table {
- margin-left: 40px;
- margin-right: 40px;
- max-width: 470px;
- }
- body:not(.no-literate):not(.big-h3) .content > h3 {
- margin-left: 40px;
- width: 470px;
- margin-bottom: 3px;
- padding-left: 0;
- padding-right: 0;
- }
- }
- .header {
- background: #272724;
- border-bottom: solid 1px #dfe2e7;
- padding: 15px 15px 15px 30px;
- zoom: 1;
- line-height: 20px;
- position: relative;
- }
- .header:before,
- .header:after {
- content: "";
- display: table;
- }
- .header:after {
- clear: both;
- }
- .header .left {
- float: left;
- }
- .header .right {
- text-align: right;
- position: absolute;
- right: 15px;
- top: 15px;
- }
- .header .right iframe {
- display: inline-block;
- vertical-align: middle;
- }
- .header h1 {
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
- font-weight: bold;
- font-family: montserrat, sans-serif;
- font-size: 13px;
- }
- .header h1,
- .header h1 a,
- .header h1 a:visited {
- color: #EEEEE;
- }
- .header h1 a:hover {
- color: #FFFFFF;
- }
- .header li a {
- font-size: 0.88em;
- color: #EEEEEE;
- display: block;
- }
- .header li a:hover {
- color: #FFFFFF;
- }
- @media (min-width: 480px) {
- .header h1 {
- float: left;
- }
- .header ul,
- .header li {
- display: block;
- float: left;
- }
- .header ul {
- margin-left: -15px;
- }
- .header h1 + ul {
- border-left: solid 1px #EEEEEE;
- margin-left: 15px;
- }
- .header li {
- border-left: solid 1px rgba(255,255,255,0.5);
- border-right: solid 1px #dfe2e7;
- }
- .header li:last-child {
- border-right: 0;
- }
- .header li a {
- padding: 0 15px;
- }
- }
- @media (max-width: 480px) {
- .right {
- display: none;
- }
- }
- .menubar {
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
- }
- .menubar .section {
- padding: 30px 30px;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- .menubar .section + .section {
- border-top: solid 1px #dfe2e7;
- }
- .menubar .section.no-line {
- border-top: 0;
- padding-top: 0;
- }
- a.big.button {
- display: block;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- width: 100%;
- padding: 10px 20px;
- text-align: center;
- font-weight: bold;
- font-size: 1.1em;
- background: transparent;
- border: solid 3px #33AACC;
- -webkit-border-radius: 30px;
- border-radius: 30px;
- font-family: montserrat, sans-serif;
- }
- a.big.button,
- a.big.button:visited {
- color: #fff;
- text-decoration: none;
- }
- a.big.button:hover {
- background: #33AACC;
- }
- a.big.button:hover,
- a.big.button:hover:visited {
- color: #fff;
- }
- @media (max-width: 480px) {
- .menubar {
- padding: 20px;
- border-bottom: solid 1px #dfe2e7;
- }
- }
- @media (max-width: 768px) {
- .menubar {
- display: none;
- }
- }
- @media (min-width: 768px) {
- .content-root {
- padding-left: 230px;
- }
- .menubar {
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- width: 230px;
- border-right: solid 1px #dfe2e7;
- }
- .menubar.fixed {
- position: fixed;
- overflow-y: auto;
- }
- .menubar.fixed {
- -webkit-overflow-scrolling: touch;
- }
- .menubar.fixed::-webkit-scrollbar {
- width: 15px;
- height: 15px;
- }
- .menubar.fixed::-webkit-scrollbar-thumb {
- background: #272724;
- -webkit-border-radius: 8px;
- border-radius: 8px;
- border: solid 4px #fff;
- }
- .menubar.fixed:hover::-webkit-scrollbar-thumb {
- background: #999;
- }
- }
- .menubar {
- font-size: 0.9em;
- background: #272724;
- }
- .menu ul.level-1 > li + li {
- margin-top: 20px;
- }
- .menu a {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- position: relative;
- display: block;
- padding-top: 1px;
- padding-bottom: 1px;
- margin-right: -30px;
- }
- .menu a,
- .menu a:visited {
- color: #EEEEEE;
- }
- .menu a:hover {
- color: #FFFFFF;
- }
- .menu a.level-1 {
- font-family: montserrat, sans-serif;
- text-transform: uppercase;
- font-size: 0.9em;
- font-weight: bold;
- }
- .menu a.level-1,
- .menu a.level-1:visited {
- color: #EEEEEE;
- }
- .menu a.level-1:hover {
- color: #FFFFFF;
- }
- .menu a.level-2 {
- font-weight: normal;
- }
- .menu a.level-3 {
- font-weight: normal;
- font-size: 0.9em;
- padding-left: 10px;
- }
- .menu a.active {
- font-weight: bold !important;
- }
- .menu a.active,
- .menu a.active:visited,
- .menu a.active:hover {
- color: #33AACC !important;
- }
- .menu a.active:after {
- content: '';
- display: block;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- position: absolute;
- top: 10px;
- right: 30px;
- width: 9px;
- height: 3px;
- -webkit-border-radius: 2px;
- border-radius: 2px;
- background: #272724;
- }
- code { color: #EFEFEF; }
- code .string,
- code .number {
- color: #3ac;
- }
- code .init {
- color: #383;
- }
- code .keyword {
- font-weight: bold;
- }
- code .comment {
- color: #FFE000;
- }
- .large-brief .content > h1:first-child + p,
- .content > p.brief {
- font-size: 1.3em;
- font-family: Open Sans, sans-serif;
- font-weight: 300;
- }
- .title-area {
- min-height: 100px;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-font-smoothing: antialiased;
- text-rendering: optimizeLegibility;
- text-align: center;
- border-bottom: solid 1px #dfe2e7;
- overflow: hidden;
- }
- .title-area > img.bg {
- z-index: 0;
- position: absolute;
- left: -9999px;
- }
- .title-area > div {
- position: relative;
- z-index: 1;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement