@charset "UTF-8";

@font-face {
  font-family: 'Avenir';
  font-weight: 400;
  src: url("AvenirLTStd-Medium.otf");
}

@font-face {
  font-family: 'Avenir';
  font-weight: 400;
  font-style: italic;
  src: url("AvenirLTStd-MediumOblique.otf");
}

@font-face {
  font-family: 'Avenir';
  font-weight: 100;
  src: url("AvenirLTStd-Light.otf");
}

@font-face {
  font-family: 'Avenir';
  font-weight: 800;
  src: url("AvenirLTStd-Heavy.otf");
}


html {
    font-size: 15px;
}

body {
    font-family: "Avenir", sans-serif;
    background-color: #fff;
    color: #000;
    counter-reset: sidenote-counter;
    letter-spacing: .03em;
    margin: 0;
}

.content {
    width: 87.5%;
    margin: 7em auto;
    padding-left: 12.5%;
    max-width: 1400px;
}


.header-strip, .header-bar, .footer {
    background: #f2241a;
    color: rgba(255, 255, 255, .65);
}
.header-strip a, .header-bar a, .footer a {
    color: #fff;
}
.header-strip a:hover, .header-bar a:hover, .footer a:hover {
    color: rgba(255, 255, 255, .85);
}

.header-strip {
    height: 7px;
}

.header-bar {
    padding: 0.8em 0 0.65em;
}

.footer .info {
    float: right;
    font-size: 0.9em;
    line-height: 1.5em;
    margin-right: -60%;
    width: 50%;
    margin-top: 1.2rem;
    margin-bottom: 1.1rem;
}
.header-bar > div, .footer > div {
    width: 87.5%;
    max-width: 1400px;
    padding-left: 12.5%;
    margin: 0 auto;
}
.header-bar .header-title {
    display: inline-block;
    vertical-align: middle;
}
.header-bar .header-title small {
    display: inline-block;
    margin-bottom: 0.15em;
}

h1, h2 {
    font-weight: 100;
    line-height: 1.3;
}

.h0 { 
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    font-size: 3.2rem;
}

header > .titleline {
    margin: 1.4rem 0;
}

h1 {
    margin-top: 2.6rem;
    margin-bottom: 1.4rem;
    font-size: 2.6rem;
}

h2 { 
    font-size: 2rem;
    margin-top: 2.5rem;
    margin-bottom: 1.4rem;
}

.header-section-number {
    display: inline-block;
    width: 2em;
    text-align: right;
    margin-left: -2.35em;
}

.header-section-number::after {
    content: "."
}


hr { display: block;
     height: 1px;
     width: 55%;
     border: 0;
     border-top: 1px solid #ccc;
     margin: 1em 0;
     padding: 0; }

.titleline { 
     margin-top: -0.5rem;
     margin-bottom: 2.2rem;
}
.titleline p {
    margin: 0;
    font-size: 1.15em;
    line-height: 1;
}

article { position: relative;
          padding: 5rem 0rem; }

section { padding-top: 1rem;
          padding-bottom: 1rem; }

p, ol, ul {
    font-size: 1.3rem;
    line-height: 2.15rem;
}

p { margin-top: 1.4rem;
    margin-bottom: 1.4rem;
    padding-right: 0;
    vertical-align: baseline; }

/* Chapter Epigraphs */
div.epigraph { margin: 5em 0; }

div.epigraph > blockquote { margin-top: 3em;
                            margin-bottom: 3em; }

div.epigraph > blockquote, div.epigraph > blockquote > p { font-style: italic; }

div.epigraph > blockquote > .author { font-style: normal; }

div.epigraph > blockquote > .author > cite { font-style: italic; }
/* end chapter epigraphs styles */

blockquote { font-size: 1.4rem; }

blockquote p { width: 55%;
               margin-right: 40px; }

blockquote .author { width: 55%;
                    font-size: 1.1rem;
                    text-align: right; }

section > p,
section > .show,
section > footer,
section > table,
section > .note {
    width: 55%;
}

section > ol, section > ul { width: 50%; }

li:not(:first-child) { margin-top: 0.25rem; }

figure { padding: 0;
         border: 0;
         font-size: 100%;
         font: inherit;
         vertical-align: baseline;
         max-width: 55%;
         -webkit-margin-start: 0;
         -webkit-margin-end: 0;
         margin: 0 0 3em 0; }

figcaption { float: right;
             clear: right;
             margin-top: 0;
             margin-bottom: 0;
             font-size: 1.1rem;
             line-height: 1.6;
             vertical-align: baseline;
             position: relative;
             max-width: 40%; }

figure.fullwidth figcaption { margin-right: 24%; }

.footer .lockup {
    width: 55%;
}
.footer .lockup img {
    margin-left: -4px;
    margin-top: 26px;
    width: 177px;
}


/* Sidenotes, margin notes, figures, captions */
img { max-width: 100%; }

.sidenote, .marginnote { float: right;
                         clear: right;
                         margin-right: -60%;
                         width: 50%;
                         margin-top: 0;
                         margin-bottom: 1em;
                         font-size: 0.9rem;
                         line-height: 1.3;
                         vertical-align: baseline;
                         position: relative; }

section ul .sidenote,
section ul .marginnote,
section ol .sidenote,
section ol .marginnote {
    margin-right: -70%;
    width: 55%;
}

.sidenote-number { counter-increment: sidenote-counter; }

.sidenote-number:after, .sidenote:before {
                                           position: relative;
                                           vertical-align: baseline; }

.sidenote-number:after {
    content: counter(sidenote-counter);
    font-size: 13px;  /* hardcoded to match sidebar number */
    top: -0.5rem;
    left: 0.1rem;
}

/* The number of the sidenote */
.sidenote:before {
    content: counter(sidenote-counter) " ";
    display: inline-block;
    position: absolute;
    transform: translateX(-100%);
    padding-right: 0.9em;
    font-size: 13px;  /* hardcoded to match inline sidenote number */
}

blockquote .sidenote, blockquote .marginnote { margin-right: -82%;
                                               min-width: 59%;
                                               text-align: left; }

div.fullwidth, table.fullwidth { width: 100%; }

div.table-wrapper { overflow-x: auto;
                    font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif; }


code { font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
       font-size: 1.0rem;
       line-height: 1.42; }

.sans > code { font-size: 1.2rem; }

h1 > code, h2 > code, h3 > code { font-size: 0.80em; }

.marginnote > code, .sidenote > code { font-size: 1rem; }

pre.code { font-size: 0.9rem;
           width: 52.5%;
           margin-left: 2.5%;
           overflow-x: auto; }

pre.code.fullwidth { width: 90%; }

.fullwidth { max-width: 90%;
             clear:both; }

span.newthought { font-variant: small-caps;
                  font-size: 1.2em; }

input.margin-toggle { display: none; }

label.sidenote-number { display: inline; }

label.margin-toggle:not(.sidenote-number) { display: none; }


@media (max-width: 760px) {

    .content { width: 90%; margin: 2em auto; padding: 0 5%; }

                            section > p, section > footer, section > table, section > .note, .show { width: 100%; }
                            pre.code { width: 97%; }
    section > ol, section > ul { width: 90%; padding-left: 5% }
                            figure { max-width: 90%; }
                            figcaption, figure.fullwidth figcaption { margin-right: 0%;
                                                                      max-width: none; }
                            blockquote { margin-left: 1.5em;
                                         margin-right: 0em; }
                            blockquote p, blockquote footer { width: 100%; }
                            label.margin-toggle:not(.sidenote-number) { display: inline; }
                            .sidenote, .marginnote { display: none; }
                            .margin-toggle:checked + .sidenote,
                            .margin-toggle:checked + .marginnote { display: block;
                                                                   float: left;
                                                                   left: 1rem;
                                                                   clear: both;
                                                                   width: 95%;
                                                                   margin: 1rem 2.5%;
                                                                   vertical-align: baseline;
                                                                   position: relative; }
                            label { cursor: pointer; }
                            div.table-wrapper, table { width: 85%; }
                            img { width: 100%; }

    .header-section-number { margin-left: 0; display: inline; }
    .header-bar > div, .footer > div { width: 90%; padding: 0 5%; }
    .footer .info { float: inherit; width: 100%; margin-right: 0; }
    .footer .lockup { width: 100%; }
    .header-bar .header-title { display: block; margin-bottom: 0.5em; }
    .header-bar .header-dot { display: none; }
}

.center {
    text-align: center;
}

a {
    color: rgba(63, 136, 197, 1);
    text-decoration: none;
}

a:hover {
    color: rgba(63, 136, 197, 0.6);
}

img.margin-media {
    max-width: 230px;
}

.btn {
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  margin: 0;
  padding: .75rem 1rem .6rem;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background-color: #3F88C5;
  -webkit-appearance: none;
  cursor: pointer;
  font-variant: all-small-caps;
}

.btn:hover {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .175);
  color: #fff;
}

.video-aside {
    width: 33rem;
    float: left;
    margin-right: 1.5rem;
    clear: both;
}

.video-aside > p:first-child {
    margin-top: 0;
}

.side-video {
    float: left;
    margin-bottom: 2rem;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table
}
.clearfix:after { clear: both }

input {
    font-size: 1.5rem;
    padding: 0.2em 0.5em;
    border: solid 2px rgba(0,0,0,0.2);
}

label {
    display: inline-block;
    min-width: 150px;
}

table {
  font-size: 1.3rem;
  margin: 1rem -0.8rem;
}

th, td {
    padding: 0.4rem 0.8rem;
}

.table-zebra th, .table-zebra td {
    padding: .3em .6em;
}

.table-zebra tr:nth-child(odd) {
    background-color: rgba(242, 36, 26, .05);
}

.note {
    background: #FEF0DF;
    color: #7A4E1C;
    padding: 1rem 1.4rem;
    margin: 1.4rem 0 1.4rem -1.4rem;
}

.showing {
    background: hsl(115, 94%, 94%, 1);
    color: hsl(115, 63%, 29%, 1);
}
section > .showing {
    padding: 1rem 1.4rem;
    margin: 1.4rem 0 1.4rem -1.4rem;
}

.note:before {
    content: "note";
    display: block;
    font-variant: small-caps;
    margin-bottom: 0.6em;
}
.note p:first-child, .showing p:first-of-type {
    margin-top: 0;
}
.note p:last-child, .showing p:last-child {
    margin-bottom: 0;
}

.show > * { display: none; }
.show > .show-anchor { display: inherit; }
.show > .show-anchor a { cursor: pointer; }
.show.showing > * { display: inherit; }
.show.showing > .show-anchor { display: none; }

sup { line-height: 0; }