p.
/* 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 : 16px;
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 : 0;
border-top : 1px solid #ccc;
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 {
    padding-top: 10px;
}

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

footer {
    padding-bottom: 10px;
}

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;
}

header h1 {
  background: url('../_graphics/celebration-line.gif');
  line-height: 2.2em;
  font-family: 'Lucida Calligraphy', 'Times New Roman', serif;
  font-weight: bold;

}

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

cite {
  font-style: italic;
}

i {
  font-style: italic;
}

/* Navigation */

section {
  clear: both;
}


/* Formatting for book sections */

section h1, h2, h3 {
  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 */

/* 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 {
  text-align: center;
}

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

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

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

p.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 {
  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: Grey;
}

/* define a div to group paragraphs within a letter */
div.letter {
  clear: both;
  margin-top: 2em;
  margin-bottom: 3em;
  color: Grey;
}

/* 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 */

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;
}

#metadata {
  text-align: center;
}


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: 30%;
   clear: both;
}

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

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

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


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

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%;
}

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;
}

// cellpadding 
th, td { padding: 5px; }

/* default to top, allow resets */
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 {
   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 page counter for the book */

BODY {
    counter-reset: page;    
}

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


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

.dedication:before {
  content: "\[Dedication\] ";
}

.preface:before {
  content: "\[Preface\] ";
}

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

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

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

.contents:before {
  content: "\[Contents\] ";
}

.illustrations:before {
  content: "\[Illustrations\] ";
}

/* 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 these alternate forms instead */
/* counter-reset will not work for this because of the scoping rules applied to sections */
.titlepagedisplay:before {
  content: "\[Title Page\] ";
}

.versodisplay:before {
  content: "\[Verso\] ";
}

/* pagecounter is used to increment the page counter in cases where the actual page number was not displayed in the original book */
.pagecounter:before {
  content: "\[Page\] ";
  counter-increment: page;
}

/* pagenumber is used to increment the page counter in cases where the actual page number was displayed in the original book */
.pagenumber:before {
  content: "\[Page " counter(page) "\]";
  counter-increment: page;
}

/* NEEDS a function to convert to and display Roman numeral strings */
/* pageroman is used to increment the page counter in cases where the actual page number was displayed in the original book */
.pageroman:before {
  content: "\[Page " counter(page, lower-roman) "\]";
  counter-increment: page;
}

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

.verso:before {
  content: "\[Verso\] ";
  counter-increment: page;
}

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

/* 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 add geomapping attributes to span class=geocode [not displayed] */
/* could create these in a dtd ? */

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;
   }
   footer h1, h3 p {
     font-size: 1em;
   }
}
@media only screen and (min-width: 768px) {
   header h1 {
     font-size: 1.8em;
   }
   h2 {
     font-size: 1.4em;
   }
   footer h1, h3 p {
     font-size: 1.2em;
   }
}
@media only screen and (min-width: 1140px) {
   header h1 {
     font-size: 2.2em;
   }
   h2 {
     font-size: 1.8em;
   }
   footer h1, h3 p {
     font-size: 1.4em;
   }
}