@font-face {
  font-family: 'Crimson';
  src: url("font/crimson-roman.woff") format("woff"); }
@font-face {
  font-family: 'Crimson';
  src: url("font/crimson-italic.woff") format("woff");
  font-style: italic; }
@font-face {
  font-family: 'Crimson';
  src: url("font/crimson-semibold.woff") format("woff");
  font-weight: 600; }
@font-face {
  font-family: 'Crimson';
  src: url("font/crimson-semibolditalic.woff") format("woff");
  font-style: italic;
  font-weight: 600; }
@font-face {
  font-family: 'Crimson';
  src: url("font/crimson-bold.woff") format("woff");
  font-weight: bold; }
@font-face {
  font-family: 'Crimson';
  src: url("font/crimson-bolditalic.woff") format("woff");
  font-style: italic;
  font-weight: bold; }
body, h1, h2, h3, h4, p, blockquote, code, ul, ol, dl, dd, img {
  margin: 0; }

img {
  outline: none; }

img.arrow {
  width: auto;
  height: 11px; }

body {
  color: #222;
  font: normal 16px/24px "Crimson", Georgia, serif; }

article.chapter h2 {
  font: 600 30px/24px "Crimson", Georgia, serif;
  margin: 69px 0 0 0;
  padding-bottom: 3px; }
  article.chapter h2 small {
    font: 800 22px/24px "Crimson", Georgia, serif;
    float: right; }
article.chapter h3 {
  font: italic 24px/24px "Crimson", Georgia, serif;
  margin: 71px 0 0 0;
  padding-bottom: 1px; }
  article.chapter h3 small {
    font: 600 16px/24px "Crimson", Georgia, serif;
    float: right; }
article.chapter h2 a, article.chapter h3 a {
  color: #222;
  border-bottom: none; }
article.chapter h2 a:hover, article.chapter h3 a:hover {
  border-bottom: none;
  color: inherit; }
article.chapter h2 a::before, article.chapter h3 a::before {
  position: absolute;
  left: -48px;
  width: 48px;
  content: "\000A7";
  color: #fff;
  transition: color 0.2s ease;
  text-align: center; }
article.chapter h2 a:hover::before, article.chapter h3 a:hover::before {
  color: #ddd; }
article.chapter .challenges, article.chapter .design-note {
  border-radius: 3px;
  padding: 12px;
  margin: -2px -12px 26px -12px;
  font: normal 16px/24px "Source Sans Pro", sans-serif;
  color: #444; }
  article.chapter .challenges h2, article.chapter .design-note h2 {
    margin: 0 0 -12px 0;
    padding: 0;
    font: 600 16px/24px "Source Sans Pro", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px; }
  article.chapter .challenges h2 a, article.chapter .design-note h2 a {
    color: inherit; }
  article.chapter .challenges h2 a::before, article.chapter .design-note h2 a::before {
    content: none; }
  article.chapter .challenges ol, article.chapter .design-note ol {
    padding: 0 0 0 18px; }
    article.chapter .challenges ol li, article.chapter .design-note ol li {
      padding: 0 0 0 6px;
      font-weight: 600; }
      article.chapter .challenges ol li p, article.chapter .design-note ol li p {
        font-weight: 400; }
  article.chapter .challenges pre, article.chapter .design-note pre {
    margin: 0; }
  article.chapter .challenges aside code, article.chapter .challenges aside .codehilite, article.chapter .design-note aside code, article.chapter .design-note aside .codehilite {
    color: #595959;
    background: #faf8f5; }
  article.chapter .challenges *:last-child, article.chapter .design-note *:last-child {
    margin-bottom: 0; }
article.chapter .challenges .codehilite,
article.chapter .design-note .codehilite {
  margin: -12px 0 -12px 0; }
article.chapter .challenges {
  background: #eef4f7; }
  article.chapter .challenges code, article.chapter .challenges .codehilite {
    background: #e4eef1; }
article.chapter .design-note {
  background: #f6f8f2; }
  article.chapter .design-note code, article.chapter .design-note .codehilite {
    background: #eef1ea; }
article.chapter table {
  width: 100%;
  border-collapse: collapse; }
  article.chapter table thead {
    font: 700 15px "Crimson", Georgia, serif; }
  article.chapter table td {
    border-bottom: solid 1px #dee9ed;
    line-height: 22px;
    padding: 3px 0 0 0;
    margin: 0; }
  article.chapter table td + td {
    padding-left: 12px; }

@media only screen and (max-width: 960px) {
  article.chapter .challenges aside, article.chapter .design-note aside {
    font: normal 15px/24px "Source Sans Pro", sans-serif;
    padding-bottom: 4px; }
  article.chapter .challenges aside code, article.chapter .challenges aside .codehilite {
    background: #e4eef1; }
  article.chapter .design-note aside code, article.chapter .design-note aside .codehilite {
    background: #eef1ea; } }
@media only screen and (max-width: 630px) {
  article.chapter h2 a::before, article.chapter h3 a::before {
    left: -24px;
    width: 24px; } }
@media only screen and (max-width: 580px) {
  article.chapter h2 {
    margin-top: 64px;
    padding-bottom: 2px;
    font-size: 22px;
    line-height: 22px; }
  article.chapter h3 {
    margin-top: 64px;
    padding-bottom: 0;
    font-size: 20px; }
  article.chapter .challenges, article.chapter .design-note {
    padding: 11px 11px 8px 11px;
    margin: 25px 0 0 0;
    font-size: 15px;
    line-height: 22px; }
    article.chapter .challenges code, article.chapter .challenges .codehilite, article.chapter .design-note code, article.chapter .design-note .codehilite {
      font-size: 14px; }
    article.chapter .challenges h2, article.chapter .design-note h2 {
      padding: 5px 0 4px 6px;
      font-size: 17px;
      line-height: 22px; }
    article.chapter .challenges aside, article.chapter .design-note aside {
      line-height: 22px; } }
article.contents h2 {
  margin: 22px 0 6px 0;
  font: 600 normal 18px/24px "Source Sans Pro", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px; }
  article.contents h2 .num {
    display: inline-block;
    width: 36px; }
article.contents ul {
  margin: -12px 0 0 0;
  padding: 6px 0 14px 0; }
article.contents li {
  padding: 12px 0 0 36px;
  font: normal 16px/24px "Source Sans Pro", sans-serif;
  color: #7aa0b8;
  list-style-type: none; }
  article.contents li .num {
    display: inline-block;
    letter-spacing: 1px;
    width: 36px; }
  article.contents li a {
    font: 600 17px/24px "Source Sans Pro", sans-serif; }
article.contents li.design-note {
  padding-top: 0; }
  article.contents li.design-note a {
    font: 400 16px/23px "Source Sans Pro", sans-serif; }
article.contents a.not-written {
  padding-left: 4px;
  font: 400 14px/12px "Source Sans Pro", sans-serif;
  color: #dee9ed;
  border: none; }
article.contents .topic {
  white-space: nowrap; }
article.contents .topic::after {
  content: "\000A0\000b7 "; }
article.contents .topic:last-child::after {
  content: ""; }

@media only screen and (max-width: 630px) {
  article.contents h2 .num {
    width: 33px; }
  article.contents ol, article.contents ul {
    margin-left: 33px; }
  article.contents li {
    padding-left: 11px; } }
@media only screen and (max-width: 580px) {
  article.contents h2 {
    margin: 19px 0 6px 0;
    font-size: 17px;
    line-height: 22px; }
  article.contents h3 {
    padding: 1px 0 2px 0;
    font-size: 17px;
    line-height: 22px; }
  article.contents p {
    font-size: 15px;
    line-height: 22px; }
  article.contents ol, article.contents ul {
    padding-bottom: 8px; }
  article.contents li {
    font-size: 14px;
    line-height: 22px;
    padding: 4px 0 3px 11px; } }
.sign-up {
  position: relative;
  padding: 12px;
  margin-bottom: 48px;
  background: #fcf6e8;
  color: #bf9540;
  border: solid 4px #f9e4b8; }
  .sign-up h1 {
    margin: 0;
    padding: 0;
    font: bold 18px/18px "Source Sans Pro", sans-serif; }
  .sign-up p {
    margin: 12px 0;
    font: 15px/24px "Source Sans Pro", sans-serif; }
  .sign-up p.small {
    margin: 15px 0 4px 0;
    font: 14px/18px "Source Sans Pro", sans-serif;
    color: #d9bf8c; }
  .sign-up a {
    color: #ffaa00; }
  .sign-up a:hover {
    color: #cc8800;
    border-color: #fadb9e; }
  .sign-up .dismiss {
    position: absolute;
    z-index: 2;
    right: 4px;
    top: 0;
    font: bold 24px "Source Sans Pro", sans-serif;
    padding: 4px 8px;
    cursor: pointer; }
  .sign-up .dismiss:hover {
    color: #ffaa00; }
  .sign-up input {
    display: table-cell;
    padding: 4px;
    font: 16px "Source Sans Pro", sans-serif;
    outline: none;
    border-radius: 6px;
    border: solid 2px #ffd580;
    color: #825e17; }
  .sign-up input.email {
    display: block;
    box-sizing: border-box;
    width: 100%; }
  .sign-up input.button {
    float: right;
    margin: 10px 0 10px 5px;
    padding: 4px 8px;
    font: 600 13px "Source Sans Pro", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #ffbb33; }
  .sign-up input:focus {
    border-color: #ffaa00; }

@font-face {
  font-family: 'Crimson';
  src: url("font/crimson-roman.woff") format("woff"); }
@font-face {
  font-family: 'Crimson';
  src: url("font/crimson-italic.woff") format("woff");
  font-style: italic; }
@font-face {
  font-family: 'Crimson';
  src: url("font/crimson-semibold.woff") format("woff");
  font-weight: 600; }
@font-face {
  font-family: 'Crimson';
  src: url("font/crimson-semibolditalic.woff") format("woff");
  font-style: italic;
  font-weight: 600; }
@font-face {
  font-family: 'Crimson';
  src: url("font/crimson-bold.woff") format("woff");
  font-weight: bold; }
@font-face {
  font-family: 'Crimson';
  src: url("font/crimson-bolditalic.woff") format("woff");
  font-style: italic;
  font-weight: bold; }
body, h1, h2, h3, h4, p, blockquote, code, ul, ol, dl, dd, img {
  margin: 0; }

img {
  outline: none; }

img.arrow {
  width: auto;
  height: 11px; }

body {
  color: #222;
  font: normal 16px/24px "Crimson", Georgia, serif; }

@media print {
  body, a, code {
    color: #000 !important;
    background: none !important; }

  nav, .sign-up {
    display: none; }

  .page {
    margin: 0 !important; }

  .codehilite {
    margin: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    border-left: solid 1px #dad8d6;
    border-right: solid 1px #dad8d6; }
    .codehilite pre {
      color: #000 !important; }
    .codehilite .insert {
      border-left: solid 3px #dad8d6 !important;
      border-right: solid 3px #dad8d6 !important;
      background: none !important; }
    .codehilite .delete {
      -webkit-print-color-adjust: exact;
      color-adjust: exact; }
    .codehilite .insert-before span, .codehilite .insert-after span {
      -webkit-print-color-adjust: exact;
      color-adjust: exact; } }
.emdash {
  white-space: nowrap; }

.scrim {
  position: absolute;
  width: 100%;
  height: 10000px;
  z-index: 4;
  background: url("rows.png"); }

a {
  color: #1481b8;
  text-decoration: none;
  outline: none;
  border-bottom: solid 1px rgba(222, 233, 237, 0);
  transition: color 0.2s ease, border-color 0.4s ease; }

a:hover {
  color: #1481b8;
  border-bottom: solid 1px #dee9ed; }

nav {
  font: 300 15px/24px "Source Sans Pro", sans-serif;
  background: #29313d;
  color: #4b6781; }
  nav a, nav h2 a {
    color: #7aa0b8;
    text-decoration: none;
    border-bottom: none; }
  nav a:hover {
    color: #dee9ed;
    text-decoration: none;
    border-bottom: none; }
  nav img {
    box-sizing: border-box;
    width: 100%;
    padding: 110px 48px 23px 48px; }
  nav h2 {
    font: 400 16px/24px "Source Sans Pro", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #7aa0b8; }
  nav h3 {
    font: 400 18px/24px "Source Sans Pro", sans-serif;
    color: #7aa0b8; }
  nav h2 small, nav h3 small {
    float: right;
    font-size: 16px;
    color: #4b6781; }
  nav ol, nav ul {
    margin: 6px 0 3px 0;
    padding: 6px 0 4px 24px;
    border-top: solid 1px #3b4b5e;
    border-bottom: solid 1px #3b4b5e; }
  nav ul {
    list-style-type: none;
    padding-left: 0; }
  nav li small {
    float: right;
    font-size: 14px;
    color: #4b6781; }
  nav li.divider {
    margin: 5px 0 7px 0;
    border-top: solid 1px #3b4b5e; }
  nav li.end-part {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px; }
    nav li.end-part small {
      font-weight: 300;
      text-transform: none;
      letter-spacing: 0; }
  nav .prev-next {
    padding-top: 7px;
    font: 400 12px/18px "Source Sans Pro", sans-serif;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px; }

nav.wide {
  position: fixed;
  width: 336px;
  height: 100%; }
  nav.wide .contents {
    margin: 24px 48px; }

.nav-wrapper {
  position: absolute;
  right: 288px; }

nav.floating {
  display: none;
  z-index: 2;
  position: absolute;
  width: 288px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px; }
  nav.floating #expand-nav {
    padding: 0 0 4px 0;
    display: block;
    font-size: 20px;
    text-align: center;
    color: #4b6781;
    cursor: pointer;
    transition: padding 0.2s ease, margin 0.2s ease, color 0.2s ease; }
  nav.floating #expand-nav, nav.floating #expand-nav:hover {
    border-bottom: none; }
  nav.floating #expand-nav:hover {
    color: #dee9ed; }
  nav.floating .expandable {
    overflow: hidden;
    padding: 0 12px;
    max-height: 0;
    transition: margin 0.2s ease, max-height 1.0s ease; }
    nav.floating .expandable .prev-next {
      padding-bottom: 6px; }
  nav.floating .expandable.shown {
    max-height: 550px; }
  nav.floating img {
    padding: 110px 24px 23px 24px; }

nav.floating.pinned {
  position: fixed;
  top: -85px; }
  nav.floating.pinned .expandable {
    margin-top: -13px; }
  nav.floating.pinned #expand-nav {
    margin-top: -14px; }

nav.narrow {
  display: none;
  text-align: center; }
  nav.narrow img {
    box-sizing: content-box;
    padding: 11px 0 3px 0;
    width: auto;
    height: 27px; }
  nav.narrow .prev, nav.narrow .next {
    font-size: 32px;
    position: absolute;
    top: 12px;
    padding: 0 48px; }
  nav.narrow .prev {
    left: 0; }
  nav.narrow .next {
    right: 0; }

.left {
  float: left; }

.right {
  float: right; }

.page {
  position: relative;
  width: 912px;
  margin: 0 auto 0 384px; }

.em {
  padding: 0 .1em;
  white-space: nowrap; }

code, .codehilite {
  color: #595959;
  background: #faf8f5;
  border-radius: 3px; }

code {
  font: normal 15px "Source Code Pro", Menlo, Consolas, Monaco, monospace;
  white-space: nowrap;
  padding: 2px; }

a code {
  color: #1481b8; }

.codehilite {
  padding: 12px;
  margin: -12px;
  overflow: auto; }

pre {
  font: normal 13px/20px "Source Code Pro", Menlo, Consolas, Monaco, monospace;
  margin: 0;
  padding: 0; }

div.codehilite + div.challenges {
  margin-top: 24px; }

article {
  position: relative;
  width: 576px; }
  article h1 {
    position: relative;
    font: 48px/48px "Crimson", Georgia, serif;
    padding: 109px 0 19px 0;
    z-index: 2; }
  article h1.part {
    font: 600 36px/48px "Source Sans Pro", sans-serif;
    padding: 108px 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 1px; }
  article .number {
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 1;
    font: 300 96px "Source Sans Pro", sans-serif;
    color: #dee9ed; }
  article p {
    margin: 24px 0; }
  article ol, article ul {
    margin: 24px 0;
    padding: 0 0 0 24px; }
  article img {
    max-width: 100%; }
  article img.wide {
    max-width: none;
    width: 912px; }

aside {
  position: absolute;
  right: -336px;
  width: 288px;
  font: normal 14px/20px "Crimson", Georgia, serif;
  border-top: solid 1px #dee9ed; }
  aside p {
    margin: 20px 0; }
  aside p:first-child {
    margin-top: 4px; }
  aside p:last-child {
    margin-bottom: 4px; }
  aside code {
    font-size: 14px;
    border-radius: 2px;
    padding: 1px 2px; }
  aside .codehilite {
    padding: 6px;
    margin: -12px 0; }
  aside img.above {
    position: absolute;
    bottom: 100%;
    margin-bottom: 16px; }
  aside blockquote {
    margin: 20px 0; }
    aside blockquote::before, aside blockquote::after {
      content: none; }
    aside blockquote p {
      margin: 0 12px;
      font: italic 15px/20px "Crimson", Georgia, serif; }

aside.bottom {
  border-top: none;
  border-bottom: solid 1px #dee9ed; }

blockquote {
  position: relative;
  margin: 29px 0 31px 0; }
  blockquote::before, blockquote::after {
    position: absolute;
    top: -20px;
    font: italic 72px "Crimson", Georgia, serif;
    color: #dee9ed; }
  blockquote::before {
    content: "\201c";
    left: -7px; }
  blockquote::after {
    content: "\201d";
    right: 8px; }
  blockquote p {
    margin: 0 48px;
    font: italic 24px/36px "Crimson", Georgia, serif;
    color: #5985a6; }
  blockquote cite {
    display: block;
    text-align: right;
    color: #7aa0b8;
    font-style: normal;
    font-size: 18px; }
    blockquote cite::before {
      content: "\2014\00a0";
      color: #dee9ed; }

footer {
  position: relative;
  border-top: solid 1px #dee9ed;
  color: #7aa0b8;
  font: 400 15px "Source Sans Pro", sans-serif;
  text-align: center;
  margin: 48px 0;
  padding-top: 48px; }
  footer a, footer a:hover {
    border: none; }
  footer .next {
    position: absolute;
    right: 0;
    top: -13px;
    padding-left: 4px;
    background: #fff;
    font: 400 17px/24px "Source Sans Pro", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px; }
  footer .next:hover {
    color: #004466;
    border: none; }

.source-file, .source-file-narrow {
  font: normal 11px/16px "Source Code Pro", Menlo, Consolas, Monaco, monospace;
  color: #bab8b7; }
  .source-file em, .source-file-narrow em {
    color: #999997;
    font-style: normal; }

.source-file-narrow {
  display: none;
  margin: 0px -12px 0 0;
  padding: 14px 0 0 0;
  text-align: right; }

.source-file {
  position: absolute;
  right: -336px;
  width: 288px;
  padding: 2px 0 0 0; }
  .source-file::before {
    content: "<<";
    color: #dad8d6;
    position: absolute;
    left: -36px;
    width: 36px;
    text-align: center; }

.codehilite pre {
  color: #797978; }
.codehilite .k, .codehilite .kd, .codehilite .kt, .codehilite .kn, .codehilite .kr {
  color: #0099e6; }
.codehilite .mi, .codehilite .mf {
  color: #dd713c; }
.codehilite .s, .codehilite .sc, .codehilite .s2 {
  color: #c38e22; }
.codehilite .c, .codehilite .c1, .codehilite .cm {
  color: #aaa9a7; }
.codehilite .cp, .codehilite .nd {
  color: #c25cd6; }
.codehilite .nl, .codehilite .nt {
  color: #0088cc; }
.codehilite .n, .codehilite .na, .codehilite .nc, .codehilite .nn, .codehilite .nf {
  color: #0077b3; }
.codehilite .vg, .codehilite .nc {
  color: #00b3b3; }
.codehilite .nb {
  color: #0099e6; }
.codehilite .insert {
  margin: -2px -12px;
  padding: 2px 10px;
  border-left: solid 2px #dad8d6;
  border-right: solid 2px #dad8d6;
  background: #f5f3f0;
  display: inline-block;
  min-width: 100%; }
.codehilite .delete {
  margin: -2px -12px;
  padding: 2px 10px;
  border-left: solid 2px #dad8d6;
  border-right: solid 2px #dad8d6;
  background: repeating-linear-gradient(-45deg, #dad8d6, #dad8d6 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 6px); }
  .codehilite .delete span {
    color: #bab8b7; }
.codehilite .insert-before span, .codehilite .insert-after span {
  color: #bab8b7; }
.codehilite .insert-before .insert-comma {
  margin: -2px -1px;
  padding: 2px 1px;
  border-radius: 2px;
  background: #f5f3f0;
  color: #595959; }

@media only screen and (max-width: 1344px) {
  nav.wide {
    display: none; }

  nav.floating {
    display: block; }

  body {
    margin: 0 24px; }

  .page {
    position: relative;
    width: inherit;
    max-width: 912px;
    margin: 0 auto; }

  article {
    width: inherit;
    margin-right: 336px; } }
@media only screen and (max-width: 960px) {
  body {
    margin: 0; }

  .page {
    max-width: 576px; }

  nav.floating {
    display: none; }

  nav.narrow {
    display: block; }

  .page {
    margin: 0 48px;
    width: inherit; }

  article {
    margin: 0; }
    article img.wide {
      width: inherit;
      max-width: 100%; }

  aside {
    position: inherit;
    right: inherit;
    width: inherit;
    border-bottom: solid 1px #dee9ed; }
    aside p:first-child {
      margin-top: 8px; }
    aside p:last-child {
      margin-bottom: 8px; }
    aside img {
      display: block;
      max-width: 288px;
      margin: 0 auto; }
    aside img.above {
      position: relative; }

  aside + div.codehilite {
    margin-top: 12px; }

  div.codehilite + aside {
    margin-top: 24px; }

  .source-file {
    display: none; }

  .source-file-narrow {
    display: block; } }
@media only screen and (max-width: 630px) {
  .page {
    margin: 0 24px;
    width: inherit; }

  nav.narrow .prev, nav.narrow .next {
    padding: 0 24px; } }
@media only screen and (max-width: 580px) {
  body {
    font-size: 15px;
    line-height: 22px; }

  .scrim {
    background: url("rows-22.png"); }

  nav.narrow img {
    padding: 9px 0 1px 0;
    height: 27px; }
  nav.narrow .prev, nav.narrow .next {
    top: 11px; }

  article h1 {
    font-size: 36px;
    padding: 100px 0 14px 0; }
  article h1.part {
    font-size: 30px;
    padding: 97px 0 17px 0; }
  article .number {
    top: 61px;
    font-size: 72px; }
  article p {
    margin: 22px 0; }
  article ol, article ul {
    margin: 22px 0;
    padding: 0 0 0 22px; }

  blockquote {
    margin: 27px 0 28px 0; }
    blockquote::before, blockquote::after {
      top: -17px;
      font-size: 52px; }
    blockquote p {
      margin: 0 22px;
      font-size: 20px;
      line-height: 33px; }

  footer .next {
    font-size: 15px; } }

/*# sourceMappingURL=style.css.map */