/* ============== 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. OTHER STYLES 17. MEDIA QUERIES 18. 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'. */ @font-face { font-family: "main_font-regular"; font-weight: normal; font-style: normal; src: url(../fonts/main_font-regular.otf); } @font-face { font-family: "main_font-italic"; font-weight: normal; font-style: italic; src: url(../fonts/main_font-italic.otf); } @font-face { font-family: "main_font-bold"; font-weight: bold; font-style: normal; src: url(../fonts/main_font-bold.otf); } @font-face { font-family: "main_font-bolditalic"; font-weight: bold; font-style: italic; src: url(../fonts/main_font-bolditalic.otf); } /* ============================================================ GLOBAL ============================================================ */ body { font-family: "main_font-regular"; 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. */ p span.uppercase { font-size: 0.8em; text-transform: uppercase; } a, a:visited { color: #608d52; text-decoration: none; border-bottom: 1px dotted; } div.caption { width: 100%; margin-top: 0.5em; padding: 0px; page-break-before: avoid; page-break-inside: avoid; text-align: center; font-size: 0.8em; line-height: 1.3em; font-style: italic; } sup, sub { font-size: xx-small; } .pagebreak_after { page-break-after: always; margin-bottom: 0em !important; padding-bottom: 0em !important; } .pagebreak_before { page-break-before: always; margin-top: 0em !important; padding-top: 0em !important; } img { border: none; } /* ============================================================ HEADERS ============================================================ */ h1 { font-size: 2.2em; margin-top: 0em; margin-bottom: 1em; text-align: left; font-weight: normal; color: #608d52; clear: both; page-break-inside: avoid; } h2 { font-size: 1.7em; margin-top: 0em; margin-bottom: 1em; text-align: left; font-weight: bold; color: #6B5F53; clear: both; page-break-inside: avoid; } h3 { font-size: 1.3em; margin-top: 0em; margin-bottom: 1em; text-align: left; font-weight: normal; color: #6B5F53; page-break-inside: avoid; } h4 { font-size: 1.2em; margin-top: 0em; margin-bottom: 1em; text-align: left; font-weight: normal; page-break-inside: avoid; } h5 { font-size: 1em; margin-top: 0em; margin-bottom: 1em; font-weight: bold; page-break-inside: avoid; color: #6B5F53; } h1 + h2, h2 + h3 { margin-top: -1em; } p + h1, p + h2, p + h3, p + h4, p + h5, p + .header_decor { margin-top: 1em; } 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:#897B71; 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; } .footnote_return { display: block; font-weight: bold; margin-bottom: 0em; padding: 4px 4px 4px 0px; text-transform: capitalize; } a.footnote_link { display: inline-block; vertical-align: super; padding: 0px 2px 0.4em 2px; margin: 0px !important; line-height: 100%; font-size: xx-small; font-weight: bold; border-bottom: 0px; } /* ============================================================ 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 */ } /* ============ Small Images ============ */ .portrait_small { text-align: center; page-break-inside: avoid; clear: both; border-radius: 6px; /* Optional */ margin: 0.5em 32.5%; width: 35%; } .portrait_small img { page-break-inside: avoid; border-radius: 6px; /* Optional */ width: 100%; } .landscape_small { text-align: center; page-break-inside: avoid; clear: both; border-radius: 6px; /* Optional */ margin: 1.5em 20%; width: 60%; } .landscape_small img { page-break-inside: avoid; border-radius: 6px; /* Optional */ width: 100%; } /* ============== Default Images ============== */ .portrait_default { text-align: center; page-break-inside: avoid; clear: both; border-radius: 6px; /* Optional */ margin: 1.5em 30%; width: 40%; } .portrait_default img { page-break-inside: avoid; border-radius: 6px; /* Optional */ width: 100%; } .landscape_default { text-align: center; page-break-inside: avoid; clear: both; border-radius: 6px; /* Optional */ margin: 1.5em 15%; width: 70%; } .landscape_default img { page-break-inside: avoid; border-radius: 6px; /* Optional */ width: 100%; } /* ============= Medium Images ============= */ .portrait_medium { text-align: center; page-break-inside: avoid; clear: both; border-radius: 6px; margin: 1.5em 25%; width: 50%; } .portrait_medium img { page-break-inside: avoid; border-radius: 6px; width: 100%; } .landscape_medium { text-align: center; page-break-inside: avoid; clear: both; border-radius: 6px; margin: 1.5em 8%; width: 84%; } .landscape_medium img { page-break-inside: avoid; border-radius: 6px; width: 100%; } /* ============================================== Large Images + Double Page Spread (DPS) Images ============================================== */ .portrait_large { text-align: center; page-break-inside: avoid; clear: both; border-radius: 6px; margin: 1.5em 17.5%; width: 65%; } .portrait_large img { page-break-inside: avoid; border-radius: 6px; /* Optional */ width: 100%; } .landscape_large { text-align: center; page-break-inside: avoid; clear: both; border-radius: 6px; margin: 1.5em auto; width: 100%; } .landscape_large img { page-break-inside: avoid; border-radius: 6px; width: 100%; } /* ================ FULL PAGE IMAGES ================ */ .image_full, .image_full_caption { text-align: center; page-break-after: always; page-break-inside: avoid; clear: both; border-radius: 6px; /* Optional */ padding: 0px; margin: 0em auto; height: 99%; height: 99vh; width: 100%; } .image_full img { page-break-inside: avoid; border-radius: 6px; /* Optional */ max-width: 100%; max-height: 100%; } .image_full_caption img { page-break-inside: avoid; border-radius: 6px; /* Optional */ height: 90%; } .cover_image { text-align: center; page-break-inside: avoid; clear: both; border-radius: 6px; /* Optional */ padding: 0px; margin: 0em auto; height: 99%; height: 99vh; width: 100%; } .cover_image img { page-break-inside: avoid; border-radius: 6px; /* Optional */ height: 100%; max-width: 100%; } /* ====================================================== 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: 5px; /* Optional */ display: inline-block; margin: 0px; padding: 2px; width: 46%; } .method_grid_3_cols { text-align: center; page-break-inside: avoid; border-radius: 5px; /* Optional */ display: inline-block; margin: 0px; padding: 2px; width: 31%; } .method_grid img, .method_grid_3_cols img { page-break-inside: avoid; border-radius: 6px; /* 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 27.5%; 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 20%; 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: 6px; 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: 6px; box-shadow: 3px 3px 2px #ddd; background-color: rgb(240,240,240); float: right; } div.floatimage_right { position: relative; float: right; margin: 1em 0em 2em 2em; text-align: center; width: 35%; page-break-inside: avoid; } div.floatimage_right img { page-break-inside: avoid; border-radius: 6px; /* Optional */ width: 100%; } div.floatimage_left { position: relative; float: left; margin: 1em 2em 2em 0em; text-align: center; width: 35%; page-break-inside: avoid; } div.floatimage_left img { page-break-inside: avoid; border-radius: 6px; /* Optional */ width: 100%; } /* ============================================================ 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-image: url('../images/textbox_bg.png');*/ 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: 6px; 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; } /* ============================================================ 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; } .ingredient_wrapper ul.ingredient_items li { margin-left: 0.5em; text-indent: -0.5em; } .ingredient_wrapper_centered ul.ingredient_items li { text-align: center; } /* ============================================================ AUDIO & VIDEO ============================================================ */ div.media_wrapper { text-align: center; border-radius: 6px; margin: 1.5em auto; padding: 0px; width: 100%; page-break-inside: avoid; } audio { width: 50%; border-radius: 6px; } video { border-radius: 6px; } img.nomedia_warning { /* background-image: url('../images/nomediawarning.png');*/ background-repeat: no-repeat; background-position: center center; } /* ============================================================ SIDEBARS ============================================================ The sidebar must use the