/* remove all padding, borders, margins */
html, body, p, a, div, img{margin: 0;padding: 0; border: 0;}

body{
	background-image: url("/images/backg.jpg");
	background-color: #ffffff;
	background-repeat: repeat;
}

.indexclear {clear: both;}

/* site pic float left */
img.floatLeft { float: left;
margin: 4px; }

html{
	font-family: 'Noto Serif',Georgia,"Times New Roman",serif;
	font-size: 1em;
	color: #000000;
}
p{padding: 0 0 10px 0; line-height: 150%;}
p.intro{color: #000000;
}

/* set colors for normal links */
/* correct order is link, visited, hover then active */
a:link {color: #000000;
text-decoration: underline;}
a:visited {
text-decoration: underline;
color: #000000;}
a:hover {color: #000000;
text-decoration: underline;}
a:active {
color: #000000;
text-decoration: underline;}

h1 {
	font-family: "Cabin", Verdana, Arial, Helvetica, sans-serif;
	font-size: 2em;
	margin-top: 0px;
	padding-top: 0px;
	text-transform: uppercase;
}

.clearboth {
	clear: both;
}

#wrapper{width: 98%;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
}

#header{
	position: relative;
}

/** ------------------------------------------------------ **/
/** ------------------- header --------------------------- **/

#header-container {
	margin-bottom: 20px;
	padding-bottom: 0px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 490px;
}

#header-content {
	margin-top: 10px;
}

#header-photo {
	float: left;
}
#header-photo img {
	border-radius: 50%;
}
#header-text {
	/* float: left; */
	/* margin-left: 20px; */
	margin-top: 20px;
}
#header-text a {
	color: #000000 !important; 
	text-transform: uppercase;
	text-decoration: none;
	font-family: "Cabin", Verdana, Arial, Helvetica, sans-serif;
	font-size: 3em;
	font-weight: bold;
	margin-top: 0px;
	padding-top: 0px;
}

#header-links {
	float: right;
	margin-right: 20px;
	text-align: center;
}

/** ------------------------------------------------------ **/
/** -------------------navigation ------------------------ **/

#topnav-wrapper {
	position: relative;
	margin-left: 5%;
	margin-right: 5%;
	width: 90%;
	height: 50px;
  }

.topnav {
  border-bottom: 1px solid #cccccc;
  overflow: hidden;
	position: absolute;
	left: 47%;
	top: 0%;
    transform: translate(-50%, -50%);
	max-width: 53%;
	text-align: center;
}

.topnav a {
  float: left;
  display: block;
  color: #000000;
  text-align: center;
  padding: 14px 10px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
	  color: #999999;
	}

.topnav .icon {
  display: none;
}

#top-social-icons {
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width: 220px;
}
#top-social-icons a {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 10px;
  text-decoration: none;
}


/*content */

#content{
	width: 98%;
}

.redtext {
	color: #cc0000;
}

#pagecontent {
	width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	padding-bottom: 30px;
}
.pagecontent-text {
	background-color: #f1f1f1;
	border-radius: 15px 15px 15px 15px;
	padding: 20px;
}

#pagecontent-1col {
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	padding-top: 0px;
	text-align: center;
	width: 90%;
}

#pagecontent-2col-left {
	float: left;
	width: 40%;
	text-align: center;
}
#pagecontent-2col-right {
	float: right;
	width: 50%;
	text-align: left;
	padding: 20px;
	padding-top: 0px;
	padding-left: 6%;
}

#about-photo img {
	border-radius: 50%;
}

#home-about {
	background-color: #dddddd;
	padding: 20px;
}
#home-about h2 {
	text-transform: uppercase;
}

.home-books {
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	width: 580px;
}
.home-book-cover {
	float: left;
	margin-right: 4%;
	width: 30%;
}
.home-book-text {
	float: left;
	width: 66%;
}

#home-more-books {
	width: 510px;
	margin-left: auto;
	margin-right: auto;
  }

#home-free-book {
	width: 580px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.book-title {
	font-family: "Raleway", Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
}
.buttonContact {
	background-color: #04AA6D;
	border: none;
	border-radius: 12px;
	color: #ffffff !important;
	display: inline-block;
	font-size: 16px;
	font-family: "Cabin", Verdana, Arial, Helvetica, sans-serif;
	margin: 4px 2px;
	padding: 20px;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
}
.buttonDownload {
	background-color: #04AA6D;
	border: none;
	border-radius: 12px;
	color: #ffffff !important;
	display: inline-block;
	font-size: 16px;
	font-family: "Cabin", Verdana, Arial, Helvetica, sans-serif;
	margin: 4px 2px;
	padding: 20px;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
}

#foot{
	padding-top: 10px;
	padding-bottom: 20px;
	text-align: center;
	width: 100%;
}

#foot-copyright {
	float: left;
	margin-bottom: 10px;
	padding-left: 1%;
	text-align: left;
	width: 32%
}
#foot-nav {
	float: right;
	padding-right: 1%;
	text-align: right;
	width: 66%
}

#foot-nav-links {
	list-style: none;
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px;
}

#foot-nav-links li {
	display: inline;
	margin: 0px; 
	font-size: 1em;
}
#foot-nav-links li a, #foot-nav-links li a:visited {
	color: #000000;
	font-size: 1em;  
	padding-bottom: 0px;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 0px;
	text-decoration: none;
}
#foot-nav-links li a:hover, #foot-nav-links li a:active {	
	color: #777777;
	text-decoration:none;
}

#foot-nav-social li {
	display: inline;
	margin: 0px; 
	font-size: 1em;
}
#foot-nav-social li a, #foot-nav-social li a:visited {
	padding-bottom: 0px;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 0px;
}
#foot-nav-social li a:hover, #foot-nav-social li a:active {	
	color: #777777;
}

#books-page-shelf {
	margin-left: auto;
	margin-right: auto;
	width: 765px;
}

.series-page-shelf {
	margin-left: auto;
	margin-right: auto;
	width: 765px;
}

.books-list-boxes {
	float: left;
	margin-right: 70px;
  }
  .series-list-boxes {
	float: left;
	margin-right: 70px;
  }
.home-list-boxes {
	float: left;
	margin-right: 80px;
  }
  
#newsletter-image {
	  
}

	 
.book-shadow {
	filter: drop-shadow(#000000 5px 5px 10px); /* can affect z-index */
	margin-bottom: 10px;
}
  

/*responsive */
@media screen and (max-width: 1080px) {
	
	img{
		max-width: 100%;
		height: auto;
	}

	#pagecontent {
		width: 100%;
	}
	
	#pagecontent-1col {
		padding: 0px;
		text-align: center;
		width: 100%;
	}
		
	#pagecontent-2col-left {
		float: none;
		width: 100%;
		text-align: center;
	}
	#pagecontent-2col-right {
		float: none;
		width: 100%;
		text-align: center;
		padding-left: 0px;
		padding-right: 0px;
	}
	
	#newsletter-image {
		display: none;
	}
	
	.topnav {
	  border-bottom: none;
	  position: relative;
	  left: auto;
	  top: auto;
	  transform: none;
	  max-width: 100%;
  }
	/*expanded menu */
  .topnav.responsive {
	  background-color: #dddddd;
	  position: relative;
	  z-index: 10; /*so above dropshadow images */
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
    .topnav a {
		display: none;
		background-color: #eeeeee;
	}
	
	.topnav a:hover {
	  
	  color: #000000;
	}
	.topnav a.icon {
    float: right;
    display: block;
  }
  
  .books-list-boxes {
	float: none;
	margin-right: 0px;
	margin-bottom: 40px;
  }
    .series-list-boxes {
	float: none;
	margin-right: 0px;
	margin-bottom: 40px;
  }
	.home-books {
		margin-left: auto;
		margin-right: auto;
		width: 96%;
	}
  
  #home-more-books {
	width: 96%;
  }
   #home-free-book {
	width: 96%;
  }
  .home-list-boxes {
	float: none;
	margin-right: 0px;
	margin-bottom: 40px;
  }
  
  	#books-page-shelf {
		width: auto;
	}
	.series-page-shelf {
		width: auto;
	}

  #foot{
		padding-left: 2%;
		padding-right: 2%;
		width:96%;
	}
  
}

@media screen and (max-width: 700px) {
	
	#foot-copyright {
		width: 95%;
		text-align: left;
		float: none;
	}

	#foot-nav {
		width: 95%;
		float: none;
		text-align: left;
		margin-top: 20px;
	}

	#foot-nav-links li {
		display: block;
		margin-bottom: 10px;
	}
	#foot-nav-social li {
		display: inline;
	}
	
	#header-container {
		width: 96%;
	}
	#header-photo {
		float: none;
	}
	#header-text {
		float: none;
		margin-left: none;
	}
	

		
}