@charset "UTF-8"; /* blitz — CSS framework for reflowable eBooks Version 1.0.1 by Jiminy Panoz Codename: Rock the Casbah License: MIT (https://opensource.org/licenses/MIT) */ /* NAMESPACES */ @namespace h "http://www.w3.org/1999/xhtml/"; @namespace epub "http://www.idpf.org/2007/ops"; /* if you need to style epub:type */ @namespace m "http://www.w3.org/1998/Math/MathML/"; /* if you need to style MathML */ @namespace svg "http://www.w3.org/2000/svg"; /* if you need to style SVG */ html { /* Don't use it for styling, used as selector which can take a punch if anything goes wrong above */ } /* Begin CSS */ /* RESET */ /* So here's the trick, we must reset to manage a number of problems once and for all: - HTML5 backwards compatibility (EPUB 3 file in EPUB 2 app); - user settings (e.g. line-height on Kobo and Kindle); - CSS bloat (DRY); - KFX for which a reset using `border: 0` seems to disable support; - etc. It all started as a normalize and became a reset given the magnitude of the task. */ article, address, aside, blockquote, canvas, dd, details, div, dl, dt, figure, figcaption, footer, h1, h2, h3, h4, h5, h6, header, hr, li, main, nav, ol, p, pre, section, summary, ul { margin: 0; padding: 0; /* RS may apply vertical padding to el such as p */ font-size: 1em; /* Font size in pixel disable the user setting in legacy RMSDK */ /* Kindle ignores it, Kobo needs it. If you don’t use inherit, the user setting may be disabled on some Kobo devices */ text-indent: 0; font-style: normal; font-weight: normal; } /* This is absolutely necessary for backwards compatibility */ article, aside, figure, figcaption, footer, header, main, nav, section { display: block; } /* [Opinionated] Default to prevent RS from justifying all of these! */ h1, h2, h3, h4, h5, h6, dt, pre { text-align: left; } /* Following EPUB 3 spec by the letter (applies to RS but let’s make sure it is respected because we never know) */ nav[epub|type~="toc"] ol { list-style: none !important; } /* [Opinionated] Default to prevent bloat in case linear="no" is rendered as linear="yes" */ nav[epub|type~="landmarks"], nav[epub|type~="page-list"] { display: none; } a, abbr, b, bdi, bdo, cite, code, data, del, dfn, em, i, ins, kbd, mark, q, rp, rt, rtc, ruby, s, samp, small, span, strong, sub, sup, time, var { font-size: inherit; vertical-align: baseline; font-style: inherit; /* Taking nesting of inline elements into account (e.g. sup nested in em) */ font-weight: inherit; /* Taking nestiog of inline elements into account (e.g. em nested in strong) */ color: inherit; text-decoration: none; } q { quotes: none; } /* Trying to prevent blank page if element with margin-bottom at the end of xhtml */ body > :last-child, body > section > :last-child { margin-bottom: 0; } /* PAGE LAYOUT */ @page { margin: 30px 30px 20px 30px; /* Recommended by Barnes & Noble in this old spec: https://simg1.imagesbn.com/pimages/pubit/support/pubit_epub_formatting_guide.pdf */ padding: 0; } body { /* Designed as a class for body — We don't enforce as user setting > author */ text-align: justify; adobe-hyphenate: auto; /* proprietary for Legacy RMSDK */ -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; -epub-hyphens: auto; hyphens: auto; /* before and after not in spec but iBooks support all three (-webkit-) */ -ms-hyphenate-limit-lines: 3; -moz-hyphenate-limit-lines: 3; -webkit-hyphenate-limit-lines: 3; -webkit-hyphenate-limit-before: 2; -webkit-hyphenate-limit-after: 2; hyphenate-limit-lines: 3; /* No support except Trident (Windows) */ -ms-hyphenate-limit-chars: 6 3 2; -moz-hyphenate-limit-chars: 6 3 2; -webkit-hyphenate-limit-chars: 6 3 2; hyphenate-limit-chars: 6 3 2; /* No support except Trident (Windows) */ -ms-hyphenate-limit-zone: 10%; -moz-hyphenate-limit-zone: 10%; -webkit-hyphenate-limit-zone: 10%; hyphenate-limit-zone: 10%; /* No support */ -ms-hyphenate-limit-last: always; -moz-hyphenate-limit-last: always; -webkit-hyphenate-limit-last: always; hyphenate-limit-last: always; font-size: 100%; line-height: 1.5; margin: 0; /* RS will override margins anyways */ padding: 0; widows: 2; /* iBooks and Kobo support widows and orphans */ orphans: 2; } /* TYPOGRAPHY */ h1, h2, h3, h4, h5, h6, blockquote p cite, dt, pre, address, table, caption, th, td, .align-left, .align-center, .align-right, .caption, .no-hyphens { adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; } h1, h2, h3, h4, h5, h6, dt, hr { page-break-inside: avoid; break-inside: avoid; page-break-after: avoid; break-after: avoid; } h1 { font-size: 1.4375em; line-height: 1.04347826; margin-top: 0em; margin-bottom: 2.08695652em; } h2 { font-size: 1.3125em; line-height: 1.14285714; margin-top: 2.28571429em; margin-bottom: 1.14285714em; } h3 { font-size: 1.125em; line-height: 1.33333333; margin-top: 1.33333333em; margin-bottom: 1.33333333em; } h4 { font-size: 1em; line-height: 1.5; margin-top: 1.5em; margin-bottom: 0em; } h5 { /* Styles */ } h6 { /* Styles */ } p { text-indent: 1.5em; } .footnote { font-size: 0.9375em; line-height: 1.6; margin-top: 0.75em; text-indent: 0; } blockquote { margin: 1.5em 5%; } blockquote p { text-indent: 0; font-style: italic; } blockquote p.par-indent{ text-indent: 0; font-style: italic; } blockquote p i, blockquote p em, blockquote p cite { font-style: normal; } address { /* Styles */ } /* MICRO TYPOGRAPHY */ a { text-decoration: underline; /* Note: KF8 will force this value unless you use "el.class a" */ font-weight: bold; color: inherit; -webkit-text-fill-color: inherit; /* iBooks override (iOS 9 + El Capitan in night mode) */ /* inherit = text color */ } abbr { /* Note: Kindle doesn't support that */ } i, cite, dfn, em { font-style: italic; } /* Get back to normal when italic nested in italic */ i i, i cite, i dfn, i em, cite i, cite cite, cite dfn, cite em, dfn i, dfn cite, dfn dfn, dfn em, em i, em cite, em dfn, em em { font-style: normal; } b, strong { font-weight: bold; } del, s { text-decoration: line-through; } mark { background-color: yellow; color: inherit; } ins { /* Styles */ } small { font-size: 0.8125em; } /* Styling is improved to prevent sub from affecting line-height */ sub { font-size: 75%; line-height: 1.2; vertical-align: sub; /* Fallback */ vertical-align: -20%; } /* Styling is improved to prevent sup from affecting line-height */ sup { font-size: 75%; line-height: 1.2; vertical-align: super; /* Fallback */ vertical-align: 33%; } /* FIGURES + IMAGES */ figure { page-break-inside: avoid; break-inside: avoid; margin: 1.5em 0; } figcaption, .caption { font-size: 0.9375em; line-height: 1.6; margin-top: 0.75em; text-indent: 0; } img { width: auto; /* Note: KF8 doesn't support max-width hence "width: auto;" as fallback */ height: auto; object-fit: contain; } /* Note: portrait image styling + figcaption is a nightmare */ /* See https://github.com/jstallent/ImagesSingleFile for the css hack */ img.portrait { width: auto; /* Note: KF8 doesn't support max-width hence "width: auto;" as fallback */ height: 100%; /* We try to prevent blank page after */ /* Max value iBooks enforces */ } .float-left img, .float-right img { width: 100%; /* If it’s auto, image in floating container will overflow on Kobo iOS + Kindle */ } @supports (height: 99vh) { img.portrait { height: 99vh; } } /* LISTS */ ul, ol { margin: 1.5em 0; padding-left: 5%; } ul { list-style-type: disc; list-style-position: outside; } ul ul { list-style-type: square; } ol { list-style-type: decimal; list-style-position: outside; } ol ol { list-style-type: lower-roman; } /* HORIZONTAL RULES — CONTEXT BREAKS */ hr { width: 25%; margin-left: 37.5%; margin-top: 1.4375em; margin-bottom: 1.4375em; height: 0; border: none; border-top: 0.125em solid currentColor; /* currentColor = color of text (getting around night mode) */ opacity: 0.5; /* Opacity -> grayscale. If opacity is declared for too many elements in a XHTML file, performance of legacy RMSDK takes a hit */ } /* Blank-line context change */ hr.transition { width: 100%; margin: 0; height: 1.5em; border: none; background: none; /* Note: overridden in night mode excepted when using linear-gradient */ } /* Over-engineered asterism with an SVG background which is legacy RMSDK-compliant, reflows with text and is night-mode compatible (black asterisk + white border) */ hr.asterism { width: auto; border: none; margin: 1.5em 0; height: 1.5em; text-indent: 0; text-align: center; background: transparent url("../Images/svgimg0001.svg") no-repeat center; /* Change url if you put asterism in a folder */ background-size: 2.5em 1.25em; /* RMSDK doesn't support -> won't scale but SVG viewport is OK for a wide range of font-sizes */ overflow: hidden; /* Fixes legacy RMSDK bug when contents before hr are invisible */ opacity: 0.7; /* Better border color match in night mode (less disruptive) */ } /* IPUB ADDITIONS */ .par-indent { text-indent: 1.5em; } .no-indent { text-indent: 0; margin-top: 0.75em; } .introline { /* Don't use that with span if i, cite, dfn or em can be used */ font-style: italic; margin-bottom: 1.5em; } .author { font-size: 1.4375em; line-height: 1.04347826; margin-top: 1.04347826em; margin-bottom: 3.13043478em; line-height: 200%; adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-indent: 0; /* Necessary as RS may define text-indent for p */ text-align: center; } .series { font-size: 1.4375em; line-height: 1.04347826; margin-top: 1.04347826em; margin-bottom: 2.08695652em; adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-indent: 0; /* Necessary as RS may define text-indent for p */ text-align: center; } .title { font-size: 1.625em; line-height: 0.92307692; /* Don't use that with span if b or strong can be used */ font-weight: bold; adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-indent: 0; /* Necessary as RS may define text-indent for p */ text-align: center; } @supports (padding-top: 20vh) { .title { padding-top: 20vh; } } .subtitle { font-size: 1.4375em; line-height: 1.04347826; margin-top: 1.04347826em; margin-bottom: 2.08695652em; adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-indent: 0; /* Necessary as RS may define text-indent for p */ text-align: center; } .chapter-heading { margin-top: 3em; margin-bottom: 1.5em; margin-top: 0.75em; text-indent: 0; } .series-heading { margin-top: 1.5em; margin-bottom: 0.75em; adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-indent: 0; /* Necessary as RS may define text-indent for p */ text-align: center; page-break-after: avoid; break-after: avoid; } .series-slogan { margin-top: 0; margin-bottom: 0.75em; adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-indent: 0; /* Necessary as RS may define text-indent for p */ text-align: center; /* Don't use that with span if i, cite, dfn or em can be used */ font-style: italic; page-break-after: avoid; break-after: avoid; } .title-listing { adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-indent: 0; /* Necessary as RS may define text-indent for p */ text-align: center; margin-top: 0; } .quote-src { adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-indent: 0; /* Necessary as RS may define text-indent for p */ text-align: right; margin-top: 0; } .left { adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-align: left; } .center { adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-indent: 0; /* Necessary as RS may define text-indent for p */ text-align: center; } .center-par { adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-indent: 0; /* Necessary as RS may define text-indent for p */ text-align: center; margin: 0; } .center-par-b-space { adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-indent: 0; /* Necessary as RS may define text-indent for p */ text-align: center; margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 0.75em; } .center-par-t-space { adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-indent: 0; /* Necessary as RS may define text-indent for p */ text-align: center; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0.75em; } .center-par-tb-space { adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-indent: 0; /* Necessary as RS may define text-indent for p */ text-align: center; margin-top: 0.75em; margin-left: 0; margin-right: 0; margin-bottom: 0.75em; } .center-par-tb-extra-space { adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-indent: 0; /* Necessary as RS may define text-indent for p */ text-align: center; margin-top: 1.5em; margin-left: 0; margin-right: 0; margin-bottom: 1.5em; } .italic-par { /* Don't use that with span if i, cite, dfn or em can be used */ font-style: italic; } .fleuron { width: 12%; margin-left: 44%; margin-bottom: 1.5em; } .fleuron img { width: 100%; } h1 + p.par-indent, h2 + p.par-indent, h3 + p.par-indent, p.center-par-tb-space + p.par-indent, p.introline + p.par-indent, div.fleuron + p.par-indent, hr + p.par-indent, p.center-par-tb-extra-space + p.par-indent { margin-top: 0.75em; text-indent: 0; } h1 + p.par-indent:first-line, h2 + p.par-indent:first-line, h3 + p.par-indent:first-line, p.center-par-tb-space + p.par-indent:first-line, p.introline + p.par-indent:first-line, div.fleuron + p.par-indent:first-line, p.center-par-tb-extra-space + p.par-indent:first-line { /* text-transform: lowercase; */ /* Don't rely on this property, text should be typed in uppercase (legacy RMSDK) */ font-variant: small-caps; letter-spacing: 0.0625em; /* The two previous props are not supported in legacy RMSDK */ } .texttop { margin-top: 0.75em; text-indent: 0; margin-top: 1.5em; } .toc-item-1 { margin: 0; margin-top: 0.75em; text-indent: 0; adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-align: left; } .toc-item-2 { margin-left: 5%; margin-top: 0.75em; text-indent: 0; adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-align: left; } .toc-item-3 { margin-left: 7.5%; margin-top: 0.75em; text-indent: 0; adobe-hyphenate: none; /* proprietary for Legacy RMSDK */ -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; -epub-hyphens: none; hyphens: none; text-align: left; } @supports (height: 100vh) { /* Can be used for containers and images but Should be used in combination with .portrait if used for img */ } /* Kindle */ /* Note: if there is nothing in those two Kindle queries, ADE (and possibly a ton of apps using legacy RMSDK) will crash. So you'd better get rid of those two queries once your EPUB file is converted to kindle mobi. */ /* Warning: Do NOT use `text-rendering: optimizeLegibility` in Kindle's styles, it is known to create issues with some devices/apps (entire text is replaced with boxes (a.k.a. "missing glyph" symbol) */ @media all{ body { font-weight: normal; /* numeric font weights are problematic for KindleGen, we make sure to "reset" that in case the framework's user use numeric values. */ } b, strong, .bold { font-weight: bold; } h1, h2 { line-height: 1.2; /* Minimum value Kindle supports */ } .w-80 { width: 78%; /* Because Kindle developers… */ margin: 1.5em 11%; } } /* End CSS */