/* TECHNICAL GUIDE BASE CSS Version 1.2 ============== STYLESHEET TOC ============== Search any of the TOC entries below to navigate this stylesheet. - GLOBAL - OPTIONAL BASE COLORS - FRONTMATTER - DROPCAPS - OPTIONAL OVERRIDES (PAGE-BREAK CLASSES, ALIGNMENT CLASSES, ETC) - HEADERS - COPYRIGHT - TABLE OF CONTENTS - NOTES (ENDNOTES & FOOTNOTES) - IMAGES - METHOD STEPS (+ IMAGES) - TABLES - IMAGE-BASED TABLES - PULLQUOTES AND TEXTBOXES - INGREDIENT LISTS - AUDIO & VIDEO - POETRY - NOEMOJI FIX - DIVISIONAL BRANDING ============================================================ CSS RESET ============================================================ */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, del, dfn, img, ins, kbd, q, s, samp, small, strike, tt, dl, dt, dd, fieldset,figcaption, figure, form, label, legend, table, tbody, tfoot, tr, td, article, aside, canvas, details, embed, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline; } /* HTML5 display-role reset for older devices */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } table { border-collapse: collapse; border-spacing: 0; } /* ============================================================ GLOBAL ============================================================ */ @font-face { font-family: "noemoji"; font-style: normal; font-weight: normal; /*src: url(../prh_core_assets/fonts/symbola.otf);*/ } body { color: #000; font-family: serif; /* EDITABLE VALUE */ font-size: 1em; orphans: 2; text-align: left; /* EDITABLE VALUE */ widows: 2; } p { orphans: 2; text-indent: 1em; /* EDITABLE VALUE */ } h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .sidebar_wrapper > p:first-of-type, .maincontent_wrapper > p:first-of-type { text-indent: 0em; } del { text-decoration: line-through; } hr { border: none; border-bottom: 1px solid; border-bottom-color: inherit; clear: both; height: 0px; } hr.section_divider { /* For dividers BETWEEN sibling
elements */ margin: 2.5em 5%; width: 90%; } img { border: none; } ul, ol { margin: 0.5em auto; } ul ul, ol ol { margin-top: 0; } ol.list_alpha { list-style-type: lower-alpha; /* Creates lower-case alpha-bulleted list children */ } ol.list_none, ul.list_none { /* Removes bullets from child list items */ list-style-type: none; } figure { margin: 1em auto; } figure img + img, figure table + table { margin-top: 1px; } figcaption { color: inherit; /* EDITABLE VALUE */ font-size: 0.85em; font-style: normal; margin-top: 0.5em; padding: 0px; text-align: center; width: 100%; } sup, sub { font-size: 0.7em; font-size: xx-small; } u { text-decoration: underline; } .small_caps { font-size: 0.75em; text-transform: uppercase; } blockquote { margin: 1em 1.5em; } blockquote p { text-indent: 0em; } blockquote p + p { text-indent: 1em; } blockquote + p { text-indent: 0em; /* EDITABLE VALUE */ } pre + p { margin-top: 1em; } span.circled_number { background-color: #333; /* EDITABLE VALUE */ border-radius: 50%; /* EDITABLE VALUE */ color: #ffffff; /* EDITABLE VALUE */ display: inline-block; font-size: 0.8em; height: 1.5em; line-height: 1.5em; margin-right: 0.5em; text-align: center; width: 1.5em; } /* ============================================================ OPTIONAL BASE COLORS ============================================================ */ .primary_color { color: #ef6b00; /* EDITABLE VALUE */ } .bg_primary_color { background-color: #ef6b00; /* EDITABLE VALUE */ } .secondary_color { color: #007891; /* EDITABLE VALUE */ } .bg_secondary_color { background-color: #007891; /* EDITABLE VALUE */ } .tertiary_color { color: #5b5b5b; /* EDITABLE VALUE */ } .bg_tertiary_color { background-color: #5b5b5b; /* EDITABLE VALUE */ } /* =========== Frontmatter =========== */ .epigraph, .dedication { margin: 20% 15% auto 15%; text-align: center; width: 70%; } .dedication p { font-style: italic; text-indent: 0px; text-align: center; } .epigraph p { font-style: italic; text-indent: 0px; text-align: left; } .epigraph .authorname { font-weight: normal; margin-top: 0.5em; text-align: right; } section.titlepage, section.part, .chapter { margin-top: 15%; } section.titlepage h4 { font-style: italic; } .titlepage hr, .part hr, .backmatter hr { margin: 1.5em 10%; width: 80%; } .booktitle { letter-spacing: 0.15em; line-height: 1.3em; text-transform: uppercase; } .booktitle + p { margin-top: 1.5em; } section.titlepage h3 + h4 { margin-top: 1.5em; } .authorname { display: block; font-weight: bold; } /* ======== Dropcaps ======== */ p.dropcap { text-indent: 0em; } p.dropcap::first-letter { font-weight: normal; font-family: serif; initial-letter: 3; -webkit-initial-letter: 3; } .button { text-align: center; } .button a, .button a:visited { border-radius: 3px; border: 0px; color: #fff; display: inline-block; font-weight: bold; padding: 5px 10px; text-align: center; text-decoration: none; } /* ============================================================ OPTIONAL STYLE OVERRIDES ============================================================ */ .pagebreak_after { margin-bottom: 0em !important; padding-bottom: 0em !important; page-break-after: always; } .pagebreak_before { margin-top: 0em !important; padding-top: 0em !important; page-break-before: always; } .indent { text-indent: 1em !important; } .no_indent { text-indent: 0px !important; } .noindent_topspace { margin-top: 1em; text-indent: 0em !important; } .indent_topspace { margin-top: 1em; text-indent: 1em !important; } .section_break { margin-top: 2em !important; text-indent: 0; } .center_content { text-align: center; text-indent: 0px !important; } .leftalign_content { text-align: left; } .rightalign_content { text-align: right; } .no_wrap { overflow: hidden; white-space: nowrap; } .hidden_content { display: none; } /* ============================================================ HEADERS ============================================================ */ h1, h2, h3, h4, h5, h6 { clear: both; font-weight: normal; margin-bottom: 0.5em; margin-top: 0em; page-break-after: avoid; page-break-inside: avoid; text-align: center; } span.subhead { display: block; font-size: 0.7em; page-break-inside: avoid; } .padded_header { border-radius: 0px 10px 10px 0px; color: #fff; display: inline-block; font-weight: normal; margin-left: auto; margin-right: auto; padding: 5px 10px; text-align: inherit; } h1 { font-size: 1.9em; } h2 { font-size: 1.6em; } h3 { font-size: 1.3em; } h4 { font-size: 1.15em; } h5 { font-size: 1em; } h6 { font-size: 0.75em; } h1 + h2 { margin-top: 1.5em; } h2 + h3 { margin-top: 1.3em; } h3 + h4 { margin-top: 1em; } p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 1.5em; } ul + h1, ul + h2, ul + h3, ul + h4, ul + h5, ol + h1, ol + h2, ol + h3, ol + h4, ol + h5, div + h1, div + h2, div + h3, div + h4, div + h5 { margin-top: 1.5em; } .image_full + h1, .image_full_caption + h1, .image_full + h2, .image_full_caption + h2 { margin-top: 0 !important; } pre + h2, pre + h3, pre + h4, pre + h5, pre + h6 { margin-top: 1.5em; } section + p, p + section, section + ol, ol + section, section + ul, ul + section { margin-top: 1em; } figure + h2, figure + h3, figure + h4, figure + h5, figure + h6, table + h2, table + h3, table + h4, table + h5, table + h6 { margin-top: 1.5em; } aside + h1, aside + h2, aside + h3, aside + h4, aside + h5, aside + h6 { margin-top: 1.5em; } h1 + .epigraph, h2 + .epigraph, h3 + .epigraph, h4 + .epigraph, h5 + .epigraph, h6 + .epigraph, figure + .epigraph { margin-top: 3em !important; margin-bottom: 2em !important; } blockquote + h1, blockquote + h2, blockquote + h3, blockquote + h4, blockquote + h5, blockquote + h6 { margin-top: 1.5em; } div + p, p + div, div + ol, ol + div, div + ul, ul + div { margin-top: 1em; } .chapter_number + p, .chapter_title + p, .chapter_number + section, .chapter_title + section, .booktitle + h4, .booktitle + h5 { margin-top: 3.5em; } .header_image { margin-bottom: 0px; margin-top: 0px; width: 100%; } .chapter_number { font-size: 1.2em; font-variant: small-caps; letter-spacing: 0.1em; } .chapter_title { font-size: 1.6em; } /* ============================================================ COPYRIGHT ============================================================ */ body.copyright_page_center, .copyright_page_center h1, .copyright_page_center h2, .copyright_page_center figure { font-size: 0.85em; line-height: 1.3em; text-align: center; } body.copyright_page_left, .copyright_page_left h1, .copyright_page_left h2, .copyright_page_left figure { font-size: 0.85em; line-height: 1.3em; text-align: left; } .copyright_page_center p, .copyright_page_left p { margin-bottom: 0.5em; text-indent: 0px !important; } .copyright_page_center a, .copyright_page_left a { text-decoration: none; } .copyright_logo { page-break-inside: avoid; text-align: inherit; width: 100%; } .copyright_logo img { page-break-inside: avoid; width: 15em; } /* ============================================================ TABLE OF CONTENTS ============================================================ */ ol.toc_ol_root { list-style-type: none; margin-top: 3em; padding-left: 0.5em; } ol.toc_ol_nested { font-size: 95%; list-style-type: none; margin-top: 0.25em; padding-left: 1.5em; } .toc_ol_root li { margin-bottom: 0.7em; } .toc_ol_nested .toc_ol_nested { margin-bottom: 0.25em; margin-top: 0.2em; } .toc_ol_nested, .toc_ol_nested li { margin-bottom: 0em; } .toc_ol_root a, .toc_ol_root a:visited { border-bottom: none; color: #000; text-decoration: none; } .toc_ol_nested a, .toc_ol_nested a:visited { border-bottom: none; color: inherit; /* Define color in .toc_ol_nested above */ text-decoration: none; } /* ============================================================ NOTES ============================================================ */ .footnote_wrapper, .endnote_wrapper, .glossary { font-size: 0.95em; margin: 0 2em 1em 2em; } a.noteref { border-bottom: 0px; font-size: 0.7em; line-height: 100%; margin: 0px; padding: 0px 6px 2px 0px; text-align: left; vertical-align: super; } a.backlink { border-bottom: 0px; font-size: 0.85em; font-style: normal; padding: 0 1em 0.2em 0; text-align: left; text-decoration: none; text-indent: 0; } .note_chapterheader { font-size: 1.1em; font-weight: normal; text-align: left; } .endnote_wrapper p { text-indent: -2em; margin-bottom: 0.3em; } .endnote_wrapper .backlink { display: inline-block; margin: 0; padding: 0; width: 2em; } .endnote_wrapper .note_chapterheader { page-break-before: auto; /* EDITABLE VALUE */ } .footnote_wrapper p { text-indent: 0; } .footnote { border-radius: 5px; font-style: normal; margin-bottom: 0.5em; text-align: justify; } .note_chapterheader + .footnote { page-break-before: avoid; } .glossary p { text-indent: -1em; margin-top: 1em; } .glossary p + p { margin-top: 0.3em; } /* ============================================================ IMAGES ============================================================ */ .inline_image { height: 1em; vertical-align: middle; } /* ================== Extra-Small Images ================== */ .portrait_xsmall { border-radius: 2px; clear: both; margin-left: 40%; margin-right: 40%; page-break-inside: avoid; text-align: center; width: 20%; } .portrait_xsmall img { border-radius: 2px; page-break-inside: avoid; width: 100%; } .landscape_xsmall { border-radius: 2px; clear: both; margin-left: 30%; margin-right: 30%; page-break-inside: avoid; text-align: center; width: 40%; } .landscape_xsmall img { border-radius: 2px; page-break-inside: avoid; width: 100%; } /* ============ Small Images ============ */ .portrait_small { border-radius: 2px; clear: both; margin-left: 35%; margin-right: 35%; page-break-inside: avoid; text-align: center; width: 30%; } .portrait_small img { border-radius: 2px; page-break-inside: avoid; width: 100%; } .landscape_small { border-radius: 2px; clear: both; margin-left: 21%; margin-right: 21%; page-break-inside: avoid; text-align: center; width: 58%; } .landscape_small img { border-radius: 2px; page-break-inside: avoid; width: 100%; } /* ============== Default Images ============== */ .portrait_default { border-radius: 2px; clear: both; margin-left: 31%; margin-right: 31%; page-break-inside: avoid; text-align: center; width: 38%; } .portrait_default img { border-radius: 2px; page-break-inside: avoid; width: 100%; } .landscape_default { border-radius: 2px; clear: both; margin-left: 15%; margin-right: 15%; page-break-inside: avoid; text-align: center; width: 70%; } .landscape_default img { border-radius: 2px; page-break-inside: avoid; width: 100%; } /* ============= Medium Images ============= */ .portrait_medium { border-radius: 2px; clear: both; margin-left: 25%; margin-right: 25%; page-break-inside: avoid; text-align: center; width: 50%; } .portrait_medium img { border-radius: 2px; page-break-inside: avoid; width: 100%; } .landscape_medium { border-radius: 2px; clear: both; margin-left: 8%; margin-right: 8%; page-break-inside: avoid; text-align: center; width: 84%; } .landscape_medium img { border-radius: 2px; page-break-inside: avoid; width: 100%; } /* ============================================== Large Images + Double Page Spread (DPS) Images ============================================== */ .portrait_large { border-radius: 2px; clear: both; margin-left: 17.5%; margin-right: 17.5%; page-break-inside: avoid; text-align: center; width: 65%; } .portrait_large img { border-radius: 2px; page-break-inside: avoid; width: 100%; } .landscape_large, .imprint_logo { clear: both; page-break-inside: avoid; text-align: center; width: 100%; } .landscape_large img, .imprint_logo img { page-break-inside: avoid; width: 100%; } .imprint_logo { margin-top: 6em; page-break-before: avoid; } /* ================ FULL PAGE IMAGES ================ */ .image_full { border-radius: 2px; clear: both; width: 100%; height: 100%; height: 98vh; max-width: 100%; max-height: 100%; margin: 0px auto; overflow: hidden; page-break-after: always; page-break-before: always; page-break-inside: avoid; position: relative; text-align: center; } .image_full img { border-radius: 2px; width: 100%; } .image_full a { width: 100%; height: 100%; margin: 0px auto; padding: 0px; } .image_full_caption { clear: both; width: 100%; height: 100%; height: 98vh; max-width: 100%; max-height: 100%; margin: 0px auto; overflow: hidden; page-break-after: always; page-break-before: always; page-break-inside: avoid; position: relative; text-align: center; } .image_full_caption img { border-radius: 2px; height: 80%; } .cover_image { clear: both; width: 100%; height: 100%; height: 98vh; max-width: 100%; max-height: 100%; margin: 0px auto; page-break-inside: avoid; position: relative; text-align: center; } .cover_image img { height: auto; width: 100%; } .brand_logo_solo { margin-top: 25%; margin-left: 35%; margin-right: 35%; page-break-inside: avoid; text-align: center; width: 30%; } .brand_logo_solo img { page-break-inside: avoid; width: 100%; } /* ==================== Plate Section Images ==================== */ .plate_image_portrait { border-radius: 2px; clear: both; margin-left: 5%; margin-right: 5%; text-align: center; width: 90%; } .plate_image_portrait img { border-radius: 2px; margin: auto; page-break-inside: avoid; width: 70%; } .plate_image_landscape { border-radius: 2px; clear: both; margin-left: 5%; margin-right: 5%; text-align: center; width: 90%; } .plate_image_landscape img { border-radius: 2px; margin: auto; page-break-inside: avoid; width: 100%; } .plate_image_portrait figcaption, .plate_image_landscape figcaption { font-size: 0.9em; text-align: justify; } /*--Alternate Plate Section--*/ .plate_image_portrait_alt { border-radius: 2px; clear: both; margin-left: 5%; margin-right: 5%; text-align: left; width: 90%; } .plate_image_portrait_alt img { border-radius: 2px; margin: auto; page-break-inside: avoid; width: 40%; } .plate_image_landscape_alt { border-radius: 2px; clear: both; margin-left: 5%; margin-right: 5%; text-align: left; width: 90%; } .plate_image_landscape_alt img { border-radius: 2px; margin: auto; page-break-inside: avoid; width: 70%; } .plate_image_portrait_alt figcaption, .plate_image_landscape_alt figcaption { font-size: 1em; text-align: justify; } span.caption_xsmall { display:block; font-size:0.8em; margin-bottom:1em; } .plate_image_portrait_alt + figure, .plate_image_landscape_alt + figure { margin-top: 3em; } /* ======================= METHOD STEPS (+ IMAGES) ======================= */ div.steps { margin-left: 5%; /* EDITABLE VALUE */ text-align: left; /* EDITABLE VALUE */ width: 90%; /* EDITABLE VALUE */ } .steps .portrait_default { margin-left: 35%; margin-right: 35%; margin-bottom: 3em; width: 30%; /* EDITABLE VALUE */ } .steps .landscape_default { margin-left: 22.5%; margin-right: 22.5%; margin-bottom: 3em; width: 55%; /* EDITABLE VALUE */ } .steps h2 { font-family: inherit; /* EDITABLE VALUE */ font-size: 1em; /* EDITABLE VALUE */ font-weight: bold; /* EDITABLE VALUE */ } /* ============================================================ TABLES ============================================================ =========== HTML Tables =========== */ table { font-size: 0.95em; margin: 1em auto; } figure table { margin: 0px auto; } table, th, td { border: 1px solid; } th, td { padding: 10px; } /* ================== Image-based Tables ================== */ .image_table { clear: both; text-align: center; width: 100%; } .image_small_table { clear: both; margin-left: 25%; margin-right: 25%; text-align: center; width: 50%; } .image_table img, .image_small_table img { page-break-inside: avoid; width: 100%; } /* ============================================================ PULLQUOTES AND TEXTBOXES ============================================================ */ .txt_box { border-bottom: 1px solid #000; border-top: 1px solid #000; clear: both; font-style: italic; margin: 1em 5%; padding: 10px 0px; page-break-inside: avoid; width: 90%; } .txt_box h5 { font-style: normal; font-weight: bold; margin: 0px auto 0.5em auto; text-align: center; } .txt_box p { margin: 0em; text-align: center; text-indent: 0em; } /* ===== Box 2 ===== */ .txt_box2 { background-color: #eee; border-radius: 2px; border: 1px dotted #adadad; clear: both; font-style: italic; margin: 1em 5.5%; padding: 10px 2%; page-break-inside: avoid; width: 85%; } .txt_box2 h5 { font-style: normal; font-weight: bold; margin: 0px auto 0.5em auto; text-align: center; } .txt_box2 p { margin: 0em; text-align: center; text-indent: 0em; } /* ===== Box 4 ===== */ .txt_box4 { clear: both; font-style: italic; margin: 1em 5%; overflow: hidden; padding: 0px; page-break-inside: avoid; text-align: center; width: 90%; } .txt_box4 h5 { font-style: normal; font-weight: bold; margin: 0px auto 0.5em auto; text-align: center; } .txt_box4 p { margin: 0em; text-align: center; text-indent: 0em; } .txt_box4 .textbox_border_image { width: 100%; } .txt_box4 .textbox_border_image:last-of-type { margin-top: 0.5em; } /* ===== Box 5 ===== */ .txt_box5 { background-color: #a13f3f; border-bottom: 4px solid #5f0f0f; border-left: 15px solid #5f0f0f; border-radius: 2px 45px 2px 45px; border-right: 15px solid #5f0f0f; border-top: 2px solid #5f0f0f; clear: both; color: #f0dada; font-size: 1.4em; margin: 1em 6%; padding: 5px 2% 10px 2%; page-break-inside: avoid; width: 80%; } .txt_box5 h5 { font-style: normal; font-weight: bold; margin: 0px auto 0.5em auto; text-align: left; } .txt_box5 p { font-style: normal; font-weight: normal; margin: 0em; padding-left: 10px; text-align: left; text-indent: 0em; } /* ===== Box 6 ===== */ .txt_box6 { border-left: 15px solid #eee; clear: both; float: right; font-size: 1.5em; font-style: italic; margin: 0em auto 0.5em 0.75em; padding: 0px 0px 0px 5px; width: 40%; } .txt_box6 h5 { font-style: normal; font-weight: bold; margin: 0px auto 0.5em auto; text-align: left; } .txt_box6 p { margin: 0em; text-align: left; text-indent: 0em; } /* ===== Box 7 ===== */ .txt_box7 { border-radius: 2px; border: 1px solid #6bad81; clear: both; font-size: 0.8em; font-style: normal; margin: 1em 5%; page-break-inside: avoid; text-align: justify; width: 90%; } .txt_box7 p { padding: 10px; text-indent: 0px; } .txt_box7 p + p { margin-top: -0.5em; padding-top: 0px; } .txt_box7 h5 { background-color: #6bad81; /* Must match border color. */ color: #fff; display: block; font-style: normal; font-weight: bold; margin-bottom: 0em; padding: 4px 4px 4px 10px; text-transform: capitalize; } /* ===== Box 8 ===== */ .txt_box8 { background-color: #eee; border-radius: 2px; border: 1px solid #b7b5b5; clear: both; margin: 1em 1.5%; padding: 5px 1%; width: 95%; } .txt_box8 h5 { font-style: normal; font-weight: bold; margin: 0px auto 0.5em auto; page-break-after: avoid; text-align: left; } .txt_box8 p { font-style: normal; text-align: left; } /* ===================== Box 9: Offset Tip Box ===================== */ .txt_box9 { border-radius: 2px; border: 1px dashed #202020; clear: both; font-size: 0.8em; font-style: normal; margin: 2em 5.5% 1.5em 5.5%; /* Top margin of 2em creates space for the offset header within. Otherwise should be 1em */ overflow: visible; padding: 0px 2% 12px 2%; page-break-inside: avoid; position: relative; text-align: center; width: 85%; } .txt_box9 p { margin: 0.5em auto 0em auto; text-align: inherit; text-indent: 0px; } .txt_box9 h5 { color: #000; font-size: 1.5em; font-weight: normal; line-height: 1.5em; margin: -0.75em auto 0em auto; page-break-inside: avoid; text-align: inherit; width: 100%; } .txt_box9 h5 > span { background-color: #fff; display: inline-block; padding: 0px 6px; } /* ================================== Box 9b: Offset Tip Box (Example 2) ================================== */ .txt_box9b { border-radius: 2px; border: 1px solid #840126; clear: both; font-size: 0.8em; font-style: normal; margin: 2em 5.5% 1.5em 5.5%; overflow: visible; padding: 0px 2% 12px 2%; page-break-inside: avoid; position: relative; text-align: center; width: 85%; } .txt_box9b p { color: #840126; margin: 0.5em auto 0em auto; text-align: inherit; text-indent: 0px; } .txt_box9b h5 { background-color: #840126; border-radius: 3px; color: #fff; font-size: 1.1em; font-weight: normal; line-height: 1.1em; margin: -0.6em auto 0em auto; padding: 2px 0px; page-break-inside: avoid; text-align: inherit; text-transform: capitalize; width: 80%; } /* ============================================================ INGREDIENT LISTS ============================================================ */ .ingredient_wrapper { font-size: 0.9em; font-style: normal; margin-bottom: 1.5em; margin-left: 1em; margin-top: 1em; text-align: left; width: 70%; } .ingredient_wrapper_inline { font-size: 0.9em; font-style: normal; margin-bottom: 1.5em; margin-left: 1em; margin-top: 1em; text-align: left; width: 95%; } .ingredient_header { font-size: 1em; font-style: normal; font-weight: bold; margin-bottom: 0.5em; margin-top: 0em; text-align: inherit; } ul.ingredient_items { list-style-type: none; margin-top: 0px; padding: 0px; text-align: inherit; } ul.ingredient_items li { margin-left: 0.5em; text-align: inherit; text-indent: -0.5em; } .ingredient_wrapper_inline .ingredient_items li { display: inline; margin-left: 0px; padding: 0px 2.5px 0px 0px; text-align: inherit; text-indent: 0px; } /* ============================================================ AUDIO & VIDEO ============================================================ */ .media_wrapper { border-radius: 2px; margin: 1.5em auto; padding: 0px; page-break-inside: avoid; text-align: center; width: 100%; } audio { width: 50%; border-radius: 2px; } video { border-radius: 2px; } /* ============================================================ POETRY ============================================================ */ .poetry_stanza, .numbered_paragraphs { margin: 1em 10% auto 0px; overflow: visible; text-align: justify; width: 90%; } .poetry_line { margin-left: 0.5em; text-align: left; text-indent: -0.5em; } .poetry_line_indented { margin-left: 1.5em; text-align: left; text-indent: -0.5em; } .line_number { display: inline-block; float: right; font-size: 65%; margin: 0.4em -9% auto auto; padding: 0em; text-align: right; text-indent: 0em; width: 7%; } /* ============================================================ NOEMOJI FIX Prevent webkit from converting entities to emoji ============================================================ */ .noemoji { font-family: "noemoji"; font-size: inherit; font-weight: normal; } /* ============================================================ DIVISIONAL BRANDING ============================================================ */ @font-face { font-family: "font-puffin"; font-weight: normal; font-style: normal; /*src: url(../prh_core_assets/fonts/PufBkyR.otf);*/ } @font-face { font-family: "font-puffin"; font-weight: bold; font-style: normal; /* src: url(../prh_core_assets/fonts/PufBkyB.otf);*/ } @font-face { font-family: "font-ladybird"; font-weight: normal; font-style: normal; /* src: url(../prh_core_assets/fonts/ladybird563-regular.otf);*/ } @font-face { font-family: "font-ladybird"; font-weight: bold; font-style: normal; /* src: url(../prh_core_assets/fonts/ladybird563-bold.otf);*/ } @font-face { font-family: "font-penguin"; font-weight: normal; font-style: normal; /* src: url(../prh_core_assets/fonts/avantgarde-regular.otf);*/ } @font-face { font-family: "font-penguin"; font-weight: bold; font-style: normal; /* src: url(../prh_core_assets/fonts/avantgarde-bold.otf);*/ } @font-face { font-family: "font-vintage"; font-weight: normal; font-style: normal; src: url(../xhtml/prh_core_assets/fonts/avenir-light.otf); } @font-face { font-family: "font-vintage"; font-weight: bold; font-style: normal; src: url(../xhtml/prh_core_assets/fonts/avenir-heavy.otf); } @font-face { font-family: "font-pelican"; font-weight: normal; font-style: normal; /* src: url(../prh_core_assets/fonts/avenirrounded-regular.otf);*/ } @font-face { font-family: "font-pelican"; font-weight: bold; font-style: normal; /* src: url(../prh_core_assets/fonts/avenirrounded-bold.otf);*/ } .banner_penguin, .banner_pelican, .banner_puffin, .banner_ladybird { display: block; margin-top: 0px; margin-bottom: 1.5em; padding: 20px 10px; text-align: left; font-weight: bold; font-size: 2em; border-radius: 2px; background-repeat: no-repeat; background-size: auto 100%; } .banner_penguin { font-family: "font-penguin"; color: #FFF; background-color: #ff662b; /* background-image: url("../images/banner.png");*/ background-position: right center; } .banner_pelican { padding: 30px 10px 30px 3em; font-size: 1.6em; letter-spacing: 0.1em; font-family: "font-pelican"; color: #000; /* background-image: url("../images/banner.png");*/ background-position: left center; } .banner_puffin { font-family: "font-puffin"; color: #FFF; background-color: #f4cf00; /* background-image: url("../images/banner.png");*/ background-position: right center; } .banner_ladybird { font-family: "font-ladybird"; font-weight: normal; color: #FFF; background-color: #ef4023; /* background-image: url("../images/banner.png");*/ background-position: right center; } .readmore { font-size: 1.6em; font-weight: bold; line-height: 1.3em; margin: 22% auto 0 auto; page-break-inside: avoid; text-align: center; } .pelican_titlepage .titlepage { font-family: "font-pelican"; text-align: left; } .pelican_titlepage h1, .pelican_titlepage h2, .pelican_titlepage h3, .pelican_titlepage h4 { text-align: left; font-weight: normal; margin-top: 0em; } .pelican_titlepage h2 { font-size: 1.2em; letter-spacing: 0.1em; margin-bottom: 0.5em; text-transform: uppercase; } .pelican_titlepage .booktitle { font-size: 2.5em; letter-spacing: 0em; line-height: 1.1em; margin-top: 0px; text-transform: none; } .pelican_titlepage .imprint_logo { margin-top: 3.2em; } .pelican_booklist li { margin-bottom: 0.5em; font-family: "font-pelican"; } .pelican_chapterheader { background-color: #33cccc; border-radius: 2px; display: block; font-family: "font-pelican"; font-size: 3em; font-weight: bold; line-height: 1.2em; padding: 90px 50px 100px 50px; text-align: left; } .pelican_chapterheader .firstline { color: #FFF; display: block; font-size: 0.35em; letter-spacing: 0.1em; text-transform: uppercase; } .puffin_advert { font-family: "font-puffin"; text-align: center; text-indent: 0px; } .puffin_advert p { margin-bottom: 0.5em; } .puffin_advert a, .puffin_advert a:visited { color: #f4cf00; text-decoration: none; } .vintage_backmatter { font-family: "font-vintage", sans-serif; font-size: 1.2em; margin: 15% 5% 0px 5%; width: 90%; } .vintage_backmatter p { margin-bottom: 1.5em; } .vintage_backmatter .vintage_text, .vintage_backmatter a, .vintage_backmatter a:visited { color: #e00034; font-weight: bold; text-decoration: none; } /* ---------------------------------------- END SYLES ---------------------------------------- Koko Ekong for Random House, 2012/2013 kekong@penguinrandomhouse.co.uk */