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

/* @page only applies to EPUB2 readers; not supported by EPUB3 readers such as Kindle and Gitden */
@page {
  /* sets minimum margin permitted */
  /* pushes the top & bottom margins down in Aldiko to emulate Kindle (Kindle uses ~ 10% of screen by default )*/
  margin: 1cm;
}

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

address {
  white-space: pre-line;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

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

b.button::before,
b.button::after {
  position: relative;
  top: -1px;
  font-weight: 400;
}

b.button::before {
  content: "[";
  padding: 0 3px 0 2px;
}

b.button::after {
  content: "]";
  padding: 0 2px 0 3px;
}

kbd {
  display: inline-block;
  font-size: 0.8em;
  line-height: 1;
  background-color: $kbd-background;
  border: 1px solid $kbd-border;
  -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;
}

mark {
  background-color: $mark-background;
  color: $mark-text;
}

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;
}

/* We need to apply text-align to <p> too in order to override global text-align:justify */
th.halign-left, td.halign-left, th.halign-left > p, td.halign-left > p {
  text-align: left
}

th.halign-right, td.halign-right, th.halign-right > p, td.halign-right > p {
  text-align: right
}

th.halign-center, td.halign-center, th.halign-center > p, td.halign-center > p {
  text-align: center
}

th.valign-top, td.valign-top, th.valign-top > p, td.valign-top > p {
  vertical-align: top
}

th.valign-bottom, td.valign-bottom, th.valign-bottom > p, td.valign-bottom > p {
  vertical-align: bottom
}

th.valign-middle, td.valign-middle, th.valign-middle > p, td.valign-middle > p {
  vertical-align: middle
}

body a:link {
  /* 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 $link-border;
  /* 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;
  */
}

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 {
  /* 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: $pre-text;
  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: $last-mark-text;
  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;
}

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;
}

td.hdlist1 {
  font-weight: bold;
  padding-right: 0.625em;
}

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: $i-conum-text;
  font-family: "M+ 1mn", monospace;
  font-style: normal;
  user-select: none;
}

/* 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;

  > 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;

    content: "▪";
    color: $list-lvl1;
  }

  ul {
    > li::before {
      content: "◦";
      color: $list-lvl2;
    }

    ul {
      > li::before {
        content: "•";
        color: $list-lvl3;
      }

      ul {
        > li::before {
          content: "▫";
          color: $list-lvl4;
        }
      }
    }
  }
}

ol {
  list-style-type: decimal;
  margin-left: 1.75em !important;

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

    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 {
  font-size: 1.5em;
  word-spacing: -0.075em;
  margin-top: 1em; /* 1.5rem */
  margin-bottom: -0.3333em; /* -0.5rem, 0.5rem to content */
}

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

h4 {
  color: $h4-header-text;
  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: $h5-header-text;
  /*
  font-size: 1em;
  text-transform: uppercase;
  margin-top: 1em;
  margin-bottom: -1em;
  */

  font-size: 0.9em;
  font-weight: 700;
  text-transform: uppercase; /* not supported in Adobe Digital Editions */
  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 {
  /* NOTE div must have at least 1px top padding for background to fill */
  /* would like to use vh units for top and bottom padding */
  /*padding: 0.75em 1.5em 0.25em 1.5em;*/
  padding: 0.25em 0;
  margin-bottom: 2.5em;
  border-bottom: 1px solid $chapter-header-title-border;
  /* 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: $chapter-header-title-text;
  text-transform: uppercase; /* not supported in Adobe Digital Editions */
  word-spacing: -0.075em;
  letter-spacing: -0.01em;
}

h1.chapter-title .subtitle {
  font-weight: 400;
  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: $chapter-header-em;
  font-style: normal;
}

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

.chapter-header p.byline {
  /* 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: $abstract-text;
  font-size: 1.05em; /* or 1.1em? */
  line-height: 1.75;
}

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 {
  display: block;
  margin: 0 auto;
}

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

figcaption,
caption {
  font-size: 0.9em;
  font-style: italic;
  color: $caption-text;
  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 $aside-border;
  padding: 0 1.5em;
  font-size: 0.9em;
  background-color: $aside-background;
  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);
  */
}

/* 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; /* not supported in Adobe Digital Editions */
  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 $aside-border;
  padding: 1.5em .75em .5em .75em;
  margin: -1em 0.5em -0.25em 0.5em;
  background-color: $body-background;
  /*
  -webkit-box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.1);
  box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.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: $blockquote-text;
  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;
}

blockquote > p:first-of-type::before {
  display: inline-block;
  color: $para-first-text;
  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.05em;
  color: $footer-context;
}

pre {
  text-align: left; /* fix for Namo */
  margin-top: 1em; /* 0.85rem */
  /*margin-top: 1.176em;*/
  /* 1rem */
  white-space: pre-wrap;
  overflow-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: $pre-background;
  padding: 8px 12px; /* this is supposed to be '0.5rem 0.75rem' but Sony Readers crash when see that (at least, PRS-350, PRS-505, PRS-T1) */
  border-top: 1px solid $pre-border;
  border-right: 1px solid $pre-border;
}

/* 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 {
  font-family: "M+ 1p", sans-serif;
  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: $note-border;
  background-color: $note-background; /* 25% opacity of border */
}

aside.tip {
  border-left-color: $tip-border;
  background-color: $tip-background; /* 25% opacity of border */
}

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

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

aside.important {
  border-left-color: $important-border;
  background-color: $important-background; /* 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 1px rgba(102, 102, 101, 0.15);
}

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: "\f303"; /* fa-pencil-alt */
  color: $note-border;
}

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

aside.tip::before {
  content: "\f0eb"; /* fa-lightbulb */
  color: $tip-border;
}

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

aside.caution::before {
  content: "\f0c2"; /* fa-cloud */
  color: $caution-border;
}

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

aside.warning::before {
  content: "\f0e7"; /* fa-bolt */
  color: $warning-border;
}

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

aside.important::before {
  content: "\f12a"; /* fa-exclamation */
  color: $important-border;
}

aside[class~="important"] > div[class~="content"] {
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, $important-border 45%, $important-border 55%, rgba(255, 255, 255, 0) 57.5%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, $important-border 45%, $important-border 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;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

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

table.table thead th {
  border-bottom: 1px solid $table-border;
}

table.table td > p,
table.table div.embed > * {
  margin-top: 0;
}

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

table.table-framed-all {
  border-width: 1px;
  border-style: solid;
  border-color: $table-border;
}

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

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

table.table-grid-all th,
table.table-grid-all td {
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  border-color: $table-border;
}

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

table.table-grid-all tbody tr:last-child > th,
table.table-grid-all 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: $table-border;
}

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

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;
}

pre.pygments span.linenos,
pre.rouge span.linenos {
  display: inline-block;
  margin-right: 0.75em;
}

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 $about-author-border;
}

img.headshot {
  float: left;
  border: 1px solid $headshot-border;
  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;
}

/* Calibre doesn't hide <nav hidden="hidden"> for some reason */
nav[hidden~="hidden"] {
  display: 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;
  }
}

.left {
  float: left !important;
}

.right {
  float: right !important;
}