/*
Theme Name: Catherine Hunter custom theme
Author: Melody Morrissette
Author URI: http://melodymorrissette.com
Description: Custom theme.
Version: 1.0
*/

/* RESET ALL DEFAULT BROWSERS STYLES.*/

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* END RESET */



strong {
	font-weight:bold;
}
em {
	font-style:italic;
}
a {
	color:#434343; 
	text-decoration:none;
}
.book-details a:hover {
	border-bottom: 1px solid #434343;
}
span.small-caps {
	font-size: 85%;
}
body {
	background-color: #52868c;
	padding:1rem;
	font-size:1rem;
	line-height:1.4;
	color:#434343;
	font-family:"ff-tisa-web-pro",Georgia,serif;
	font-weight:400;
}
@media screen and (min-width: 28rem) {
	body {
		padding:1.0625rem 1.5rem;
	}
}
#wrapper {
/* outlines everything to keep within a max width and centered. */
	max-width:fit-content;
	
	margin:0 auto;
}
nav#to-contents {
	height:1.875rem;
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
}
nav#to-contents a {
	color:#fff;
}

.main {
/* everything except the 2 navs */
	border: 0.375rem solid #e5e5e5;
	padding: 1.875rem 1.5rem 1.875rem 1.25rem;
	
	display: grid;
	grid-template-columns:1fr 1fr;
	gap: 2rem;
	background-color:#ffffff;
}
@media screen and (min-width: 28rem) { 
	.main {
			padding: 2.875rem 2.5rem 2.875rem 2.25rem;
	}
}
.header {
grid-column: 1 / span 2;
}
.banner, .banner-homepage {
grid-column: 1 / span 2;
}
.book-info, .about {
grid-column: 1 / span 2;
}
.book-details {
grid-column: 1 / span 2;
display: grid;
/* grid-template-columns: 180px minmax(180px, 1fr); */
grid-template-columns: repeat( auto-fit, 180px );
gap: inherit;
}
.toc, .note-excerpts {
	grid-column: 1 / span 2;
}

.notes-list {
grid-column: 1 / span 2;
}
@media screen and (min-width: 50rem) {
	.notes-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns:1fr 1fr 1fr;
	}
	.main {
		row-gap: 4.75rem;
	}
}
@media screen and (min-width: 65rem) {
	.main {
	grid-template-columns:repeat(12, minmax(2rem, 5rem));
	
	}
	.header {
	grid-column: 1 / span 12;
	}
	.banner, .banner-homepage {
	grid-column: 1 / span 12;
	}
	.book-info {
	grid-column: 1 / span 8;
	}
	.about {
	grid-column: 1 / span 7;
	}
	.toc {
	grid-column: 9 / span 4;
	}
	.book-details {
	grid-column: 10 / span 3;
	display: block;
	}
	.notes-list {
	grid-column: 1 / span 12;
	}
	.note-excerpts {
	grid-column: 1 / span 12;
	}
	
}
@media screen and (min-width: 85rem) {
	.book-details {
	grid-column: 10 / span 2;
	display: block;
	}
}

.header {
/* running header */
	min-height:1.875rem;
	border-bottom:0.0625rem solid #52868c;
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
	display: flex;
    justify-content: space-between;
	margin-bottom: .75rem;
	flex-wrap: wrap;
	align-items: end;
	padding-bottom: .5rem;
}
p.running-header-left {
	font-style:italic;
	max-width: 80%;
	text-wrap: balance;
}
p.running-header-right {
	
}
/* SET DEFAULT STYLES FOR THE BANNER */

.banner {
	min-height:27.8125rem;
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
	overflow: hidden;
}
.banner-homepage {
	min-height:20.25rem;
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
	overflow: hidden;
	padding-top:3.75rem;
}
.banner div:first-child {
	/* The image */ 
	height: 299px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
}
.banner div:last-child {
	/* The text */ 
    padding-bottom: 1.875rem;
    padding-top: 2.875rem;
}
/* HOMEPAGE AND NOTES BANNERS ARE DIFFERENT */
.banner.notes {
	display: block;
	min-height:10.5625rem;
	padding-right:33%;
	padding-top:4.6875rem;
}
@media screen and (min-width: 55rem) {
	.banner {
		/* Side by side */
		display: grid;
		grid-template-columns: 1fr 2fr;
		background-color: #f1f1e9;
	}
	.banner div:first-child {
		/* The image */ 
		height: 100%;
        position: relative;
        left: -35px;
        padding-left: 35px;
        transform: rotate(-6deg);
        background-repeat: no-repeat;
        background-position: center right;
        background-size: cover;
        width: 100%;
        outline: 2px solid #e7e7df;
        outline-offset: 24px;
        padding-bottom: 15%;
        align-self: center;
	}
	.banner div:first-child:after {
		/* add another border */
		content: "";
        display: block;
        height: 100%;
        position: relative;
        width: 100%;
        /* outline: 2px solid #e7e7df;
        outline-offset: 22px; */
        border-right: 2px solid #e7e7df;
        padding-bottom: 15%;
        padding-right: 12px;
	}
	.banner div:last-child {
		/* The text */ 
		padding-top:7.25rem;
		padding-right:5%; 
		padding-left:15%; 
		padding-bottom: 4.875rem;
	}
	.banner-homepage {
		background-position:center left;
		background-size: cover;
		padding-left:3.75rem;
		min-height:27.25rem;
		padding-right:53%;
		padding-top:5.75rem;
	}
	.banner.notes {
		padding-left:3.75rem;
		min-height:16.5625rem;
		padding-right:33%;
		padding-top:4.6875rem;
		background-color: #f1f1e9;
	}
	.banner-homepage  {
		background-image: url('images/banner-homepage-1182.jpg');
	}
}
@media screen and (min-width: 70rem) {
	.banner div:last-child {
		/* The text */
		padding-left:13%; 
		padding-right:10%; 
	}
}


/* SET THE BACKGROUND IMAGES FOR EACH PAGE'S BANNER */
.banner.seeing-you-home div:first-child {
	background-image: url('images/seeing-you-home-600.jpg');
}
.banner.after-light div:first-child {
	background-image: url('images/after-light-399.jpg');
	background-position: top left;
}
.banner.queen-of-diamonds div:first-child {
	background-image: url('images/queen-of-diamonds-600.jpg');
}
.banner.first-early-days div:first-child {
	background-image: url('images/first-early-days-of-my-death-600.jpg');
}
.banner.dead-of-midnight div:first-child {
	background-image: url('images/dead-of-midnight-600.jpg');
}
.banner.where-shadows-burn div:first-child {
	background-image: url('images/where-shadows-burn-600.jpg');
}
.banner.st-boniface div:first-child {
	background-image: url('images/st-boniface-elegies-600.jpg');
}
.banner.latent-heat div:first-child {
	background-image: url('images/latent-heat-600.jpg');
}
.banner.lunar-wake div:first-child {
	background-image: url('images/lunar-wake-600.jpg');
}
.banner.necessary-crimes div:first-child {
	background-image: url('images/necessary-crimes-600.jpg');
}
.banner.tod-um-mitternacht div:first-child {
	background-image: url('images/tod-um-mitternacht-600.jpg');
}
.banner.die-masken-des-todes div:first-child {
	background-image: url('images/die-masken-des-todes-399.jpg');
}
.banner.rush-hour div:first-child {
	background-image: url('images/rush-hour-600.jpg');
}




/* DEFAUT STYLES FOR H1 IN BANNER */
h1 {
	font-size:3.75rem;	/* mobile size */
	padding-top:0.9375rem;
	line-height:1;
	color:#658c40;
	text-wrap: balance;
}
@media screen and (min-width: 28rem) {
	h1 {
	font-size:4.75rem;	/* default small size */
	}
}
@media screen and (min-width: 34rem) {
	h1 {
		font-size:5.75rem; /* default tablet/desktop size */
	}
}
/* EACH PAGE HAS ITS OWN COLOUR AND DESKTOP FONT SIZE FOR H1 */
.banner-homepage h1 {
	color:#52868c;
}
.seeing-you-home h1 {
	color: #c44965;
}
@media screen and (min-width: 34rem) {
	.seeing-you-home h1 {
		font-size:6.25rem;
	}
}
.after-light h1 {
	color: #257a7c;
}
@media screen and (min-width: 34rem) {
	.after-light h1 {
		font-size:6.25rem;
	}
}
.first-early-days h1 {
	color: #d1412c;
}
@media screen and (min-width: 34rem) {
	.first-early-days h1 {
		font-size:4.6875rem;
	}
}
.dead-of-midnight h1 {
	color:#e56e07;
}
@media screen and (min-width: 34rem) {
	.dead-of-midnight h1 {	
	font-size: 5rem;
}
}
.where-shadows-burn h1 {
	color: #853c33;
}
@media screen and (min-width: 34rem) {
	.where-shadows-burn h1 {
		font-size:5rem;
	}
}
.latent-heat h1 {
	color:#cc5e42;
}
.st-boniface h1 {
	color:#667e8f;
}
.lunar-wake h1 {
	color:#565849;
}
@media screen and (min-width: 34rem) {
	.lunar-wake h1 {
		font-size:6.25rem;
	}
}
.necessary-crimes h1 {
	color:#5d9ea4;
}
.tod-um-mitternacht h1 {
	color:#23507d;
	font-size:4rem;
}
@media screen and (min-width: 34rem) {
	.tod-um-mitternacht h1 {
		font-size:4.75rem;
	}
}
.die-masken-des-todes h1 {
	color:#69ae82;
}
@media screen and (min-width: 34rem) {
	.die-masken-des-todes h1 {
		font-size:5.25rem;
	}
}
.rush-hour h1 {
	color:#9f2935;
}
.notes h1 {
	color:#52868c;
}
@media screen and (min-width: 34rem) {
	.notes h1 {
		font-size:5rem;	
	}
}

.notes .tagline {
	font-size:1.125rem;
	font-weight:bold;
	font-style:italic;
	padding-top:0.75rem;
}
h2 {
	font-weight:bold;
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
	font-size:1.875rem;
	padding-bottom:1em;
	text-wrap: balance;
}
p.award {
	padding-top:1.25rem;
	font-size:1.25rem;
	max-width: 65rem;
	text-wrap: balance;
}
p.tagline {
	padding-top:1.25rem;
	font-size:1.5rem;
}
div.book-info {
	max-width: 60rem;
}
div.desc {
	font-size:1.275rem;
	padding-bottom:5.3125rem;
}
@media screen and (min-width: 40rem) {
	div.desc {
		font-size:1.575rem;
	}
}
@media screen and (min-width: 55rem) {
	div.desc {
		font-size:1.675rem;
	}
}

div.desc p {
	margin-bottom:1em;
}
div.quotes {
	border-top: 0.0625rem solid #d3c47f;
	background-image: url('images/decorative-quote-mark.png');
	background-repeat:no-repeat;
	background-position: 0.5625rem 4.4375rem;
	padding-left:6.25rem;
	padding-bottom:4.375rem;
}
div.no-border {
	border:none;
}
p.quote {
	font-size:1.275rem;
	padding-top:3.8125rem;
}
@media screen and (min-width: 40rem) {
p.quote {
	font-size:1.5rem;
}
}
p.quote-author {
	text-transform:uppercase;
	padding-top:0.75rem;
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
}
p.quote-publication {
	padding-top:0.625rem;
	font-size:1.125rem;
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
}
div.book-details {
	/* sidebar */
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
	padding-bottom: 2.75rem;
}
p.publisher {
	padding-top:1.25rem;
	padding-bottom:2.8125rem;
}
h3 {
	font-weight:bold;
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
	text-wrap: balance;
}
h4 {
	padding-top:1.5rem;
	color: #52868c;
	font-style:italic;
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
	font-weight:bold;
	text-wrap: balance;
}
div.book-details ul.bulleted li {
	padding-left:1.5625rem;
	padding-top:0.5rem;
	background-image: url('images/bullet.gif');
	background-repeat:no-repeat;
	background-position: 0.5rem 1.1875rem;
	font-size:1.125rem;
}

/* HOMEPAGE */

ul.toc {
	font-size:1.25rem;
}
ul.toc ul {
	padding: 1.25rem 0;
	font-weight:bold;
}

li.toc-front-back {
	padding-bottom:1.25rem;
	font-style:italic;
}

div.toc {
	/* sidebar */
	padding-bottom: 5.3125rem;
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
	line-height:1.6;
}

/* APPLY CSS DOT LEADERS TECHNIQUE TO TOC */
ul.toc {
    overflow-x: hidden;
    }

li.leader:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "}
li.leader span:first-child {
    padding-right: 0.33em;
    background: white}
li.leader span + span {
    float: right;
    padding-left: 0.33em;
    background: white}

.note-excerpts {
	/* on homepage */
	clear: both;
	border-top: 0.0625rem solid #d3c47f;
	padding: 2rem 0 2rem 0;
	font-size:1.125rem;
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
}
.note-excerpts h2 {
	color: #52868c;
	font-size:1.625rem;
	padding-bottom:0.5rem;
}
.note h2, .note h2 a {
	color: #52868c;
}
.note-excerpt {
	padding-top:3.625rem;
	line-height:1.6;
}

.note-excerpt h3 {
	color: #52868c;
}

/* NOTES */
div.note {
	font-size:1.25rem;
	padding-top:4.375rem;
	padding-bottom:4.375rem;
	border-bottom: 0.0625rem solid #d3c47f;
	max-width:48.75rem;
}
@media screen and (min-width: 40rem) {
div.note {
	font-size:1.5rem;
}
}
@media screen and (min-width: 50rem) {
div.note {
	font-size:1.875rem;
}
}
p.more-notes {
	text-align: right;
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
	width:48.75rem;
	padding-top:4.375rem;
	padding-bottom:4.375rem;

}
p.all-notes { /*homepage*/
	text-align: right;
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
	padding-top:4.375rem;
	padding-bottom:4.375rem;
	padding-right:2.125rem;

}
p.back-to-notes {
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
}
div.note p {
	margin-bottom:1em;
}
div#nav-prev-next {
	margin-top:1.4375rem;
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
	font-style:italic;
	background-color: #759ea3;
}
div#nav-prev-next ul {
	display: flex;
	justify-content: space-between;
}
div#nav-prev-next a {
	display:block;
	padding-top:4.6875rem;
	padding-bottom: 4.6875rem;
	color:#fff;
	background-repeat:no-repeat;
}
a.prev {
	background-image:url('images/arrow-left.png');
	background-position:22% 75px;
	padding-left:100px;
}
a.next {
	background-image:url('images/arrow-right.png');
	/* background-position:74% 75px; */
	background-position:right 75px;
	padding-right:65px;
	text-align:right;
	margin-right: 2.725rem;
}
@media screen and (min-width: 38rem) {
	a.prev {
		padding-left:150px;
	}
	a.next {
		padding-right:90px;
		margin-right: 4.725rem;
	}
}
div#nav-to-contents {
	height:1.875rem;
	font-family:"ff-tisa-sans-web-pro",Helvetica,Verdana,sans-serif;
}
div#nav-to-contents a {
	color:#fff;
}