@charset "UTF-8";
/*--------------------------------------------------------------------
 * Core CSS - DO NOT MODIFY
 * This file contains all of the required CSS for the Inkling Platform
 *------------------------------------------------------------------*/
/*--------------------------------------------------------------------
 * Reset
 * WARNING: Editing these classes may cause unintended effects.
 *------------------------------------------------------------------*/
/* Zero-out all elements to remove any browser defaults. Note
 * that a universal selector "*" has not been used as it will
 * generate a CSS warning on ePub 3.0. 
 */
a, abbr, acronym, address, applet, article, aside, audio,
b, big, blockquote, body, canvas, caption, center, cite,
code, dd, del, details, dfn, dl, dt, em, embed, fieldset,
figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6,
header, hgroup, html, i, iframe, img, ins, input, kbd, label,
legend, li, mark, menu, nav, object, ol, output, p, pre,
q, ruby, s, samp, section, small, span, strike, strong, sub,
summary, sup, table, tbody, td, textarea, tfoot, th, thead, time,
tr, tt, u, ul, var, video, :before, :after,
.grid,
.grid-item {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  /* Use the border-box sizing model for all elements */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*--------------------------------------------------------------------
 * Font Fallbacks
 * The following @font-face declarations provide fallback fonts for 
 * legacy versions of the Inkling iOS app (pre-v3.3).
 * WARNING: Editing these declarations may cause unintended effects.
 *------------------------------------------------------------------*/
@font-face {
  font-family: "Source Sans Pro";
  src: local("Whitney-Book");
  font-weight: 300;
}
@font-face {
  font-family: "Source Sans Pro";
  src: local("Whitney-BookItalic");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: local("Whitney-Book");
  font-weight: 400;
}
@font-face {
  font-family: "Source Sans Pro";
  src: local("Whitney-BookItalic");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: local("Whitney-Semibold"), local("WhitneySemibold-Regular");
  font-weight: 600;
}
@font-face {
  font-family: "Source Sans Pro";
  src: local("Whitney-SemiboldItalic"), local("WhitneySemibold-Italic");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: local("Whitney-Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Source Sans Pro";
  src: local("Whitney-BoldItalic");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Meta Serif Office Pro";
  src: local("Chronicle Text G4 Roman"), local("ChronicleTextG4-Roman");
  font-weight: 400;
}
@font-face {
  font-family: "Meta Serif Office Pro";
  src: local("Chronicle Text G4 Italic"), local("ChronicleTextG4-Italic");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Meta Serif Office Pro";
  src: local("Chronicle Text G4 Bold"), local("ChronicleTextG4-Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Meta Serif Office Pro";
  src: local("Chronicle Text G4 Bold Italic"), local("ChronicleTextG4-BoldItalic");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Tisa Mobile Pro";
  src: local("Chronicle Text G4 Roman"), local("ChronicleTextG4-Roman");
  font-weight: 400;
}
@font-face {
  font-family: "Tisa Mobile Pro";
  src: local("Chronicle Text G4 Italic"), local("ChronicleTextG4-Italic");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Tisa Mobile Pro";
  src: local("Chronicle Text G4 Bold"), local("ChronicleTextG4-Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Tisa Mobile Pro";
  src: local("Chronicle Text G4 Bold Italic"), local("ChronicleTextG4-BoldItalic");
  font-weight: 700;
  font-style: italic;
}
/*--------------------------------------------------------------------
 * Platform-specific styles
 *
 * Defaults included with each book that should not be overriden.
 * WARNING: Editing these classes may cause unintended effects.
 *------------------------------------------------------------------*/
/* Set the base font sizes for small and larger screens */
html {
  font-size: 17px;
}
@media (min-width: 560px) {
  html {
    font-size: 19px;
  }
}

/* Set the base properties */
body {
  clear: both;
  display: block;
  font-family: "Meta Serif Office Pro", Georgia, serif;
  font-weight: 400;
  background: white;
  color: #333333;
  counter-reset: u-num;
  line-height: 1.5;
  /* Content margins react to different screen sizes */
  margin-bottom: 3em;
  margin-left: 20px;
  margin-right: 20px;
  -webkit-font-smoothing: antialiased;
  /* Default top margin */
}
body:after {
  content: "";
  display: table;
  clear: both;
}
body > :first-child {
  margin-top: 3em;
}
@media (min-width: 560px) {
  body {
    margin-left: 70px;
    margin-right: 70px;
  }
}
@media (min-width: 820px) {
  body {
    margin-left: 140px;
    margin-right: 140px;
  }
}

/* Link defaults */
a {
  color: #037bb5;
  text-decoration: none;
}

.link-block {
  display: block;
}

.link-inline {
  color: #037bb5;
  text-decoration: none;
  margin-right: 0.2em;
  padding: 0.1em 1.2em 0.1em 0;
  background: url("images/icon-link-blue.svg") right center no-repeat;
  background-size: 1em auto;
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -hp-pre-wrap;
  word-wrap: break-word;
}
.link-inline[href*="[chapter"], .link-inline[href*="[Chapter"], .link-inline[rel="chapter"], .link-inline[rel="jump"] {
  padding-right: 1em;
  background: url("images/icon-link-jump-blue.svg") right center no-repeat;
  background-size: 1em auto;
}

dfn {
  font-weight: 700;
  font-style: normal;
  margin-right: 0.2em;
  padding-right: 1.1em;
  background: url("images/icon-definition-blue.svg") right center no-repeat;
  background-size: 1em auto;
}
dfn > em {
  font-weight: 400;
  font-style: normal;
}

sup[href*="[remark"], sup[rel="remark"] {
  font: 0.7em "Meta Serif Office Pro", Georgia, serif;
  color: #037bb5;
}
sup.remark-large {
  font-size: inherit;
  vertical-align: inherit;
}

/*--------------------------------------------------------------------
 * s9 Scrollable
 * Provides a way to scroll content that is too wide for the content 
 * window. When the page loads reader.js determines if the content 
 * needs to scroll. If so, it will add `.s9-is-scrollable` class to 
 * the surrounding div.
 * Note: This requires `<div class="s9-scrollable">` to surround the 
 * content you want to scroll.
 *------------------------------------------------------------------*/
.s9-scrollable {
  display: block;
  width: auto;
  overflow-y: auto;
  text-align: center;
  clear: both;
}
.s9-scrollable figure > img.equation,
.s9-scrollable .equation-key > img.equation {
  padding: 0 10px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.s9-scrollable img {
  max-width: none;
}
.s9-scrollable > table {
  /* For scrollable HTML tables */
  text-align: left;
  width: 100%;
}
.s9-scrollable.s9-is-scrollable {
  box-shadow: inset 1px 0px 5px #CCC;
  margin-top: .7em;
  margin-bottom: .7em;
}
.s9-scrollable.s9-is-scrollable > table {
  /* For scrollable HTML tables */
  width: 620px;
}

/* Fixes a scrolling bug in iOS */
.s9-scrollable table {
  -webkit-transform: none !important;
}

body > .s9-scrollable {
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 560px) {
  body > .s9-scrollable {
    margin-left: -70px;
    margin-right: -70px;
  }
}
@media (min-width: 820px) {
  body > .s9-scrollable {
    margin-left: -140px;
    margin-right: -140px;
  }
}
@media (min-width: 560px) {
  body > .s9-scrollable {
    padding-left: 70px;
    padding-right: 70px;
  }
}
@media (min-width: 820px) {
  body > .s9-scrollable {
    padding-left: 140px;
    padding-right: 140px;
  }
}

/*--------------------------------------------------------------------
 * s9 Audio Button
 * Styling for inline audio player button. Change this only if 
 * absolutely necessary.
 *------------------------------------------------------------------*/
.s9-audio-button-custom {
  margin-top: 23px;
  display: inline-block;
  padding: 6px 10px 6px 40px;
  color: #fff;
  text-decoration: none;
  text-indent: 0;
  text-align: left;
  text-transform: none;
  font-family: "Source Sans Pro", Verdana, Helvetica, sans;
  font-size: .8em;
  font-weight: 600;
  line-height: 1.1em;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  border-radius: 5px;
  background: #999999 url(images/icon-callout-audio.svg) no-repeat 10px center;
  background-size: 20% auto;
}
.s9-audio-button-custom.s9-active {
  opacity: .5;
}

/*--------------------------------------------------------------------
 * s9 Answer
 * Used by reader.js to control the show/hide values.
 *------------------------------------------------------------------*/
.s9-answer {
  color: black;
  font-weight: 400;
}
.s9-answer .s9-show-answer-value,
.s9-answer .s9-hide-answer-value {
  display: none;
}

.s9-answer-toggle {
  color: #037bb5;
  display: inline-block;
  min-height: 1.6em;
  font-family: "Source Sans Pro", Verdana, Helvetica, sans;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5em;
  margin: 0.3em 0;
  padding-left: 1.2em;
  background: url("images/icon-arrow-show-blue.svg") no-repeat 0 0.2em;
  background-size: 1em auto;
}
.s9-answer-toggle.s9-active {
  background-image: url("images/icon-arrow-hide-blue.svg");
}

/*--------------------------------------------------------------------
 * s9ml-answer
 *------------------------------------------------------------------*/
.s9ml-answer {
  padding-left: 1.5em;
  background: url("images/icon-arrow-show-blue.svg") no-repeat 0 50%;
  background-size: 1em auto;
}

/*--------------------------------------------------------------------
 * Layout Classes 
 *
 * The following classes handle width and alignment.
 * WARNING: Editing these classes may cause unintended effects.
 *------------------------------------------------------------------*/
.left {
  float: left;
  clear: left;
  display: block;
  margin-left: 0;
  margin-right: 3.2%;
}
.right + .left {
  margin-right: 0;
}

.right {
  float: right;
  clear: right;
  display: block;
  margin-left: 0;
  margin-left: 3.2%;
}
.left + .right {
  margin-left: 0;
}

.center {
  float: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.grid {
  list-style: none;
  margin-bottom: 0;
  clear: both;
  margin-left: -3.1%;
  list-style: none;
  margin-bottom: 0;
  word-spacing: -3px\9;
  letter-spacing: -0.33em;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}

.grid > .grid {
  margin-left: 0;
}

.grid-item {
  margin-bottom: 1.5em;
  letter-spacing: normal;
  word-spacing: normal;
  display: inline-block;
  width: 100%;
  padding-left: 3.1%;
  vertical-align: top;
}

.width-whole,
.one-whole {
  width: 100%;
  clear: both;
}

.width-half,
.half-width,
.one-half {
  width: 48.4%;
}
.grid .width-half, .grid
.half-width, .grid
.one-half {
  width: 50%;
}

.width-third,
.third-width,
.one-third {
  width: 31.2%;
}
.grid .width-third, .grid
.third-width, .grid
.one-third {
  width: 33.3%;
}

.width-two-thirds,
.two-thirds-width,
.two-thirds {
  width: 65.6%;
}
.grid .width-two-thirds, .grid
.two-thirds-width, .grid
.two-thirds {
  width: 66.66%;
}

.width-fourth,
.fourth-width,
.one-fourth {
  width: 48.4%;
}
.grid .width-fourth, .grid
.fourth-width, .grid
.one-fourth {
  width: 50%;
}
@media (min-width: 560px) {
  .width-fourth,
  .fourth-width,
  .one-fourth {
    width: 22.6%;
  }
  .grid .width-fourth, .grid
  .fourth-width, .grid
  .one-fourth {
    width: 25%;
  }
}

.width-two-fourths,
.two-fourths-width,
.two-fourths {
  width: 48.4%;
}
.grid .width-two-fourths, .grid
.two-fourths-width, .grid
.two-fourths {
  width: 50%;
}

.width-three-fourths,
.three-fourths-width,
.three-fourths {
  width: 74.2%;
}
.grid .width-three-fourths, .grid
.three-fourths-width, .grid
.three-fourths {
  width: 75%;
}

@media only screen and (max-width: 559px) {
  .fractional-width, .width-half,
  .half-width,
  .one-half, .width-third,
  .third-width,
  .one-third, .width-two-thirds,
  .two-thirds-width,
  .two-thirds, .width-two-fourths,
  .two-fourths-width,
  .two-fourths, .width-three-fourths,
  .three-fourths-width,
  .three-fourths {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .grid .fractional-width, .grid .width-half,
  .grid .half-width,
  .grid .one-half, .grid .width-third,
  .grid .third-width,
  .grid .one-third, .grid .width-two-thirds,
  .grid .two-thirds-width,
  .grid .two-thirds, .grid .width-two-fourths,
  .grid .two-fourths-width,
  .grid .two-fourths, .grid .width-three-fourths,
  .grid .three-fourths-width,
  .grid .three-fourths {
    width: 100%;
  }
}

.full-bleed {
  margin-left: -20px;
  margin-right: -20px;
}
@media (min-width: 560px) {
  .full-bleed {
    margin-left: -70px;
    margin-right: -70px;
  }
}
@media (min-width: 820px) {
  .full-bleed {
    margin-left: -140px;
    margin-right: -140px;
  }
}

.full-bleed-padding {
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 560px) {
  .full-bleed-padding {
    margin-left: -70px;
    margin-right: -70px;
  }
}
@media (min-width: 820px) {
  .full-bleed-padding {
    margin-left: -140px;
    margin-right: -140px;
  }
}
@media (min-width: 560px) {
  .full-bleed-padding {
    padding-left: 70px;
    padding-right: 70px;
  }
}
@media (min-width: 820px) {
  .full-bleed-padding {
    padding-left: 140px;
    padding-right: 140px;
  }
}

.restore-padding {
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 560px) {
  .restore-padding {
    padding-left: 70px;
    padding-right: 70px;
  }
}
@media (min-width: 820px) {
  .restore-padding {
    padding-left: 140px;
    padding-right: 140px;
  }
}

.grid-icon {
  margin-bottom: 1.5em;
  letter-spacing: normal;
  word-spacing: normal;
  display: inline-block;
  width: 100%;
  padding-left: 3.1%;
  vertical-align: top;
  width: 48.4%;
}
.grid .grid-icon {
  width: 50%;
}
@media (min-width: 560px) {
  .grid-icon {
    width: 22.6%;
  }
  .grid .grid-icon {
    width: 25%;
  }
}

/*--------------------------------------------------------------------
 * Media Blocks
 * 
 * These are generic layout classes for placing content to the left 
 * or right of a figue or other element.
 *
 *  <div class="media-right">
 *      <div class="content">
 *          <!-- Put your flow/text content here -->
 *      </div>
 *      <div class="media">
 *          <!-- Put your figure/image content here -->
 *      </div>
 *  </div>
 *------------------------------------------------------------------*/
.media-right {
  clear: both;
}
.media-right:after {
  content: "";
  display: table;
  clear: both;
}
.media-right .content {
  width: 65.6%;
  float: left;
  clear: left;
  display: block;
  margin-left: 0;
  margin-right: 3.2%;
  margin-bottom: 1.5em;
}
.grid .media-right .content {
  width: 66.66%;
}
.right + .media-right .content {
  margin-right: 0;
}
@media only screen and (max-width: 559px) {
  .media-right .content {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .grid .media-right .content {
    width: 100%;
  }
}
.media-right .media {
  width: 31.2%;
  float: right;
  clear: right;
  display: block;
  margin-left: 0;
  margin-left: 3.2%;
  margin-left: 0;
}
.grid .media-right .media {
  width: 33.3%;
}
.left + .media-right .media {
  margin-left: 0;
}
@media only screen and (max-width: 559px) {
  .media-right .media {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .grid .media-right .media {
    width: 100%;
  }
}

.media-left {
  clear: both;
}
.media-left:after {
  content: "";
  display: table;
  clear: both;
}
.media-left .content {
  width: 65.6%;
  float: right;
  clear: right;
  display: block;
  margin-left: 0;
  margin-left: 3.2%;
  margin-left: 0;
}
.grid .media-left .content {
  width: 66.66%;
}
.left + .media-left .content {
  margin-left: 0;
}
@media only screen and (max-width: 559px) {
  .media-left .content {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .grid .media-left .content {
    width: 100%;
  }
}
.media-left .media {
  width: 31.2%;
  float: left;
  clear: left;
  display: block;
  margin-left: 0;
  margin-right: 3.2%;
}
.grid .media-left .media {
  width: 33.3%;
}
.right + .media-left .media {
  margin-right: 0;
}
@media only screen and (max-width: 559px) {
  .media-left .media {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .grid .media-left .media {
    width: 100%;
  }
}

.baseline-guide {
  background-image: -moz-linear-gradient(#ffccff 1px, rgba(0, 0, 0, 0) 1px);
  background-image: -webkit-linear-gradient(#ffccff 1px, rgba(0, 0, 0, 0) 1px);
  background-image: linear-gradient(#ffccff 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 100% 1.524em;
}

.grid-guide {
  background: transparent;
  background-image: url(images/debug-grid-12-col.svg);
  background-size: 100%;
}

.icon-test .figure-icon,
.icon-test .callout-icon {
  position: relative !important;
  display: block !important;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  margin-bottom: 1.5em;
}

/*--------------------------------------------------------------------
 * Basic Inline Typography
 *------------------------------------------------------------------*/
/* strong / bold */
b, strong {
  font-weight: 600;
}

/* italics / emphasis */
i, em {
  font-style: italic;
  font-style: oblique;
}

/* strikethrough */
s {
  text-decoration: line-through;
}

/* deleted text */
del {
  text-decoration: line-through;
}

/* inserted text */
ins {
  text-decoration: underline;
}

/* copyright and legal text */
small {
  font-size: 13px;
  font-size: 0.6842em;
  line-height: 0.9em;
}

/* small, upercase font */
.smallcaps {
  font-variant: small-caps;
}

/* subscript and superscript */
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  font-size: 0.6842em;
  line-height: 0.9em;
}

sub {
  top: 0.2em;
}

/* underline*/
u {
  text-decoration: underline;
}

/* double underline */
.u-double {
  text-decoration: none;
  border-bottom: 3px double #333333;
}

/*--------------------------------------------------------------------
 * Extended Typography
 *------------------------------------------------------------------*/
/* error or warning */
.alert {
  color: #1f1f1f;
  font-weight: 700;
}

/* information or notice */
.info {
  color: #333333;
  font-style: italic;
}

/* text within a box */
.boxed, .boxed-small {
  border: 1px solid #1a1a1a;
  border-radius: 2px;
  line-height: 1;
  padding: 1px 3px;
}

/* smaller text within a smaller box */
.boxed-small {
  font-size: 13px;
  font-size: 0.6842em;
  line-height: 0.9em;
}

/* lead-in sentence */
.lede,
.lead {
  color: #1f1f1f;
  font-weight: 600;
}

/*--------------------------------------------------------------------
 * Dropcaps
 *------------------------------------------------------------------*/
/* dropcap */
.dropcap:first-letter {
  float: left;
  font-size: 60px;
  font-size: 3.1579em;
  line-height: 0.9;
  padding-right: 0.1em;
  color: #1f1f1f;
}

/* inverted dropcap in which the letter is "kocked out" of the color */
.dropcap-knockout:first-letter {
  float: left;
  font-size: 64px;
  font-size: 3.3684em;
  line-height: 0.9;
  background: #333333;
  color: white;
  padding-top: 0.1406em;
  padding-right: 0.1875em;
  padding-bottom: 0.1406em;
  padding-left: 0.1875em;
  margin-top: 0.0938em;
  margin-right: 0.1563em;
}

/*--------------------------------------------------------------------
 * Code
 *------------------------------------------------------------------*/
code,
kbd,
samp {
  background: #eeeeee;
  border-radius: 2px;
  color: #333333;
  font-family: Courier, "Courier New", monospace;
  font-size: 17px;
  font-size: 0.8947em;
  line-height: 0.9em;
  /* fixes line-height bug */
  padding: 2px;
  vertical-align: middle;
}

/* preformatted code blocks */
pre {
  margin-bottom: 1.5em;
  overflow: hidden;
  white-space: pre;
}
pre code {
  display: block;
  padding: 14.25px;
  line-height: 1.2;
}

/*--------------------------------------------------------------------
 * Forces breaks in long strings, most often used in unbroken strings 
 * like http://url.com/that/goes/on/and/will/not/break/otherwise that 
 * appear in table-cells where break-word does not work.
 *------------------------------------------------------------------*/
.force-break {
  word-break: break-word;
}

/*--------------------------------------------------------------------
 * Force Hyphen
 * Use with `<span class="force-hyphen">Longunbrokenword</span>. 
 * Forces breaks at mobile size, otherwise tries to add hyphens for 
 * browsers that support it.
 *------------------------------------------------------------------*/
.force-hyphen {
  word-break: break-all;
}
@media (min-width: 560px) {
  .force-hyphen {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }
}

/*--------------------------------------------------------------------
 * Text alignment
 *------------------------------------------------------------------*/
.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

/*--------------------------------------------------------------------
 * Headings
 *------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-family: "Source Sans Pro", Verdana, Helvetica, sans;
  line-height: 1.3;
}

h1 {
  font-size: 36px;
  font-size: 1.8947em;
  margin-bottom: 0.7917em;
  font-weight: 600;
  color: #00aa99;
}
@media (min-width: 560px) {
  h1 {
    margin-bottom: 0.7917em;
  }
}
h1.banner {
  background: #00aa99;
  color: white;
  margin-left: -0.7917em;
  margin-right: -0.7917em;
  padding: 0.3958em 0.7917em;
}
h1.banner:first-child {
  margin-top: -0.7917em;
}
h1 + h1.subtitle, h2 + h1.subtitle, h3 + h1.subtitle, h4 + h1.subtitle, h5 + h1.subtitle, h6 + h1.subtitle, p + h1.subtitle {
  margin-top: -0.7917em;
}
body > h1:first-child {
  margin-top: 1.5833em;
}

h2 {
  font-size: 30px;
  font-size: 1.5789em;
  margin-bottom: 0.95em;
}
h2.banner {
  background: #00aa99;
  color: white;
  margin-left: -0.95em;
  margin-right: -0.95em;
  padding: 0.475em 0.95em;
}
h2.banner:first-child {
  margin-top: -0.95em;
}
h1 + h2.subtitle, h2 + h2.subtitle, h3 + h2.subtitle, h4 + h2.subtitle, h5 + h2.subtitle, h6 + h2.subtitle, p + h2.subtitle {
  margin-top: -0.95em;
}
body > h2:first-child {
  margin-top: 1.9em;
}

h3 {
  font-size: 24px;
  font-size: 1.2632em;
  margin-bottom: 1.1875em;
}
h3.banner {
  background: #00aa99;
  color: white;
  margin-left: -1.1875em;
  margin-right: -1.1875em;
  padding: 0.5938em 1.1875em;
}
h3.banner:first-child {
  margin-top: -1.1875em;
}
h1 + h3.subtitle, h2 + h3.subtitle, h3 + h3.subtitle, h4 + h3.subtitle, h5 + h3.subtitle, h6 + h3.subtitle, p + h3.subtitle {
  margin-top: -1.1875em;
}
body > h3:first-child {
  margin-top: 2.375em;
}

h4 {
  font-size: 21px;
  font-size: 1.1053em;
  margin-bottom: 1.3571em;
  font-weight: 600;
}
h4.banner {
  background: #00aa99;
  color: white;
  margin-left: -1.3571em;
  margin-right: -1.3571em;
  padding: 0.6786em 1.3571em;
}
h4.banner:first-child {
  margin-top: -1.3571em;
}
h1 + h4.subtitle, h2 + h4.subtitle, h3 + h4.subtitle, h4 + h4.subtitle, h5 + h4.subtitle, h6 + h4.subtitle, p + h4.subtitle {
  margin-top: -1.3571em;
}
body > h4:first-child {
  margin-top: 2.7143em;
}

h5 {
  font-size: 19px;
  font-size: 1em;
  margin-bottom: 1.5em;
  text-transform: uppercase;
}
h5.banner {
  background: #00aa99;
  color: white;
  margin-left: -1.5em;
  margin-right: -1.5em;
  padding: 0.75em 1.5em;
}
h5.banner:first-child {
  margin-top: -1.5em;
}
h1 + h5.subtitle, h2 + h5.subtitle, h3 + h5.subtitle, h4 + h5.subtitle, h5 + h5.subtitle, h6 + h5.subtitle, p + h5.subtitle {
  margin-top: -1.5em;
}
body > h5:first-child {
  margin-top: 3em;
}

h6 {
  font-size: 19px;
  font-size: 1em;
  margin-bottom: 1.5em;
  font-style: italic;
}
h6.banner {
  background: #00aa99;
  color: white;
  margin-left: -1.5em;
  margin-right: -1.5em;
  padding: 0.75em 1.5em;
}
h6.banner:first-child {
  margin-top: -1.5em;
}
h1 + h6.subtitle, h2 + h6.subtitle, h3 + h6.subtitle, h4 + h6.subtitle, h5 + h6.subtitle, h6 + h6.subtitle, p + h6.subtitle {
  margin-top: -1.5em;
}
body > h6:first-child {
  margin-top: 3em;
}

p.banner {
  background: #00aa99;
  color: white;
  margin-left: -1.5em;
  margin-right: -1.5em;
  padding: 0.75em 1.5em;
}
p.banner:first-child {
  margin-top: -1.5em;
}
h1 + p.subtitle, h2 + p.subtitle, h3 + p.subtitle, h4 + p.subtitle, h5 + p.subtitle, h6 + p.subtitle, p + p.subtitle {
  margin-top: -1.5em;
}
body > p:first-child {
  margin-top: 3em;
}
p.subtitle {
  font-style: italic;
}

.subtitle {
  margin-top: 0;
}

/*--------------------------------------------------------------------
 * Remove extra space between adjacent headings
 *------------------------------------------------------------------*/
h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
  margin-top: 0;
}

/*--------------------------------------------------------------------
 * Paragraphs
 *------------------------------------------------------------------*/
/* Add a bottom margin to all paragraphs equal to the base line height */
p {
  margin-bottom: 1.5em;
}

/*--------------------------------------------------------------------
 * Lists
 *------------------------------------------------------------------*/
ol, ul {
  list-style-type: none;
  font-style: normal;
  margin-left: 2.25em;
  margin-bottom: 1.5em;
}
ol ol, ol ul, ul ol, ul ul {
  /* Remove bottom margin from nested lists */
  margin-bottom: 0;
}

/* Make sure list-items outside of lists don't have a coutner */
body > li {
  list-style-type: none;
}

.list-italic > li {
  font-style: italic;
}
.list-italic ol, .list-italic ul {
  /* Fixes a bug where nested lists inherit font style */
  font-style: normal;
}

.list-bold > li {
  font-weight: 600;
}
.list-bold ol, .list-bold ul {
  /* Fixes a bug where nested lists inherit font style */
  font-weight: 400;
}

.list-no-style {
  list-style-type: none;
}

.list-no-indent {
  margin-left: 0;
}

.list-indent {
  margin-left: 3em;
}

.list-inside {
  margin-left: 0;
  list-style-position: inside;
}

.list-second-indent,
.list-second-line-indent {
  margin-left: 1.5em;
  text-indent: -1.5em;
}

/*--------------------------------------------------------------------
 * Ordered Lists
 *------------------------------------------------------------------*/
.list-decimal, ol {
  list-style-type: decimal;
}

.list-upper-alpha, ol ol {
  list-style-type: upper-alpha;
}

.list-upper-roman, ol ol ol {
  list-style-type: upper-roman;
}

.list-lower-alpha, ol ol ol ol {
  list-style-type: lower-alpha;
}

.list-lower-roman, ol ol ol ol ol {
  list-style-type: lower-roman;
}

/*--------------------------------------------------------------------
 * Unordered Lists
 *------------------------------------------------------------------*/
.list-bullet, ul,
.list-disc {
  list-style-type: disc;
}

.list-square, ul ul {
  list-style-type: square;
}

.list-circle, ul ul ul {
  list-style-type: circle;
}

/*--------------------------------------------------------------------
 * Custom Unicode Bullets
 *------------------------------------------------------------------*/
.list-arrow {
  position: relative;
  list-style-type: none;
}
.list-arrow > li:before {
  content: "\2192 ";
  position: absolute;
  left: -1.5em;
}

.list-dash, ul ul ul ul {
  position: relative;
  list-style-type: none;
}
.list-dash > li:before, ul ul ul ul > li:before {
  content: "\2014 ";
  position: absolute;
  left: -1.5em;
}

.list-guillemet, ul ul ul ul ul {
  position: relative;
  list-style-type: none;
}
.list-guillemet > li:before, ul ul ul ul ul > li:before {
  content: "\00BB ";
  position: absolute;
  left: -1.5em;
}

/*--------------------------------------------------------------------
 * Step Lists
 *------------------------------------------------------------------*/
.list-step, .list-step-center {
  list-style-type: none;
  display: table;
}
.list-step li, .list-step-center li {
  display: table-row;
}
.list-step .step-title, .list-step-center .step-title {
  display: table-cell;
  padding-right: 1.5em;
  white-space: nowrap;
}
.list-step .step-info, .list-step-center .step-info {
  display: table-cell;
}

.list-step-center .step-title {
  text-align: right;
  min-width: 3em;
  padding-right: 0.25em;
}

/*--------------------------------------------------------------------
 * List images
 * The list images can be changed by uploading new images to the
 * assets/css/images folder.
 *------------------------------------------------------------------*/
.list-image-1, .list-image-2, .list-image-3, .list-image-4, .list-image-checkbox {
  list-style-type: none;
  position: relative;
}
.list-image-1 li:before, .list-image-2 li:before, .list-image-3 li:before, .list-image-4 li:before, .list-image-checkbox li:before {
  content: "";
  background-image: url(images/list-image-1.svg);
  background-size: 70% 70%;
  background-position: 0 50%;
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  left: -1.5em;
  height: 1.5em;
  width: 1.5em;
}
.list-image-1 li, .list-image-2 li, .list-image-3 li, .list-image-4 li, .list-image-checkbox li {
  counter-increment: section;
}

.list-image-1 li:before {
  background-image: url(images/list-image-1.svg);
}

.list-image-2 li:before {
  background-image: url(images/list-image-2.svg);
}

.list-image-3 li:before {
  background-image: url(images/list-image-3.svg);
}

.list-image-4 li:before {
  background-image: url(images/list-image-4.svg);
}

/*--------------------------------------------------------------------
 * Checkbox
 *------------------------------------------------------------------*/
.list-image-checkbox li:before {
  background-image: url(images/list-image-checkbox.svg);
}

/*--------------------------------------------------------------------
 * Key Terms
 * Uses floated list items to create the holders for the data.
 *
 * `.no-link` is used for page numbers that do not have links in Key Terms Cloud Extended.
 *
 * See [Key Term](/pattern-library/core-patterns/lists/key-term/) for example HMTL.
 *------------------------------------------------------------------*/
.key-term {
  padding-left: 0;
  overflow: hidden;
}
.key-term li {
  float: left;
  display: table;
  list-style: none;
  margin: 0 0.6em 0.6em 0;
  border: 1px solid #A9ABAE;
  border-right: none;
  background: #fff;
  position: relative;
}
.key-term li > dfn, .key-term li > .term-only, .key-term li > .nolink {
  font-family: "Source Sans Pro", Verdana, Helvetica, sans;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.4em;
  font-style: normal;
  color: #000;
  background: none;
  display: table-cell;
  padding: 0.5em;
  border-right: 1px solid #A9ABAE;
  height: 1.5em;
}
.key-term li > dfn:after, .key-term li > .term-only:after, .key-term li > .nolink:after {
  width: 1em;
  height: 1em;
  display: inline-block;
  padding-left: .2em;
  content: "";
  background: url("images/icon-definition-blue.svg") 100% 0.2em no-repeat;
  background-size: .9em auto;
  top: 2px;
  position: relative;
}
.key-term li > .term-only:after, .key-term li > .nolink:after {
  content: none;
}
.key-term a {
  font-family: "Source Sans Pro", Verdana, Helvetica, sans;
  font-weight: 600;
  color: black;
  padding: 0.1em 1.1em 0.1em .5em;
  margin-right: .5em;
  background: url("images/icon-link-blue.svg") 100% 0.2em no-repeat;
  background-size: .9em auto;
}
.key-term a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-right: 1px solid #A9ABAE;
}

/*--------------------------------------------------------------------
 * Key Term Extended
 *------------------------------------------------------------------*/
.key-term-extended {
  font-family: "Source Sans Pro", Verdana, Helvetica, sans;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.4em;
  list-style: none;
  padding: 0;
}
.key-term-extended li {
  margin: .5em 0;
}

/*--------------------------------------------------------------------
 * Figures
 *------------------------------------------------------------------*/
/*  Images should always span 100% if their container */
img {
  width: 100%;
}

figure {
  clear: both;
  position: relative;
  margin-bottom: 1.5em;
  /* If the card begins with a full-bleed image, extend it into the top margin. */
  /* Make sure the image link is block-level */
}
figure:after {
  content: "";
  display: table;
  clear: both;
}
body > figure.full-bleed:first-child {
  margin-top: 0;
}
figure > a,
figure img,
figure .figure-image {
  /* Required for tap highlight */
  display: block;
}

figcaption {
  font-family: "Source Sans Pro", Verdana, Helvetica, sans;
  font-size: 17px;
  font-size: 0.8947em;
  margin-top: 0.375em;
  position: relative;
}
.full-bleed figcaption {
  /* If the image is full-bleed, restore the caption to the content width. */
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 560px) {
  .full-bleed figcaption {
    padding-left: 70px;
    padding-right: 70px;
  }
}
@media (min-width: 820px) {
  .full-bleed figcaption {
    padding-left: 140px;
    padding-right: 140px;
  }
}

.figure-designation {
  font-weight: 700;
  color: #333333;
}

.figure-enumeration {
  margin-right: 14.25px;
  font-weight: 700;
  color: #333333;
}

.caption-title {
  color: #333333;
  font-weight: 700;
}

.caption-citation {
  font-style: italic;
}

/*--------------------------------------------------------------------
 * Figure caption position
 *------------------------------------------------------------------*/
.caption-left img {
  width: 65.6%;
  float: right;
  clear: right;
  display: block;
  margin-left: 0;
  margin-left: 3.2%;
}
.grid .caption-left img {
  width: 66.66%;
}
.left + .caption-left img {
  margin-left: 0;
}

.caption-right img {
  width: 65.6%;
  float: left;
  clear: left;
  display: block;
  margin-left: 0;
  margin-right: 3.2%;
}
.grid .caption-right img {
  width: 66.66%;
}
.right + .caption-right img {
  margin-right: 0;
}

.caption-center figcaption {
  text-align: center;
}

/*--------------------------------------------------------------------
 * Figure badges
 * Badges are icons or text 
 *------------------------------------------------------------------*/
.figure-icon {
  position: absolute;
  right: 1.5em;
  top: 1.5em;
  height: 1.68em;
  width: 1.68em;
}

.svg-image polygon,
.svg-image line,
.svg-image path,
.svg-image polyline {
  fill: #f05b40;
}
.svg-image .color-primary {
  fill: #f05b40;
}
.svg-image .color-secondary {
  fill: #00aa99;
}

.figure-audio figcaption {
  background: #f2f0ea;
  margin-top: 0;
  padding: 0.75em 1.5em;
}
.figure-audio figcaption .caption-subtitle {
  color: #f05b40;
  margin-bottom: 0;
}
.figure-audio figcaption :last-child {
  margin-bottom: 0;
}

.figure-guided-tour figcaption {
  background: #f2f0ea;
  margin-top: 0;
  padding: 0.75em 1.5em;
}
.figure-guided-tour figcaption .caption-subtitle {
  color: #f05b40;
  margin-bottom: 0;
}
.figure-guided-tour figcaption :last-child {
  margin-bottom: 0;
}

.figure-slided-tour figcaption {
  background: #f2f0ea;
  margin-top: 0;
  padding: 0.75em 1.5em;
}
.figure-slided-tour figcaption .caption-subtitle {
  color: #f05b40;
  margin-bottom: 0;
}
.figure-slided-tour figcaption :last-child {
  margin-bottom: 0;
}

.figure-slideline figcaption {
  background: #f2f0ea;
  margin-top: 0;
  padding: 0.75em 1.5em;
}
.figure-slideline figcaption .caption-subtitle {
  color: #f05b40;
  margin-bottom: 0;
}
.figure-slideline figcaption :last-child {
  margin-bottom: 0;
}

.figure-slideshow figcaption {
  background: #f2f0ea;
  margin-top: 0;
  padding: 0.75em 1.5em;
}
.figure-slideshow figcaption .caption-subtitle {
  color: #f05b40;
  margin-bottom: 0;
}
.figure-slideshow figcaption :last-child {
  margin-bottom: 0;
}

.figure-video figcaption {
  background: #f2f0ea;
  margin-top: 0;
  padding: 0.75em 1.5em;
}
.figure-video figcaption .caption-subtitle {
  color: #f05b40;
  margin-bottom: 0;
}
.figure-video figcaption :last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------------
 * Text Image
 *
 * Used for tables, charts and equations. Anything that has text
 * that needs to be readable by the end user and should not
 * grow larger than it needs to.
 * **All text images will have a class name entered into 
 * /assets/css/text-image.css**
//------------------------------------------------------------------*/
.text-image {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/*--------------------------------------------------------------------
 * Form Elements
 *------------------------------------------------------------------*/
button,
fieldset,
input,
optgroup,
select,
textarea {
  /* Correct inproperly inherited font sizes/styles */
  font: inherit;
  /* Remove focus outline */
}
button:focus,
fieldset:focus,
input:focus,
optgroup:focus,
select:focus,
textarea:focus {
  outline: 0;
}

/*--------------------------------------------------------------------
 * Buttons
 *------------------------------------------------------------------*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  /* Address `overflow` set to `hidden` in IE 9/10/11. */
  overflow: visible;
  /* Correct inability to style clickable `input` types in iOS. */
  -webkit-appearance: button;
  /*  Improve usability and consistency of cursor style between image-type `input` and others. */
  cursor: pointer;
  background: #1f1f1f;
  color: white;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  border: 0px none;
  padding: 0.375em 0.75em;
}
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background: #333333;
}

/* Re-set default cursor for disabled elements. */
button[disabled],
html input[disabled] {
  cursor: default;
}

/*--------------------------------------------------------------------
 * Labels (used as containers for input elements)
 *
 * <lable>[input field]</label>
 *------------------------------------------------------------------*/
/*--------------------------------------------------------------------
 * Text field
 *------------------------------------------------------------------*/
input[type="text"] {
  line-height: normal;
  border: 1px solid #1f1f1f;
  border-radius: 4px;
  padding: 0.375em;
  width: 50%;
}

/*--------------------------------------------------------------------
 * Text area
 *------------------------------------------------------------------*/
textarea {
  overflow: auto;
  /* Remove scrollbars in IE */
  width: 100%;
  border: 1px solid #333333;
  border-radius: 4px;
  padding: 0.375em;
  outline: none;
  resize: none;
}
textarea:focus {
  border: 1px solid #333333;
}

/*--------------------------------------------------------------------
 * Callouts
 *------------------------------------------------------------------*/
.callout-icon {
  position: absolute;
  right: 1.5em;
  top: 1.5em;
  height: 1.68em;
  width: 1.68em;
}

.callout {
  text-decoration: none;
  background: #f2f0ea;
  clear: both;
  padding: 1.5em;
  display: block;
  background-repeat: no-repeat;
  position: relative;
  background-position: right 1.5em top 1.5em;
  margin-bottom: 1.5em;
}
.callout :last-child {
  margin-bottom: 0;
}
.callout h1, .callout h2, .callout h3, .callout h4, .callout h5, .callout h6,
.callout p {
  color: #333333;
}

.audio-length {
  font-family: Courier, "Courier New", monospace;
  color: #1f1f1f;
}
h4 + .audio-length {
  margin-top: -1.5em;
}

.callout-transcript {
  padding: 0.75em 1.5em;
  background-size: 1.5789em;
  background-position: right 1.5em top 50%;
}
.callout-transcript h4 {
  font-size: 17px;
  font-size: 0.8947em;
  font-family: Courier, "Courier New", monospace;
}

a {
  color: #037bb5;
  text-decoration: underline;
}

.link-block {
  display: block;
}

.link-inline {
  color: #037bb5;
  text-decoration: none;
  padding: 0.1em 1.2em 0.1em 0;
  background: url("images/icon-link-blue.svg") right center no-repeat;
  background-size: 1em auto;
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -hp-pre-wrap;
  word-wrap: break-word;
}
.link-inline[href*="[chapter"], .link-inline[href*="[Chapter"], .link-inline[rel="chapter"], .link-inline[rel="jump"] {
  padding-right: 1em;
  background: url("images/icon-link-jump-blue.svg") right center no-repeat;
  background-size: 1em auto;
}

dfn {
  font-weight: 700;
  font-style: normal;
  padding-right: 1.1em;
  background: url("images/icon-definition-blue.svg") right center no-repeat;
  background-size: 1em auto;
}
dfn > em {
  font-weight: 400;
  font-style: normal;
}

sup[href*="[remark"], sup[rel="remark"] {
  font: 0.7em "Meta Serif Office Pro", Georgia, serif;
  color: #037bb5;
}
sup.remark-large {
  font-size: inherit;
  vertical-align: inherit;
}

/*--------------------------------------------------------------------
 * Blockquote
 *------------------------------------------------------------------*/
blockquote {
  clear: both;
  font-size: 24px;
  font-size: 1.2632em;
  font-family: "Source Sans Pro", Verdana, Helvetica, sans;
  font-weight: 300;
  margin-bottom: 1.5em;
  color: #706853;
  -webkit-font-smoothing: subpixel-antialiased;
}
blockquote p:last-of-type {
  margin-bottom: 0;
}
blockquote:not(.right):not(.left) {
  margin-left: 1.5em;
  margin-right: 1.5em;
}
blockquote cite,
blockquote .citation,
blockquote .caption-citation {
  font-size: 17px;
  font-size: 0.8947em;
  display: block;
  color: #f05b40;
  font-weight: 400;
}

/*--------------------------------------------------------------------
 * Citation
 *------------------------------------------------------------------*/
cite,
.citation,
.caption-citation {
  color: #666666;
}

/*--------------------------------------------------------------------
 * Pullquote
 *------------------------------------------------------------------*/
.pullquote {
  clear: both;
  font-family: "Meta Serif Office Pro", Georgia, serif;
  position: relative;
  border-top: 3px solid #333333;
  border-left: 0;
  margin-bottom: 3em;
  border-bottom: 3px solid #333333;
  padding-top: 1.1875em;
  padding-bottom: 1.1875em;
  padding-left: 0;
  font-size: 27px;
  font-size: 1.4211em;
  margin-bottom: 1.0556em;
}
.pullquote:before, .pullquote:after {
  position: absolute;
  height: 1em;
  font-size: 21px;
  font-size: 1.1053em;
}
.pullquote p:last-of-type,
.pullquote :last-child {
  margin-bottom: 0;
}
.pullquote > p {
  line-height: 1.5;
}
.pullquote cite {
  display: inline;
  font-size: 30px;
  font-size: 0.8333em;
  font-style: italic;
  text-align: center;
}
.pullquote cite:before {
  content: '';
}
@media (min-width: 560px) {
  .pullquote {
    font-size: 36px;
    font-size: 1.8947em;
    margin-bottom: 0.7917em;
    padding-top: 0.7917em;
    padding-bottom: 0.7917em;
  }
  .pullquote:not(.right):not(.left):before {
    content: '“';
    top: 0.5278em;
    left: -0.5em;
    color: #333333;
  }
}

/*--------------------------------------------------------------------
 * Large quote
 *------------------------------------------------------------------*/
.quote-large {
  clear: both;
  font-family: "Source Sans Pro", Verdana, Helvetica, sans;
  font-size: 36px;
  font-size: 1.8947em;
  line-height: 1.3;
  position: relative;
  text-transform: uppercase;
  border: 0 none;
  margin-bottom: 0.7917em;
  text-align: center;
  padding-left: 0;
}
.quote-large cite {
  font-size: 24px;
  font-size: 0.6667em;
  font-weight: 400;
  display: block;
  margin-top: 0.5938em;
}
.quote-large cite:after {
  content: ' -';
}
.quote-large p:last-of-type,
.quote-large :last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------------
 * Sections
 *------------------------------------------------------------------*/
section {
  clear: both;
  background: #c3ece8;
  font-family: "Source Sans Pro", Verdana, Helvetica, sans;
  padding: 1.5em;
  margin-bottom: 1.5em;
}
section:after {
  content: "";
  display: table;
  clear: both;
}
section :last-child {
  margin-bottom: 0;
}
section.full-bleed {
  /* Restore content padding automatically for full-bleed sections */
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 560px) {
  section.full-bleed {
    margin-left: -70px;
    margin-right: -70px;
  }
}
@media (min-width: 820px) {
  section.full-bleed {
    margin-left: -140px;
    margin-right: -140px;
  }
}
@media (min-width: 560px) {
  section.full-bleed {
    padding-left: 70px;
    padding-right: 70px;
  }
}
@media (min-width: 820px) {
  section.full-bleed {
    padding-left: 140px;
    padding-right: 140px;
  }
}
section:not(.full-bleed) .full-bleed {
  /* If a non-full-bleed section contains a full-bleed image, extend
  the image into the margins of the section only. */
  margin-left: -1.5em;
  margin-right: -1.5em;
}
section:not(.full-bleed) .full-bleed:first-child {
  margin-top: -1.5em;
}
section:not(.full-bleed) .full-bleed:last-child {
  margin-bottom: -1.5em;
}
section.sidenote h4 {
  margin-bottom: 0.6786em;
}

hr {
  border: 0px none;
  height: 2px;
  background: #f05b40;
  margin-top: 4.5em;
  margin-bottom: 1.5em;
}

/*--------------------------------------------------------------------
 * Tables
 *------------------------------------------------------------------*/
table,
.table {
  font-size: 17px;
  font-size: 0.8947em;
  font-family: "Source Sans Pro", Verdana, Helvetica, sans;
  border-top: 2px solid #333333;
  text-align: left;
  min-width: 100%;
  margin-bottom: 1.5em;
  /* Remove any default spacing from tables. */
  border-collapse: collapse;
  border-spacing: 0;
}

/* Table head */
thead,
.thead {
  border-bottom: 1px solid #333333;
  background: #ebebeb;
  color: #1f1f1f;
  font-weight: 700;
}

/* Table fototer */
tfoot {
  border-bottom: 1px solid #333333;
  color: #1f1f1f;
  font-weight: 400;
}

/* Table row */
tr {
  border-bottom: 1px solid #333333;
}

/* Table head cell */
th {
  vertical-align: top;
  padding: 0.75em;
}

/* Table cell */
td {
  padding: 0.75em;
  vertical-align: top;
}

/* Table stripes */
.table-stripes tbody tr:nth-child(odd),
.table-zebra tbody tr:nth-child(odd) {
  background-color: #ebebeb;
}

/*--------------------------------------------------------------------
 * Widget Styles
 *------------------------------------------------------------------*/
/* All widgets should span 100% of content */
.widget {
  margin: 1em 0;
  width: 100%;
}

/* Fliptip widget */
.widget-fliptip {
  height: 780px;
}

/* Javascript console */
.widget-js-console {
  width: 100%;
  height: 300px;
}

/*--------------------------------------------------------------------
 * Icons
 *------------------------------------------------------------------*/
/* And icon group is a container for multiple icons when placed in a header.  */
.icon-group {
  width: 30%;
  margin-left: 3.333%;
  float: right;
  text-align: right;
}

/* The icon  */
.icon {
  width: 1.25em;
  height: 1.25em;
  margin-left: 0.25em;
  -moz-border-radius: 1.25em;
  -webkit-border-radius: 1.25em;
  border-radius: 1.25em;
  background: #ffcc00;
  display: inline-block;
}

.icon-small {
  width: .75em;
  height: .75em;
  -moz-border-radius: 0.75em;
  -webkit-border-radius: 0.75em;
  border-radius: 0.75em;
  background: #ffcc00;
  display: inline-block;
}

/*--------------------------------------------------------------------
 * Circular Image
 *------------------------------------------------------------------*/
.icon-circle {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  line-height: 0.6;
  overflow: hidden;
}

/*--------------------------------------------------------------------
 * Fractions
 * Use with with the HTML slash entity, e.g., 1&frasl;10
 * Lorem ipsum dolor <sup class="fraction">5</sup>⁄&frasl;sub>8</sub> 
 * voluptate velit esse.
 *------------------------------------------------------------------*/
.fraction {
  position: relative;
  top: .25em;
  left: -.2em;
  margin-left: .25em;
}
.fraction + sub {
  position: relative;
  top: -0.2em;
  margin-left: .1em;
  margin-right: .2em;
}

var {
  font-style: italic;
  font-family: "Meta Serif Office Pro", Georgia, serif;
}

/*--------------------------------------------------------------------
 * Equations
 *------------------------------------------------------------------*/
figure > img.equation,
.equation-key > img.equation {
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: initial;
}

p > img.equation,
li > img.equation,
figcaption img.equation {
  height: auto;
  display: inline-block;
  vertical-align: -0.1em;
}

div.equation {
  text-align: center;
  margin: 1em auto;
  display: inline-block;
  padding: 0 10px;
  white-space: nowrap;
}

span.equation {
  white-space: nowrap;
}
@media only screen and (max-width: 559px) {
  span.equation {
    white-space: normal;
  }
}

/*--------------------------------------------------------------------
 * Part Introductions
 *------------------------------------------------------------------*/
.part-introduction {
  text-align: center;
  border-top: 6px double #333333;
  border-bottom: 6px double #333333;
  padding: 3em 0;
}
@media (min-width: 560px) {
  .part-introduction {
    padding: 6em 0;
  }
}

.part-number {
  font-size: 24px;
  font-size: 1.2632em;
  font-weight: 700;
}

.part-title {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 36px;
  font-size: 1.8947em;
}

/*--------------------------------------------------------------------
 * Unit Info
 *------------------------------------------------------------------*/
.unit-info {
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
  clear: both;
  background: #333333;
  color: white;
  font-weight: 300;
  padding: 0.75em;
  margin-bottom: 1.5em;
  min-height: 1.0526em;
  font-family: "Source Sans Pro", Verdana, Helvetica, sans;
  text-transform: uppercase;
}
@media (min-width: 560px) {
  .unit-info {
    margin-left: -70px;
    margin-right: -70px;
  }
}
@media (min-width: 820px) {
  .unit-info {
    margin-left: -140px;
    margin-right: -140px;
  }
}
@media (min-width: 560px) {
  .unit-info {
    padding-left: 70px;
    padding-right: 70px;
  }
}
@media (min-width: 820px) {
  .unit-info {
    padding-left: 140px;
    padding-right: 140px;
  }
}
.unit-info:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 560px) {
  .unit-info {
    min-height: 1.3158em;
  }
}
.unit-info .unit-title {
  float: none;
  display: block;
}
@media (min-width: 560px) {
  .unit-info .unit-title {
    display: inline;
    float: right;
  }
}
.unit-info .unit-number {
  float: none;
  display: block;
}
@media (min-width: 560px) {
  .unit-info .unit-number {
    float: left;
    display: inline;
  }
}
body > .unit-info:first-child {
  margin-top: -1.5em;
}
@media (min-width: 560px) {
  body > .unit-info:first-child {
    margin-top: -3em;
  }
}

/*--------------------------------------------------------------------
 * Chapter Introduction
 *------------------------------------------------------------------*/
.chapter-introduction {
  background: #00aa99;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
  color: white;
}
.chapter-introduction :last-child {
  margin-bottom: 0;
}
@media (min-width: 560px) {
  .chapter-introduction {
    padding-top: 3em;
    padding-bottom: 3em;
  }
}
@media (min-width: 560px) {
  .chapter-introduction {
    margin-left: -70px;
    margin-right: -70px;
  }
}
@media (min-width: 820px) {
  .chapter-introduction {
    margin-left: -140px;
    margin-right: -140px;
  }
}
@media (min-width: 560px) {
  .chapter-introduction {
    padding-left: 70px;
    padding-right: 70px;
  }
}
@media (min-width: 820px) {
  .chapter-introduction {
    padding-left: 140px;
    padding-right: 140px;
  }
}
.chapter-introduction .chapter-number {
  text-transform: uppercase;
  font-family: "Source Sans Pro", Verdana, Helvetica, sans;
  font-size: 24px;
  font-size: 1.2632em;
  color: #333333;
  margin-bottom: 0.75em;
}
.chapter-introduction h1 {
  color: white;
  margin-top: 0;
  font-weight: 600;
  font-size: 30px;
  font-size: 1.5789em;
}
@media (min-width: 560px) {
  .chapter-introduction h1 {
    font-size: 36px;
    font-size: 1.8947em;
  }
}
.chapter-introduction + :not(img):not(figure) {
  margin-bottom: 1.5em;
}

/* Top bleed */
body > .chapter-introduction:first-child {
  margin-top: 0;
}