@charset "UTF-8";
/* CSS Document */


/* Set some whole site styling. */
html, body {
	width: 100%;
	color: black;
}

body {
	font-size: 100%;
	font-family: "Courier New", Courier, monospace;
	position: relative;
	margin: 0;
	border: 0;
	padding: 0;
}

body.level2 {
	background-repeat: repeat-y;
	background-position: right top;
	background-size: 35% auto;
	background-image: url(../img/BrownPaperBackground.jpg);	
}

hr {
	border-top: thick dotted;
}

h6 {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 0;
	padding-bottom: 0;
	border-top: thick dotted;
	width: 100%;
}


/* Set navstack background image on level2 pages by section (bio, books, etc.). */
/* Only have the one for the bio section now. Add in others later. */
body.level2.bio .navstack-container .navstack {
	background-image: url(../img/BioBackground.png);	
}

body.level2.books .navstack-container .navstack {
	background-image: url(../img/BooksBackground.png);	
}

body.level2.readerswriters .navstack-container .navstack {
	background-image: url(../img/ReadersWritersBackground.png);	
}

body.level2.visitstalks .navstack-container .navstack {
	background-image: url(../img/VisitsTalksBackground.png);	
}

body.level2.whatsnew .navstack-container .navstack {
	background-image: url(../img/WhatsNewBackground.png);	
}

/* Consistent Color throughout site as accent. Was originally #701828. Now experimenting with others. */
h1, h2, h3, h4, h5, h6, hr, span.inline-title, p.attribution, #main h1 a, #main h2 a, #main h3 a, #main h4 a, #main h5 a, #main h6 a, #leftnav p a:hover, #rightnav p a:hover, #sidenav p a:hover, #main a:hover {
	color: #104357;
}

#footer-container {
	background-color: #104357;	
}


blockquote, div.reviews, div.categories {
	background-color: #bcdbe6;	
}


/* Shortcut classes to handle ad hoc styling choices. */
.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* This section is specific to the big main page, which has a large photo centered, and links along both sides. */
/* Note for further refinement... I have some a styling for the main section in here. Pull it out to its correct location later. */

#leftnav {
	float: left;
	width: 20%;
	text-align: right;
}

#rightnav {
	float: right;
	width: 20%
}

#leftnav p, #rightnav p {
	font-size: 1.5em;
	padding-top: 30%;	
}

#leftnav p a, #rightnav p a, #sidenav p a, #main a {
	color: black;	
}

#leftnav p a, #rightnav p a, body.level1 #main a {
	font-weight: bold;
}

#leftnav p a:hover, #rightnav p a:hover, #sidenav p a:hover, #main a:hover {
	font-weight: bold;
}

#leftnav, #rightnav, #sidenav {
}

/* Set styling for the main content section. This is used on the front page to hold the big image, and elsewhere throughout the site to hold main body content. */

#main {
	float: left;
	padding: 0;
}

#main>div, #main > p, #main > a, #main h1, #main>h2, #main>h3, #main>h4, #main>h5, #main > small {
	padding: 0 0 0 5%;	
}

#main > h6 {
	padding: 0;
	margin: 0 0 0 5%;	
}

#main > small {
	margin-bottom: 0;	
}

#main>ol, #main>ul  {
	padding: 0 0 0 15%;	
}

#main>h1 a, #main>h2 a, #main>h3 a, #main>h4 a, #main>h5 a, #main>h6 a {
	text-decoration: none;
}

#main img.flowedright, #main div.flowedright {
	width: 30%;
	float: right;
	clear: right;
	margin-left: 1em;
	margin-bottom: 1em;
}

#main div.flowedright img {
	width: 100%;
	float: left;
	padding: .5em 0;	
}

#main div.flowedright img.small {
	width: 70%;
	padding: .5em 15%;
}

#main div.flowedright p {
	text-align: center;
	font-size: .75em;	
}

#main #bookdetails p {
	text-align: left;
	margin: .5em 0;	
}

#main div.center {
	width: 70%;
	margin 1em auto 1em auto;	
}

#main div.center img {
	width: 100%;
	margin-bottom: 0;
}

#main div.center p {
	width: 100%;
	text-align: center;	
	margin-top: 0;
}

#logo {
	width: 30%;
	float: left;
	padding: 0 1em;
}

#logo img {
	width: 100%;	
}

span.inline-title {
	font-weight: bold;	
}

div.stanza {
	margin-bottom: 1em;	
}

div.stanza p {
	margin: 0 inherit;	
}

p.quote {
	margin-bottom: 0;	
}

p.attribution {
	margin-top: 0;
	text-align: right;	
	font-weight: bold;
}


/* Blockquotes flowed in body copy, with rest at bottom with special styling. */
blockquote {
	width: 33%;
	padding: .75em;
	border-radius: 1em;	
}

blockquote.left {
	float: left;
}

blockquote.right {
	float: right;
}

blockquote img {
	width: 100%;
}

blockquote img+a>p {
	text-align: center;	
}

/* And reviews quoted at bottom, full-width */

#main div.reviews {
	width: 90%;
	margin: 1em 5%;
	padding: 1em;
	border-radius: 1em;
	clear: both;
}

#main div.reviews > p {
	margin: 0;
	padding: .5em 0;
}

/* And categories block on blog page. */

#main div.categories {
	float: right;
	clear: right;
	margin: 1em 0 1em 1em;
	padding: 1em;
	border-radius: 1em;
	font-size: .75em;
}

/* Videos */
/* This solution from http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* This adjusts the size and other styling of the main content section dependent on whether we are using the template of the top level (front page), second level (primary section pages, such as "About Me" or "My Books"), or third level (deeper content, such as a page about an individual book, where we use a simpler style). */

body.level1 #main {
	width: 55%;	
}

body.level1 #logo {
	width: 50%;
	float: none;
	padding: 0 auto;
	margin: 0 auto;	
}

body.level1 #main div {
	width: 100%;
	padding: 0 5%;
}

body.level1 #main img {
	width: 100%;
}

body.level2 #main {
	width: 55%;
}

body.level3 #main {
	width: 65%;
}

body.level2 #main h2, body.level3 #main h2 {
	clear: left;	
}

body.level2 #logo, body.level3 #logo {
	width: 50%;	
}


/* Special styling for the My Books page grid. */

div.mybooks {
	width: 40%;	
}

div.mybooks.left {
	float: left;
	clear: left;
}

div.mybooks.right {
	float: right;	
}

div.mybooks img {
	width: 100%;	
}

div.mybooks p {
	min-height: 3em;	
}

/* The navstack holds the collage of elements including the crayon background, image collage, and the side navigation against a lined paper background in bookmark dimensions. */
.navstack-container {
	float: right;
	width: 40%;
}

body.level3 .navstack-container {
	width: 25%;	
}

.navstack {
	float: right;
	width: 100%;
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 100% auto;
}


/* Part of the navstack, the sidenav holds navigation links, social media links, and, potentially, other widgets */
#sidenav {
	float: left;
	width: 40%;
	min-height: 45em;
	background-image: url(../img/ListPaper.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100%;
	margin: 15em 0 0 0;
	padding: 1em 2em 2em 2em;
}

body.level3 .navstack-container #sidenav {
	width: 60%;
	margin-top: 10em;
}

.widget {
	padding: 1em;	
}

.widget a img {
	padding: 0 0 .5em 0;	
	width: 100%;
	margin: auto;
}

.widget img.social-icon-left, .widget img.social-icon-right, .widget img.social-icon-center {
	width: 45%;	
}

.widget img.social-icon-left {
	float: left;
	clear: left;
}

.widget img.social-icon-right {
	float: right;	
}

.widget img.social-icon-center {
	clear: both;
	float: left;
	margin-left: 30%;
}

/* Style the large footer. Include navigation links, social media links, copyright notice, and other widgets. */
#footer-container {
	width: 100%;
	color: #faf4e8;
	clear: both;
	
}

#footer {
	padding: 3em 5em;
	font-size: .75em;
}

.footer-links {
	float: left;	
	padding-right: 5em;
}

.footer-boxes {
	float: right;	
	padding-left: 5em;
}

#footer-copyright {
	clear: both;
	text-align: center;
}

#footer-copyright p {	
	padding-top: 2em;
}

#footer p {
	margin-top: .5em;
	margin-bottom: .5em;
}

#footer a {
	color: white;
	text-decoration: none;
}

#footer a:hover {
	font-weight: bold;
	
}

/* For Wordpress. */

.alignleft {
	float: left;
	margin: 0 1em 1em 0;
	display: inline;
}

.alignright {
	float: right;
	margin: 0 0 1em 1em;
	display: inline;
}