/* -- Updated 02/12/14, Chronicle Books LLC: Digital Production -- */ /* -- CB MAIN CSS -- */ /* ---- GENERAL ---- */ html, body { margin: 5px; padding:0; border-width: 0; -webkit-hyphens:none; -epub-hyphens:none; adobe-hyphenate:none; } div { page-break-inside: avoid; } /* ---- EMBEDDED FONTS ---- */ /* ---- normal is for regular text and should always be listed first. Do not use span classes for bold and italics, only and tags ---- */ @font-face { font-family: "Belizio-Regular"; src: url("../fonts/Belizio-Regular.otf"); } @font-face { font-family: "Belizio-Regular"; src: url("../fonts/Belizio-Bold.otf"); font-weight:bold; } @font-face { font-family: "Belizio-Regular"; src: url("../fonts/Belizio-RegularItalic.otf"); font-style:italic; } @font-face { font-family: "Belizio-Regular"; src: url("../fonts/Belizio-BoldItalic.otf"); font-weight:bold; font-style:italic; } @font-face { font-family: "Belizio-Medium"; src: url("../fonts/Belizio-Medium.otf"); } @font-face { font-family: "Belizio-Medium"; src: url("../fonts/Belizio-MediumItalic.otf"); font-style:italic; } @font-face { font-family: "BrunelText-Bold"; src: url("../fonts/BrunelText-Bold.otf"); } @font-face { font-family: "BrunelText-Bold"; src: url("../fonts/BrunelText-BoldItalic.otf"); font-style:italic; } @font-face { font-family: "Graphik-Black"; src: url("../fonts/Graphik-Black.otf"); } @font-face { font-family: "Graphik-Black"; src: url("../fonts/Graphik-BlackItalic.otf"); font-style:italic; } @font-face { font-family: "Graphik-Bold"; src: url("../fonts/Graphik-Bold.otf"); } @font-face { font-family: "Graphik-Bold"; src: url("../fonts/Graphik-BoldItalic.otf"); font-style:italic; } @font-face { font-family: "Graphik-Super"; src: url("../fonts/Graphik-Super.otf"); } @font-face { font-family: "GraphikXXCond-Bold"; src: url("../fonts/GraphikXXCond-Bold.otf"); } @font-face { font-family: "GraphikXXXCond-Bold"; src: url("../fonts/GraphikXXXCond-Bold.otf"); } @font-face { font-family: "GraphikXXXCond-Semibold"; src: url("../fonts/GraphikXXXCond-Semibold.otf"); } @font-face { font-family: "Graphik-Medium"; src: url("../fonts/Graphik-Medium.otf"); } @font-face { font-family: "Graphik-Medium"; src: url("../fonts/Graphik-MediumItalic.otf"); font-style:italic; } @font-face { font-family: "Graphik-Semibold"; src: url("../fonts/Graphik-Semibold.otf"); } @font-face { font-family: "Graphik-Semibold"; src: url("../fonts/Graphik-SemiboldItalic.otf"); font-style:italic; } @font-face { font-family: "Theinhardt-Black"; src: url("../fonts/Theinhardt-Black.otf"); } @font-face { font-family: "Gordon-Black"; src: url("../fonts/Gordon-Black.otf"); } /* ---- ALL MAIN P STYLES ARE HERE, NO NEED TO DUPLICATE ATTRIBUTES ---- */ p { margin: 0; text-align: left; font-size: 0.8em; text-indent: 0em; line-height: 1.4em; font-family: "", serif; /* -- EPUB 3 -- */ widows: 3; orphans: 3; word-wrap: break-word; overflow-wrap: normal; text-wrap: normal; } /* ---- LINKS ---- */ a { color: RGB(102,102,102); text-decoration: none; } /* ---- FRONT MATTER ---- */ .dedication { margin-top: 10%; text-align: center; font-size: 1.2em; line-height: 1.5em; } .acknowledgements { } /* ---- COPYRIGHT ---- */ div#copyright { font-size: 0.7em; font-family: "Belizio-Medium"; text-align: center; line-height: 1.1em; margin-top: 2em; margin-bottom: 0em; } div#copyright p { font-family: "Belizio-Medium"; margin-top: 1.5em; margin-bottom: 0em; } /* ---- TOC ---- */ .toc { font-family: "Graphik-Black"; margin-top: 1em; margin-bottom: 0em; text-align: center; } .toc2 { font-family: "Graphik-Black"; margin-top: 1em; margin-bottom: 0em; text-align: center; } .toc3 { font-family: "Belizio-Regular"; margin-top: 0em; margin-bottom: 0em; text-align: center; } .toc3 a { color: rgb(241,89,33); } .toc3LM { font-family: "Belizio-Regular"; margin-top: 0em; margin-bottom: 0em; text-align: center; } .toc3LM a { color: rgb(217,157,41); } .toc3Dinner { font-family: "Belizio-Regular"; margin-top: 0em; margin-bottom: 0em; text-align: center; } .toc3Dinner a { color: rgb(122,150,85); } .toc4 { font-family: "Belizio-Medium"; margin-top: 0em; margin-bottom: 0em; text-align: center; } .toc4Dinner { font-family: "Belizio-Medium"; margin-top: 0em; margin-bottom: 0em; text-align: center; } .toc4Dinner a{ color: rgb(122,150,85); } .toc3LN { font-family: "Belizio-Medium"; margin-top: 0em; margin-bottom: 0em; text-align: center; } .toc3LN a{ color: rgb(6,136,188); } .toc3AR { font-family: "Belizio-Medium"; margin-top: 0em; margin-bottom: 0em; text-align: center; } .toc3AR a{ color: rgb(148,99,72); } .toc4AR { font-family: "Belizio-Medium"; margin-top: 0em; margin-bottom: 0em; text-align: center; } .toc4AR a{ color: rgb(148,99,72); } /* ---- HEADER STYLES - Do not apply margins greater than 2em. Headers that follow text should have a top margin ----*/ h1, h2, h3, h4, h5, h6 {text-align: left;} h1 { font-family: "BrunelText-Bold"; text-align: center; } h2 { font-family: BrunelText-Bold; font-size: 2.5em; } h3 { font-family: "BrunelText-Bold"; text-align: center; } h4 { font-family: "Graphik-Black"; text-align: center; } h5 {} h6 {} /* ---- Use the following for subheads that follow a header style---- */ .section_title { font-family: GraphikXXXCond-Semibold; text-align: center; font-size: 2.3em; } .section_hd {} .chapter_title {} .chapter_hd {} /* ---- TEXT STYLES : do not apply margins greater than 2em ---- */ /* no indent styles, p.text_noindent is the default p tag for no indent with a bottom margin */ p.text_noindent { font-family: "Belizio-Regular"; margin: 1em 0 0em 0; line-height: 1.4em; } p.first1_noindent { font-family: "GraphikXXXCond-Bold"; margin: 1.5em 0 1em 0; text-align: center; } p.first2_noindent { font-family: "Graphik-Semibold"; margin: 1em 0 0em 0; } /* indent styles, p.text_indent is the default p tag for indent with a bottom margin */ p.text_indent { font-family: Belizio-Regular; text-indent: 1em; line-height: 1.4em; } p.first1_indent { font-family: "Belizio-Medium"; text-indent: 1em; } p.first2_indent { font-family: "Belizio-Medium"; margin: 0.5em 0 0.5em 0; text-align: center; } /* basic left, right, center classes */ p.left { font-family: "Graphik-Black"; text-align: left; } p.right { text-align: right; } p.center { font-family: "Graphik-Super"; margin: 1em 0 4em; text-align: center; } p.centerTC { font-family: "Graphik-Super"; margin: 1em 0 0em; text-align: center; } /* use p.chapter_hdnote for text that is after an introduction, but is different from the default p tags above */ p.chapter_hdnote {} /* -- RECIPE BOOKS -- */ p.recipe_hdnote { font-family: "Belizio-Medium"; text-indent: 0; text-align: left; margin-bottom: 0em; } .yield { font-family: "Graphik-Black"; margin-top: 0.5em; margin-bottom: 0em; line-height: 3em; text-align:center; } p.method_txt { font-family: "Belizio-Regular"; text-indent: 0; margin-bottom: 0em; } /* ---- EXTRACT, PULL QUOTES, DISPLAY text ---- */ .drop_cap { font-family: "BrunelText-Bold"; font-size: 7em; height: auto; float: left; margin: 5px 5px 5px 0; } .pull_quote { text-align:left; margin: 1em; font-size:1.5em; } .display_type { font-size: 1.5em; } .display_type1 { font-size: 1.5em; background-image: url(../images/tip_circle1.png); background-repeat: no-repeat; padding: 2em 2em 2em 2em; text-align: center; margin-bottom: 0.2em; background-position: center; } .display_type2 { font-size: 1.5em; background-image: url(../images/tip_circle2.png); background-repeat: no-repeat; padding: 2em 2em 2em 2em; text-align: center; margin-bottom: 0.2em; background-position: center; } .display_type3 { font-size: 1.5em; background-image: url(../images/tip_circle3.png); background-repeat: no-repeat; padding: 2em 2em 2em 2em; text-align: center; margin-bottom: 0.2em; background-position: center; } .display_type4 { font-size: 1.5em; background-image: url(../images/tip_circle4.png); background-repeat: no-repeat; padding: 2em 2em 2em 2em; text-align: center; margin-bottom: 0.2em; background-position: center; } .display_type5 { font-size: 1.5em; background-image: url(../images/tip_circle5.png); background-repeat: no-repeat; padding: 2em 2em 2em 2em; text-align: center; margin-bottom: 0.2em; background-position: center; } .display_typeRecipe { font-family: "Belizio-Regular"; color: RGB(255,255,255); font-size: 1.5em; background-image: url(../images/recipe_circle.png); background-repeat: no-repeat; padding: 2em 2em 2em 2em; text-align: center; margin-bottom: 0.2em; background-position: center; } /* ---- CAPTIONS ---- */ .caption { text-align:center; font-size:.7em; } .caption_1_hd {} .caption_1_txt {} .caption_2_hd {} .caption_2_txt {} /* ---- SIDE BARS ---- */ /* ---- add font family and font size to div.sidebar ---- */ div.sidebar { margin: 0; page-break-before: always; border: solid 3px; padding: 2%; border-color: RGB(219,158,40); } .sidebar1_hd { font-family: "Belizio-Medium"; text-align: center; margin-top: 0.5em; margin-bottom: 1em; } .sidebar1_hdFAT { font-family: "Belizio-Medium"; text-align: center; margin-top: 0.5em; margin-bottom: 1em; padding-top: 1em; padding-bottom: 1em; padding-left: .5em; background-image: url(../images/fat.jpg); background-repeat: no-repeat; background-position: center; } .sidebar1_hdGROUND { font-family: "Belizio-Medium"; text-align: center; margin-top: 0.5em; margin-bottom: 1em; padding-top: 1em; padding-bottom: 1em; padding-left: .5em; background-image: url(../images/groundmeat.jpg); background-repeat: no-repeat; background-position: center; } .sidebar1_hdSPICES { font-family: "Belizio-Medium"; text-align: center; margin-top: 0.5em; margin-bottom: 1em; padding-top: 1em; padding-bottom: 1em; padding-left: .5em; background-image: url(../images/spices.jpg); background-repeat: no-repeat; background-position: center; } .sidebar1_hdVEGETABLES { font-family: "Belizio-Medium"; text-align: center; margin-top: 0.5em; margin-bottom: 1em; padding-top: 1em; padding-bottom: 1em; padding-left: .5em; background-image: url(../images/vegetables.jpg); background-repeat: no-repeat; background-position: center; } .sidebar1_hdWETMIX { font-family: "Belizio-Medium"; text-align: center; margin-top: 0.5em; margin-bottom: 1em; padding-top: 1em; padding-bottom: 1em; padding-left: .5em; background-image: url(../images/wetmix.jpg); background-repeat: no-repeat; background-position: center; } .sidebar1_hdnote { font-family: "Graphik-Black"; margin-top: 1em; margin-bottom: 0.5em; } .sidebar1_hdnoteTC { font-family: Graphik-Black; margin-top: 1em; margin-bottom: 0.5em; color: rgb(0,0,0); padding-top: 1em; padding-bottom: 1em; padding-left: .5em; background-image: url(../images/common1.jpg); background-repeat: no-repeat; } .sidebar1_txt { font-family: "Graphik-Semibold"; } .sidebar2_hd { font-family: "Graphik-Semibold"; text-indent: 1em; } .sidebar2_hdnote { font-family: "Graphik-Black"; text-align: center; } .sidebar2_txt { font-family: "Graphik-Semibold"; margin-top: 1em; margin-bottom: 0em; text-align: center; } /* ---- LISTS ---- */ ol { list-style-type: none; padding: 0px; margin-bottom: 1em; } ul { font-family: "Belizio-Regular"; list-style-type: none; padding: 0px; margin-bottom: 1em; margin-top: 1em; } ul.alternate_style { list-style-type: none; padding: 0px; margin-bottom: 1em; } li { font-family: "Belizio-Regular"; font-size:.8em; margin-bottom: .5em; margin-left: 1em; text-indent: -1em; } .ingred_sublist { font-family: "Graphik-Bold"; margin: 0.2em 0 0 0; margin-left: 1.5em; text-indent: -1.5em; } .footnotes { font-family: "Graphik-Medium"; margin-top: 1.0em; margin-bottom: 0.5em; } /* ---- IMAGES ---- */ /* ---- Large images have no margin ---- */ div.wrap { vertical-align: top; text-align: center; margin:0; } /* ---- smaller images will have a margin ---- */ div.wrap_small { text-align: center; margin: 1em 0 1em 0; } /* -- all images should have p tag -- */ p.image { text-align: center; margin-top:0.2em; margin-bottom:0.2em; } /* -- images that are largest on the vertical side -- */ img.vertical { margin: 0; text-align: center; height: 90%; max-width: 100%; } /* -- images that are largest on the horizontal side -- */ img.horizontal { margin: 0; text-align: center; width: 100%; height: auto; } .image_bkg { margin: 0; background-repeat: no-repeat; background-size: contain; } .floatleft { float: left; width: 40%; margin: 10px 10px 10px 0; } .floatright { float: right; width: 40%; margin: 10px 10px 10px 0; } /* -- to be used within floatleft, floatright, and gallery divs -- */ img.float { width: 100%; height: auto; } /* -- used to create a grid of images -- */ .gallery_25 { width: 23%; float: left; padding: 1%; } .gallery_50 { width: 48%; float: left; padding: 1%; } div.clear { clear: both } div.pagebreak { page-break-after:always; } /* ---- FRACTIONS ---- */ sup { vertical-align: super; font-size: 0.7em; line-height: 0em; } sub { vertical-align: sub; font-size: 0.7em; line-height: 0em; } /* ---- TABLES ---- */ div.table { margin: 0em; } table { border-collapse: collapse; margin-top: 1em; margin-bottom: 1em; text-align: left; } td, th { padding: 3px 5px; } /* ---- COLORS ---- */ /* -- ok to use span tags, change class name and attributes if needed, don't add classes -- */ span.gray1 {color: RGB(88,88,90);} span.orange {color: RGB(241,89,34);} span.brown {color: RGB(148,99,72);} span.green {color: RGB(122,150,85);} span.pink {color: RGB(219,158,40);} span.gray {color: RGB(199,200,202);} span.blue {color: RGB(6,136,188);} span.white {color: RGB(255,255,255);} span.font1 { font-family: "Belizio-Regular"; } span.font2 { font-family: "Graphik-Black"; } span.font3 { font-family: "GraphikXXCond-Bold"; } span.font3a { font-family: "GraphikXXCond-Bold"; letter-spacing: 2px; } span.font6 { font-family: "Belizio-Medium"; } span.font7 { font-family: "Graphik-Bold"; } span.font8 { font-family: "GraphikXXCond-Bold"; } span.font9 { font-family: GraphikXXXCond-Bold; font-size: 2.3em; line-height: 1em; } span.font10 {font-family: "BrunelText-Bold"; } span.font11 { font-family: "Graphik-Semibold"; } span.fontx { font-family: serif; } span.fonty { font-family: san-serif; } .table1 { font-family: "Graphik-Black"; margin: 0em 0 0em 0; text-align: center; } .border1 { border: solid 4px; border-color: RGB(219,158,40); } .border2 { border: solid 4px; border-color: RGB(241,89,34); } .border3 { border: solid 4px; border-color: RGB(122,150,85); } .border4 { border: solid 4px; border-color: RGB(6,136,188); } .border5 { border: solid 4px; border-color: RGB(148,99,72); } .borderright { border-right: solid 2px; border-color: RGB(219,158,40); } .borderright2 { border-right: solid 4px; border-color: RGB(241,89,34); } .borderright3 { border-right: solid 4px; border-color: RGB(122,150,85); } .borderright4 { border-right: solid 4px; border-color: RGB(6,136,188); } .borderright5 { border-right: solid 4px; border-color: RGB(148,99,72); } .bgcolor1 { background-color: RGB(219,158,40); } .bgcolor2 { background-color: RGB(241,89,34); } .bgcolor3 { background-color: RGB(122,150,85); } .bgcolor4 { background-color: RGB(6,136,188); } .bgcolor5 { background-color: RGB(148,99,72); } .yield1 { font-family: "Belizio-Regular"; size: .8em; text-align:center; font-weight: bold; } p.method_txtt { font-family: "Belizio-Regular"; text-indent: 0; margin-top: 1em; margin-bottom: 0em; } .ingred_sublistt { font-family: "Graphik-Bold"; margin-top: 2em; margin-left: 1.5em; text-indent: -1.5em; } div.sidebar1 { margin: 0.5em 0 0.5em 0; page-break-before: always; border: solid 6px; padding: 2%; border-color: RGB(241,89,34); } div.sidebar1a { margin: 0.5em 0 0.5em 0; page-break-before: always; padding: 2%; background-color: RGB(241,89,34); } div.sidebar2 { margin: 0.5em 0 0.5em 0; page-break-before: always; border: solid 3px; padding: 2%; border-color: RGB(122,150,85); } div.sidebar3 { margin: 0.5em 0 0.5em 0; page-break-before: always; padding: 2%; background-color: RGB(122,150,85); } div.sidebar4 { margin: 0.5em 0 0.5em 0; page-break-before: always; border: solid 12px; padding: 2%; border-color: RGB(6,136,188); } div.sidebar4a { margin: 0.5em 0 0.5em 0; page-break-before: always; padding: 2%; background-color: RGB(6,136,188); } div.sidebar5 { margin: 0.5em 0 0.5em 0; page-break-before: always; border: solid 12px; padding: 2%; border-color: RGB(149,100,71); } div.sidebar6 { margin: 0.5em 0 0.5em 0; page-break-before: always; padding: 2%; background-color: RGB(148,99,72); } .pagebreak { page-break-after:always; } .indexmain1 { font-family: "Graphik-Bold"; margin: 1em 0 0.5em 0; } .indexmain { font-family: "Belizio-Regular"; margin: 0.5em 0 0em 0; } .image2 { margin: 0.5em 0 0.5em 0em; text-align:left; }