asciidoctor-epub3 1.0.0.alpha.1

data/data/styles/color-palette.css

@@ -0,0 +1,28 @@
+.palette-grayscale {
+  color: #191918; /* black :: literal, blockquote text */
+  color: #333332; /* off-black :: body text, heading default, chapter header background */
+  color: #4F4F4C; /* deep gray :: h4 */
+  /* what about 40403E or 4C4C4B? for h4 */
+  color: #666665; /* dark gray :: h5, visited link, list bullets, abstract, caption, open quote */
+  color: #80807F; /* medium gray :: table borders */
+  color: #B3B3B1; /* gray :: chapter title, footer subtitle, sidebar border */
+  color: #DCDCDE; /* lighter gray :: footer lines, byline text, pre border, masthead bottom line */
+  /* what about DEDEDC instead of DCDCDE? */
+  color: #F2F2F2; /* off white :: pre background, sidebar background */
+  color: #FFFFFF; /* white :: chapter subtitle */
+}
+
+.palette-color {
+  color: #468C54; /* medium green :: code annotation numbers */
+  color: #57AD68; /* green :: end mark, chapter title keyword */
+  color: #A9D8B2; /* light green */
+}
+
+/*
+type scale::
+50 2.27
+32 1.45
+30 1.36
+24 1.1
+22 1
+*/

data/data/styles/epub3-css3-only.css

@@ -0,0 +1,161 @@
+/* Gitden & Namo default to 16px font-size; bump it to 20px (125%) */
+body.gitden-reader,
+body.namo-epub-library {
+  font-size: 125%;
+}
+
+/* Gitden doesn't give us much margin, so let's match Kindle */
+body.gitden-reader {
+  margin: 0 25pt;
+}
+
+/* Namo has the same margin problem, except setting side margins doesn't work */
+/*body.namo-epub-library > section.chapter {
+  margin: 0 25pt;
+}*/
+
+/* Use tighter margins and smaller font (18px) on phones (Nexus 4 and smaller) */
+@media only screen and (max-device-width: 768px) and (max-device-height: 1280px),
+only screen and (max-device-width: 1280px) and (max-device-height: 768px) {
+  body.gitden-reader,
+  body.namo-epub-library {
+    font-size: 112.5%;
+  }
+
+  body.gitden-reader {
+    margin: 0 5pt;
+  }
+
+  /*body.namo-epub-library > section.chapter {
+    margin: 0 5pt;
+  }  */
+}
+
+body.gitden-reader a:link {
+  color: #333332 !important;
+}
+
+@media amzn-kf8, amzn-mobi {
+  /* Kindle does its own margin management, so don't use an explicit margin */
+  /*body {
+    margin: 0 !important;
+  }*/
+
+  /* text-rendering is the only way to enable kerning in Kindle (and Calibre, though it seems to kern automatically) */
+  /* personally, I think Kindle overdoes kerning, but we're running with it for now */
+  h1, h2, h3, h4, h5, h6,
+  body p, li, dd, blockquote > footer,
+  th, td, figcaption, caption {
+    text-rendering: optimizeLegibility;
+  }
+
+  /* hack line height of subtitle using floats on Kindle */
+  h1.chapter-title .subtitle {
+    margin-top: -0.2em;
+    margin-bottom: 0.3em; /* compensate for reduced line height */
+  }
+
+  /* NOTE using b instead of span since Firefox ePubReader applies immutable styles to span */
+  h1.chapter-title .subtitle > b {
+    float: left;
+    display: inline-block;
+    margin-bottom: -0.3em; /* reduce the line height */
+    padding-right: 0.2em; /* spacing between words */
+  }
+
+  h1.chapter-title .subtitle > b:last-child {
+    padding-right: 0;
+  }
+  
+  h1.chapter-title .subtitle::after {
+    display: table;
+    content: ' ';
+    clear: both;
+  }
+}
+
+.chapter-header p.byline {
+  height: auto; /* Aldiko requires this value to be 0; reset it for all others */
+}
+
+/* Font-based icons */
+.icon {
+  display: inline-block;
+  font-family: "FontAwesome";
+  font-style: normal !important;
+  font-weight: normal !important;
+  line-height: 1;
+}
+
+.icon-1_5x {
+  padding: 0 0.25em;
+  -webkit-transform: scale(1.5, 1.5);
+  transform: scale(1.5, 1.5); 
+}
+
+.icon-2x {
+  padding: 0 0.5em;
+  -webkit-transform: scale(2, 2);
+  transform: scale(2, 2); 
+}
+
+.icon-small {
+  font-size: 0.85em;
+  vertical-align: 0.075em;
+}
+
+.icon-1_5em {
+  font-size: 1.5em;
+}
+
+.icon-2em {
+  font-size: 2em;
+}
+
+.icon-3em {
+  font-size: 3em;
+}
+
+.icon-4em {
+  font-size: 4em;
+}
+
+.icon-rotate-90 {
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.icon-rotate-90i {
+  -webkit-transform: scale(-1, 1) rotate(90deg);
+  transform: scale(-1, 1) rotate(90deg);
+}
+
+.icon-rotate-180 {
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.icon-rotate-180i {
+  -webkit-transform: scale(-1, 1) rotate(180deg);
+  transform: scale(-1, 1) rotate(180deg);
+}
+
+.icon-rotate-270 {
+  -webkit-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+
+.icon-rotate-270i {
+  -webkit-transform: scale(-1, 1) rotate(270deg);
+  transform: scale(-1, 1) rotate(270deg);
+}
+
+.icon-flip-h {
+  -webkit-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+
+.icon-flip-v {
+  -webkit-transform: scale(1, -1);
+  transform: scale(1, -1);
+}

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,1293 @@
+@charset "UTF-8";
+@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 slow 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;
+}
+
+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 */
+  -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;
+  text-align: left;
+  color: #333332;
+  letter-spacing: -0.01em;
+  /* disable hyphenation, such as in iBooks */
+  -webkit-hyphens: none;
+  /* force super-long words to break */
+  word-break: break-word;
+
+  /* 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 */
+
+  margin: 0;
+  padding: 0;
+
+  /* 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-indent: 0;
+
+  font-family: "Noto Serif", serif;
+  color: #333332;
+  line-height: 1.6;
+  text-align: justify;
+  /* Signal to iBooks that hypens are okay here */
+  -webkit-hyphens: auto;
+
+  widows: 2;
+  orphans: 2;
+}
+
+ul, ol, li, dl, dt, dd, footer,
+div.verse .attribution, table.table th, table.table td {
+  font-family: "Noto Serif", serif;
+  color: #333332;
+}
+
+li, dt, dd, footer {
+  line-height: 1.6;
+}
+
+figcaption, caption {
+  font-family: "Noto Serif", serif;
+}
+
+code, kbd, pre {
+  font-family: "M+ 1mn", monospace;
+  color: #191918;
+}
+
+/* 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 doesn't recognize these properties don't kern well, hence why we don't just enable kerning via text-rendering */
+  /*text-rendering: optimizeLegibility;*/
+  -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 */
+}
+
+p.last::after {
+  color: #57AD68;
+  display: inline-block;
+  font-family: "FontAwesome";
+  font-size: 1em;
+  content: "\f121"; /* </> */
+  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 {
+  font-family: "M+ 1mn", monospace;
+  /*text-rendering: geometricPrecision;*/
+  color: #468C54;
+  font-style: normal;
+}
+
+pre i.conum {
+  /* don't let it affect line spacing; REVIEW may not need this! */
+  /*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 {
+}
+*/
+
+div.itemized-list > h3,
+div.ordered-list > h3,
+div.description-list > h3 {
+  font-size: 1em;
+  font-family: "Noto Serif", serif;
+  font-weight: bold;
+  line-height: 1.6;
+  color: #333332;
+  letter-spacing: 0;
+  word-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 {
+  /*
+  text-rendering: geometricPrecision;
+  */
+  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;
+}
+
+h1, h1 code,
+h2, h2 code {
+  color: #333332;
+}
+
+/* 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, h3 code {
+  color: #333332;
+}
+
+h3 {
+  font-size: 1.25em;
+  word-spacing: 0;
+  margin-top: 0.84em; /* 1.05rem */
+  margin-bottom: -0.5em; /* -0.625rem, 0.375rem to content */
+}
+
+h4, h4 code {
+  color: #4F4F4C;
+}
+
+h4 {
+  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, h5 code {
+  color: #666665;
+}
+
+h5 {
+  /*
+  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 */
+}
+
+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.3em;
+  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 {
+  margin-top: 1em; /* 0.85rem */
+  /*margin-top: 1.176em;*/ /* 1rem */
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  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;
+}
+
+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: 1em;
+  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;
+}