/* TECHNICAL GUIDE COMPLEX CSS Version 1.3 ============== STYLESHEET TOC ============== Search any of the TOC entries below to navigate this stylesheet. - PRH CORE ASSETS - FONT EMBEDDING - CORE STYLES - PUBLISHER FONT PAGE DECLARATION - HEADER COLORS AND OTHER COMPLEX-ONLY HEADER PROPERTIES - FLOATED IMAGES | FLOATED TEXT BOXES - SIDEBARS - THUMBNAIL TOC GRID PRH CORE ASSETS - DO NOT DELETE ============================================================ */ @font-face { font-family: "noemoji"; font-weight: normal; font-style: normal; /*src: url(../prh_core_assets/fonts/symbola.otf);*/ } @font-face { font-family: "penguin"; font-weight: normal; font-style: normal; /*src: url(../prh_core_assets/fonts/penguin.otf);*/ } /* ============================================================ FONT EMBEDDING ============================================================ */ @font-face { font-family: "base_font"; font-weight: normal; font-style: normal; /*src: url(../fonts/base_font-regular.otf);*/ } @font-face { font-family: "base_font"; font-weight: normal; font-style: italic; /*src: url(../fonts/base_font-italic.otf);*/ } @font-face { font-family: "base_font"; font-weight: bold; font-style: normal; /*src: url(../fonts/base_font-bold.otf);*/ } @font-face { font-family: "base_font"; font-weight: bold; font-style: italic; /*src: url(../fonts/base_font-bolditalic.otf);*/ } /* ============================================================ CORE STYLES ============================================================ */ /* Disable webkit default tap zone highlighting color, USE ONLY IF SPECIFICALLY REQUESTED. html { -webkit-tap-highlight-color: rgba(0,0,0,0); } body { font-family: "ItalianOldStyleMTPro"; }*/ /* ============================================================ PUBLISHER FONT PAGE DECLARATION ============================================================ */ .publisher_fonts { font-family: "base_font", sans-serif; text-align: center; text-indent: 0em; margin-bottom: 0em; font-size: 0.8em; } .publisher_fonts strong { font-weight: bold; font-size: 1.2em; margin-bottom: 0em; } .publisher_icon { text-align: center; page-break-inside: avoid; overflow: hidden; clear: both; margin: 140px 46% 0em 46%; width: 8%; } .publisher_icon img { page-break-inside: avoid; width: 100%; max-width: 100% !important; max-height: 50vh !important; } .penguin { font-family: "penguin", sans-serif; text-align: center; font-size: 3em; text-indent: 0em; margin-top: 0.3em; color: #000 } /* ============================================================ HEADER COLORS AND OTHER COMPLEX-ONLY HEADER PROPERTIES ============================================================ h1 { color: #ef6b00; } h2 { color: #ef6b00; } */ h5 { font-weight: bold; } h6 { font-weight: bold; } /* ============================================================ FLOATED IMAGES | FLOATED TEXT BOXES ============================================================ */ .floatbox_left { font-size: 80%; text-align: left; width: 25%; margin: 0em 1.5em 1.5em 0em; padding: 5px; border: 1px solid #ccc; border-radius: 2px; background-color: rgb(240,240,240); float: left; } .floatbox_right { font-size: 80%; text-align: left; width: 25%; margin: 0em 0em 1.5em 1.5em; padding: 5px; border: 1px solid #ccc; border-radius: 2px; background-color: rgb(240,240,240); float: right; } figure.floatimage_right { position: relative; float: right; margin-top: 0.5em; margin-right: 0em; margin-left: 1.5em; text-align: center; width: 28%; page-break-inside: avoid; } figure.floatimage_left { position: relative; float: left; margin-top: 0.5em; margin-right: 1.5em; margin-left: 0em; text-align: center; width: 28%; page-break-inside: avoid; } .floatimage_right img, .floatimage_left img { page-break-inside: avoid; border-radius: 2px; width: 100%; max-width: 100% !important; max-height: 50vh !important; object-fit: contain; } .floatimage_right figcaption, .floatimage_left figcaption { text-align: left; width: 100%; } /* ============================================================ SIDEBARS ============================================================ */ .sidebar_wrapper { clear: both; float: left; font-size: 0.75em; font-weight: normal; margin-bottom: 1.5em; margin-top: 0em; overflow: hidden; padding: 0; text-align: left; text-indent: 0px; width: 25%; } .maincontent_wrapper { float: right; margin-bottom: 1.5em; margin-top: 0em; overflow: hidden; padding: 0; width: 71%; } .maincontent_wrapper + * { clear: both; } .maincontent_wrapper > *:first-child { margin-top: 0px; } .sidebar_wrapper .ingredient_header { font-family: "base_font"; font-weight: bold; color: #ef6b00; text-align: inherit; margin-top: 1.5em; margin-bottom: 0.5em; } .sidebar_wrapper .ingredient_header:first-child { margin-top: 0em; } .sidebar_wrapper p { text-indent: inherit; } .sidebar_wrapper .ingredient_items { list-style: none; padding: 0px; } .sidebar_wrapper .ingredient_items li { margin-bottom: 0.5em; text-indent: 0px; margin-left: 0px; } .sidebar_wrapper .stacked_image { float: left; width: 100%; margin: 0px; padding: 0px; } .bordered_sidebar_content { border-right: 2px solid #ef6b00; /* EDITABLE VALUE */ padding-right: 7px; /* EDITABLE VALUE */ } h1 + .sidebar_wrapper, h2 + .sidebar_wrapper, h3 + .sidebar_wrapper, h4 + .sidebar_wrapper { page-break-before: avoid; } /* ============================================================ THUMBNAIL TOC GRID ============================================================ */ div.chapter_toc { width: 100%; padding: 0px; margin: 0px; text-align: center; } div.chapter_toc_thumb { text-align: center; display: inline-block; width: 23.4%; padding: 0px; margin: 1px 2px 1px 2px; } div.chapter_toc_thumb img { width: 100%; border-radius: 4px; } h2.chapter_toc_header { font-size: 2.4em; line-height: 1.1em; margin-bottom: 0em; margin-top: 0px; padding: 0px; page-break-before: always; text-align: center; } h2.chapter_toc_header .subhead { font-size: 0.35em; color: #000; /* Match body font color */ line-height: 1.3em; margin-top: 0.4em; } h2.chapter_toc_header .button { display: block; font-size: 0.27em; line-height: 1.5em; margin: 0.5em auto 1em auto; } .chapter_toc a { border: 0px; } h2#chapter_toc_text { page-break-before: always; clear: both; } ol.chapter_toc_text { font-size: 0.85em; text-align: left; list-style-type: none; padding-left: 0px; } .chapter_toc_text > li { margin-bottom: 0.5em; padding-left: 0em; margin-left: 1.5em; text-indent: -1.5em; position: relative; } .chapter_toc_text ol li { list-style-type: none; margin-top: 0.25em; } .chapter_toc_text a, .chapter_toc_text a:visited { color: #000; text-decoration: none; border-bottom: none; } .chapter_toc_text ol li a, .chapter_toc_text ol li a:visited { color: #000; text-decoration: none; font-style: italic; /* EDITABLE VALUE */ border-bottom: none; } .chapter_toc_text > li > a::before { content: "\25B8 "; /* EDITABLE VALUE */ text-align: left; /* EDITABLE VALUE */ width: 1em; /* EDITABLE VALUE */ margin-right: 0.5em; /* EDITABLE VALUE */ color: #ef6b00; /* EDITABLE VALUE */ } /* ---------------------------------------- END SYLES ---------------------------------------- Koko Ekong for Penguin Random House, 2012/2013 kekong@randomhouse.co.uk */