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

/* This is special styling for small screen, mostly mobile devices. */

/* Bigger font throughout for readability. */

body {
	font-size: 100%;	
}

/* 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: none;
	width: 90%;
	text-align: left;
}

#rightnav {
	float: none;
	width: 100%
}

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

/* Remove the crayon background from the body. */
body.level2 {
	background-image: none;	
}

/* 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: none;
	padding: 0;
}

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

#logo {
	width: 90%;
	float: none;
	margin: 0 auto;
}

#logo img {
	width: 100%;	
}

/* Widen blockquotes for readability. */

blockquote.left, blockquote.right {
	width: 65%;
	float: none;
	margin: inherit auto;
}

/* Take bookdetails block out of flow, widen to full width. */

#main img.flowedright, #main div.flowedright {
	width: 85%%;
	float: none;
	margin: 1em auto;
}

/* Widen categories div and take out of float, for readability */

#main > div.categories {
	float: none;
	width: 85%;
	margin: inherit 0;
	padding: 5%;
	font-size: 1em;
}

/* Adjust bottom of page reviews block. */
#main div.reviews {
	margin: 1em auto;
}

/* Special styling for the My Books page grid. */
div.mybooks {
	width: 85%;	
}

div.mybooks.left, div.mybooks.right {
	float: none;
	clear: both;
	margin: auto;	
}

/* 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: 100%;	
}

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

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

body.level2 #main {
	width: 100%;
	clear: both;
}

body.level3 #main {
	width: 100%;
	clear: both;
}


/* 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: none;
	width: 100%;
}

body.level2 .navstack-container {
	background-image: none;	
}

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


.navstack {
	float: none;
	width: 100%;
}


/* Part of the navstack, the sidenav holds navigation links, social media links, and, potentially, other widgets */
#sidenav {
	float: none;
	clear: both;
	width: 80%;
	height: 100%;
	background-image: url(../img/ListPaper.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
	margin: 1em 0 0 0;
	padding: 3em 10% 30em 10%;
}

body.level3 .navstack-container #sidenav {
	width: 80%;
}


.sidenav-widget {
}

.widget {
	padding: 1em;	
}

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

/* Shrink down social media logos to sleeker size. */

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

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

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

.widget img.social-icon-center {
	clear: none;
	float: left;
	margin-left: 0;
}



/* 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: none;	
	padding: 0 1em;
}

.footer-boxes {
	float: none;	
	padding: 0 1em;
}

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

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

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