/* -- CB_kids.css --*/ /* -- Updated 11/21/13, CB Digital Production-- */ /* ---- GENERAL ---- */ html, body { margin: 5px; padding:0; border-width: 0; -webkit-hyphens:none; -epub-hyphens:none; } div { page-break-inside: avoid; } /* ---- EMBEDDED FONTS ---- */ /* ---- normal is for regular text and should always be listed first, italic & bold change the and tags // do not use span classes for bold and italics ---- */ @font-face { font-family: "EasyOpenFace"; src: url("../fonts/EasyOpenFace.otf"); } @font-face { font-family: "AndBasR"; src: url("../fonts/AndBasR.otf"); } @font-face { font-family: "MrEavesModOT-Book"; src: url("../fonts/MrEavesModOT-Book.otf"); font-weight: bold; } @font-face { font-family: "MrEavesModOT"; src: url("../fonts/MrEavesSanOT-Bold.otf"); font-weight:bold; } @font-face { font-family: "MrEavesModOT"; src: url("../fonts/MrEavesSanOT-Reg.otf"); } @font-face { font-family: "MrEavesModOT"; src: url("../fonts/MrEavesSanOT-RegItalic.otf"); font-style:italic; } /* ---- ALL MAIN P STYLES ARE HERE, NO NEED TO DUPLICATE ATTRIBUTES ---- */ p { margin: 0; text-align:left; font-size: 1.2em; text-indent: 0em; line-height: 1.2em; font-family: "", serif; /* -- EPUB 3 -- */ widows: 3; orphans: 3; word-wrap: break-word; overflow-wrap: normal; text-wrap: normal; } /* ---- LINKS ---- */ a { color: RGB(0,157,224); 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.9em; font-family:"MrEavesModOT"; margin-top: 2em; line-height: 1.4em; } div#copyright p { margin-top: 1em; font-size: 0.9em; font-family:"MrEavesModOT"; line-height: 1.4em; } /* ---- TOC ---- */ .toc { margin-left: 1em; } /* ---- HEADER STYLES - Do not use 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:"EasyOpenFace"; } h2 { font-family:"MrEavesModOT"; } .h2_about { font-family: "AndBasR"; } h3 { } /* ---- TEXT STYLES - Do not use margins greater than 2em ---- */ p.first1_noindent { font-family:"MrEavesModOT"; margin-top: 1%; } p.first2_noindent { font-family: "AndBasR"; margin: 10% 0 1em 0; } /* .running_text is the default p tag, no indent, bottom margin */ p.text_noindent { font-family:"MrEavesModOT-Book"; margin-top: 2%; } p.first1_indent { font-family:"MrEavesModOT"; margin-top: 1%; line-height: 1.3em; } p.first2_indent { margin: 2em 0 0 0; text-indent: 1em; } /* .running_text is the default p tag, indent, bottom margin */ p.text_indent { text-indent: 1em; } p.right { text-align: right; } p.left { text-align: left; } p.center { text-align: center; } span.dropcap { font-size: 2.2em; line-height: 0.9em; font-family:" ", sans-serif; } span.big { font-size: 1.4em; margin-top: 2em; font-family:" ", sans-serif; } div.clear {clear: both} div.pagebreak {page-break-before: always;} /* ---- HEADER STYLES - Do not use margins greater than 2em. Headers that follow text should have a top margin ----*/ h1, h2, h3 {text-align: left} h1 { } h2 { } h3 { } /* ---- DEDICATION ---- */ .dedication { padding-top: 5%; font-size: 1em; font-family:" ", sans-serif; } /* ---- AUTHOR PAGE ---- */ p.author { font-family:"MrEavesModOT"; margin-top: 2%; color: RGB(28,83,102); } /* ---- PARTS/SECTIONS ---- */ hr { border: 0; color: black; background-color: black; height: 2px; text-align: center; } /* ---- 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:0; } /* -- images that are largest on the vertical side -- */ img.vertical { margin: 0; text-align: center; height: 90%; width: auto; } /* -- images that are largest on the horizontal side -- */ img.horizontal { margin: 0; text-align: center; width: 100%; height: auto; } .image_background { margin: 0; background-repeat: no-repeat; background-size: contain; } /* -- to be used within floatleft, floatright, and gallery divs -- */ .floatleft { float: left; width: 40%; margin: 10px 10px 10px 0; } .floatright { float: right; width: 40%; margin: 10px 10px 10px 0; } img.float { width: 100%; height: auto; } img.inline { vertical-align: middle; } /* ---- COLORS, ok to use span tags, change attributes if needed, don't add classes ---- */ span.red {color: RGB(155,3,48);} span.yellow {color: RGB(87,92,2);} span.blue {color: RGB(32,28,63);} span.orange {color: RGB(208,100,66);} span.green {color: RGB(87,151,133);} span.pink {color: RGB(255,153,204);} span.purple {color: RGB(205,86,53);} span.gray {color: RGB(88,88,90);}