asciidoctor-epub3 1.5.0.alpha.12

data/data/styles/epub3-fonts.css

@@ -0,0 +1,94 @@
+@font-face {
+  font-family: "Noto Serif";
+  font-style: normal;
+  font-weight: normal;
+  src: url(../fonts/notoserif-regular-latin.ttf);
+}
+
+@font-face {
+  font-family: "Noto Serif";
+  font-style: italic;
+  font-weight: normal;
+  src: url(../fonts/notoserif-italic-latin.ttf);
+}
+
+@font-face {
+  font-family: "Noto Serif";
+  font-style: normal;
+  font-weight: bold;
+  src: url(../fonts/notoserif-bold-latin.ttf);
+}
+
+@font-face {
+  font-family: "Noto Serif";
+  font-style: italic;
+  font-weight: bold;
+  src: url(../fonts/notoserif-bolditalic-latin.ttf);
+}
+
+/* NOTE: use numeric font weights for M+ 1p since we're using weight variations */
+@font-face {
+  font-family: "M+ 1p";
+  font-style: normal;
+  font-weight: 400;
+  src: url(../fonts/mplus1p-regular-latin.ttf);
+}
+
+@font-face {
+  font-family: "M+ 1p";
+  font-style: normal;
+  font-weight: 200;
+  src: url(../fonts/mplus1p-light-latin.ttf);
+}
+
+@font-face {
+  font-family: "M+ 1p";
+  font-style: normal;
+  font-weight: 700;
+  src: url(../fonts/mplus1p-bold-latin.ttf);
+}
+
+@font-face {
+  font-family: "M+ 1mn";
+  font-style: normal;
+  font-weight: normal;
+  src: url(../fonts/mplus1mn-regular-ascii-conums.ttf);
+}
+
+@font-face {
+  font-family: "M+ 1mn";
+  font-style: italic;
+  font-weight: normal;
+  /* actually the M+ 1mn light font repurposed using FontForge to stand-in for Italic */
+  src: url(../fonts/mplus1mn-italic-ascii.ttf);
+}
+
+@font-face {
+  font-family: "M+ 1mn";
+  font-style: normal;
+  font-weight: bold;
+  /* actually the M+ 1mn medium font repurposed using FontForge to stand-in for Bold */
+  src: url(../fonts/mplus1mn-bold-ascii.ttf);
+}
+
+@font-face {
+  font-family: "M+ 1mn";
+  font-style: italic;
+  font-weight: bold;
+  /* actually the M+ 1mn bold font repurposed using FontForge to stand-in for Bold Italic */
+  src: url(../fonts/mplus1mn-bolditalic-ascii.ttf);
+}
+
+@font-face {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  src: url(../fonts/fontawesome-icons.ttf);
+}
+
+@font-face {
+  font-family: "FontIcons";
+  font-style: normal;
+  font-weight: normal;
+  src: url(../fonts/assorted-icons.ttf);
+}

data/data/styles/epub3.css

@@ -0,0 +1,1266 @@
+@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 interferes with reader overrides (Calibre and Kindle) */
+  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;
+}
+
+/* @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;
+}
+
+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 #666665;
+  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;
+  max-width: 100%;
+}
+
+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; /* 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 #666665;
+  /* 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: #666665;
+  text-transform: uppercase; /* not supported in Adobe Digital Editions */
+  word-spacing: -0.075em;
+  letter-spacing: -0.01em;
+}
+
+h1.chapter-title .subtitle {
+  font-weight: 400;
+  color: #333332;
+  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: #333332;
+  /* 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 {
+  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: #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; /* 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 #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;
+}
+
+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.05em;
+  color: #666665;
+}
+
+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: #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: #FFC14F;
+  background-color: #FFF0D4; /* 25% opacity of border */
+}
+
+aside.tip {
+  border-left-color: #40403E;
+  background-color: #D0D0CF; /* 25% opacity of border */
+}
+
+aside.caution {
+  border-left-color: #7F7F7D;
+  background-color: #DFDFDF; /* 25% opacity of border */
+}
+
+aside.warning {
+  border-left-color: #C83737;
+  background-color: #F1CECE; /* 25% opacity of border */
+}
+
+aside.important {
+  border-left-color: #F2642A;
+  background-color: #FCD9CA; /* 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: "\f040"; /* fa-pencil */
+  color: #FFC14F;
+}
+
+aside[class~="note"] > 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.tip::before {
+  content: "\f0eb"; /* fa-lightbulb-o */
+  color: #40403E;
+}
+
+aside[class~="tip"] > div[class~="content"] {
+  background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #40403E 45%, #40403E 55%, rgba(255,255,255,0) 57.5%);
+  background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #40403E 45%, #40403E 55%, rgba(255,255,255,0) 57.5%);
+}
+
+aside.caution::before {
+  content: "\f0c2"; /* fa-cloud */
+  color: #7F7F7D;
+}
+
+aside[class~="caution"] > div[class~="content"] {
+  background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #7F7F7D 45%, #7F7F7D 55%, rgba(255,255,255,0) 57.5%);
+  background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #7F7F7D 45%, #7F7F7D 55%, rgba(255,255,255,0) 57.5%);
+}
+
+aside.warning::before {
+  content: "\f0e7"; /* fa-bolt */
+  color: #C83737;
+}
+
+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: #F2642A;
+}
+
+aside[class~="important"] > div[class~="content"] {
+  background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #F2642A 45%, #F2642A 55%, rgba(255,255,255,0) 57.5%);
+  background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #F2642A 45%, #F2642A 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,
+table.table div.embed > * {
+  margin-top: 0;
+}
+
+table.table td > p {
+  text-align: left;
+}
+
+/* REVIEW */
+table.table td > p + p,
+table.table div.embed > * + * {
+  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;
+  }
+}