/* ============== STYLESHEET TOC ============== Search any of the TOC entries below to navigate this stylesheet. 01. FONT EMBEDDING 02. GLOBAL 03. HEADERS 04. COPYRIGHT 05. TABLE OF CONTENTS 06. FOOTNOTES 07. IMAGES 08. TABLES (IMAGE-BASED & HTML TABLES) 09. FLOATED IMAGES | FLOATED TEXT BOXES 10. METHOD SECTION WITH IMAGES (STEP-BY-STEP INSTRUCTIONS) 11. PULLQUOTES AND TEXTBOXES 12. INGREDIENT LISTS 13. AUDIO & VIDEO 14. SIDEBARS 15. POETRY 16. THUMBNAIL TOC GRID 17. NOEMOJI FIX 18. OTHER STYLES (PAGE-BREAK CLASSES, ETC) 19. MEDIA QUERIES 20. MEDIA QUERIES FOR E-INK DEVICES ============================================================ FONT EMBEDDING ============================================================ Please note how ALL weights from the same font family share the exact same CSS font-family name. This allows us to call the relevant font style or font weight in the HTML by using simply and tags--no extra classes required. >>>>>PLEASE STRICTLY ADHERE TO THE ABOVE METHODOLOGY.<<<<< >> Always use a font-stack that falls back to either 'serif' or 'sans-serif'. */ /* PRH CORE ASSET - DO NOT DELETE!! */ @font-face { font-family: "noemoji"; font-weight: normal; font-style: normal; } /* END PRH CORE ASSET!! */ @font-face { font-family: "Arvo"; font-weight: normal; font-style: italic; src: url(../fonts/Arvo-Italic.ttf); } @font-face { font-family: "Arvo"; font-weight: bold; font-style: italic; src: url(../fonts/Arvo-BoldItalic.ttf); } @font-face { font-family: "EhrhardtMTStd"; font-weight: normal; font-style: italic; src: url(../fonts/EhrhardtMTStd-Italic.otf); } @font-face { font-family: "EhrhardtMTStd"; font-weight: normal; font-style: normal; src: url(../fonts/EhrhardtMTStd-Regular.otf); } @font-face { font-family: "EhrhardtMTStd"; font-weight: bold; font-style: normal; src: url(../fonts/EhrhardtMTStd-Semibold.otf); } @font-face { font-family: "EhrhardtMTStd"; font-weight: bold; font-style: italic; src: url(../fonts/EhrhardtMTStd-SemiboldIt.otf); } @font-face { font-family: "RobotoSlab-Light"; font-weight: normal; font-style: normal; src: url(../fonts/RobotoSlab-Light.ttf); } @font-face { font-family: "RobotoSlab"; font-weight: normal; font-style: normal; src: url(../fonts/RobotoSlab-Regular.ttf); } @font-face { font-family: "RobotoSlab"; font-weight: bold; font-style: normal; src: url(../fonts/RobotoSlab-Bold.ttf); } @font-face { font-family: "RobotoSlab-Thin"; font-weight: normal; font-style: normal; src: url(../fonts/RobotoSlab-Thin.ttf); } /* ============================================================ GLOBAL ============================================================ */ /* html { -webkit-tap-highlight-color: rgba(0,0,0,0); } The above disables webkit default tap zone highlighting color, USE ONLY IF SPECIFICALLY REQUESTED */ body { font-family: serif; color: #000; } p { margin-top:0em; margin-bottom: 0.5em; orphans: 2; text-indent: 1em; } /* Remove paragraph indents on the first paragraph of a chapter. */ p.first_paragraph { text-indent: 0em; } /* Capitialize the first three words of the chapter. */ .small_caps { font-size: 0.75em; text-transform: uppercase; } .caption { width: 100%; margin: 0.5em auto 0em auto; padding: 0px; page-break-before: avoid; text-align: center; font-size: 0.8em; line-height: 1.3em; font-family: "EhrhardtMTStd"; font-weight: normal; font-style: italic; } sup, sub { font-size: xx-small; } img { border: none; } /* ============================================================ HEADERS ============================================================ */ h1 { font-size: 2.2em; margin-top: 0em; margin-bottom: 1em; font-weight: normal; color: #ef6b00; clear: both; page-break-inside: avoid; } h2 { font-size: 1.7em; /* variable */ margin-top: 0em; margin-bottom: 1em; font-weight: normal; color: #ef6b00; clear: both; page-break-inside: avoid; } h3 { font-size: 1.3em; /* variable */ margin-top: 0em; margin-bottom: 1em; font-weight: normal; page-break-inside: avoid; } h4 { font-size: 1.2em; /* variable */ margin-top: 0em; margin-bottom: 1em; font-weight: normal; page-break-inside: avoid; } h5 { font-size: 1em; /* variable */ margin-top: 0em; margin-bottom: 1em; font-weight: bold; page-break-inside: avoid; } h1 + h2, h2 + h3, h2 +h2 { margin-top: -1em; } p + h1, p + h2, p + h3, p + h4, p + h5, p + .header_decor { margin-top: 2em; } ul { margin: 1em auto; } ul + h1, ul + h2, ul + h3, ul + h4, ul +h5 { margin-top: 2em; } div + h2, div + h3, div + h4, div + h5, div + h6 { margin-top: 2em; } /* ================== DECORATIVE HEADERS ================== */ h2.header_image { text-align:center; page-break-inside: avoid; width: 100%; } h2.header_image img { width: 100%; } h2.header_image > span.header_secret_text { display: block; height: 1px; font-size: 1px; text-indent: -9999px; } .header_decor1 { text-align: center; page-break-inside: avoid; line-height: 2em; } .header_decor2 { width: 100%; text-align: center; margin: 2em auto 1.5em auto; page-break-inside: avoid; font-size: 140%; font-style: normal; font-variant: small-caps; } .header_decor3 { text-align: center; margin: 2em auto 1.5em auto; page-break-inside: avoid; font-size: 140%; font-style: normal; font-variant: small-caps; } .header_decor2 img, .header_decor3 img { width: 20%; max-height: 100%; margin: 0px auto; } /* ============================================================ COPYRIGHT ============================================================ */ body.copyright_page { text-align: center; font-size: 75%; } /* ============================================================ TABLE OF CONTENTS [In this instance the Epub3 NAV doc has been re-used as TOC] ============================================================ */ ol.toc_lvl1 { list-style-type: none; padding-left: 0.5em; } ol.toc_lvl2 { list-style-type: none; padding-left: 1.5em; margin-top: 0.5em; } .toc_lvl1 li, .toc_lvl2 li { margin-bottom: 0.5em; } .toc_lvl1 a, .toc_lvl1 a:visited { color: #000; text-decoration: none; border-bottom: none; } .toc_lvl2 a, .toc_lvl2 a:visited { color: #000; text-decoration: none; font-style: italic; /* Optional */ border-bottom: none; } /* ============================================================ FOOTNOTES ============================================================ */ h5.footnote_section_header { width: 100%; text-align: center; text-transform: uppercase; font-size: 75%; color: #fff; margin-top: 4em; margin-bottom: 2em; } .footnote_section_header span { background-color: #bebebe ; padding: 2px 5px; text-align: center; border-radius: 10px; } aside.footnote_wrapper:first-of-type { margin-top: 20%; } .footnote_section_header + .footnote_wrapper { page-break-before: avoid; margin-top: 0em !important; } .footnote_wrapper { font-size: 75%; font-style: normal; text-align: justify; margin: 0em 5% 1em 5%; border-radius: 5px; width: 90%; } .footnote_wrapper p { padding-left: 10px; padding-right: 10px; margin: auto; } a.footnote_return { vertical-align: super; padding: 0px 10px 0px 0px; margin: 0px !important; text-align: center; line-height: 100%; font-size: 8px; font-weight: bold; border-bottom: 0px; border-radius: 3px; } a.footnote_link { padding: 1px 3px; margin: 0px !important; text-align: center; line-height: 100%; font-size: 8px; font-weight: bold; border-bottom: 0px; border-radius: 3px; } /* ============================================================ IMAGES ============================================================ */ img { /*-- iOS8 Image Fix --*/ display: inline; } /* ========================================= Inline Images Example (Apply to image, adjust values as needed) ========================================= */ .inline_image { height: 1em; /* Variable, adjust as necessary */ vertical-align: middle; /* Top, middle, bottom as needed */ } /* ================== Extra Small Images ================== */ .portrait_xsmall { text-align: center; page-break-inside: avoid; clear: both; border-radius: 4px; /* Optional */ margin: 1em auto; width: 25%; } .portrait_xsmall img { page-break-inside: avoid; border-radius: 4px; /* Optional */ width: 100%; } .portrait_xsmall + .caption { width: 35%; page-break-before: avoid; } .landscape_xsmall { text-align: center; page-break-inside: avoid; clear: both; border-radius: 4px; /* Optional */ margin: 1.5em auto; width: 50%; } .landscape_xsmall img { page-break-inside: avoid; border-radius: 4px; /* Optional */ width: 100%; } .landscape_xsmall + .caption { width: 60%; page-break-before: avoid; } /* ============ Small Images ============ */ .portrait_small { text-align: center; page-break-inside: avoid; clear: both; border-radius: 4px; /* Optional */ margin: 1em auto; width: 35%; } .portrait_small img { page-break-inside: avoid; border-radius: 4px; /* Optional */ width: 100%; } .portrait_small + .caption { width: 35%; page-break-before: avoid; } .landscape_small { text-align: center; page-break-inside: avoid; clear: both; border-radius: 4px; /* Optional */ margin: 1.5em auto; width: 40%; } .landscape_small img { page-break-inside: avoid; border-radius: 4px; /* Optional */ width: 100%; } .landscape_small + .caption { width: 60%; page-break-before: avoid; } /* ============== Default Images ============== */ .portrait_default { text-align: center; page-break-inside: avoid; clear: both; border-radius: 4px; /* Optional */ margin: 1.5em auto; width: 40%; } .portrait_default img { page-break-inside: avoid; border-radius: 4px; /* Optional */ width: 100%; } .portrait_default + .caption { width: 40%; page-break-before: avoid; } .landscape_default { text-align: center; page-break-inside: avoid; clear: both; border-radius: 4px; /* Optional */ margin: 1.5em auto; width: 50%; } .landscape_default img { page-break-inside: avoid; border-radius: 4px; /* Optional */ width: 100%; } .landscape_default + .caption { width: 70%; page-break-before: avoid; } /* ============= Medium Images ============= */ .portrait_medium { text-align: center; page-break-inside: avoid; clear: both; border-radius: 4px; margin: 1.5em auto; width: 50%; } .portrait_medium img { page-break-inside: avoid; border-radius: 4px; width: 100%; } .portrait_medium + .caption { width: 50%; page-break-before: avoid; } .landscape_medium { text-align: center; page-break-inside: avoid; clear: both; border-radius: 4px; margin: 1.5em auto; margin-bottom: 0em; width: 84%; } .landscape_medium img { page-break-inside: avoid; border-radius: 4px; width: 100%; } .landscape_medium+ .caption { width: 84%; page-break-before: avoid; } /* ============================================== Large Images + Double Page Spread (DPS) Images ============================================== */ .portrait_large { text-align: center; page-break-inside: avoid; clear: both; border-radius: 4px; margin: 1.5em auto; width: 65%; } .portrait_large img { page-break-inside: avoid; border-radius: 4px; /* Optional */ width: 100%; } .portrait_large + .caption { width: 65%; page-break-before: avoid; } .landscape_large { text-align: center; page-break-inside: avoid; clear: both; border-radius: 4px; margin: 1.5em auto; width: 100%; } .landscape_large img { page-break-inside: avoid; border-radius: 4px; width: 100%; } .landscape_large + .caption { width: 100%; page-break-before: avoid; } /* ================ FULL PAGE IMAGES ================ */ .image_full { text-align: center; page-break-before: always; page-break-after: always; page-break-inside: avoid; clear: both; border-radius: 4px; /* Optional */ padding: 0px; margin: 0px auto; height: 99%; height: 99vh; width: 100%; } .image_full img { page-break-inside: avoid; border-radius: 4px; /* Optional */ max-width: 100%; max-height: 100%; } .image_full_caption { text-align: center; page-break-before: always; page-break-after: avoid; page-break-inside: avoid; clear: both; border-radius: 4px; /* Optional */ padding: 0px; margin: 0px auto; width: 100%; } .image_full_caption img { page-break-inside: avoid; border-radius: 4px; /* Optional */ width: 87%; } .image_full_caption + .caption { width: 90%; page-break-before: avoid; page-break-after: always; margin-top: 1em; } .cover_image { text-align: center; page-break-inside: avoid; clear: both; border-radius: 4px; /* Optional */ padding: 0px; margin: 0em auto; width: 100%; } .cover_image img { page-break-inside: avoid; width: 100%; } /* ==================== Plate Section Images ==================== */ .plate_image_portrait { text-align: center; page-break-inside: avoid; clear: both; position: relative; border-radius: 4px; margin: 1.5em auto; width: 70%; } .plate_image_portrait img { page-break-inside: avoid; border-radius: 4px; /* Optional */ width: 100%; } .plate_image_landscape { text-align: center; page-break-inside: avoid; clear: both; position: relative; border-radius: 4px; margin: 1.5em auto; width: 90%; } .plate_image_landscape img { page-break-inside: avoid; border-radius: 4px; /* Optional */ width: 100%; } .plate_image_portrait + .caption, .plate_image_landscape + .caption { width: 90%; font-style: normal; page-break-before: avoid; } /* ====================================================== METHOD SECTION WITH IMAGES (STEP-BY-STEP INSTRUCTIONS) ====================================================== */ .method_grid_wrapper { width: 100%; text-align: center; margin: 1em auto; } .method_grid { text-align: center; page-break-inside: avoid; border-radius: 4px; /* Optional */ display: inline-block; margin: 0px; padding: 2px; width: 46%; } .method_grid_3_cols { text-align: center; page-break-inside: avoid; border-radius: 4px; /* Optional */ display: inline-block; margin: 0px; padding: 2px; width: 31%; } .method_grid img, .method_grid_3_cols img { page-break-inside: avoid; border-radius: 4px; /* Optional */ width: 100%; } span.method_number { display: inline-block; text-align: center; width: 1.5em; height: 1.5em; line-height: 1.5em; margin-right: 0.5em; color: #ffffff; /* Variable */ background-color: #333; /* Variable */ border-radius: 50%; } /* ============================================================ TABLES (IMAGE-BASED & HTML TABLES) ============================================================ ================== Image-based Tables ================== */ .image_table { text-align: center; page-break-inside: avoid; clear: both; margin: 1.5em auto; width: 100%; } .image_small_table { text-align: center; page-break-inside: avoid; clear: both; margin: 1.5em auto; width: 45%; } .image_table img, .image_small_table img { page-break-inside: avoid; width: 100%; } .image_table + .image_table { margin-top: -1.5em; } /* =========== HTML Tables =========== */ table.example_html_table { width: 60%; margin: 1.5em auto; font-size: 90%; vertical-align: middle; border-collapse: collapse; border: 1px solid #ccc; } .example_html_table th { text-align: center; background-color: #ccc; padding: 5px; } .example_html_table td { width: 50%; text-align: left; padding: 5px; border: 1px solid #ccc; } table + .caption { margin-top: -1em; page-break-before: avoid !important; } /* ============================================================ FLOATED IMAGES | FLOATED TEXT BOXES ============================================================ */ div.floatbox_left { position: relative; font-size: 80%; font-style: italic; text-align: left; width: 25%; margin: 0em 2em 2em 0em; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-shadow: 3px 3px 2px #ddd; background-color: rgb(240,240,240); float: left; } div.floatbox_right { position: relative; font-size: 80%; font-style: italic; text-align: left; width: 25%; margin: 0em 0em 2em 2em; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-shadow: 3px 3px 2px #ddd; background-color: rgb(240,240,240); float: right; } div.floatimage_right { position: relative; float: right; margin: 0.5em 0em 0em 2em; text-align: center; width: 35%; page-break-inside: avoid; } div.floatimage_left { position: relative; float: left; margin: 0.5em 2em 0em 0em; text-align: center; width: 35%; page-break-inside: avoid; } div.floatimage_right img, div.floatimage_left img { page-break-inside: avoid; border-radius: 4px; /* Optional */ width: 100%; margin-bottom: 1em; } /* ============================================================ PULLQUOTES AND TEXTBOXES ============================================================ */ .txt_box { page-break-inside: avoid; width: 85%; margin-left: 7.5%; margin-right: 7.5%; margin-top: 1em; margin-bottom: 1em; font-style: italic; padding: 10px 0px; border-top: 1px solid #000; border-bottom: 1px solid #000; clear: both; } .txt_box_header { text-align: center; margin: 0px auto 0.5em auto; font-style: normal; font-weight: bold; } .txt_box_content { margin: 0em !important; text-indent: 0em; text-align: center; } /* ===== Box 2 ===== */ .txt_box2 { page-break-inside: avoid; width: 85%; margin-left: 6%; margin-right: 6%; margin-top: 1em; margin-bottom: 1em; font-style: italic; padding: 10px 2%; background-color: #eee; border: 1px dotted #adadad; border-radius: 3px; clear: both; } .txt_box2_header { text-align: center; margin: 0px auto 0.5em auto; font-style: normal; font-weight: bold; } .txt_box2_content { margin: 0em !important; text-indent: 0em; text-align: center; } /* ===== Box 3 ===== */ .txt_box3 { page-break-inside: avoid; width: 85%; margin-left: 6%; margin-right: 6%; margin-top: 1em; margin-bottom: 1em; font-style: italic; padding: 15px 2% 10px 2%; background-color: #d6d6d6; background-repeat: repeat-x; background-position: left top; border-radius: 3px; clear: both; } .txt_box3_header { text-align: center; margin: 0px auto 0.5em auto; font-style: normal; font-weight: bold; } .txt_box3_content { margin: 0em !important; text-indent: 0em; text-align: center; } /* ===== Box 4 ===== */ .txt_box4 { page-break-inside: avoid; width: 85%; margin-left: 7.5%; margin-right: 7.5%; margin-top: 1em; margin-bottom: 1em; font-style: italic; padding: 0px; text-align: center; overflow: hidden; clear: both; } .txt_box4_header { text-align: center; margin: 0px auto 0.5em auto; font-style: normal; font-weight: bold; } .txt_box4_content { margin: 0em !important; text-indent: 0em; text-align: center; } .txt_box4 .textbox_border_image { width: 100%; } .txt_box4 .textbox_border_image:last-of-type { margin-top: 0.5em; } /* ===== Box 5 ===== */ .txt_box5 { page-break-inside: avoid; width: 80%; margin: 1em 6.9%; padding: 5px 10px 10px 10px; background-color: #a13f3f; border-left: 15px solid #5f0f0f; border-right: 15px solid #5f0f0f; font-size: 1.4em; color: #f0dada; border-radius: 2px 50px 2px 50px; clear: both; } .txt_box5_header { text-align: left; margin: 0px auto 0.5em auto; font-style: normal; font-weight: bold; } .txt_box5_content { margin: 0em; font-style: normal; font-weight: normal; text-indent: 0em; text-align: left; padding-left: 10px; } /* ===== Box 6 ===== */ .txt_box6 { page-break-inside: avoid; width: 40%; float: right; margin: 0.25em auto 0.5em 0.5em; font-style: italic; padding: 0px 0px 0px 5px; border-left: 15px solid #eee; font-size: 1.5em; clear: both; } .txt_box6_header { text-align: left; margin: 0px auto 0.5em auto; font-style: normal; font-weight: bold; } .txt_box6_content { margin: 0em; text-indent: 0em; text-align: left; } /* ===== Box 7 ===== */ .txt_box7 { page-break-inside: avoid; font-size: 75%; font-style: normal; text-align: justify; margin: 0em 5% 1em 5%; border: 1px solid #6bad81; border-radius: 5px; width: 90%; clear: both; } .txt_box7 p { padding: 10px; } .txt_box7 p + p { padding-top: 0px; margin-top: -15px; } h5.txt_box7_header { display: block; background-color: #6bad81; /* Must match border color. */ color: #fff; font-style: normal; font-weight: bold; margin-bottom: 0em; padding: 4px 4px 4px 10px; text-transform: capitalize; } .txt_box7_content { text-indent: 0px; } /* ===== Box 8 ===== */ .txt_box8 { width: 90%; margin: 1em auto; padding: 5px 10px; background-color: #eee; border: 1px solid #b7b5b5; border-radius: 4px; clear: both; } .txt_box8_header { text-align: left; margin: 0px auto 0.5em auto; font-style: normal; font-weight: bold; } .txt_box8_content { margin-bottom: 0.5em !important; text-align: left; font-style: normal; } /* ===================== Box 9: Offset Tip Box ===================== */ .txt_box9 { position: relative; page-break-inside: avoid; font-size: 0.8em; font-style: normal; text-align: justify; margin: 2em auto; /* Top margin of 2em creates space for the offset header within. Otherwise should be 1em */ padding: 10px; border: 1px dashed #202020; border-radius: 4px; width: 90%; overflow: visible; clear: both; } .txt_box9 p { text-indent: 0px; text-align: center; margin-top: 0.2em; margin-bottom: 0em; } .txt_box9 p + p { margin-top: 0.5em; } h5.txt_box9_header { display: block; width: 100%; text-align: center; margin: -22px auto 0em auto; color: #000; font-weight: normal; font-size: 1.5em; line-height: 1.3em; page-break-inside: avoid; } h5.txt_box9_header span { padding: 0px 5px; background-color: #fff; page-break-inside: avoid; } .txt_box9_content { text-indent: 0px; } /* ================================== Box 9b: Offset Tip Box (Example 2) ================================== */ .txt_box9b { position: relative; page-break-inside: avoid; font-size: 0.8em; font-style: normal; text-align: justify; margin: 2em auto; /* Top margin of 2em creates space for the offset header within. Otherwise should be 1em */ padding: 12px; border: 1px solid #840126; border-radius: 0px; /* Must be '0' for this style */ width: 90%; overflow: visible; clear: both; } .txt_box9b p { text-indent: 0px; text-align: center; margin-top: 0.2em; margin-bottom: 0em; } .txt_box9b p + p { margin-top: 0.5em; } h5.txt_box9b_header { display: block; width: 100%; text-align: center; margin: -21px auto 0em auto; color: #fff; font-weight: bold; font-size: 1.2em; line-height: 1.3em; page-break-inside: avoid; } h5.txt_box9b_header span { padding: 2px 8px; background-color: #840126; border-radius: 0px; /* Must be '0' for this style */ page-break-inside: avoid; } .txt_box9b_content { text-indent: 0px; } /* ============================================================ INGREDIENT LISTS ============================================================ */ div.ingredient_wrapper { width: 70%; margin: 1.5em auto; font-style: normal; font-size: 90%; text-align: left; } div.ingredient_wrapper_centered { width: 70%; margin: 1.5em auto; font-style: normal; font-size: 90%; text-align: center; } h5.ingredient_header { /* Apply this class to the header for each ingredient block */ font-weight: bold; font-style: normal; line-height: 1.2em; margin-bottom: 0.5em; margin-top: 0em; text-align: inherit; } ul.ingredient_items { /* Parent element for each ingredient block */ padding: 0px; margin-top: 0px; list-style-type: none; width: 100%; text-align: inherit; } ul.ingredient_items li { margin-left: 0.5em; text-indent: -0.5em; text-align: inherit; } /* ============================================================ AUDIO & VIDEO ============================================================ */ div.media_wrapper { text-align: center; border-radius: 4px; margin: 1.5em auto; padding: 0px; width: 100%; page-break-inside: avoid; } audio { width: 50%; border-radius: 4px; } video { border-radius: 4px; } img.nomedia_warning { background-repeat: no-repeat; background-position: center center; } /* ============================================================ SIDEBARS ============================================================ The sidebar must use the