/* *************** DEFAULT STYLES *************** */
*

{
	font-family: Merriweather, sans-serif;
}

body {
	font-size: small;
	background-color: #FFF;
	background-repeat: no-repeat;
	padding-top: 0px;
}

html {
	margin-left: calc(100vw - 100%);
}

a:link {
	text-decoration:none;
	color: blue;
}

a:visited {
	text-decoration:none;
	color: red;
}

a:hover {
	text-decoration:none;
	color:orange;
	transition: 500ms;
}

a:focus {
	text-decoration:none;
	color: blue;
}

a:active {
	text-decoration:none;
	background-color: gray;
	color:white;
}

/* ******************************************************************************** */
/* *************** MAIN WEB CONTAINER *************** */
#container{
	width:auto;
	height:auto;
	background-color:#FFF;
	margin-top:auto;
	margin-bottom:auto;
	margin-left:auto;
	margin-right:auto;
	padding:3px;	/* 3px padding all around */
	}

/* ******************************************************************************** */
/* *************** TITLE PANE *************** */
#titlePane{
	width:auto;
	height:auto;
	/* background-color:#600018;	/* burgundy color */
	background-image: linear-gradient(#4d0013, #67001a, #800020, #9a0026); /* transition background image for title bar */
	margin-left:auto;
	margin-right:auto;
	border: 0px solid #fff;
	margin-bottom:1px;		/* leave 1px space between Title Bar & Menu Bar */
	vertical-align:middle;
	padding-top:5px;
	padding-bottom:1px;
	font-size:medium;
	color:#003;
}

#titlePane h1{
	font-family: Old Standard TT, serif;
	font-size: 5vw;			/* Make font size change with smaller screens */
	color:#fff;
	margin-top:0px;
}

/* Social Media Icons & links to my SM sites */
#social_mediaPane{
	width:90%;
	padding-top:0px;
	padding-bottom:0px;
	margin-bottom:0px;
}

/*********************************************************************************** */
/*********************************************************************************** */
/* Overlays for the social media icons to transition during hover */
.overlay-image {						/* Main container */
	position: relative;
	width: 20px;
	float: right;
}

.overlay-image .image {					/* Original image */
	display: block;
	width: 20px;
	height: auto;
}

.overlay-image .hover {					/* New overlay on hover */
	position: absolute;
	z-index: 1;
	top: 0;
	height: 20px;
	width: 20px;
	opacity: 0;
	transition: .5s ease;
}

.overlay-image:hover .hover {			/* New overlay appearance on hover */
	opacity: 1;
}


/* ******************************************************************************** */
/* *************** PREVIEW PANE *************** */
/* this is the main space on the page */
#previewPane{
	width: 80%;				/* Total width of preview pane */
	font-size: medium;
	color: #000;
	margin-left: auto;
	margin-right: auto;
	border: 0px solid #fff;	/* removed the border because it shifts the preview screen */
	margin-bottom: auto;	
	vertical-align: top;
	text-align: top;
	padding-top: 0px;
	padding-bottom: 10px;	/* a little extra padding for the 2-line below */
}

/* remove the bullets in the unordered list; set margin */
#previewPane ul {
	list-style: none; 
	padding: 0px;
	margin: 10px;
	clear: both;
}

/* CSS style for <li> text in the Preview Pane */
#previewPane li {
	text-align:left;
	font-size:small;
	font-style:normal;
}

#previewPane h1{
	font-family: Old Standard TT, serif;
	font-size: 3vw;			/* Make font size change with smaller screens */
	color:#000;
	margin-top:5px;
	margin-bottom:0px;
}

#previewPane h2{
	font-family: Old Standard TT, serif;
	font-size: 2vw;			/* Make font size change with smaller screens */
	font-style: italic;
	color:#003;
	margin-top:0px;
	margin-bottom:2px;
}

#previewPane img {
	width: 160px;
	padding: 2px;
	vertical-align:middle;
/*	border: 1px solid red; */
}


/*	Specific styles for the individual BOOK pages */
#bookPageTop {
	clear: both;
	margin: auto;
/*	border: 2px solid #ebebe0; */
/*	height: 250px; */
}

#bookPageBtm {
	position: relative;
	float: left;
	clear: both;
	margin: auto;
	padding: 10px;
/*	border: 2px solid red; */
}

/*	Specific styles for the ORDER BOOKS page */
#orderBooks {
	clear: both;
	position: relative;
/*	float: left; */
	margin: auto;
	display: block;
}

#orderBooks img {
	width: 160px;
	padding: 5px;
	margin: 10px;
}

#orderBooks h1 {
	font-family: Roboto, san-serif;
	font-size: 2.5vw;
	color: #000;
}

/* ******************************************************************************** */
/* *************** NEW BOOK ANNOUNCEMENT BOX *************** */
#newbook_box {
/*	float: left;	*/
	clear: both;
	position: relative;
	border: 1px solid #cacaca;
	padding: 5px;
	margin-top: 0px;
	width: 700px;	
	background-color: #f5f5f5; 
	color: #000030;
}

#newbook_box p{
	text-align: left;
	font-family: Arial, sans-serif;
	font-size: 14px;
/*	font-style: italic; */
	color: #000;
}

#newbook_box img {
	width: 160px;
	padding: 5px;
	margin: 10px;
}

/* ******************************************************************************** */
/* *************** BLOG BOX *************** */
#blog_box {
/*	float: left;	*/
	border: 1px solid #cacaca;
	padding: 5px;
	margin-top: 0px;
	width: 500px;	
	background-color: #f5f5f5; 
	color: #000066;
}

#blog_box p{
	text-align: left;
	font-family: Times, serif;
	font-size: 14px;
	font-style: italic;
	color: #000;
}


/*	Change from a box to no box, centered */
#share_media {
	/* border: 1px solid #ebebe0; */
	width: 210px;
	height: 40px;
	padding: 2px;
	margin: auto;
	word-spacing: 2px;
}

#share_media img {
	width: 20px;
	padding-top: 5px;
	vertical-align:bottom;
}


/* ******************************************************************************** */
/* *************** MAIN MENU BAR AT TOP OF PAGE *************** */
/* definitions for menu bar at top of page */

#menu_bar {
	color: #003;
	background-color: #003;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2px;
	padding-bottom: 2px;
	text-align: center;
}

#signup_blog_bar {
	color: #cacaca; 
	border: 1px solid #cacaca;
	padding: 5px;
	margin-top: auto;
	margin-bottom: auto;
	width: 500px;
	background-color: #f5f5f5; 
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	font-size: 20px;
}

/* Style the navigation menu */

/* Add a background to the top navigation bar */
.topnav {
	position: relative;
	background-color: #000066;	/* nav bar background color - navy blue */
	overflow: hidden;
	}
	
/* Style the navigation menu links */
.topnav a {
/*	float: left;				/* start the menu to the left */
	display: inline-block;	
	color: #3385ff;				/* text color - mid-blue */
	text-align: center;
	padding: 14px 16px;			/* vertical, horizontal */
	text-decoration: none;
	font-size: 17px;
	}

	
/* Add an orange text on mouse-over */
.topnav a:hover {
/*	background-color: #ddd;
	color: black; */
	color: #ff9900;				/* orange hover */
	transition: 500ms; 
	}
	
/* Style the active link (or home/logo) */
.topnav a:active {
	background-color: gray;
	color: white;				/* the current "active" link text color */
	}

/* Style the active link to remain "on" while on that page */	
a.active {
	text-decoration: underline;
	color: #ff9900;
}
	
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
	display: none;
}

/* **************************************************************************************** */
/* When the screen is less than 900 pixels wide, hide all links, except for the first one ("Home").
Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 900px) {
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
		float: right;
		display: block;
	}
}	

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
This class makes the topnav look good on small screens (display the links vertically instead of
horizontally) */
@media screen and (max-width: 900px) {
	.topnav.responsive {position: relative;}
	.topnav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}

#previewPane img {
	width: 120px;
	padding: 2px;
	vertical-align:middle;
/*	border: 1px solid red; */
	}
	
#share_media img {
	width: 20px;
	padding-top: 5px;
	vertical-align:bottom;	
	}
	
#previewPane figcaption {
	width: 80px;
	margin-left: 3px;  /* shift the "Read More" box over to center below the image (120px - 80px)/4  */
	border: none;
	background-image: linear-gradient(to right, #4d0013, #67001a, #800020, #9a0026);
/*	background-color: #cccccc; */
	padding: 7px;
	text-align: center;
	font-size: 10px;
/*	font-weight: bold; */
	text-decoration: none;
	color: #cccccc;
	transition: 500ms;
	}

#newbook_box {
/*	float: left;	*/
	border: 1px solid #cacaca;
	padding: 5px;
	margin-top: 0px;
	width: 500px;
	background-color: #f5f5f5;
	color: #000066;
	}
}



@media screen and (max-width: 600px) {
#blog_box {
/*	float: left;	*/
	border: 1px solid #cacaca;
	padding: 5px;
	margin-top: 0px;
	width: 275px;
	background-color: #f5f5f5;
	color: #000066;
	}

#newbook_box {
/*	float: left;	*/
	border: 1px solid #cacaca;
	padding: 5px;
	margin-top: 0px;
	width: 275px;
	background-color: #f5f5f5;
	color: #000066;
	}
	
#signup_blog_bar {
	color: #cacaca; 
	border: 1px solid #cacaca;
	padding: 5px;
	margin-top: auto;
	margin-bottom: auto;
	width: 275px;
	background-color: #f5f5f5; 
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	font-size: 15px;
	}
	
#signup_blog_bar a:link {		/* need to make sure the link changes also minimize */
	width: 275px;
	}
	
#signup_blog_bar a:visited {
	width: 275px;
	}
	
#signup_blog_bar a:hover {
	width: 275px;
	}

}






/* ******************************************************************************** */
/* *************** READ MORE Button *************** */
#more {
	display: none;
}

#more1 {
	display: none;
}

#more2 {
	display: none;
}

#more3 {
	display: none;
}

#more4 {
	display: none;
}


/* ******************************************************************************** */
/* *************** BOOK IMAGES SIDE-BY-SIDE ON HOME PAGE *************** */
figure {
	display: inline-block;
	width: 150px;
	height: 225px;
	padding: 5px;
	margin: 5px;
}

figcaption {
	width: 110px;
	margin-left: 19px;  /* shift the "Read More" box over to center below the image (150px - 100px)/2  */
	border: none;
	background-image: linear-gradient(to right, #4d0013, #67001a, #800020, #9a0026);
/*	background-color: #cccccc; */
	padding: 7px;
	text-align: center;
	font-size: 15px;
/*	font-weight: bold; */
	text-decoration: none;
	color: #cccccc;
	transition: 500ms;
}

figcaption a:link {
	text-decoration:none;
	color: #cccccc;
}
figcaption a:visited {
	text-decoration: none;
	color: #cccccc;
}

figcaption a:hover {
	text-decoration: none;
	color: orange;
	transition: 500ms;
}

/* ******************************************************************************** */
/* *************** FOOTER *************** */
#footer {
	clear: both;
/*	margin-left: auto;
	margin-right: auto;
	top: 360px;
	left: 0px;
	width: 800px; */
	color: #000;
	background-color: #FFF;
}