@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic);
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, font, 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 { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }

html { font-size: 100%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */ overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */ -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ }

body { overflow: hidden; }

article, aside, details, figcaption, figure, footer, header, nav, section { display: block; }

ol, ul { list-style: none; }

table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; }

caption, th, td { font-weight: normal; text-align: left; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; }

blockquote, q { quotes: "" ""; }

a:focus { outline: thin dotted; }

a:hover, a:active { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */ outline: 0; }

a img { border: 0; }

html { box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; }

.related-posts h3:after, .related-posts ul:after, .post:after, .row-narrow:after, .row:after { content: ""; display: table; clear: both; }

.center { text-align: center; }

.excerpt-list, .banner .nav, .join-us #contributors-list { padding-left: 0; list-style: none; }

.inline-list { padding-left: 0; }
.inline-list li { display: inline-block; margin-right: 1.4em; }
.inline-list li:last-child { margin-right: 0; }

.screen-reader-text { clip: rect(0 0 0 0); overflow: hidden; position: absolute; height: 1px; width: 1px; }

.screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }

body { background: #fdfdfd; }

.section { padding: 2em 20px; }

.related-posts h3, .related-posts ul, .post, .row-narrow, .row { max-width: 48em; margin-left: auto; margin-right: auto; }

.related-posts h3, .related-posts ul, .post, .row-narrow { max-width: 34em; }

.article-section { padding-top: 2em; padding-bottom: 2em; }

@media (min-width: 53em) { .has-toc .banner, .has-toc .footer, .has-toc .hero { position: relative; z-index: 2; }
  .has-toc .post { max-width: 45em; position: relative; }
  .has-toc .post-content { position: relative; }
  .has-toc .toc-wrap { width: 8em; position: relative; float: left; top: 1em; z-index: 1; }
  .has-toc .toc-wrap.stick { position: fixed; }
  .has-toc .toc-wrap.stick-footer { position: absolute; bottom: 0; top: auto; }
  .has-toc .toc-wrap .toc-title { text-align: right; font-size: .9rem; color: #666666; }
  .has-toc .toc-wrap .toc { list-style: none; padding-left: 0; text-align: right; }
  .has-toc .toc-wrap li { line-height: 1.2; margin-bottom: .7em; }
  .has-toc .toc-wrap a { padding: .5rem 0; font-size: 1em; text-decoration: none; transition: all .2s; position: relative; right: 0; }
  .has-toc .toc-wrap a.active { font-size: 1.33em; color: #0b392d; right: -.3rem; }
  .has-toc .toc-long { width: 10em; border-left: 1px solid #ddd; position: absolute; left: 35em; padding: 0 0 0 1em; top: 2em; }
  .has-toc .toc-long.stick { top: 1em; left: auto; margin-left: 35em; }
  .has-toc .toc-long.stick-footer { top: auto; }
  .has-toc .toc-long .toc-title, .has-toc .toc-long .toc { text-align: left; }
  .has-toc .toc-long a.active { font-size: 1.1em; right: 0; }
  .has-toc .waypoint-section { width: 34em; padding-top: 2em; padding-bottom: 2em; }
  .has-toc .waypoint-section:after { content: ""; display: table; clear: both; }
  .has-toc .waypoint-section.archive-section { float: right; }
  .has-toc .resources-section { width: 32.5em; } }

.excerpt-list__title { margin-bottom: .2em; }

.related-posts { margin-top: 4em; padding-top: 3em; border-top: 1px solid #ddd; }

#content { padding-top: 3em; padding-bottom: 3em; }

.checklist ul { list-style: none; }
.checklist p.description { padding-left: 1.33rem; font-size: smaller; color: #595959; }
.checklist fieldset { margin-bottom: 2em; }
.checklist legend { font-size: 1.33em; }
.checklist label { display: block; padding-left: 1.33rem; position: relative; }
.checklist label:hover { cursor: pointer; }
.checklist input[type="radio"], .checklist input[type="checkbox"] { width: 1.25em; height: 1.25em; position: absolute; top: .25em; left: -.625em; }

body { font: 1em/1.8 'Source Sans Pro', sans-serif; color: #333; }
@media (min-width: 34em) { body { font-size: 1.15em; line-height: 1.9; } }

a { color: #177960; }

h1, h2, h3, h4, h5, h6 { color: #333; margin-bottom: 0.5em; line-height: 1.2em; }

h1 { font-size: 2.33em; }
@media (min-width: 34em) { h1 { font-size: 3em; } }

h2 { font-size: 2em; }
@media (min-width: 34em) { h2 { font-size: 2.33em; } }

h3 { font-size: 1.66em; }

h4 { font-size: 1.33em; }

h5 { font-size: 1.125em; }

h6 { font-size: 1em; }

p + h2, ul + h2, table + h2, img + h2, pre + h2, p + h3, ul + h3, table + h3, img + h3, pre + h3, p + h4, ul + h4, table + h4, img + h4, pre + h4, p + h5, ul + h5, table + h5, img + h5, pre + h5, p + h6, ul + h6, table + h6, img + h6, pre + h6 { margin-top: 4rem; }

p, ol, ul { margin-top: 0; margin-bottom: 1.4em; }

ol, ul { padding-left: 1.4em; }

ul { list-style: disc; }

ol { list-style: decimal; }

pre { background: #f0f0f0; padding: 1em; white-space: pre-wrap; /* CSS 3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; margin-bottom: 1.4em; }

code { background: #f0f0f0; padding: 0.1em 0.25em; }

kbd { background: #f0f0f0; padding: 0.25em; border: 1px solid #d7d7d7; }

strong { font-weight: 600; }

em { font-style: italic; }

.post .page-header { margin-bottom: 1.5em; }
.post .post-title { margin-bottom: 0; }
.post .post-meta { font-size: .85em; color: #666666; }
.post .page-header + p, .post .page-header + blockquote { font-size: 1.2em; }
.post .button-edit { background: #f0f0f0; padding: 0.1em 0.5em; font-size: 0.8em; color: #222; text-decoration: none; border-radius: 3px; display: inline-block; margin-right: 0.25em; transition: background 0.2s; }
.post .button-edit .icon { font-size: 1.2em; vertical-align: text-top; margin-right: 0.25em; }
.post .button-edit:hover { background: #d7d7d7; }
.post img { display: block; max-width: 100%; margin: 1.6em auto; }

.banner { background: #f8f8f8; padding: 1em 0em .4em; border-bottom: 1px solid #e4e4e4; }
@media (min-width: 34em) { .banner { padding: 1em 2em .4em; } }
.banner .nav { margin-bottom: 0; text-align: center; }
@media (min-width: 48em) { .banner .nav { text-align: right; } }
.banner .nav li { display: inline-block; margin-right: 1.1em; }
@media (min-width: 34em) { .banner .nav li { margin-right: 1.4em; } }
.banner .nav li:last-child { margin-right: 0; }
.banner .nav a { text-decoration: none; }
.banner .nav .logo { font-size: 1.4em; display: block; margin-right: 0; margin-top: -.5em; }
@media (min-width: 48em) { .banner .nav .logo { float: left; } }
.banner .nav .logo .oldie-logo-navbar, .banner .nav .logo .icon-logo { width: 1.4em; position: relative; top: .3em; }
.banner .nav .logo .home-logo-link { color: #333; }

.hero { background: #f8f8f8; background: linear-gradient(#f8f8f8, #e4e4e4); overflow: hidden; width: 120%; padding: 4em 2em 4em; margin: -3.1em 0 4em -10%; }
@media (min-width: 34em) { .hero { padding-bottom: 5em; margin-bottom: 5em; } }
.hero .icon-logo-hero { width: 6.5em; }
.hero .a11y-title { margin-bottom: 0; }
@media (max-width: 24em) { .hero .a11y-title { font-size: 2.2em; } }
.hero .a11y-subtitle { font-size: 1.2em; margin-bottom: 1.2em; }
.hero .connect-with-a11y { margin-bottom: 0; }
.hero .connect-with-a11y li { margin: 0 .6em 1.6em; }
.hero .connect-with-a11y a { background: #177960; color: #fff; border-bottom: 3px solid #0f4e3e; padding: .6em 1.2em .5em; text-decoration: none; line-height: 1; }

.footer { background: #f8f8f8; background: linear-gradient(#f0f0f0, #f8f8f8 25%); padding-top: 4em; }
.footer .colophon { margin-top: .5em; }
@media (min-width: 48em) { .footer .join-us, .footer .colophon { float: left; }
  .footer .join-us { width: 68%; margin-right: 3%; margin-bottom: 0; }
  .footer .colophon { width: 29%; } }
.footer #google_translate_element { margin-bottom: 1.4em; }

.join-us { margin-bottom: 3em; }
.join-us .join-us-title { margin: 0 .8em .4em 0; display: inline-block; }
@media (min-width: 48em) { .join-us .join-us-title { font-size: 1.2em; } }
.join-us .join-us-buttons { margin-top: -.1em; display: inline-block; }
.join-us .join-us-buttons li { margin-right: .8em; }
.join-us .join-us-buttons li:last-child { margin-right: 0; }
.join-us .github-data { margin-bottom: .4em; }
.join-us .github-data a { text-decoration: none; }
@media (min-width: 48em) { .join-us .github-data a { font-size: .8em; } }
.join-us .github-data .data { background: #177960; color: #fff; padding: .1em .3em; border-radius: 5px; margin-right: 5px; }
.join-us #contributors-list { margin-bottom: 0; }
.join-us #contributors-list li { float: left; line-height: 0; padding: 0; margin: 0 .6em .6em 0; }
.join-us #contributors-list .contributor-avatar { display: block; margin: 0 auto; height: 50px; width: 50px; }
.join-us .contributors-pagination a { font-size: .8em; padding: .4em .8em; background: rgba(0, 0, 0, 0.2); text-decoration: none; color: #333; border-radius: 5px; }
.join-us .contributors-pagination a:hover { background: rgba(0, 0, 0, 0.3); }