/*
Styles Governing Author Page
*/

/* Custom Fonts Used in User Blogs */
@import "https://cornerreads.com/graphics/fonts/ablackcrown.css";
@import 'https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap';

/*
Custom Color Scheme via :root pseudoclass variables
NOTE: THIS APPEARS TO BE WORKING SECOND AT THE MOMENT
IN PREVIOUS TESTS, IT DID NOT WORK UNLESS ABOVE IMPOTS (which in turn broke them)
*/

:root {
	--main-bg-color: #fcfcfc;
	--container-color: white;
	--header-txt-color: black;
	--header-txt-color: #c9738d;
	--normal-txt-color: black;
	--light-txt-color: #4c4c4c;

	--header-font: 'Bebas Neue', 'Arial', 'Sans-Serif';
	--body-font: 'Encode Sans Condensed', sans-serif;
}


/* General Styles */

button {
    background-color: black;
    background-color: var(--header-txt-color);
    border: none;
    color: white;
    /* padding: 10px 0px; */
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: var(--header-font);
	line-height: normal;
}
p {
	line-height: normal;
}

a {
	color: black;
}

body {
	background-color: white;
	background-color: var(--main-bg-color);
	font-family: var(--body-font);
}

form {
	margin: none;
	padding: none;
}

a,
a:hover,
a:focus,
a:active,
a:visited {
	color: black;
	text-decoration: underline;
}


/* General Utility Entities */

.light-text {
	font-size: 80%;
	color: #4c4c4c;
}

.content-text {
	/* left-aligned content text for large paragraphs */
	text-align: left;
	padding: 1% 2%;
}


.top-message {
	/* div for displaying info at top of page */
	text-align: center;
}

.error-notice {
	color: red;
	text-decoration: bold;
}

.text-container {
	padding: 1em;
	max-width: 40em;
	margin: auto;
}

.content-text {
	/* mid-level div container to format and pad sections of longer text */
	text-align: left;
}

.vertical-spacer {
	margin: 4em 0;
}

.neutral {
	/* used for links that shouldn't deviate from parent text properties */
	color: inherit;
	text-decoration: none;
}
.neutral:visited,
.neutral:hover,
.neutral:active {
	color: inherit;
	text-decoration: none;
}

.secondary-info {
    display: none;
}

















/* Content Boxes */

.content-container {
	/* background-color: #fff; */
	/* bingbingbing, could use cleaning up, this is adapted from two different development phases */
	padding: .2em;
	padding-top: 2em;
	padding-bottom: 2em;
	margin: 1em auto;
	width: 90%;
	max-width: 80em;
	text-align: center;

	width: 70%;
	margin: auto;
	max-width: 1200px;
	display: table;
	padding: 0;
	border-style: solid;
	border-color: #faaeae;
	border-width: 0px 0px 0px 2px;
}

.content-container.publisher-footer {
	margin: 2em auto 1em auto;
	padding-top: 0;
	padding-bottom: 0;
}

/* a div within a content container displaying significant amounts of paragraph text */

.content-bodytext-container {
	max-width: 40em;
	text-align: left;
	margin: auto;
	padding-top: 1em;
}


.content-bodytext-container h1 {
	text-align: center;
}

.content-bodytext-container h3 {
	text-align: left;
}

.content-table-container {
	margin: auto;
}




/* Listing Page Elements */

/* style the order-by select element */

.listing-dropdown {
	font-family: var(--header-font);
	text-align: left;
	font-size: inherit;

	background: transparent;
	text-decoration: inherit;
	font-size: inherit;

	border: none;
	height: 34px;
}


.listing-dropdown option {
	font-family: var(--header-font);
	text-align: left;
	font-size: inherit;
}

/* Blog Book Inset */

.front-listing-book {
	display: inline-block;
	width: 24%;
	vertical-align: bottom;
	text-align: left;
}

.front-listing-book-cover {
	width: 100%;
}

/* Blog Listing Grid Containers and Elements */
/* These are also used on the cart/checkout page */

.blog-listing-box {
	margin: 0;
	padding: 0;
	display: table;

	border-style: solid;
	border-style: solid;
	border-color: black;
	border-width: 2px 0 2px 0;
}

.blog-listing-box a p {
	text-decoration: none;
	color: black;
}

.blog-post {
	border-style: solid;
	border-color: lightgray;
	border-width: 1px 0 1px 0;
	border-style: solid;

	background-color: white;
	margin-bottom: 0px;
	padding: 5px;
	overflow: hidden;
	padding-top: 1em;
	padding-bottom: 1em;
}

.blog-listing-box {
	margin: auto;
}

.blog-post-image {
	display: table-cell;
	width: 50%;
	padding: 1em;
}
.blog-post-image img {
	width: 90%;
}
.blog-post-primary {
	display: table-cell;
	width: 50%;
	text-align: left;
	vertical-align: top;
	padding: 1em;
	/* margin: auto; */
}

.blog-post-odd {
	display: flex;
	flex-direction: row-reverse;
}

.blog-post-all {
	display: table-cell;
	width: 60%;
	max-width: 80em;
	text-align: left;
	vertical-align: top;
	padding: 1em;
}

.blog-post-secondary {
	display: table-cell;
	width: 50%;
	text-align: left;
	vertical-align: top;
	padding: 1em;
}

.blog-post-title-link {
	text-decoration: none;
	color: inherit;
}
/*
.blog-post-title-link:hover,
.blog-post-title-link:active {
	text-decoration: none;
	color: black;
	color: var(--header-txt-color);
}

*/

.bodytext-alert {
    border-radius: 5px;
    padding: 1em;
    border-style: solid;
    border-color: red;
}



/*
.blog-image-medium {
	width: 60%;
}
.blog-image-large {
	width:90%;
}

/* Standard Form Classes */


/* this ensures all these elements are sized according to the same rules */
.input-standard {
	-ms-box-sizing:content-box;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box; 
	box-sizing:content-box;
	width: 100%;
	padding: 10px 0;

	border: 1px;
	border-style: solid;
	border-color: black;
}

/* Center Input Styling 
	select and text inputs share center-input
	submit and button share center-submit */

.center-input {
	display: block;
	border-radius: 5px;
	border: 2px solid #000000;

	width: 70%;
	margin-left: 15%;
	margin-top: 10px;
	padding: 1%;
	margin-bottom: 10px;
}


select.center-input {
	width: 72.5%;
	/* this adjustment necessary because select elements include the padding/border in their widths, while input tags do not
	thus, width of select must equal width of input + width of input padding and border
	this adjustment isn't perfect, because it approximates 2px border as 0.5% of screen, but it's close enough */
}

.center-submit {

	display: block;
	border-radius: 5px;
	border: 2px solid #000000;

	padding: 1%;
	margin-bottom: 10px;

	width: 30%;
	margin: 1px;
	margin-left: 35%;
	display: block;
}

.center-input:focus {
	border: 2px solid 'black';
	outline-width: 0;
}


/* Social Media Link Box */

.sm-box {
	margin: auto;
	max-width: 18em;
}

.sm-box img {
	height: 1.5em;
	width: 1.5em;
	padding: 0 0.5em 0 1em;
}




/* INDEX STYLES */

.continue-link {
	font-size: 500%;
	text-decoration: none;
}














/* NEW BLOG HEADER STYLES */

.header {
	display: table;
	width: 80%;
	margin: auto;
	padding: 0;
	max-width: 1300px;
}

.header-container {
	display: table-row;
}

.corner-image {
	width: 350px;
	display: table-cell;
}

.header-block {
	width: 100%;
	display: table-cell;
	vertical-align: bottom;
	padding: 0;
	margin: 0;
}

.streak {
	/* background-color: #c9738d; */
    background-color: var(--header-txt-color);
	text-align: right;
	padding: 0.5px;
	margin: auto;
	margin-top: 20px;
	display: block;
}

.page-header {
	background-color:white;
	text-align: center;
	vertical-align: bottom;
	padding: 0.5px;
	padding-top: 1%;
	/* margin: auto; */
	margin-right: 350px;
	display: block;
}

.page-header h1 {
	margin-left: 1em;
}

.top-menu-text {
	margin-right: 1em;
	color: black;
}

#subscribe-button {
	width: 100%;
}

/* Book Review Styling */





/* Subscribe popup styling */

#subscribe-popup {
	/* display: none; */
	display: none;
	position: relative;
	width: 50%;
	max-width: 40em;
	max-height: 90%;
	padding: 0;
	margin: auto;
	margin-top: 5%;

	opacity: 100%;
	z-index: 9;
	background-color: white;
	border: 3px solid #c9738d; 
	text-align: center;
	overflow: auto;
}

#subscribe-popup.popup-embed {
	display: block;
	width: 85%;
}

#subscribe-shell {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0%;
	top: 0%;
	z-index: 8;
}

#subscribe-popup-close {
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	width: 3em;
	height: 3em;
	vertical-align: middle;
	text-align: center;
}

#subscribe-whiteout {
	background: white;
	opacity: 70%;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0%;
	top: 0%;
	z-index: 8;
}

.book-popup {

	display: none;
	position: relative;
	width: 90%;
	max-width: 70em;
	max-height: 90%;
	padding: 0;
	margin: auto;
	margin-top: 5%;

	opacity: 100%;
	z-index: 9;
	background-color: white;
	border: 3px solid #c9738d; 
	text-align: center;
	overflow: auto;

}

.book-popup-close {
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	width: 3em;
	height: 3em;
	vertical-align: middle;
	text-align: center;
}

.book-popup-row {
	display: table-row;
}
.book-popup-cell {
	width: 50%;
	display: table-cell;
	vertical-align: top;
}
.book-popup-cell img {
	width: 100%;
}








#review-account-error {
	display: none;
	color: red;
	font-weight: bold;
}

#review-account-prompt {
	display: none;
}


/* classes for a text input that has failed a validation check
via javascript, it will be set to error-input-flash for .5 seconds then standard thereafter */

.error-input,
.error-input:focus,
.error-input:hover,
.error-input:active {
	border: 2px solid red;
	background-color: white;
	outline: none;
}

.error-input-flash,
.error-input-flash:focus,
.error-input-flash:hover,
.error-input-flash:active {
	border: 2px solid red;
	background-color: red;
	outline: none;
}


.ml-form {
	text-align: center;
}

.ml-form h1,
.ml-form h2,
.ml-form h3,
.ml-form h4,
.ml-form h5 {
	margin: 0px;
}

.ml-form input,
.ml-form button {
	width: 100%;
	max-width: 30em;
	margin-bottom: 0.5em;
}

.ml-form input[type='checkbox'] {
	width: auto;
}

.ml-form-checkboxgroup {
	width: 100%;
	max-width: 25em;
	text-align: left;
	margin: auto;
}


/* new index styling */

.index-row {
	width: 100%;
	display: table-row;
	margin-top: 0.5em;
}
.index-cell {
	display: block;
	width: 100%;
	padding-bottom: 0.5em;
}
.index-cell-right {
	text-align: right;
}
.index-cell-left {
	text-align: left;
}

#index-graphics {
	display: table;
}

.subheader-text {
	/* sits below header poster, right-aligned */
	border-width: 0px 2px 0px 0px;
	border-style: solid;
	border-color: #c9738d;
	text-align: right;
	margin-top: 1em;
	padding-right: 1em;
}

.recent-posts h1,
.recent-posts h2,
.recent-posts h3,
.recent-posts h4 {
	padding: 0;
	margin: 0;
}

.recent-posts a {
	text-decoration: none;
}
.recent-posts a:hover {
	text-decoration: underline;
}

.recent-posts h1 {
	color: #c9738d;
}

.page-header-ads {
	width: 90%;
	padding: 1em;
	text-align: center;
	margin: 0;
}


/* Div Size Adjustments */
	/* Adapted Code */

	/*
	Resizing Logic

	There are two general frameworks that tabular presentations are constructed in
		Horizontal List layout
			Each unit is a self-contained horizontal entity with with cells that contain the same class of information across vertical lines
		Purely vertical layout
			Each unit contains a standard order of sub-entities all arrayed vertically and centered

	The general rules set out here produce an appropriate layout for the smallest screen large enough to accommodate the horizontal list layout
		if the screen is smaller than that (smaller than 50em), screen rules will change it to a vertical layout with the max-width 50em segment
		if the screen is larger than that, screen rules will scale and restrict elements accordingly (make primary content div a narrower width of the screen, etc.)
	*/



/* NEW */

@media screen and (max-width: 75em) {
	.header {
		width: 95%;
	}

	.page-header {
		margin: auto;
		text-align: left;
	}
}
	

@media screen and (max-width: 50em) {
	/* the point at which it makes sense for all elements to be 100% and vertically layered */

	/* adjust header to simple centered block elements */
	.blog-post {
		/* give book elements permanent black seperator between row facsimiles */
		border-color: black;
		border-style: solid;
		border-color: lightgray;
		border-width: 1px 0 1px 0;
		border-style: solid;
	}

	.blog-post-odd {
		display: block;
	}

	.blog-post-image {
		display: table-row;
		width: 100%;
		padding: 1em;
	}
	.blog-post-primary {
		display: table-row;
		width: 100%;
		padding: 1em;
	}

	.page-notice-cell {
		display: block;
		width:100%;
		text-align: center;
	}
	.header {
		width: 95%;
		margin: 2.5%;
	}

	.content-container {
		width: 90%;
		padding: 2.5%;
		margin: 2.5%;
	}
	.sidebar-margin {
		width: 0;
	}
	.sidebar {
		width: 0;
	}

	.corner-image {
		width: 100%;
		margin: auto;
		padding: 0;
		display: block;
	}

	.header-block {
		display: block;
	}

	.streak {
		text-align: center;
	}
	.page-header {
		text-align: center;
		margin: auto;
	}
	.page-header h1 {
		margin: auto;
	}
	.top-menu-text {
		margin-right: 0;
	}

	.index-cell {
		display: block;
		/* leave left-aligned */
	}

	.subheader-text {
		position: relative;
		top: 0;
		display: block;
		text-align: center;
		z-index: 1;
		border: none;
	}

	#subscribe-popup {
		width: 70%;
	}

	.book-popup-cell {
		display: block;
		width: 90%;
	}
	.book-popup-cell img {
		width: 50%;
	}

}

























/* DEPRECATED SIGNUP STYLES */

.signup-form {
	border-style:solid;
	border-color: lightgray;
	border-width: 1px 0 1px 0;
	text-align: center;
}

.signup-query {
	/* display: inline-block; */
	display: block;
}

/* possibly deprecated */

.form-left {
	text-align: right;
	vertical-align: top;
	padding: 1em 0.5em;
	width: 50%;
}
.form-right {
	text-align: left;
	vertical-align: top;
	padding: 1em 0.5em;
	width: 50%;
}