/* change header.php for xmas */
/*
:root {
	--nav_bg: rgb(184, 214, 183);
	--nav_highlight: rgb(164, 194, 163);
	--button: rgb(164, 194, 163);
	--nav_dark: rgb(20, 50, 20);
	--mobile_nav: rgb(20, 50, 20);
	--body_bg: rgb(156, 67, 67);
	--header_bg: rgb(156, 67, 67);
	--red_button: rgb(156, 67, 67);
	--red_button_hover: rgb(156, 67, 67);
	--button_background: rgb(195, 107, 107);
}
 */
:root {
	--nav_bg: rgb(8, 75, 89);
	--nav_highlight: rgb(158, 225, 239);
	--button: rgb(33, 103, 120);
	--link: rgb(13, 83, 100);
	--link_hover: rgb(103, 153, 170);
	--nav_dark: rgb(158, 225, 239);
	--mobile_nav: white;
	--body_bg: black;
	--header_bg: black url('../images/grunge_background_dark.png') repeat center top;
	--red_button: rgb(8, 75, 89);
	--red_button_hover: rgb(8, 75, 89);
	--button_background: rgb(8, 75, 89);
	--sans_font: "Helvetica Neue", Arial, sans-serif;
}
@keyframes fade_in {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fade_out {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes from_right {
  0% {margin-right: -200%;}
  100% {margin-right: 0;}
}
@keyframes from_left {
  0% {margin-left: -200%;}
  100% {margin-left: 0;}
}
@media screen and (max-width: 800px) {
	#body_main {
		border: none;
		max-width: 100%;
		padding: 10px;
	}
	#book_best {max-width: 80%;}
	#books {max-width: 90%;}
	#navigation {display: none;}
	div#bookcover {width: 100%;}
	div#bookdetails {
		display: block;
		margin: 0 auto;
		padding: 10px;
		width: 95%;
	}
	img.book_group {max-width: 90%;}
	p#buybutton {
		margin: 0 auto;
		width: 30%;
	}
	div#formatting_info div#kindle_layout_container, div#formatting_info div#paperback_layout_container {width: 100%;}
	div#formatting_info div#paperback_layout_container img {max-width: 75%;}
	div#formatting_info div#kindle_layout_container img {max-width: 50%;}
}

@media screen and (min-width: 801px) and (max-width: 1200px) {
	#body_main {
/* 		border: 1px solid rgb(190,190,190); */
		max-width: 80%;
		padding: 30px;
	}
	#book_best {max-width: 60%;}
	#books {max-width: 70%;}
	#mobile_nav {display: none;}
	div#bookcover {
		display: inline-block;
		float: left;
		width: 19%;
	}
	img.book_group {max-width: 60%;}
	div#bookdetails {
		display: inline-block;
		float: right;
		margin: 20px 50px;
		width: 64%;
	}
	div#formatting_info div#paperback_layout_container {
		float: right;
		margin: 15px 0 0 10px;
		width: 50%;
	}
	div#formatting_info div#kindle_layout_container {
		float: left;
		margin: 5px 10px 0 0;
		width: 30%;
	}
}

@media screen and (min-width: 1201px) {
	#body_main {
/* 		border: 1px solid rgb(190,190,190); */
		max-width: 60%;
		padding: 30px;
	}
	#book_best {max-width: 50%;}
	#books {max-width: 50%;}
	#mobile_nav {display: none;}
	div#bookcover {
		display: inline-block;
		float: left;
		width: 19%;
	}
	img.book_group {max-width: 50%;}
	div#bookdetails {
		display: inline-block;
		float: right;
		margin: 20px 50px;
		width: 64%;
	}
	div#formatting_info div#paperback_layout_container {
		float: right;
		margin: 15px 0 0 10px;
		width: 40%;
	}
	div#formatting_info div#kindle_layout_container {
		float: left;
		margin: 5px 10px 0 0;
		width: 20%;
	}
}

@font-face {
	font-family: 'xmas';
	src: url('../fonts/advent-regular-webfont.woff2') format('woff2'),
		 url('../fonts/advent-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
html, body {
	background-color: black;
	background: var(--body_bg);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0;
	overflow-x: hidden;
	padding: 0;
}

.gift {
	margin-right: 3em;
}

.hidden {
	display: none;
}

.hide {
	opacity: 0;
}

.visible{
	opacity: 1;
}

.center {
	text-align: center;
}

.double_center {
	margin-top: 1em;
	text-align: center;
}

.tree {
	color: rgb(20, 50, 20);
	font-family: 'xmas';
	font-size: 12em;
	margin-top: 50px;
}

.triple_center {
	margin-top: 2em;
	text-align: center;
}
.cover {
	border: 1px solid rgb(90,90,90);
}

.justify {
	text-align: justify;
}

a.no_underline, a.no_underline:hover {
	color: white;
	text-decoration: none;
}

.video-container {
	height:0;
	overflow:hidden;
	margin-top: 20px;
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	text-align: center;
}

.video-container iframe, .video-container object, .video-container embed {
	height:100%;
	position:absolute;
		top:0;
		left:0;
	width:100%;
}

a, a:active, a:visited {
	color: var(--link);
	font-weight: 900;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

a:hover {
	color: var(--link_hover);
	transition: all 0.3s ease-in-out;
}

a img {
	border: none;
}

span.ns_current {color: var(--nav_dark);}
span.highlight {
	color: var(--nav_bg);
	font-weight: 900;
}
span.contact_click {
	cursor: pointer;
	transition: all .2s ease-in-out;
}
span.contact_click:hover {
	opacity: 0.8;
	transition: all .2s ease-in-out;
}
#buylinks {}

h1, h2, h3, h4 {
	color: var(--nav_bg);
	font-family: var(--sans_font);
	text-align: center;
}

h3 {
	margin: 0;
}

h1#four_oh_four_header {
	border: 3px solid var(--nav_bg);
	color: var(--nav_bg);
	display: inline-block;
	font-size: 4em;
	margin: 0 auto;
	padding: 0 30px;
	width: auto;
}
#body {
	background: black url("../images/background_texture.png") repeat center;
	/* background: var(--button); */
	/* background: white url('../images/grunge_background_transparent.png') repeat center; */
	/* background: rgb(240,239,230); */
	background-size: 200px;
	padding: 0;
	margin: 0;
	text-align: center;
}
#body_main {
	background: rgba(255, 255, 255, 1);
	border-top: none;
	box-shadow: -10px 0 18px -15px rgb(50, 50, 50), 10px 0 18px -15px rgb(50, 50, 50);
	display: block;
	margin: 0 auto;
	overflow: hidden;
	text-align: left;
}
#body_main_content {margin-bottom: 2em;}
#books {margin: 0 auto;}
#books h2 {margin-bottom: 10px;}
#footer {
	background: var(--body_bg);
	color: white;
	font-family: "Helvetica Neue", "Arial", "sans-serif";
	padding: 10px;
	text-align: center;
}

#header {
	background: var(--header_bg);
	background-size: 800px;
	line-height: 0;
	margin: 0;
	text-align: center;
}

#header img {
	max-height: 200px;
	max-width: 100%;
}

.double {
	margin-top: 2em;
}

.grow {
	transition: all .2s ease-in-out;
}

.grow:hover {
	transform: perspective(1px) scale(1.1) translate3d( 0, 0, 0);

}

div.block {
	display: inline-block;
}

div.center p {
	text-align: center;
}

div#bibliography a img {
	height: 200px;
	margin: 0 10px;
	width: 133px;
}

div#bibliography a img.big {
	height: 300px;
	margin: 0 10px;
	width: 200px
}

div#bibliography h1, div#bibliography h2 {
	margin-top: 2em;
}

div#bibliography h1:first-of-type {
	margin-top: 0;
}

div#bibliography h2:first-of-type {
	margin-top: 3em;
}

div#bibliography div {
	width: 100%;
}

div#bookcover {
	text-align: center;
}

div#bookcover img {
	max-width: 100%;
}

div#books img {
	vertical-align: top;

}

/* 
div#books a:nth-of-type(1) img, div#books a:nth-of-type(4) img {
	max-width: 18%;
}

div#books a:nth-of-type(2) img, div#books a:nth-of-type(3) img {
	max-width: 20%;
}
 */

/* 
div#books a:nth-of-type(1) img, div#books a:nth-of-type(5) img {
	max-width: 16%;
}
 */

div#books img {
	height: 150px;
	margin: 10px;
	vertical-align: middle;
}


div#contribs p {
	margin: 0;
}

div#formatting_news {
	hyphens: auto;
	margin: 0 10%;
	text-align: justify;
}

div#four_oh_four_container {
	text-align: center;
}
div#recent_publications {
	background-color: white;
	background: white url('../images/white_background_texture.png') repeat center;
	box-shadow: 0px -4px 15px rgba(50, 50, 50, 0.5);
	padding: 20px 0 10px 0;
}
div#recent_publications h2 {margin: 0;}
div.full_cover {
	align-items: center;
	background: rgb(0,0,0);
	background: rgba(0,0,0,0.8);
	bottom: 0;
	cursor: pointer;
	justify-content: center;
	left: 0;
	overflow: hidden;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 1000;
}

div.full_cover img.main {
	border: 3px solid white;
/* 	margin-top: 5%; */
	max-width: 70%;
	max-height: 80%;
}
img.author_photo {
	border: 1px solid rgb(90, 90, 90);
	float: left;
	margin: 0 10px 10px 0;
	max-width: 25%;
}
img.halflinebreak {
	display: block;
	max-height: 10px;
	margin: 0 auto;
	width: 50%;
}
img#book_best {margin-bottom: 10px;}
#heart_book_container {
	margin: -1em 0 40px -30px;
	width: calc(100% + 60px);
}
#heart_book_container img {
	border: none;
	margin: 0;
	width: 100%;
}
#heart_book_container img {
  position: relative;
}
img.linebreak {
	max-height: 20px;
	width: 100%;
}

p#cover_gallery {
	text-align: justify;
	text-align-last: left;
}

p#cover_gallery img {
	cursor: pointer;
	display: inline-block;
	height: 150px;
	margin: 10px;
}

#mobile_nav {
	background: var(--nav_bg);
	color: white;
	font-size: 2.5em;
	line-height: 0;
	padding: 0;
	text-align: right;
	vertical-align: top;
}

#mobile_nav div.expansion {
	padding-bottom: 20px;
}

#mobile_nav_noscript {
	background: var(--nav_bg);
	color: var(--mobile_nav);
	font-size: 1.3em;
	font-family: "Helvetica Neue", "Arial", "sans-serif";
	font-weight: 900;
	line-height: 1;
	padding: 5px;
	text-align: center;
}


#mobile_nav_noscript a, #mobile_nav_noscript span {
	margin: 0 15px;
}

/* 
#mobile_nav_noscript a:first-of-type {
	margin-left: 0;
}

#mobile_nav_noscript a:last-of-type {
	margin-right: 0;
}
 */

#mobile_nav a, #mobile_nav a:active, #mobile_nav a:visited, #mobile_nav a:hover,
#mobile_nav_noscript a, #mobile_nav_noscript a:active, #mobile_nav_noscript a:visited, 
#mobile_nav_noscript a:hover {
	color: white;
	text-decoration: none;
}

#nav_connect_expand, #nav_books_expand, #mobile_click_expand, .expansion {
	display: none;
/* 	padding-top: 10px; */
}

#nav_connect_expand div:hover, #nav_books_expand div:hover, #mobile_click_expand div:hover {
	background: var(--nav_highlight);
	color: rgb(35,25,6);
	transition: all 0.2s ease-in-out;
}

#mobile_click {
	display: inline-block;
	margin: 3px 10px 0 0;
	text-align: center;
	width: 1em;
}

#mobile_click img {
	height: 25px;
	margin: 10px 30px 10px 0;
}

#mobile_click:hover {
	cursor: pointer;
}

#mobile_click_expand {
	font-family: "Helvetica Neue", "Arial", "sans-serif";
	font-size: .5em;
	font-weight: 900;
	text-align: center;
}

.dropdown {
	margin: 0;
	padding: 1em;
	cursor: pointer;
}

.sub_dropdown {
	color: white;
	line-height: 1.3;
}

.sub_dropdown:hover {
	background: white;
	color: black;
}
#navigation {
	background: var(--nav_bg);
	color: white;
	font-family: "Helvetica Neue", "Arial", "sans-serif";
	font-size: 1.3em;
	font-weight: 900;
	margin: 0;
	padding: 7px;
	text-align: center;
}

#navigation a, #navigation span, #navigation div {
	margin: 0 15px;
}

#navigation .first {
	margin-left: 0;
}

#navigation .last {
	margin-right: 0;
}

#navigation a, #navigation a:active, #navigation a:visited {
	color: white;
	text-decoration: none;
	transition: all 0.1s ease-in-out;
}

#navigation .current, #navigation a:hover {
	color: var(--nav_dark);
}

#navigation .nav_expand {
	cursor: pointer;
	transition: all 0.1s ease-in-out;
}

#navigation .nav_expand:hover {
	color: var(--nav_dark);
}

#nav_books_expand, #nav_connect_expand {
	line-height: 0;
}

div.news_tc {
	text-align: center;
}

div.news_tc div.inner {
	display: inline-block;
	margin: 0;
	padding: 0;
	text-align: center;
	vertical-align: top;
	width: 49%;
}

p.attrib {
/* 	margin: 0 0 1em 4em; */
	margin: 0 0 1em 4em;
	text-align: right;
}

p.fourohfour {
	margin: 0 auto;
	padding: 30px 0;
	text-align: justify;
	width: 75%;
}

p.news_pages {
	margin-top: 2em;
	word-spacing: 30px;
}

p.quote {
	margin: 0;
}

ul {
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul+h3.store_links {
	margin-top: 1.5em;
}

.button {
	background: white;
	border: 3px solid var(--button);
	border-radius: 100px;
	color: rgb(35,25,6) !important;
	color: var(--button) !important;
/* 	color: white !important; */
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-weight: 900;
	padding: 5px 15px;
	text-decoration: none !important;
	transition: all 0.4s ease-in-out;
}

.button:hover {
	background: var(--button);
	color: white !important;
	cursor: pointer;
}

.redbutton {
	background: var(--button_background);
	border: 3px solid var(--red_button);
	border-radius: 200px;
	color: white !important;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-weight: 900;
	padding: 5px 10px;
	text-decoration: none !important;
	transition: all 0.4s ease-in-out;
}

.redbutton:hover {
	background: white;
	color: var(--red_button_hover) !important;
	cursor: pointer;
}

.no_border {
	border: none;
}


/************************
    formatting form
************************/
@media only screen and (max-width: 1200px) {
	div#formatting_form form {width: 100%;}
	div#formatting_form input, div#formatting_form textarea {
		margin: 0 auto;
		width: 90%;
	}
}
@media only screen and (min-width: 1200px) {
	div#formatting_form form {width: 50%;}
	div#formatting_form input, div#formatting_form textarea {width: 90%;}
}
.error {
	background: rgb(224, 52, 78);
	border: 3px solid white;
	color: white;
	display: inline-block;
	margin-bottom: 20px;
	padding: 10px;
	width: 90%;
}
div.contact_button {
	cursor: pointer;
	display: none;
	font-family: var(--sans_font);
	margin: 30px auto;
	position: fixed;
		bottom: 15px;
		left: 50%;
		transform: translate(-50%, 0);
	width: auto;
	z-index: 500;
}
div.noscript_contact_button {margin: 2em auto;}
div.noscript_contact_button a {text-decoration: none;}
div#close {
	color: white;
	font-size: 2em;
	height: 2em;
	padding: 10px;
	text-align: right;
	transition: all 0.4s ease-in-out;
}
div#close:hover {
	opacity: 0.8;
	transition: all 0.4s ease-in-out;
}
div#error_box {
	background: rgb(224, 52, 78);
	border: 3px solid white;
	color: white;
	display: inline-block;
	margin-bottom: 20px;
	padding: 10px;
	width: 90%;
}
div#formatting_form {
	background: rgba(0, 0, 0, 0.8);
	display: none;
	min-height: 100%;
	left: 0;
	position: absolute;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 1000;
}
div#formatting_form form {
	background: rgba(240, 240, 240, 1);
	display: inline-block;
	margin: 0 auto;
	padding: 30px 0;
	text-align: center;
}
div#formatting_form form:first-of-type {border-radius: 10px 10px 0 0;}
div#formatting_form form:nth-of-type(2) {border-radius: 0 0 10px 10px;}
div#formatting_form input, div#formatting_form textarea {
	border: 1px solid var(--nav_bg);
	display: inline-block;
	font-size: 1.2em;
	padding: 5px 10px;
}
div#formatting_form label {
	display: inline-block;
	padding: 0 20px 2px 0;
	text-align: left;
	width: 90%;
}
div#formatting_info {overflow: hidden;}
div#formatting_info h2 {margin: 2em auto 1em auto;}
div#formatting_info h3 {
	text-align: left;
	margin-bottom: 0;
}
div#formatting_info h3 + p {margin-top: 0;}
div#formatting_info p {text-align: justify;}
div#formatting_info img {
	margin: 0;
	max-width: 100%;
}
div#testimonials {
		background-color: rgb(220, 220, 220);
		background: rgb(255, 255, 255) url("../images/white_background_texture.png") repeat center;
		box-shadow: 2px 2px 10px rgba(50, 50, 50, 0.5);
		margin: 3em auto 1em auto;
		padding: 15px 30px;
		width: 80%;
}
div#testimonials hr {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    border: 0;
    height: 1px;
    margin: 2em 0;
}
div#testimonials h2 {margin-top: 10px;}
div#formatting_info .rating {
	margin: 0;
	text-align: left;
}
div#formatting_info .testimonial {
	margin-bottom: 0;
	font-style: italic;
}
div#formatting_info .attribution {
	margin: 0 0 0 30%;
	text-align: right;
}
div#reedsy {
	background: var(--nav_bg);
	border: 2px solid white;
	color: white;
	hyphens: auto;
	outline: 14px solid var(--nav_bg);
	padding: 0 2rem 1rem 2rem;
	text-align: justify;
}
div#reedsy a {
	color: var(--nav_highlight);
}
div#reedsy a:hover {
	opacity: 0.8;
}
div#reedsy img {
	border: 3px solid white;
	max-width: 25%;
}
div#success_box {
	background: rgb(43, 196, 102);
	border: 3px solid white;
	color: white;
	display: inline-block;
	font-size: 1.2em;
	font-weight: 900;
	margin-bottom: 20px;
	padding: 10px;
	width: 90%;
}
div#send_error_box {
	background: rgb(224, 52, 78);
	border: 3px solid white;
	color: white;
	display: inline-block;
	font-size: 1.2em;
	font-weight: 900;
	margin-bottom: 20px;
	padding: 10px;
	width: 90%;
}
div#x {
	border: 3px solid white;
	border-radius: 100px;
	cursor: pointer;
	display: inline-block;
	font-family: var(--sans_font);
	font-weight: 900;
	padding: 0 10px;
	width: auto;
}
form input[type=submit], #submit_message_button, div.contact_button, div.noscript_contact_button a {
	-webkit-appearance: none;
	background: var(--nav_bg);
	border: 3px solid white;
	border-radius: 100px;
	color: white;
	cursor: pointer;
	font-size: 1.3em;
	font-weight: 900;
	outline: 1px solid var(--nav_bg);
	padding: 5px 20px;
	transition: all 0.4s ease-in-out;
	width: auto;
}
#submit_message_button {
	padding: 10px 0;
	width: 95%;
}
form input[type=submit]:hover, #submit_message_button:hover, div.contact_button:hover, div.noscript_contact_button a:hover, 
form#contact_form.form_submitted input[type=submit] {opacity: 0.85;}
form textarea {height: 6em;}
h1, h2, h3 {text-align: center;}
h2 {margin-bottom: 0;}
h2 + p {margin-top: 0;}
hr.style_two {
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
hr.fade {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(8, 75, 89, 0), rgba(8, 75, 89, 0.75), rgba(8, 75, 89, 0));
}

.hidden {opacity: 0;}
.show {opacity: 1;}
.from_right {animation: from_right 2s, fade_in 3s;}
.from_left {animation: from_left 2s, fade_in 3s;}
.fade_in {animation: fade_in 3s;}
.fade_out {animation: fade_out 3s;}
div#formatting_info div#paperback_layout_container, div#formatting_info div#kindle_layout_container {transition: all ease-in-out 0.3s;}
div#formatting_info div#paperback_layout_container:hover, div#formatting_info div#kindle_layout_container:hover {
	animation: none !important;
	opacity: 0.9;
	transform: scale(0.99);
	transition: all ease-in-out 0.3s;
}
.paused {
    -webkit-animation-play-state: paused !important;
    -moz-animation-play-state: paused !important;
    -o-animation-play-state: paused !important; 
    animation-play-state: paused !important;
}

/************************
      contact form 
************************/
@media screen and (max-width: 800px) {div#contact_form_container form {width: 90%;}}
@media screen and (min-width: 801px) and (max-width: 1200px) {div#contact_form_container form {width: 70%;}}
@media screen and (min-width: 1201px) {div#contact_form_container form {width: 50%;}}
div#contact_form_container form {margin: 20px auto 15px auto;}
div#contact_form_container form input, div#contact_form_container form textarea {
	border: 1px solid black;
	padding: 5px;
	width: calc(100% - 12px);
}
div#contact_form_container button {margin-left: 4px;}
div#contact_form_container p {
	color: var(--nav_bg);
	font-size: 1.5em;
	font-weight: 900;
}