| * { |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| } |
| |
| *:before, |
| *:after { |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| } |
| |
| html, button, input, select, textarea, |
| .pure-g [class *= "pure-u"] { |
| font-family: Helvetica, Arial, sans-serif; |
| letter-spacing: 0.01em; |
| } |
| |
| |
| /* -------------------------- |
| * Element Styles |
| * -------------------------- |
| */ |
| |
| body { |
| min-width: 320px; |
| background-color: #fff; |
| color: #777; |
| line-height: 1.6; |
| } |
| |
| h1, h2, h3, h4, h5, h6 { |
| font-weight: bold; |
| color: rgb(75, 75, 75); |
| } |
| h3 { |
| font-size: 1.25em; |
| } |
| h4 { |
| font-size: 1.125em; |
| } |
| |
| a { |
| color: #3b8bba; /* block-background-text-normal */ |
| text-decoration: none; |
| } |
| |
| a:visited { |
| color: #265778; /* block-normal-text-normal */ |
| } |
| |
| dt { |
| font-weight: bold; |
| } |
| dd { |
| margin: 0 0 10px 0; |
| } |
| |
| aside { |
| background: #1f8dd6; /* same color as selected state on site menu */ |
| margin: 1em 0; |
| padding: 0.3em 1em; |
| border-radius: 3px; |
| color: #fff; |
| } |
| aside a, aside a:visited { |
| color: rgb(169, 226, 255); |
| } |
| |
| |
| /* -------------------------- |
| * Layout Styles |
| * -------------------------- |
| */ |
| |
| /* Navigation Push Styles */ |
| #layout { |
| position: relative; |
| padding-left: 0; |
| } |
| #layout.active #menu { |
| left: 160px; |
| width: 160px; |
| } |
| |
| /* Apply the .box class on the immediate parent of any grid element (pure-u-*) to apply some padding. */ |
| .l-box { |
| padding: 1em; |
| } |
| |
| .l-wrap { |
| margin-left: auto; |
| margin-right: auto; |
| } |
| .content .l-wrap { |
| margin-left: -1em; |
| margin-right: -1em; |
| } |
| |
| |
| /* -------------------------- |
| * Header Module Styles |
| * -------------------------- |
| */ |
| |
| .header { |
| font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; |
| max-width: 768px; |
| margin: 0 auto; |
| padding: 1em; |
| text-align: center; |
| border-bottom: 1px solid #eee; |
| background: #fff; |
| letter-spacing: 0.05em; |
| } |
| .header h1 { |
| font-size: 300%; |
| font-weight: 100; |
| margin: 0; |
| } |
| .header h2 { |
| font-size: 125%; |
| font-weight: 100; |
| line-height: 1.5; |
| margin: 0; |
| color: #666; |
| letter-spacing: -0.02em; |
| } |
| |
| |
| /* -------------------------- |
| * Content Module Styles |
| * -------------------------- |
| */ |
| |
| /* The content div is placed as a wrapper around all the docs */ |
| .content { |
| margin-left: auto; |
| margin-right: auto; |
| padding-left: 1em; |
| padding-right: 1em; |
| max-width: 768px; |
| } |
| |
| .content .content-subhead { |
| margin: 2em 0 1em 0; |
| font-weight: 300; |
| color: #888; |
| position: relative; |
| } |
| |
| .content .content-spaced { |
| line-height: 1.8; |
| } |
| |
| .content .content-quote { |
| font-family: "Georgia", serif; |
| color: #666; |
| font-style: italic; |
| line-height: 1.8; |
| border-left: 5px solid #ddd; |
| padding-left: 1.5em; |
| } |
| |
| .content-link { |
| position: absolute; |
| top: 0; |
| right: 0; |
| display: block; |
| height: 100%; |
| width: 20px; |
| background: transparent url('/img/link-icon.png') no-repeat center center; |
| background-size: 20px 20px; |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { |
| .content-link { |
| background-image: url('/img/link-icon@2x.png'); |
| } |
| } |
| |
| |
| /* -------------------------- |
| * Code Styles |
| * -------------------------- |
| */ |
| |
| pre, |
| code { |
| font-family: Consolas, Courier, monospace; |
| color: #333; |
| background: rgb(250, 250, 250); |
| } |
| |
| code { |
| padding: 0.2em 0.4em; |
| white-space: nowrap; |
| } |
| .content p code { |
| font-size: 90%; |
| } |
| |
| .code { |
| margin-left: -1em; |
| margin-right: -1em; |
| border: 1px solid #eee; |
| border-left-width: 0; |
| border-right-width: 0; |
| overflow-x: auto; |
| } |
| .code pre { |
| margin: 0; |
| } |
| .code code { |
| font-size: 95%; |
| white-space: pre; |
| word-wrap: normal; |
| padding: 0; |
| background: none; |
| } |
| .code-wrap code { |
| white-space: pre-wrap; |
| word-wrap: break-word; |
| } |
| .example .code { |
| margin-top: 1em; |
| } |
| |
| /* -------------------------- |
| * Footer Module Styles |
| * -------------------------- |
| */ |
| |
| .footer { |
| font-size: 87.5%; |
| border-top: 1px solid #eee; |
| margin-top: 3.4286em; |
| padding: 1.1429em; |
| background: rgb(250, 250, 250); |
| } |
| |
| .legal { |
| line-height: 1.6; |
| text-align: center; |
| margin: 0 auto; |
| } |
| |
| .legal-license { |
| margin-top: 0; |
| } |
| .legal-links { |
| list-style: none; |
| padding: 0; |
| margin-bottom: 0; |
| } |
| .legal-copyright { |
| margin-top: 0; |
| margin-bottom: 0; |
| } |
| |
| |
| /* -------------------------- |
| * Main Navigation Bar Styles |
| * -------------------------- |
| */ |
| |
| /* Add transition to containers so they can push in and out */ |
| #layout, |
| #menu, |
| .menu-link { |
| -webkit-transition: all 0.2s ease-out; |
| -moz-transition: all 0.2s ease-out; |
| -ms-transition: all 0.2s ease-out; |
| -o-transition: all 0.2s ease-out; |
| transition: all 0.2s ease-out; |
| } |
| |
| #layout.active .menu-link { |
| left: 160px; |
| } |
| |
| #menu { |
| margin-left: -160px; /* "#menu" width */ |
| width: 160px; |
| position: fixed; |
| top: 0; |
| left: 0; |
| bottom: 0; |
| z-index: 1000; /* so the menu or its navicon stays above all content */ |
| background: #191818; |
| overflow-y: auto; |
| } |
| #menu a { |
| color: #999; |
| border: none; |
| white-space: normal; |
| padding: 0.625em 1em; |
| } |
| |
| #menu .pure-menu-open { |
| background: transparent; |
| border: 0; |
| } |
| |
| #menu .pure-menu ul { |
| border: none; |
| background: transparent; |
| display: block; |
| } |
| |
| #menu .pure-menu ul, |
| #menu .pure-menu .menu-item-divided { |
| border-top: 1px solid #333; |
| } |
| |
| #menu .pure-menu-list li .pure-menu-link:hover, |
| #menu .pure-menu-list li .pure-menu-link:focus { |
| background: #333; |
| } |
| |
| .menu-link { |
| position: fixed; |
| display: block; /* show this only on small screens */ |
| top: 0; |
| left: 0; /* "#menu width" */ |
| background: #000; |
| background: rgba(0,0,0,0.7); |
| font-size: 11px; /* change this value to increase/decrease button size */ |
| z-index: 10; |
| width: 4em; |
| height: 4em; |
| padding: 1em; |
| } |
| |
| .menu-link:hover, |
| .menu-link:focus { |
| background: #000; |
| } |
| |
| .menu-link span { |
| position: relative; |
| display: block; |
| margin-top: 0.9em; |
| } |
| |
| .menu-link span, |
| .menu-link span:before, |
| .menu-link span:after { |
| background-color: #fff; |
| pointer-events: none; |
| width: 100%; |
| height: .2em; |
| -webkit-transition: all 0.4s; |
| -moz-transition: all 0.4s; |
| -ms-transition: all 0.4s; |
| -o-transition: all 0.4s; |
| transition: all 0.4s; |
| } |
| |
| .menu-link span:before, |
| .menu-link span:after { |
| position: absolute; |
| top: -.55em; |
| content: " "; |
| } |
| |
| .menu-link span:after { |
| top: .55em; |
| } |
| |
| .menu-link.active span { |
| background: transparent; |
| } |
| |
| .menu-link.active span:before { |
| -webkit-transform: rotate(45deg) translate(.5em, .4em); |
| -moz-transform: rotate(45deg) translate(.5em, .4em); |
| -ms-transform: rotate(45deg) translate(.5em, .4em); |
| -o-transform: rotate(45deg) translate(.5em, .4em); |
| transform: rotate(45deg) translate(.5em, .4em); |
| } |
| |
| .menu-link.active span:after { |
| -webkit-transform: rotate(-45deg) translate(.4em, -.3em); |
| -moz-transform: rotate(-45deg) translate(.4em, -.3em); |
| -ms-transform: rotate(-45deg) translate(.4em, -.3em); |
| -o-transform: rotate(-45deg) translate(.4em, -.3em); |
| transform: rotate(-45deg) translate(.4em, -.3em); |
| } |
| |
| #menu .pure-menu-heading { |
| font-size: 125%; |
| font-weight: 300; |
| letter-spacing: 0.1em; |
| color: #fff; |
| margin-top: 0; |
| padding: 0.5em 0.8em; |
| text-transform: uppercase; |
| } |
| #menu .pure-menu-heading:hover, |
| #menu .pure-menu-heading:focus { |
| color: #999; |
| } |
| |
| #menu .pure-menu-item .active { |
| background: #1f8dd6; |
| color: #fff; |
| } |
| |
| #menu li.pure-menu-item .active:hover, |
| #menu li.pure-menu-item .active:focus { |
| background: #1f8dd6; |
| } |
| |
| |
| /* --------------------- |
| * Smaller Module Styles |
| * --------------------- |
| */ |
| |
| .pure-img-responsive { |
| max-width: 100%; |
| height: auto; |
| } |
| |
| .pure-paginator .pure-button { |
| -webkit-box-sizing: content-box; |
| -moz-box-sizing: content-box; |
| box-sizing: content-box; |
| } |
| |
| .pure-button { |
| font-family: inherit; |
| } |
| a.pure-button-primary { |
| color: white; |
| } |
| |
| |
| /* green call to action button class */ |
| .notice { |
| background-color: #61B842; |
| color: white; |
| } |
| |
| .muted { |
| color: #ccc; |
| } |
| |
| |
| |
| /* ------------- |
| * Table Styles |
| * ------------- |
| */ |
| .pure-table th, |
| .pure-table td { |
| padding: 0.5em 1em; |
| } |
| |
| .table-responsive { |
| margin-left: -1em; |
| margin-right: -1em; |
| overflow-x: auto; |
| margin-bottom: 1em; |
| } |
| .table-responsive table { |
| width: 100%; |
| min-width: 35.5em; |
| border-left-width: 0; |
| border-right-width: 0; |
| } |
| |
| .table-responsive .mq-table { |
| width: 100%; |
| min-width: 44em; |
| } |
| .mq-table th.highlight { |
| background-color: rgb(255, 234, 133); |
| } |
| .mq-table td.highlight { |
| background-color: rgb(255, 250, 229); |
| } |
| .mq-table th.highlight code, |
| .mq-table td.highlight code { |
| background: rgb(255, 255, 243); |
| } |
| .mq-table-mq code { |
| font-size: 0.875em; |
| } |
| |
| /* ---------------------------- |
| * Example for full-width Grids |
| * ---------------------------- |
| */ |
| |
| .grids-example { |
| background: rgb(250, 250, 250); |
| margin: 2em auto; |
| border-top: 1px solid #ddd; |
| border-bottom: 1px solid #ddd; |
| } |
| |
| /* -------------------------- |
| * State Rules |
| * -------------------------- |
| */ |
| |
| |
| .is-code-full { |
| text-align: center; |
| } |
| .is-code-full .code { |
| margin-left: auto; |
| margin-right: auto; |
| } |
| .is-code-full code { |
| display: inline-block; |
| max-width: 768px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| |
| /* -------------------------- |
| * Responsive Styles |
| * -------------------------- |
| */ |
| |
| @media screen and (min-width: 35.5em) { |
| |
| .legal-license { |
| text-align: left; |
| margin: 0; |
| } |
| .legal-copyright, |
| .legal-links, |
| .legal-links li { |
| text-align: right; |
| margin: 0; |
| } |
| |
| } |
| |
| @media screen and (min-width: 48em) { |
| |
| .l-wrap, |
| .l-wrap .content { |
| padding-left: 1em; |
| padding-right: 1em; |
| } |
| .content .l-wrap { |
| margin-left: -2em; |
| margin-right: -2em; |
| } |
| |
| .header, |
| .content { |
| padding-left: 2em; |
| padding-right: 2em; |
| } |
| |
| .header h1 { |
| font-size: 320%; |
| } |
| .header h2 { |
| font-size: 128%; |
| } |
| |
| .content p { |
| font-size: 1.125em; |
| } |
| |
| .code { |
| margin-left: auto; |
| margin-right: auto; |
| border-left-width: 1px; |
| border-right-width: 1px; |
| } |
| |
| .table-responsive { |
| margin-left: auto; |
| margin-right: auto; |
| } |
| .table-responsive table { |
| border-left-width: 1px; |
| border-right-width: 1px; |
| } |
| |
| } |
| |
| @media (max-width: 58em) { |
| /* Only apply this when the window is smaller. Otherwise, the following |
| case results in extra padding on the left: |
| * Make the window small. (Rotate to portrait on a mobile.) |
| * Tap the menu to trigger the active state. |
| * Make the window large again. (Rotate to landscape on mobile.) |
| */ |
| #layout.active { |
| position: relative; |
| left: 160px; |
| } |
| } |
| |
| @media (min-width: 58em) { |
| |
| #layout { |
| padding-left: 160px; /* left col width "#menu" */ |
| left: 0; |
| } |
| #menu { |
| left: 160px; |
| } |
| .menu-link { |
| position: fixed; |
| left: 160px; |
| display: none; |
| } |
| #layout.active .menu-link { |
| left: 160px; |
| } |
| |
| } |
