@import url("epub3-fonts.css");

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

/* educate older readers about tags introduced in HTML5 */
article, aside, details, figcaption, figure,
footer, header, nav, section, summary {
  display: block;
}

/* html and body declarations must be separate entries for some readers */
html {
  margin: 0 !important;
  padding: 0 !important;
  /* set the em base (and relative em anchor) by setting the font-size on html */
  /* TODO set font-size > 100% except for Kindle */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

/* don't set margin on body as that's how many readers frame reading area */
/* can't set the font-family on body in Kindle */
body {
  padding: 0 !important;
  /* add margin to ~ match Kindle's narrow setting */
  /* don't use !important on margin as it breaks calibre */
  margin: 0;
  font-size: 100%;
  /* NOTE putting optimizeLegibility on the body slows down rendering considerably */
  text-rendering: optimizeSpeed;
  /* -webkit-font-smoothing has no noticable effect and is controversial, so leaving it off */
}

/* disables night mode in Aldiko, hoo-ha! */
html body {
  background-color: #FFFFFF;
}

/* sets minimum margin permitted */
/* @page not supported by Kindle or GitDen */
@page {
  /* push the top & bottom margins down in Aldiko to emulate Kindle (Kindle uses ~ 10% of screen by default )*/
  margin: 1cm;
}

div, p, blockquote, pre, figure, figcaption,
h1, h2, h3, h4, h5, h6,
dl, dt, dd, ol, ul, li,
table, caption, thead, tfoot, tbody, tr, th, td {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
}

a, abbr, address, cite, code, em, kbd, span, strong {
  font-size: 100%;
}

a {
  background: transparent;
}

a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

address {
  white-space: pre-line;
}

b, strong {
  font-weight: bold;
}

b.button {
  font-weight: normal;
  text-shadow: 1px 0 0 #B3B3B1;
  color: #191918;
  white-space: nowrap;
}

b.button .label {
  padding: 0 0.25em;
}

kbd {
  display: inline-block;
  font-size: 0.8em;
  line-height: 1;
  background-color: #F7F7F7; /* #FAFAFA */
  border: 1px solid #BEBEBC;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 1px 1px 0 rgba(102, 102, 101, 0.25), 0 0 0 1px white inset;
  box-shadow: 1px 1px 0 rgba(102, 102, 101, 0.25), 0 0 0 1px white inset;
  margin: 0 0.15em;
  padding: 0.25em 0.4em 0.2em 0.4em;
  vertical-align: 0.15em;
}

.keyseq {
  white-space: nowrap;
}

.menuseq .caret {
  /*
  font-family: "FontAwesome";
  font-size: 0.7em;
  line-height: 1;
  font-weight: bold;
  vertical-align: 0.08rem;
  */

  font-weight: bold;
}

.menuseq span[class~="caret"] {
  visibility: hidden;
}

.menuseq .caret::before {
  font-family: "FontAwesome";
  content: "\f054";
  font-size: 0.6em;
  vertical-align: 0.15em;
  visibility: visible;
  display: inline-block;
  width: 0;
  padding-right: 0.15em;
}

img {
  border: 0;
}

mark {
  background-color: #FFC14F;
  color: #191918;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 0.75em;
  line-height: 1;
}

sup {
  /* position: relative not permitted on Kindle */
  /*
  position: relative;
  top: -0.5em;
  */
  /* alternate approach #1 */
  /*
  display: inline-block;
  vertical-align: text-top;
  padding-top: .25em;
  */
  /* alternate approach #2 */
  line-height: 1;
  vertical-align: text-top;
}

sub {
  /* position: relative not permitted on Kindle */
  /*
  position: relative;
  bottom: -0.25em;
  */
  /* alternate approach #1 */
  /*
  display: inline-block;
  vertical-align: text-bottom;
  padding-bottom: .5em;
  */
  /* alternate approach #2 */
  line-height: 1;
  vertical-align: text-bottom;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

body a:link {
  color: #333332;
  /* hack for font color in iBooks and Gitden (though Gitden would accept color !important too) */
  -webkit-text-fill-color: #333332;
  /* Kindle requires the !important on text-decoration */
  /* In night mode, the only indicator of a link is the underline, so we need it or a background image */
  text-decoration: none !important;
  border-bottom: 1px dashed #666665;
  /* allow URLs to break anywhere if they don't fit on a line; but how do we know it's a URL? */
  /*
  word-break: break-all;
  */
}

body:first-of-type a:link {
  border-bottom: none;
  background-repeat: no-repeat;
  background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, #666665 5%, #666665 95%, rgba(255,255,255,0) 100%);
  background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, #666665 5%, #666665 95%, rgba(255,255,255,0) 100%);
  background-size: 100% 1px;
  background-position: 0 1.2em;
}

body a:visited {
  color: #666665;
  /* hack for font color in iBooks */
  -webkit-text-fill-color: #666665;
}

code.literal {
  /* don't let it affect line spacing */
  /* disable since M+ 1mn won't interrupt line height */
  /*line-height: 1;*/
  /*
  white-space: nowrap;
  */
  word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "M+ 1p", sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  /* NOTE Kindle doesn't allow the line-height to be less than the font size (refer to heading font sizes) */
  line-height: 1.4; /* or 1.2125 */
  text-align: left;

  -webkit-hyphens: none; /* disable hyphenation where supported (e.g., iBooks) */
  word-wrap: break-word; /* break in middle of long word if no other break opportunities are available */

  /* avoiding page breaks does not seem to work in Kindle */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-after: avoid;
  page-break-after: avoid;
}

/* Aldiko requires a higher precedence rule to set margin and text-indent, hence the body prefix */
/* We'll just use the stronger rule for all paragraph-related stuff to be sure */
body p {
  margin: 1em 0 0 0;
  text-align: justify;
  text-indent: 0;

  widows: 2;
  orphans: 2;
}

body p,
ul, ol, li, dl, dt, dd, footer,
div.verse .attribution, table.table th, table.table td,
figcaption, caption {
  color: #333332;
  /* NOTE iBooks will forcefully override font-family of text inside div, p and span elements when font other than Original is selected */
  /* NOTE iBooks honors Original font for prose text if declared in display-options.xml */
  font-family: "Noto Serif", serif;
}

body p, li, dt, dd, footer {
  line-height: 1.6;
}

code, kbd, pre {
  color: #191918;
  font-family: "M+ 1mn", monospace;
  -webkit-hyphens: none; /* disable hyphenation where supported (e.g., iBooks) */
}

/* QUESTION should we kern preformatted text blocks? */
h1, h2, h3, h4, h5, h6,
body p, li, dd, blockquote > footer,
th, td, figcaption, caption {
  /* forward-compatible CSS to enable kerning (if we want ligatures, add "liga" and "dlig") */
  /* WebKits that don't recognize these properties don't kern well, hence why we don't simply enable kerning via text-rendering */
  -webkit-font-feature-settings: "kern";
  font-feature-settings: "kern";
  font-kerning: normal;
  /* NOTE see Kindle hack in epub3-css3-only.css for additional kerning settings (disabled) */
}

p.last::after {
  color: #57AD68;
  display: inline-block;
  font-family: "FontAwesome";
  font-size: 1em;
  content: "\f121"; /* i.e., </> */
  margin-left: 0.25em;
}

ul li, ol li {
  /* minimum margin in case there is no paragraph content */
  margin-top: 0.4em;
}

/* use paragraph-size gaps between list items */
.complex > ul > li,
.complex > ol > li {
  margin-top: 1em;
}

/* squeeze content in complex lists */
/*
li > figure,
li > p {
  margin-top: 0.4em;
}
*/

dl {
  margin-top: 0;
  margin-bottom: 0;
}

dt {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-after: avoid;
  page-break-after: avoid;
}

dt > span.term {
  font-style: italic;
}

/*
dt > span.term > code.literal {
  font-style: normal;
}
*/

dt {
  margin-top: 0.75em; /* balances 0.25em to term */
}

dl dd {
  /* minimum margin in case there is no paragraph content */
  margin-top: 0.25em;
}

div.callout-list {
  margin-top: 0.5em;
}

div.callout-list ol {
  font-size: 80%;
  margin-left: 1.5em !important;
  list-style-type: none;
}

div.callout-list ol li {
  text-align: left;
}

i.conum {
  color: #468C54;
  font-family: "M+ 1mn", monospace;
  font-style: normal;
}

/* don't let conum affect line spacing; REVIEW may not need this! */
/*pre i.conum {
  line-height: 1;
}*/

div.callout-list li > i.conum {
  float: left;
  margin-left: -1.25em;
  display: block;
  width: 1.25em;
}

div.itemized-list, div.ordered-list, div.description-list {
  margin-top: 1em;
  padding-bottom: 0.25em; /* REVIEW maybe, maybe not */
}

/* QUESTION should we add the class "list" so we can style these generically? */
div.itemized-list div.itemized-list,
div.itemized-list div.ordered-list,
div.itemized-list div.description-list,
div.ordered-list div.itemized-list,
div.ordered-list div.ordered-list,
div.ordered-list div.description-list {
  margin-top: 0;
}

/*div.description-list div.itemized-list,
div.description-list div.ordered-list,
div.description-list div.description-list {
}*/

h3.list-heading {
  font-size: 1em;
  font-family: "Noto Serif", serif;
  font-weight: bold;
  line-height: 1.6;
  margin-top: 1em;
  margin-bottom: -0.25em;
  letter-spacing: 0;
}

div.stack li strong.subject,
div.stack-subject li strong.subject {
  display: block;
}

ul {
  /* QUESTION do we need important here? */
  margin-left: 1em !important;
  list-style-type: square;
}

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

ul ul ul {
  list-style-type: disc;
}

/* disable list style type for CSS3-enabled clients */
body:first-of-type ul,
body:first-of-type ul ul,
body:first-of-type ul ul ul {
  list-style-type: none;
}

ul > li::before {
  float: left;
  margin-left: -1em;
  margin-top: -0.05em;
  padding-left: 0.25em;
  /* guarantee it's out of the flow */
  width: 0;
  display: block;
}

ul > li::before {
  content: "\25AA"; /* small black square */
  color: #666665;
}

ul ul > li::before {
  content: "\25E6"; /* small white circle */
  color: #57AD68;
}

ul ul ul > li::before {
  content: "\2022"; /* small black circle */
  color: #666665;
}

ul ul ul ul > li::before {
  content: "\25AB"; /* small white square */
  color: #57AD68;
}

ol {
  margin-left: 1.75em !important;
}

ol {
  list-style-type: decimal;
}

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

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

/* REVIEW */
dd {
  margin-left: 1.5rem !important;
}

/* Kindle does not justify list-item element, must wrap in nested block element */
li > span.principal, dd > span.principal {
  display: block;
  text-align: justify;
}

ol.brief > li > span.principal,
ul.brief > li > span.principal {
  text-align: left;
}

/* REVIEW still considering keeping this one */
/* disable justify within a link */
/*
li strong.subject a:link {
  white-space: pre-wrap;
  word-spacing: 0.1em;
}*/

/*
.bibliography ul li,
.references ul li {
  text-align: left;
}
*/

ul.bibliography > li > span.principal,
ul.references > li > span.principal {
  text-align: left;
}

/* sized based on the major third modular scale (4:5, 16px, 24px) */
h1, h2 {
  color: #333332;
  font-size: 1.5em;
  word-spacing: -0.075em;
  margin-top: 1em; /* 1.5rem */
  margin-bottom: -0.3333em; /* -0.5rem, 0.5rem to content */
}

h3 {
  color: #333332;
  font-size: 1.25em;
  margin-top: 0.84em; /* 1.05rem */
  margin-bottom: -0.5em; /* -0.625rem, 0.375rem to content */
}

h4 {
  color: #4F4F4C;
  font-weight: 200;

  font-size: 1.1em;
  margin-top: 1em; /* 1.1rem */
  margin-bottom: -0.818em; /* -0.9rem, 0.1rem to content */

  font-size: 1.2em;
  margin-top: .917em; /* 1.1rem */
  margin-top: 0.875em; /* 1.05rem */
  /*margin-bottom: -0.75em;*/ /* -0.9rem, 0.1rem to content */
  margin-bottom: -0.625em; /* -0.75rem, 0.25rem to content */
}

h5 {
  color: #666665;
  /*
  font-size: 1em;
  text-transform: uppercase;
  margin-top: 1em;
  margin-bottom: -1em;
  */

  font-size: 0.9em;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 1.11em; /* 1rem */
  margin-bottom: -0.972em; /* -0.875rem */
}

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
  color: inherit;
}

h5 code {
  text-transform: none;
}

/* Kindle strips (or unwraps) <header> tags, so we use an inner div to style */
.chapter-header {
  background-color: #333332;
  /* NOTE div must have at least 1px top padding for background to fill */
  padding: 0.75em 1.5em 0.25em 1.5em; /* would like to use 1.5vh 1.5em */
  margin-bottom: 2.5em;
  /* TODO maybe what we need to get articles to start in left column
  -webkit-column-break-before: left;
  page-break-before: left;
  */
}

h1.chapter-title {
  font-weight: 200;
  font-size: 1.2em;
  margin-top: 3.5em; /* 4.2rem - would like to use 9vh */
  margin-bottom: 0;
  padding-bottom: 0.8333em; /* 1.2rem */
  color: #B3B3B1;
  text-transform: uppercase;
  word-spacing: -0.075em;
  letter-spacing: -0.01em;
  border-bottom: 1px solid #DCDCDE;
}

h1.chapter-title .subtitle {
  font-weight: 400;
  color: #FFFFFF;
  display: block;
  font-size: 1.5em;
  margin: 0 0 0 0.75em; /* would like to use 2vw */
  line-height: 1.2; /* line-height will remain 1.4 on Kindle, see hack in media query */
}

h1.chapter-title em {
  color: #57AD68;
  font-style: normal;
}

h1.chapter-title b {
  font-weight: inherit;
}

.chapter-header p.byline {
  color: #DCDCDE;
  /* float left and height 0 takes this line out of the flow */
  float: left;
  height: 0;
  width: 100%;
  text-align: right;
  margin-top: 0;
  line-height: 2;
}

.chapter-header p.byline b {
  font-weight: normal;
  padding-left: 0.2em; /* 0.25rem */
  font-size: 0.8em;
  line-height: 2.5; /* 2rem */
}

.chapter-header p.byline img {
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
  vertical-align: middle;
  /* some readers like to resize images; we don't want the author images resized */
  height: 2em !important;
  width: 2em !important;
}

div.abstract {
  margin: 5% 1.5em 2.5em 1.5em;
}

div.abstract > p {
  color: #666665;
  font-size: 1.05em; /* or 1.1em? */
  line-height: 1.75;
}

div.abstract > p a:link {
  color: #666665;
  /* hack for font color in iBooks */
  -webkit-text-fill-color: #666665;
}

div.abstract > p:first-child::first-line {
  font-weight: bold;
  -webkit-font-feature-settings: "kern" off;
  font-feature-settings: "kern" off;
  font-kerning: none;
  /* and for Kindle... */
  text-rendering: optimizeSpeed;
}

div.abstract p strong {
  font-weight: inherit;
  font-style: italic;
}

p.lead {
  font-size: 1.05em;
  line-height: 1.75;
}

hr.thematicbreak {
  display: none;
}

hr.thematicbreak + p {
  margin-top: 1.5em;
}

/* TODO finish layout of first-letter */
hr.thematicbreak + p::first-letter {
  font-size: 200%;
}

p.stack > strong.head,
p.stack-head > strong.head {
  display: block;
}

p.signature {
  font-size: 0.9em;
}

figure,
aside.sidebar {
  margin-top: 1em;
}

/*
aside.sidebar {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  float: left;
  margin-bottom: 1em;
}
*/

figure.image {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

figure.image img {
  max-width: 100%;
}

figure.coalesce {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

figcaption,
caption {
  font-size: 0.9em;
  font-style: italic;
  color: #666665;
  letter-spacing: -0.01em;
  line-height: 1.4;
  text-align: left;
  padding-left: 0.1em;
  page-break-inside: avoid;
  -webkit-column-break-after: avoid;
  page-break-after: avoid;
}

figure.image figcaption {
  padding-left: 0;
  margin-top: 0.2em;
  -webkit-column-break-after: auto;
  page-break-after: auto;
}

p + figure.listing,
span.principal + figure.listing {
  margin-top: 0.75em; /* 0.75rem */
}

figure.listing > pre {
  margin-top: 0;
}

/* REVIEW TODO put margin bottom on the figcaption instead */
figure.listing > figcaption + pre {
  margin-top: 0.294em; /* 0.25rem */
}

aside.sidebar {
  border: 1px solid #B3B3B1;
  padding: 0 1.5em;
  font-size: 0.9em;
  background-color: #F2F2F2;
  text-align: right; /* aligns heading to right */
  /*
  -webkit-box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.15);
  box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.15);
  */
}

body:first-of-type aside.sidebar {
  background-color: rgba(0, 0, 0, 0.05); /* using transparency is night-mode friendly */
  /*background-color: rgba(51, 51, 50, 0.06);*/ /* using transparency is night-mode friendly */
}

/* a bit of a cheat; could use aside.sidebar[title] instead, but not on Aldiko */
aside.sidebar.titled {
  margin-top: 2em;
}

aside.sidebar > h2 {
  /*text-transform: uppercase;*/ /* uppercase done manually to support Aldiko */
  font-size: 1em;
  /*
  font-weight: 700;
  */
  font-weight: 400;
  letter-spacing: 0;
  display: inline-block;
  white-space: nowrap; /* for some reason it's wrapping prematurely */
  border: 1px solid #B3B3B1;
  padding: 1.5em .75em .5em .75em;
  margin: -1em 0.5em -0.25em 0.5em;
  background-color: #FFFFFF;
  /*
  -webkit-box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.1);
  box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.1);
  */
}

/* doesn't work
body:first-of-type aside.sidebar > h2 {
  background-color: rgba(255, 255, 255, 1);
}
*/

aside.sidebar > div.content {
  margin-bottom: 1em;
  text-align: justify; /* restore text alignment in content */
}

/* QUESTION same for ordered-list? */
aside.sidebar > div.content > div.itemized-list > ul {
  margin-left: 0.5em !important;
}

div.blockquote {
  padding: 0 1em;
  margin: 1.25em auto;
}

/* display: table causes quotes to be repeated in Aldiko, so we hide this part */
div[class~="blockquote"] {
  display: table;
}

blockquote > p {
  color: #191918;
  font-style: italic;

  /*
  font-size: 1.2em;
  word-spacing: 0.1em;
  */

  font-size: 1.15em;
  word-spacing: 0.1em;

  margin-top: 0;
  line-height: 1.75;
}

/* hide explicit open quote for CSS3-enabled clients */
blockquote span.open-quote:not(:empty) {
  display: none;
}

/* NOTE if we mapped the font icon to "\201c", we could just style the .open-quote */
blockquote > p:first-of-type::before {
  display: inline-block;
  color: #666665;
  text-shadow: 0 1px 2px rgba(102, 102, 101, 0.3);

  /* using serif quote from entypo */
  font-family: "FontIcons";

  /*content: "\f10e";*/ /* quote-right from Entypo */
  /*
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  padding-left: .3em;
  padding-right: .2em;
  */

  content: "\f10d"; /* quote-left, a flipped version of the quote-right from Entypo */
  padding-right: .5em;
  font-size: 1.5em;
  line-height: 1.3;
  margin-top: -0.5em;
  vertical-align: text-bottom;
}

blockquote footer {
  font-size: 0.9em;
  font-style: italic;

  margin-top: 0.5rem;
  text-align: right;
}

blockquote footer .context {
  font-size: 0.9em;
  letter-spacing: -0.1em;
  color: #666665;
}

/* Kindle requires text-align: center on surrounding div to align image to center */
figure.image div.content {
  text-align: center;
}

/* in the event the viewer adds display: block to the image */
figure.image img {
  /* max-width not supported in Kindle, need to use a media query to add */
  /*max-width: 95%;*/
  margin: 0 auto;
}

pre {
  text-align: left; /* fix for Namo */
  margin-top: 1em; /* 0.85rem */
  /*margin-top: 1.176em;*/ /* 1rem */
  white-space: pre-wrap;
  /*word-break: break-all;*/ /* break at the end of the line, no matter what */
  word-wrap: break-word; /* break in middle of long word if no other break opportunities are available */
  font-size: 0.85em;
  line-height: 1.4; /* matches what Kindle uses and can't go less */
  background-color: #F2F2F2;
  padding: 0.5rem 0.75rem;
  /*
  border-top: 3px solid #DCDCDE;
  */
  /* QUESTION #B3B3B1? */
  border-top: 1px solid #DCDCDE;
  border-right: 1px solid #DCDCDE;
}

body:first-of-type pre {
  background-color: rgba(0, 0, 0, 0.05); /* using transparency is night-mode friendly */
  /*background-color: rgba(51, 51, 50, 0.06);*/ /* using transparency is night-mode friendly */
}

/* TODO what we really want is for pre w/o caption to be unbreakable */
pre.screen {
  /*
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  */
  orphans: 3;
  widows: 3; /* widows doesn't seem to work here */
}

pre.source {
  orphans: 3;
  widows: 3; /* widows doesn't seem to work here */
}

div.verse {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

/* TODO we may want to reenable hyphens here, but not for kf8 */
div.verse > pre {
  background-color: transparent;
  border: none;
  font-size: 1.2em;
  text-align: center;
}

div.verse .attribution {
  display: block;
  margin-top: 1.4em;
}

aside.admonition {
  margin-top: 1em;
  padding: 1em;
  border-left: 0.5em solid transparent;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

/* overrides for CSS3-enabled clients */
aside[class~="admonition"] {
  margin: 1.5em 2em; /* even if admonition is at bottom of block, we want that extra space below */
  padding: 0;
  border-width: 0;
  background: none !important;
}

aside.note {
  border-left-color: #B3B3B1;
  background-color: #E1E1E1; /* 25% opacity of border */
}

aside.tip {
  border-left-color: #57AD68;
  background-color: #D4EAD9; /* 25% opacity of border */
}

aside.caution {
  border-left-color: #666665;
  background-color: #D8D8D8; /* 25% opacity of border */
}

aside.warning {
  border-left-color: #C83737;
  background-color: #F1CCCC; /* 25% opacity of border */
}

aside.important {
  border-left-color: #FFC14F;
  background-color: #FFEFD2; /* 25% opacity of border */
}

aside.admonition::before {
  display: block;
  font-family: "FontAwesome";
  font-size: 2em;
  line-height: 1;
  width: 1em;
  text-align: center;
  margin-bottom: -0.25em;
  margin-left: -0.5em;
  text-shadow: 0px 1px 2px rgba(102, 102, 101, 0.3);
}

aside.admonition > div.content {
  font-size: 90%;
  margin-top: -1em; /* prevent at top of content when using block form of admonition */
}

aside[class~="admonition"] > div[class~="content"] {
  margin-top: 0;
  padding-bottom: 1em;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 bottom;
  /* template
  background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, <color> 45%, <color> 55%, rgba(255,255,255,0) 57.5%);
  background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, <color> 45%, <color> 55%, rgba(255,255,255,0) 57.5%);
  */
}

aside.note::before {
  /*content: "\f0f4";*/ /* fa-coffee */
  content: "\f040"; /* fa-pencil */
  color: #B3B3B1; /* 179,179,177 */
}

aside[class~="note"] > div[class~="content"] {
  background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #B3B3B1 45%, #B3B3B1 55%, rgba(255,255,255,0) 57.5%);
  background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #B3B3B1 45%, #B3B3B1 55%, rgba(255,255,255,0) 57.5%);
}

aside.tip::before {
  /*content: "\f069";*/ /* fa-asterisk */
  /*content: "\f0d6";*/ /* fa-money */
  content: "\f15a"; /* fa-bitcoin */
  color: #57AD68; /* 87,173,104 */
}

aside[class~="tip"] > div[class~="content"] {
  background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #57AD68 45%, #57AD68 55%, rgba(255,255,255,0) 57.5%);
  background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #57AD68 45%, #57AD68 55%, rgba(255,255,255,0) 57.5%);
}

aside.caution::before {
  content: "\f0c2"; /* fa-cloud */
  color: #666665; /* 102,102,101 */ 
}

aside[class~="caution"] > div[class~="content"] {
  background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #666665 45%, #666665 55%, rgba(255,255,255,0) 57.5%);
  background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #666665 45%, #666665 55%, rgba(255,255,255,0) 57.5%);
}

aside.warning::before {
  content: "\f0e7"; /* fa-bolt */
  color: #C83737; /* 200,55,55 */
}

aside[class~="warning"] > div[class~="content"] {
  background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #C83737 45%, #C83737 55%, rgba(255,255,255,0) 57.5%);
  background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #C83737 45%, #C83737 55%, rgba(255,255,255,0) 57.5%);
}

aside.important::before {
  content: "\f12a"; /* fa-exclamation */
  color: #FFC14F; /* 255,193,79 */
}

aside[class~="important"] > div[class~="content"] {
  background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #FFC14F 45%, #FFC14F 55%, rgba(255,255,255,0) 57.5%);
  background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #FFC14F 45%, #FFC14F 55%, rgba(255,255,255,0) 57.5%);
}

aside.admonition > h2 {
  margin-top: 0;
  margin-bottom: 1.5em;
  font-size: 1em;
  text-align: center;
}

aside[class~="admonition"] > h2 {
  float: left;
  width: 100%;
  margin-top: -1.25em;
  margin-bottom: 0;
}

div.table {
  margin-top: 1em;
}

table.table thead,
table.table tbody,
table.table tfoot {
  font-size: 0.8em;
}

table.table > caption {
  padding-bottom: 0.1em;
}

table.table th,
table.table td {
  line-height: 1.4;
  padding: 0.5em 0.5em 1em 0.1em;
  vertical-align: top;
  text-align: left;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

table.table th {
  font-weight: bold;
}

table.table thead th {
  border-bottom: 1px solid #80807F;
}

table.table td > p {
  margin-top: 0;
  text-align: left;
}

/* REVIEW */
table.table td > p + p {
  margin-top: 1em;
}

table.table-framed {
  border-width: 1px;
  border-style: solid;
  border-color: #80807F;
}

table.table-framed-topbot {
  border-width: 1px 0;
  border-style: solid;
  border-color: #80807F;
}

table.table-framed-sides {
  border-width: 0 1px;
  border-style: solid;
  border-color: #80807F;
}

table.table-grid th,
table.table-grid td {
  border-width: 0 1px 1px 0; 
  border-style: solid;
  border-color: #80807F;
}

table.table-grid thead tr > *:last-child {
  border-right-width: 0;
}

table.table-grid tbody tr:last-child > th,
table.table-grid tbody tr:last-child > td {
  border-bottom-width: 0;
}

table.table-grid-rows tbody th,
table.table-grid-rows tbody td {
  border-width: 1px 0 0 0; 
  border-style: solid;
  border-color: #80807F;
}

table.table-grid-cols th,
table.table-grid-cols td {
  border-width: 0 1px 0 0; 
  border-style: solid;
  border-color: #80807F;
}

table.table-grid-cols thead th:last-child {
  border-right-width: 0;
}

table.table-grid-cols tbody tr > td:last-child {
  border-right-width: 0;
}

hr.pagebreak {
  -webkit-column-break-after: always;
  page-break-after: always;
  border: none;
  margin: 0;
}

/* REVIEW */
hr.pagebreak + * {
  margin-top: 0 !important;
}

#_about_the_author {
  -webkit-column-break-before: always;
  page-break-before: always;
  border-bottom: 1px solid #B3B3B3;
}

img.headshot {
  float: left;
  border: 1px solid #80807F;
  padding: 1px;
  margin: 0.35em 1em 0.15em 0;
  height: 5em !important;
  width: 5em !important;
}

/* Kindle refuses to style footer (perhaps stripped), so we use an explicit class */
.chapter-footer {
  -webkit-column-break-before: always;
  page-break-before: always;
}

div.footnotes {
  margin-top: 1em;
}

div.footnotes p {
  font-size: 0.8rem;
  margin-top: 0.4rem;
}

div.footnotes sup.noteref {
  font-weight: bold;
  font-size: 0.9em;
}

/*div.footnotes sup.noteref a {*/
sup.noteref a {
  /* Kindle wants to underline these links */
  text-decoration: none !important;
  background-image: none;
}

nav#toc ol {
  list-style-type: none;
}

.icon {
  display: none;
}

@media amzn-mobi {
  /* NOTE mobi7 doesn't support custom fonts, so revert to generic ones */
  body p, ul, ol, li, dl, dt, dd, figcaption, caption, footer,
  table.table th, table.table td, div.verse .attribution {
    font-family: serif;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: sans-serif;
  }
  code, kbd, pre, i.conum {
    font-family: monospace;
  }
}