/* HTML5 ✰ Boilerplate
 * from https://github.com/verekia/initializr-template/blob/master/css/style.css
 * ==|== normalize ==========================================================
 */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display : block;
}
audio:not([controls]) {
display : none;
}
[hidden] {
display : none;
}
html {
font-family : 'Times New Roman', serif;
font-size : 100%;
overflow-y : scroll;
}
body {
margin : 0;
font-size : medium;
line-height : 1.4;
}
body, button, input, select, textarea {
font-family : 'Times New Roman', serif;
}


::-moz-selection {
background : #fe57a1;
color : #fff;
text-shadow : none;
}


a {
color : #00e;
}
a:visited {
color : #551a8b;
}
a:hover {
color : #06e;
}
a:focus {
outline : thin dotted;
}
a:hover, a:active {
outline : 0;
}
abbr[title] {
border-bottom : 1px dotted;
}
b, B, strong {
font-weight : bold;
}
blockquote {
margin : 1em 40px;
}
dfn {
font-style : italic;
}
hr {
display : block;
height : 1px;
border: solid 1px grey;
margin : 1em 0;
padding : 0;
}

ins {
background : #ff9;
color : #000;
text-decoration : none;
}
mark {
background : #ff0;
color : #000;
font-style : italic;
font-weight : bold;
}
pre, code, kbd, samp {
font-family : 'Times New Roman', serif;
font-size : 1em;
}
pre {
white-space : pre;
white-space : pre-wrap;
overflow-wrap : break-word;
}
q {
quotes : none;
}
q:before, q:after {
content : "";
content : none;
}
small {
font-size : 85%;
}
sub, sup {
font-size : 75%;
line-height : 0;
position : relative;
vertical-align : baseline;
}
sup {
top : -0.5em;
}
sub {
bottom : -0.25em;
}
ul, ol {
margin : 1em 0;
padding : 0 0 0 40px;
}
dd {
margin : 0 0 0 40px;
}
nav ul, nav ol {
list-style : none;
list-style-image : none;
margin : 0;
padding : 0;
}

img {
border : 0;
vertical-align : middle;
}
svg:not(:root) {
overflow : hidden;
}
figure {
margin : 0;
}
form {
margin : 0;
}
fieldset {
border : 0;
margin : 0;
padding : 0;
}
label {
cursor : pointer;
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
cursor : pointer;
}
input[type="checkbox"], input[type="radio"] {
box-sizing : border-box;
}
input[type="search"] {
box-sizing : content-box;
}

/* 
button::-moz-focus-inner, input::-moz-focus-inner {
border : 0;
padding : 0;
}
*/

textarea {
overflow : auto;
vertical-align : top;
resize : vertical;
}


/* ===================================================
 Initializr styles
 http://verekia.com/initializr/responsive-template
 Author: Jonathan Verrecchia
 =================================================== */

/* ==============
 MOBILE: Main
 ============== */

#main article h1 {
font-size : 2em;
text-align : center;
width : 100%;
}

#footer footer {
color : white;
} 

/* ===============
 ALL: IE Fixes
 =============== */

.ie7 #title {
padding-top : 20px;
} 

/* ==|== non-semantic helper classes ======================================== */
 .ir {
display : block;
border : 0;
text-indent : -999em;
overflow : hidden;
background-color : transparent;
background-repeat : no-repeat;
text-align : left;
direction : ltr;
}
.ir br {
display : none;
}
.hidden {
display : none !important ;
visibility : hidden;
}
.visuallyhidden {
border : 0;
clip : rect(0 0 0 0);
height : 1px;
margin : -1px;
overflow : hidden;
padding : 0;
position : absolute;
width : 1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip : auto;
height : auto;
margin : 0;
overflow : visible;
position : static;
width : auto;
}
.invisible {
visibility : hidden;
}
.clearfix:before, .clearfix:after {
content : "";
display : table;
}
.clearfix:after {
clear : both;
} 

/* ==============
 CELEBRATION: 
 ============== */

/* Header */
header, footer, section {
 padding-top: 10px;
}

header, footer, section {
 padding-left:10px;
 padding-right:10px;
}

section.about p {
 margin-left:15px; 
 margin-right:15px;
}

header, footer {
 text-align: center;
 font-style: italic;
 font-weight: bold;
}

/* this allows you to have a clickable image with text without underlining */
header a, footer a, section.about a {
 text-decoration: none;
}
/* this works for book level files */
header p {
 background: url('../_graphics/celebration-line.gif');
 line-height: 1.4em;
 font-family: 'Lucida Calligraphy', 'Times New Roman', serif;
 font-weight: bold;
 font-size: large;
}

footer, section.about H2 {
 background: url('../_graphics/celebration-line.gif');
 line-height: 1.2em;
 font-family: 'Lucida Calligraphy', 'Times New Roman', serif;
 font-weight: bold;
 font-size: medium;
}

cite {
 font-style: italic;
}

i {
 font-style: italic;
}


/* Navigation */

section {
 clear: both;
}


/* Formatting for book sections */

#metadata {
 text-align: center;
}

/* H1 should never be used except in the metadata section; don't style here */
section h2, h3, h4 {
 margin-bottom: 1em;
}

/* identify chapter and preface as explicitly as a section class */
/* no actual styling is associated with them at present */
/* chapter introduction contents illustrations preface full-page-illustration notes */

/* set a default indent and leave space after each paragraph */
p { 
 text-indent: 15px;
 margin-bottom: 10px; 
}

/* then set specifiable classes for setting alternative indentations */

p.center, td.center, H1.center, H2.center, H3.center, H4.center, ul.center, li.center {
 text-indent: 0px;
 text-align: center;
}

p.right, td.right, H1.right, H2.right, H3.right, H4.right, ul.right, li.right {
 text-indent: 0px;
 text-align: right;
}

p.left, td.left, H1.left, H2.left, H3.left, H4.left, ul.left, li.left {
 text-indent: 0px;
 text-align: left;
}

p.left-indent, td.left-indent {
 text-align: left;
 text-indent: -10px;
}

p.left-indent-margin, td.left-indent-margin {
 text-indent: -10px;
 margin-left: 15px;
}

/* this is useful for indented areas that are quotations */
p.block-quote {
 text-indent: 15px;
 margin-left: 30px;
}

/* this is useful for indented areas that are not quotations, and for notes */
p.block-indent {
 text-indent: 0px;
 margin-left: 30px;
}

p.half-indent {
 text-indent: 0px;
 margin-left: 15px;
}

/* these are useful for indented areas within notes e.g. Maud Cuney-Hare */
p.left-indent-block, td.left-indent-block {
 text-indent: -15px;
 margin-left: 60px;
 text-align: left;
}

p.half-indent-block {
 text-indent: -15px;
 margin-left: 75px;
 text-align: left;
}

/* useful for small groups of offset text (e.g. Myra Reynolds, names of women ) color is just for fun */
p.float-left {
 width: 20%;
 text-indent: 0px;
 float: left; 
 font-weight : bold;	
 font-size: small;
 color: purple;
 }

/* this is useful for non-indented nonfiction chapter contents summaries */
p.chapter-summary {
 width: 70%;
 margin-left:auto; 
 margin-right:auto;
 text-align: left;
 text-indent: 0px;
}

/* this is useful for left-indented nonfiction chapter contents summaries */
p.left-chapter-summary {
 width: 70%;
 margin-left:auto; 
 margin-right:auto;
 text-align: left;
 text-indent: -10px;
}

/* define a div to group conceptual paragraphs e.g. quoting poetry within a paragraph, since P can't include parts like tables or blockquotes */
div.paragraph {}

/* define a div to group parts of a recipe */
div.recipe {
margin : 1em 0px;
}

/* define a div to set off sections from a diary (do not blockquote, use color)
c.f. Caroline Herschel's Memoirs */
div.diary {
margin : 1em 0px;
/* set off the diary segments in color */
color: MidnightBlue;
}

/* define a div to group together paragraphs of a will, treaty or other document */
div.document {
margin : 1em 0px;
 color: dimgrey;
}

/* define a div to group paragraphs within a letter */
div.letter {
 clear: both;
 margin-top: 1.5em;
 margin-bottom: 2.5em;
 color: #151110;
}

/* sometimes a letter is set off from surrounding text with a title */
p.title {
 text-align: center;
}

/* for letters, it's useful to have special formatting for parts of the letter */

p.address {
 text-align: right;
}

p.date {
 text-align: right;
}

p.salutation {
 text-indent: 0px;
 text-align: left;

}

p.closing {
/* could use text-transform:uppercase; 
 but this might not hold for other books */
 text-align: center;
}

p.postdate {
 text-align: left;
 text-indent: 5px;
}

p.postaddress {
 text-align: left;
 text-indent: 20px;
}

p.signature {
 text-align: right;
}

p.postscript {
 text-align: left;
}

/* For plays, it's useful to have special formatting for tables of cast members */
/* also used for mixed-width tables in "Fir-Flower Tablets" and H.E. Marshall */

table.cast {
 width: 90%;
 margin-left:auto; 
 margin-right:auto;
}

td.part {
 text-align: left;
 width: 70%;
}

td.actor {
 text-align: left;
 width: 30%;
}

/* For plays, it's useful to have special paragraphing for instructions */
p.act {
 font-weight : bold;
 margin-top: 2em;
 margin-bottom: 2em;
 text-align: center;
 font-size : 24px;
}

p.scene {
 margin-top: 1.8em;
 margin-bottom: 1.8em;
 margin-left: 30px;
 margin-right: 30px;
 text-align: center;
 font-size : 20px;
}

/* entrances and exits are centered but not full width*/
p.entrance {
 margin-top: 1.5em;
 margin-bottom: 1.5em;
 margin-left: 30px;
 margin-right: 30px;
 text-align: center;
}

/* stage directions go to the right but are also indented */
p.direction {
 margin-left: 40px;
 text-indent: -10px;
 text-align: right;
}


H2.border-top-bottom-sides {
 padding: 15px;
 border: 2px solid grey;
 text-align: center;
 margin-left: 30%;
 margin-right: 30%;
}


/* used on Hayward's "Romantic Canada" for chapter headings */
H2.border-top-bottom {
 padding: 15px;
 border-top: 2px solid grey;
 border-bottom: 2px solid grey;
 text-align: center;
 margin-left: 15%;
 margin-right: 15%;
}


blockquote.border-top-bottom-sides {
 padding: 15px;
 border: 2px solid grey;
}

blockquote.border-top-bottom {
 padding: 15px;
 border-top: 2px solid grey;
 border-bottom: 2px solid grey;
}

blockquote.border-double {
 padding: 30px;
 border: double;
}

img.wide {
 width: 80%;
 clear: both;
}

img.tall {
 width: 60%;
 clear: both;
}

img.detail {
 width: 15%;
 clear: both;
}

img.endmark {
 width: 40%;
 clear: both;
}

img.circle {
 width: 60%;
 clear: both;
 border-radius: 50%;
}

img.floatright {
 width: 45%;
 float: right;
 margin: 10px; 
}

img.floatleft {
 width: 45%;
 float: left;
 margin: 10px;
}


/* useful for initials at start of chapters */
img.dropcap {
 width: 20%;
 float: left; 
 margin: 2px;
}

img.dropcircle {
 width: 25%;
 border-radius: 50%;
 float: left; 
 margin: 10px;
}

/* some relative sizes for floated images */
img.thirty {
 width: 30%;
}

/* useful for colophon on title page */
img.fifteen {
 width: 15%;
}


/* layout for galleries of illustrations ; standardize fixed height for all images */

img.gallery {
 height: 200px;
}

table.gallery tr td.subject {
 text-align: center;
 font-size: .8em;
 font-style : italic;
 color: grey;
}

table.gallery tr td.artist {
 text-align: center;
 font-size: .8em;
 color: grey;
}

table.gallery tr td.creation {
 text-align: center;
 font-size: .8em;
 color: grey;
}


/* layout for tables giving epigraphs & attributions, quotations & location */
table.tall {
 margin-left:auto; 
 margin-right:auto;
 width: 60%;
}

table.wide {
 margin-left:auto; 
 margin-right:auto;
 width: 80%;
}

table.full {
 margin-left:auto; 
 margin-right:auto;
 width: 100%;
}

/* layout for two column tables of equal width, e.g Keo the Otter */
table.equal-width td { 
 margin-left:auto; 
 margin-right:auto;
 width: 50%; 
}

table tr td.img, td.caption {
 text-align: center;
}

table tr td.epigraph, td.quotation {
 text-align: left;
}

table tr td.attribution {
 text-align: right;
}

table tr td.source, td.location {
 text-align: right;
 vertical-align: bottom;
}

/* layout for tables of contents, lists of illustrations, and poetry */
table.center, table.gallery, hr.center {
 margin-left:auto; 
 margin-right:auto;
}

table.right {
 margin-left:auto;
 margin-right:6px;
 }

table.left {
 margin-right:auto;
 margin-left:6px;
}

table {
display: table;
border-collapse: separate;
border-spacing: 5px;
}

th, td { padding: 5px; }

th, td { vertical-align:top; }

th.topleft, td.topleft
 {
 text-align: left;
 vertical-align:top;
}

th.top, td.top
 {
 vertical-align:top;
}

th.bottom, td.bottom
 {
 vertical-align:bottom;
}

/* useful for layout of tables of contents and illustrations */

table tr td.number {
 padding-right:10px;
 text-align: right;
}
table tr td.title {
 text-align: center;
}
table tr td.content {
 text-align: left;
}
table tr td.page {
 text-align: right;
 vertical-align: bottom;
}
table tr td.facing {
 text-align: right;
 vertical-align: top;
}
table tr td.year {
 text-align: right;
 vertical-align: bottom;
}

/* create a table with borders */
/* used in bly/world/world.html */
table.borders {
 border-collapse: collapse;
 padding: 25px;
}
td.borders, th.borders {
 border: 1px solid black; 
}
td.borders-right, th.borders-right {
 border: 1px solid black; 
 text-align: right;
}
/* create a table with centered bottom-aligned solid-sided cells */

table.adami {
 border-collapse: collapse;
 text-align: center;
 vertical-align: bottom;
 padding: 25px;
}
td.adami, th.adami {
 border: 1px solid black; 
 text-align: center;
 vertical-align: bottom;
}

/* create a page counter for the book */
/* previously used counter-reset in this call */
BODY {
 counter-set: page-counter; 
}

/* pagereset is useful where a page indicator must be reset to its original value */
/* <HR class="pagereset" style="counter-reset: page-counter 374"> in html will reset to a given value */
HR.pagereset { 
 counter-reset: page-counter 0; 
 margin-bottom: 2px;
}

hr.pagination {
 margin-bottom: 2px;
}

.pagecounter, .pagenumber, .pageroman, .titlepage, .dedication, .pagemissing, .pagedisplay, .titlepagedisplay, .frontispiece, .verso, .facingpage, .cover, .jacket, .endpaper, .chapter {
font-style : italic;
color: grey;
}

/* CASES WHERE THE PAGE INDICATOR IS INCREMENTED */
/* pagecounter increments the page-counter */
/* but does not display the number */
/* useful for pages which did not show a page number */
.pagecounter:before {
 content: "\[Page\] ";
 counter-increment: page-counter;
}

/* pagenumber increments the page counter */
/* and displays the number as alphanumeric e.g. "14" */
/* useful if the page number was shown in the original book */
.pagenumber:before {
 content: "\[Page " counter(page-counter) "\]";
 counter-increment: page-counter;
}


/* pageroman increments the page counter */
/* and displays the number as a lower case roman numeral */
/* useful if a roman page number was displayed in the original book */
.pageroman:before {
 content: "\[Page " counter(page-counter, lower-roman) "\]";
 counter-increment: page-counter;
}

/* in many books, the page count starts with the title page and continues on */
.titlepage:before {
 content: "\[Title Page\] ";
 counter-increment: page-counter;
}

.dedication:before {
 content: "\[Dedication\] ";
 counter-increment: page-counter;
}

/* CASES WHERE THE PAGE INDICATOR IS NOT INCREMENTED */
/* pagedisplay is useful where a page indicator is needed */
/* but the page counter is not incremented */
.pagedisplay:before {
 content: "\[Page\] ";
}

/* if a book doesn't "count" the title page and verso, use this alternate form instead */
.titlepagedisplay:before {
 content: "\[Title Page\] ";
}

/* rather than separate displays for verso and recto */
/* use this in cases where a blank leaf is not counted */
.verso:before {
 content: "\[Overleaf\] ";
}

/* facingpage is useful where an illustration appears on a facing page */
/* but the page counter is not incremented */
.facingpage:before {
 content: "\[Facing Page\] ";
}

.frontispiece:before {
 content: "\[Frontispiece\] ";
}

.jacket:before {
 content: "\[Dust Jacket\] ";
}

.endpaper:before {
 content: "\[End Paper\] ";
}

.cover:before {
 content: "\[Cover\] ";
}

/* useful for chapters in which pagination is not indicated */
.chapter:before {
 content: "\[Chapter\] ";
}

/* warning paragraph for standard set of issues */
p.warning {
 width:80%;
 margin-top: 1em;
 margin-left:10%;
 text-align:left;
 text-indent: 0px;
 background : #d6cbd3;
 font-size: small;
 color: DarkBlue;
 padding: 5px;
 border : double;
}

.warning:before {
 content: "WARNING: This book is part of a historical collection and may include stereotyping based on ";
}

.warning:after {
 content: " and other characteristics that shape society.";
}


/* xx-warning paragraph for nonstandard issues */
p.warning-xx {
 width:80%;
 margin-top: 1em;
 margin-left:10%;
 text-align:left;
 text-indent: 0px;
 background : #d6cbd3;
 font-size: small;
 color:  DarkRed;
 padding: 5px;
 border : double;
 border-color : black;
}

.warning-xx:before {
 content: "WARNING: This book is part of a historical collection and may include disturbing text or images relating to ";
}

.warning-xx:after {
 content: ".";
}


/* to create an anchor on a page without changing tne sample text displayed */
/* use span with just an id= <span id="366">sample text</span> */

/* specialize line widths */

hr.ten {
 width:10%;
 margin-left:45%;
 text-align:left;
}

hr.thirty {
 width:30%;
 margin-left:35%;
 text-align:left;
}


hr.forty {
 width:40%;
 margin-left:30%;
 text-align:left;
}

hr.fifty {
 width:50%;
 margin-left:25%;
 text-align:left;
}

hr.eighty {
 width:80%;
 margin-left:10%;
 text-align:left;
}

hr.ninety {
 width:90%;
 margin-left:5%;
 text-align:left;
}


/* I added geomapping attributes to span class=geocode [not displayed] */
/* these no longer are useful due to death of mapping software */

/* must change instances of location= to title= to pass validator, remove others */
span.geocode.location {}
span.geocode.arrival {}
span.geocode.departure {}

/* Specialize to fit screen size section */


@media only screen and (min-width: 480px) {
 header h1 {
 font-size: 1.4em;
 }
 h2 {
 font-size: 1.2em;
 }
 h3 p footer {
 font-size: 1em;
 }
}
@media only screen and (min-width: 768px) {
 header h1 {
 font-size: 1.8em;
 }
 h2 {
 font-size: 1.4em;
 }
 h3 p footer {
 font-size: 1.2em;
 }
}
@media only screen and (min-width: 1140px) {
 header h1 {
 font-size: 2.2em;
 }
 h2 {
 font-size: 1.8em;
 }
 h3 p footer {
 font-size: 1.4em;
 }
}