/*================================================================================
KEEP - Reset & Basics - KEEP
==================================================================================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
@page {margin : 0.5em;}
tbody, thead, tfoot, tr, td, th {border-style : inherit; border-width : inherit; border-color : inherit;}
img {width:100%}
.leftFloat {float : left;}
.rightFloat {float : right;}
/*================================================================================
MISC TOOLS & INFO
==================================================================================
####### LANGUAGE & HEADINGS OF PAGES
##############################################################
##############################################################
+++++++++++++++ HEADING +++++++
*language is included
*title of section is page # of # except for cover, back cover, and navigational toc
Page # of #
+++++++++++++++ LANGUAGE OPTIONS +++++++
English: en-US
English UK: en-GB
Spanish: es
####### SEMANTICS & ARIA ROLES
##############################################################
##############################################################
To find more information/options visit-
semantics: https://idpf.github.io/epub-vocabs/structure/
aria roles: https://idpf.github.io/epub-guides/epub-aria-authoring/
+++++++++++++++ PAGE BREAKS +++++++
PAGES =
+++++++++++++++ BODY TAG SEMANTICS +++++++
FRONTMATTER =
BODYMATTER =
BACKMATTER =
+++++++++++++++ SECTION SEMANTICS & ARIA ROLES +++++++
COVER =
+ title tag is "Cover"
+ add role="doc-cover" in the tag line
+ alt text is "Cover"
HALF TITLE PAGE =
TITLE PAGE =
+ alt text: series, title, author, illustrator
DEDICATION =
INTRODUCTION =
FOREWORD =
ACKNOWLEDGMENTS =
PREFACE =
PARTS =
CHAPTERS =
FIGURES/CAPTIONS = and
FULL PAGE = (caption)
KEYWORDS IN TEXT =
(keyword)
LISTS =
or with (text)
TIMEBREAK =
SIDEBARS =
FACT BOX & TIPS =
SOURCE NOTE IN TEXT = (note)
PULL QUOTES =
TABLES = (table heading)(text)
CONCLUSION =
EPILOGUE =
NOTE FROM AUTHOR =
TIMELINES =
+ example:
AUTHOR/ILLUSTRATOR =
GLOSSARY =
+ example:
text (pronounciation) —
text
Q&A/JOKES =
FACTS/MORE ABOUT =
RECIPES/CRAFTS/ACTIVITES =
+ example:
Supplies:
Directions:
(text)
ASSESSMENT (QUIZ) =
MISC. PAGES =
DISCUSSION & WRITING PROMPTS =
+ example:
(text)
READ MORE =
+ example:
INTERNET SITES =
+ example:
BIBLIOGRAPHIES =
+ example:
SOURCE NOTES =
+ example:
note#: (text)
OTHER BOOKS =
INDEX =
+ example:
COPYRIGHT =
BACK COVER =
+ title tag is "Back Cover"
+ alt text is "Back Cover"
TOC =
+ title tag is "navigational toc"
LANDMARKS =
+ example:
Cover
Title Page
Table of Contents
Start of Content
Main Body
PAGE LIST =
+ example:
cover
1
3
2
back cover
####### COLOR
##############################################################
##############################################################
To check/find color contrast vist
https://webaim.org/resources/contrastchecker/
Default is set to black if color isn't mentioned in template CSS
Primary: color:#1AAAA1;
Secondary & Hyperlinks: color:#2BBBB2;
Visited Hyperlinks (darker version of hyperlink color): color:#166966;
*/
/*================================================================================
CSS CODE
==================================================================================*/
/*####### IMAGES
##############################################################*/
/*+++++++++++++++ FULL PAGE IMAGES +++++++*/
figure.frame_fullpage {
margin:0px;
padding:0px;
text-align:center;
page-break-after:always;
page-break-before:always;}
div.wrap_fullpage {
text-align:center;}
img.fullpage {
height:95%;}
/*+++++++++++++++ REGULAR IMAGES +++++++*/
figure.frame_image {
text-align:center;
margin:0px;}
div.wrap_image {
text-align:center;
padding-top:24px;
padding-bottom:24px;}
/** If image is a running image above chapters,
etc. then make the top and bottom padding 0px*/
div.wrap_image_design {
text-align:center;
padding-top:0px;
padding-bottom:0px;}
/** If image is a running image above chapters,
etc. then make the top and bottom padding 0px*/
div.wrap_image_caption {
text-align:center;
padding-top:24px;
padding-bottom:3px;}
img.image_15 {
width:15%;}
img.image_20 {
width:20%;}
img.image_40 {
width:40%;}
img.image_50 {
width:50%;}
img.image_60 {
width:60%;}
img.image_70 {
width:70%;}
img.image_80 {
width:80%;}
img.image_95 {
width:95%;}
/*+++++++++++++++ FLOATING IMAGES +++++++*/
/** Don't need img class with floating images*/
figure.frame_image_right_30 {
margin:0px;
padding-top:8px;
padding-bottom:8px;
padding-left:16px;
float:right;
width:30%;}
div.wrap_image_right {
text-align:center;}
/*+++++++++++++++ CAPTIONS +++++++*/
figcaption {
font-family:sans-serif;
font-style:normal;
text-align:center;
margin-top:3px;
margin-bottom:24px;
margin-left:32px;
margin-right:32px;
font-size:80%;
line-height:1;
color:#737373;}
/*####### HEADINGS
##############################################################*/
h1.part {
font-family:serif;
font-style:normal;
text-align:center;
margin-top:32px;
margin-bottom:0px;
font-size:250%;
line-height:1.5;}
/** IF PARTS IS USED, ALL HEADING TAGS WILL NEED TO BE DOWNGRADED 1 STEP*/
h1.chapter_number {
font-family:sans-serif;
font-style:normal;
font-weight:bold;
text-align:center;
margin-top:8px;
margin-bottom:48px;
font-size:110%;
line-height:2;}
/** Leave color as default if both chapter number & title are used*/
/** If book only has chapter number, increase font size to 200%, & reduce margin-bottom to 32px & line height to 1*/
/** If book has running design heading, reduce margin-top to 6px*/
span.chapter_title {
font-family:sans-serif;
font-style:normal;
font-weight:bold;
text-align:center;
font-size:200%;
line-height:1;
color:#CB466E;}
/** Make chapter title the primary color, if applicable*/
/** Use linebreak between chapter number & title, be sure there's a space between them*/
/** If book only has chapter title, add margin-top:8px, margin-bottom:32px, change span tag to h1*/
/** If book has running design heading, reduce margin-top to 6px*/
h2.subhead1 {
font-family:sans-serif;
font-style:normal;
text-align:left;
margin-top:32px;
margin-bottom:6px;
font-size:150%;
line-height:1;
color:#1AAAA1;}
/** use same color as chapter number and/or title*/
h3.subhead2 {
font-family:sans-serif;
font-style:normal;
text-align:left;
margin-top:28px;
margin-bottom:2px;
font-size:135%;
line-height:1;}
h4.subhead3 {
font-family:sans-serif;
font-style:normal;
text-align:left;
margin-top:28px;
margin-bottom:2px;
font-size:115%;
line-height:1;
color:#737373;}
h5.sidebar_head {
font-family:sans-serif;
font-style:normal;
text-align:left;
margin-top:0px;
margin-bottom:6px;
font-size:125%;
line-height:1.5;}
/** WITH box- margin-top:0px
WITHOUT box- margin-top:16px*/
h1.front_back_head {
font-family:sans-serif;
font-style:normal;
text-align:center;
margin-top:8px;
margin-bottom:32px;
font-size:230%;
line-height:1;}
/** Should NOT include any running design headings*/
h2.front_back_subhead1 {
font-family:sans-serif;
font-style:normal;
text-align:left;
margin-top:32px;
margin-bottom:8px;
font-size:150%;
line-height:1;}
h3.front_back_subhead2 {
font-family:sans-serif;
font-style:normal;
text-align:left;
margin-top:28px;
margin-bottom:6px;
font-size:115%;
line-height:1;
color:#737373;}
/*####### TEXT
##############################################################*/
p.dedication {
font-family:serif;
font-style:italic;
text-align:center;
margin-top:32px;
margin-bottom:0px;
font-size:125%;
line-height:1.35;}
p.intro_text {
font-family:serif;
font-style:normal;
text-align:left;
margin-top:0px;
margin-bottom:12px;
font-size:100%;
line-height:1.5;}
/** Should match the backmatter text unless it's something special.*/
p.body_text {
font-family:serif;
font-style:normal;
text-align:left;
text-indent:22px;
font-size:100%;
line-height:1.5;}
/** For larger font size, use font size 1.25em & line height 1.65
-- this will mean any intro & backmatter sections will need to increase as well*/
span.textmessage {
font-family:sans-serif;
font-size:95%;
line-height:1.5;
color:#737373;}
p.callout {
font-family:sans-serif;
font-style:normal;
text-align:center;
margin-top:12px;
margin-bottom:12px;
margin-left:48px;
margin-right:48px;
font-size:125%;
line-height:1.25;}
/** Use for signs or notes NOT QUOTES that stand out from body text*/
p.text {
font-family:sans-serif;
text-align:left;
margin-top:16px;
margin-bottom:6px;
margin-left:32px;
margin-right:32px;
font-size:95%;
line-height:1.35;
color:#737373;}
p.text1 {
font-family:sans-serif;
text-align:left;
margin-top:6px;
margin-bottom:6px;
margin-left:32px;
margin-right:32px;
font-size:95%;
line-height:1.35;
color:#737373;}
p.text2 {
font-family:sans-serif;
text-align:left;
margin-top:6px;
margin-bottom:16px;
margin-left:32px;
margin-right:32px;
font-size:95%;
line-height:1.35;
color:#737373;}
p.letter {
font-family:sans-serif;
text-align:left;
margin-top:24px;
margin-bottom:6px;
margin-left:32px;
margin-right:32px;
font-size:90%;
line-height:1.35;
color:#737373;}
p.letter_n {
font-family:sans-serif;
text-align:left;
margin-top:6px;
margin-bottom:6px;
margin-left:32px;
margin-right:32px;
font-size:90%;
line-height:1.35;
color:#737373;}
p.letter_n1 {
font-family:sans-serif;
text-align:left;
margin-top:6px;
margin-bottom:32px;
margin-left:32px;
margin-right:32px;
font-size:90%;
line-height:1.35;
color:#737373;}
p.quote {
font-family:serif;
text-align:center;
margin-top:24px;
margin-bottom:24px;
margin-left:32px;
margin-right:32px;
font-size:100%;
line-height:1.35;
color:#737373;}
p.quote_source {
font-family:serif;
font-style:normal;
text-align:right;
margin-top:0px;
margin-bottom:24px;
margin-left:32px;
margin-right:32px;
font-size:95%;
line-height:1;
color:#737373;}
div.timebreak {
font-family:serif;
text-align:center;
display: block;
margin-top:24px;
margin-bottom:24px;
margin-left:96px;
margin-right:96px;
border-top:2px dotted;}
div.timebreak hr {
display: none;}
p.backmatter_text {
font-family:serif;
font-style:normal;
text-align:left;
margin-top:0px;
margin-bottom:12px;
font-size:100%;
line-height:1.5;}
/** Should match the intro text unless the intro text was something special.*/
p.credits {
font-family:serif;
font-style:normal;
text-align:left;
margin-top:16px;
margin-bottom:0px;
font-size:80%;
line-height:1.3;}
/*####### SIDEBARS/FACT BOXES
##############################################################*/
.box {
margin-top:16px;
margin-bottom:16px;
padding:6px;
background-color:#1AAAA1;}
/** For outline box- border:1px solid #1AAAA1;*/
p.sidebar_text {
font-family:sans-serif;
font-style:normal;
text-align:center;
margin-top:0px;
margin-bottom:16px;
margin-left:48px;
margin-right:48px;
font-size:90%;
line-height:1.25;}
/**TOP MARGIN:
WITH box, no heading- margin-top:0px
WITH box, with heading- margin-top:0px
WITHOUT box, no heading- margin-top:16px
WITHOUT box, with heading- margin-top:0px*/
/**BOTTOM MARGIN:
WITH box, 1 paragraph- margin-bottom:0px
WITH box, multiple paragraphs-
between paragraphs- margin-bottom:5px
last paragraph- margin-bottom:0px;
WITHOUT box, 1 paragraph- margin-bottom:16px
WITHOUT box, multiple paragraph-
between paragraphs- margin-bottom:5px
last paragraph- margin-bottom:16px;*/
p.sidebar_text1 {
font-family:sans-serif;
font-style:normal;
text-align:center;
margin-top:16px;
margin-bottom:16px;
margin-left:48px;
margin-right:48px;
font-size:90%;
line-height:1.25;}
span.sidebar_text_4 {
font-family:sans-serif;
font-size:90%;
line-height:1.25;}
span.sidebar_text_5 {
font-family:sans-serif;
font-size:90%;
line-height:1.25;
color:#737373;
}
/*####### LISTS
##############################################################*/
/*+++++++++++++++ BULLET or NO COUNTER LIST +++++++*/
/**MAIN BODY: used in main body text*/
ul.list_bullet {
font-family:serif;
font-style:normal;
text-align:left;
margin-top:0px;
margin-bottom:8px;
margin-left:48px;
margin-right:0px;
font-size:100%;
line-height:1.5;
list-style-position: outside;}
ul.list_bullet li span {
margin-bottom:6px;
list-style:disc;}
/** BACKMATTER: used in Ingredients/Supplies, Timelines, Read More, Bibliography, Index, Facts, Interviews, Jokes*/
/** Hanging indent style*/
ul.bm_list_none {
font-family:serif;
font-style:normal;
text-align:left;
margin-left:24px;
margin-right:0px;
text-indent:-24px;
font-size:100%;
line-height:1.35;
list-style-position: outside;}
ul.bm_list_none li {
margin-bottom:6px;
list-style:none;}
ul.bm_list_bullet {
font-family:serif;
font-style:normal;
text-align:left;
margin-left:24px;
margin-right:0px;
font-size:100%;
line-height:1.35;
list-style-position: outside;}
ul.bm_list_bullet li {
margin-bottom:6px;
list-style:disc;}
span.timeline_date {
font-weight:bold;
color:#2BBBB2;}
/** INDEX: used for index*/
ul.index_list {
font-family:serif;
font-style:normal;
text-align:left;
margin-top:0px;
margin-bottom:24px;
font-size:100%;
line-height:1.35;
list-style-position: outside;}
ul.index_list li { /*level 1*/
margin-bottom:6px;
margin-left:24px;
text-indent:-24px;
list-style:none;}
ul.index_list li li { /*level 2*/
margin-bottom:6px;
margin-left:20px;
text-indent:-32px;
list-style:none;}
ul.index_list li li li { /*level 3*/
margin-bottom:6px;
margin-left:28px;
text-indent:-40px;
list-style:none;}
/*+++++++++++++++ NUMBER or COUNTER LIST +++++++*/
/**MAIN BODY: used in main body text*/
/** Same look/style as previous paragraph*/
/** Hanging indent style & nest under paragraph*/
ol.list_number {
font-family:serif;
font-style:normal;
text-align:left;
margin-top:0px;
margin-bottom:8px;
margin-left:48px;
margin-right:0px;
font-size:100%;
line-height:1.5;
list-style-position: outside;}
ol.list_number li span {
margin-bottom:6px;
list-style:decimal;}
/** BACKMATTER: used in steps, discussion questions, writing prompts, critical core questions, source notes, quizzes*/
/** Hanging indent style*/
ol.bm_list_number {
font-family:serif;
font-style:normal;
text-align:left;
margin-left:24px;
margin-right:0px;
font-size:100%;
line-height:1.35;
list-style-position: outside;}
ol.bm_list_number li {
margin-bottom:6px;
list-style:decimal;}
/** TABLE OF CONTENTS: used in the toc.xhtml file*/
/** Change to center if book only has chapter numbers*/
ol.toc_left {
font-family:serif;
font-style:normal;
text-align:left;
margin-top:0px;
margin-bottom:16px;
margin-right:6px;
margin-left:0px;
font-size:100%;
line-height:1;}
ol.toc_left li {
margin-bottom:16px;
list-style:none;}
ol.toc_left li li {
margin-top:8px;
margin-bottom:16px;
margin-left:24px;
list-style:none;}
ol.toc_center {
font-family:serif;
font-style:normal;
text-align:center;
margin-top:0px;
margin-bottom:16px;
margin-right:6px;
margin-left:0px;
font-size:100%;
line-height:1;}
ol.toc_center li {
margin-bottom:16px;
list-style:none;}
/*+++++++++++++++ DESCRIPTION LIST +++++++*/
/** Used in Glossary, More About..., Language Definitions*/
dl.description_list dt { /*term*/
font-family:serif;
text-align:left;
font-size:100%;
line-height:1.35;
list-style-position: outside;}
dl.description_list dd { /*definition*/
margin-bottom:12px;
list-style: none;}
span.pronounce {
color:#737373;
font-weight:normal;}
/*####### TABLES
##############################################################*/
/* Set to be 2 column chart (50/50)*/
table {
font-family:serif;
font-style:normal;
text-align:center;
margin-top:16px;
margin-bottom:16px;
font-size:100%;
line-height:1.25;
width:100%;
border-collapse:collapse;
}
caption {
font-family:sans-serif;
font-style:normal;
text-align:left;
margin-top:32px;
margin-bottom:6px;
font-size:150%;
line-height:1;
color:#1AAAA1;}
/* Style should match which ever other subheadings, depending on hierarchy order*/
.table_intro {
font-family:serif;
font-style:normal;
text-align:left;
font-size:90%;
line-height:1.5;}
th.toprow {
text-align:center;
padding:6px;
width:50%;
border-bottom:2px solid;
vertical-align:bottom;
background:#CDCDCD;}
td.left_side {
text-align:left;
padding:6px;
width:50%;
vertical-align:top;}
td.right_side {
text-align:left;
padding:6px;
width:50%;
vertical-align:top;}
p.intro_head {
font-family:serif;
font-style:normal;
text-align:left;
text-indent:0px;
margin-top:24px;
font-size:110%;
line-height:1.5;}
p.intro_txt {
font-family:serif;
font-style:normal;
text-align:left;
text-indent:0px;
margin-top:0px;
font-size:90%;
line-height:1.5;}
/*####### SPAN TAGS
#################################################################*/
em, i, .italic {font-style: italic;}
/** use i for book titles*/
/** use em for semantically emphasized*/
strong, b, .bold {font-weight: bold;}
/** use b for drawing attention to text (bold text within body text)*/
/** use strong for semantically important word/section (chapter headings, keywords)*/
span.regular {
font-weight:normal;}
/*####### HYPERLINKS
##################################################################*/
/** Use in DISCUSSION QUESTIONS & CAPSTONE WEBSITE */
/** main, link, active should be 4:5 color ratio / visted should be 6-7 color ratio*/
.hyperlink_black {color:#000000; text-decoration:underline;}
a.hyperlink_black:link {color:#000000;}
a.hyperlink_black:active {color:#000000;}
a.hyperlink_black:visited {color:#000000;}
/** Use in TOC, KEYWORDS, GLOSSARY, INDEX, SOURCE NOTES*/
/** add color after underscore*/
/** main, link, active should be 4:5 color ratio / visted should be 6-7 color ratio*/
.hyperlink_pink {color:#CB466E; text-decoration:underline;}
a.hyperlink_pink:link {color:#CB466E;}
a.hyperlink_pink:active {color:#CB466E;}
a.hyperlink_pink:visited {color:#A32E51;}
.hyperlink_gray {color:#737373; text-decoration:underline;}
a.hyperlink_gray:link {color:#737373;}
a.hyperlink_gray:active {color:#737373;}
a.hyperlink_gray:visited {color:#5C5C5C;}
/** Use in NOTES in TEXT*/
/** main, link, active should be 4:5 color ratio / visted should be 6-7 color ratio*/
.hyperlink_note {color:#2BBBB2; vertical-align:super; font-size:80%; line-height:.25; text-decoration:underline;}
a.hyperlink_note:link {color:#2BBBB2;}
a.hyperlink_note:active {color:#2BBBB2;}
a.hyperlink_note:visited {color:#166966;}
/*####### PAGE BREAKS
#################################################################*/
.pagebreak {
page-break-before:always;}
.pagebreak_with padding {
page-break-before:always;
padding:5%;}