/*
Webstore Landing Page
Last Modified 2018-04-18
*/


/* General Styles */

button {
    background-color: #7e0000;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
p {
	font-family: 'Encode Sans Condensed', sans-serif;
	line-height: normal;
}

body {
	background-color: #f4f4f4;
}

form {
	margin: none;
	padding: none;
}

a,
a:hover,
a:focus,
a:active,
a:visited {
	color: #7e0000;
	text-decoration: underline;
}


/* Header */

.main-title {
	color: #7e0000;
	font-size: 200%;
	font-weight: bold;
	padding-top: 0;
}

.publisher-header h1,
.publisher-header h2,
.publisher-header h3,
.publisher-header h4,
.publisher-header h5 {
	padding: 0.1em;
	margin: 0.1em;
	margin-left: 0;
	padding-left: 0;
	margin-top: 0;
}

.publisher-header {
	text-align: center;
	margin: 0.5em auto;
	width: 90%;
	text-align: left;
	overflow: hidden;
}

.publisher-header > .header-undertext {
	float: right;
}

.header-title-box {
	float:left;
	overflow: hidden;
}
.header-options-box {
	float: right;
	overflow: hidden;
}






/*

desired behavior for header

above certain width:

Publisher Name
Publisher Ebook Store							thing1 | options | etc.

below certain width, all centered:

Publisher Name
Publisher Ebook Store							
thing1 | options | etc.

*/

/* Content Boxes */

.content-container {
	background-color: #fff;
	border-style: solid;
	border-width: 1px;
	border-radius: 3px;
	border-color: #dcdcdc;
	padding: .2em;
	margin: 1em auto;
	width: 90%;
	text-align: center;
}

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

/* New Landing Page Styles */

.announcement {
    color: #7e0000;
	font-weight: bold;
	text-align: center;
	padding-top: 3em;
	padding-bottom: 3em;
}

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

.center-content {
/* mid-level container for chunks of long text */
	padding: 3em 10%;
	text-align: left;
}

/* Author Listing */
/* governs how the boxes of author name, links, covers function */

.front-listing-book {
	display: inline-block;
	width: 20%;
}

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

.author-box {
	padding: 1em;
	border-width: 1px 0 1px 0;
	border-style: solid;
	background-color: white;
	border-style: solid;
	border-color: white;
}

.author-box:hover {
	border-color: #7e0000;
}

.author-box-left {
	text-align: left;
}

.author-box-right {
	text-align: right;
}

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

.author-listing h1,
.author-listing h2,
.author-listing h3,
.author-listing h4,
.author-listing h5
{
	padding: 0 0 0.2em 0;
	margin: 0;
}

.author-dest-link {
	display: inline;
}

.author-dest-seperator {
	display: inline;
}


/* Utility Classes */

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

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

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

.neutral {
	color: inherit;
	text-decoration: none;
}

/* Input Field Styling */
/* not currently in use in umbrella page but kept here for later consistency */

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

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

/*
	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 
*/

select.center-input {
	width: 72.5%;
}

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

.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;
}


/* Download Classes */

.download-box {
	border-radius: 5px;
	border: 2px solid #7e0000;
	width: 70%;
	margin-left: 12%;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 3%;
}

.download-box h1,
.download-box h2,
.download-box h3,
.download-box h4,
.download-box h5,
.download-box p {
	width: 80%;
	margin-left: 8%;
	padding: 2%;
}

.download-box img {
	width: 100px;
	text-align: center;
}

/* ------------ Size Adjustments

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.)

*/

@media screen and (min-width: 50em) {
	.publisher-header,
	.content-container {
		width: 90%;
	}
}

@media screen and (min-width: 60em) {
	.publisher-header,
	.content-container {
		width: 80%;
	}
}

@media screen and (min-width: 75em) {
	.publisher-header,
	.content-container {
		width: 65%;
	}
}

@media screen and (min-width: 85em) {
	.publisher-header,
	.content-container {
		width: 50%;
	}
}

@media screen and (max-width: 50em) {

	/* the point at which it makes sense for all elements to be 100% and vertically layered 
			maximize main container divs to 100%, implicitly expanding their contents for small-screen readability
			center previously offset elements
				headers
				author boxes
			convert inline elements to block elements (author-dest-link, etc.)
			hide corresponding element seperators
			hide the ellipsis after book cover display
	*/

	/* center headers */

	.header-undertext {
		text-align: center;
	}
	.header-title-box {
		display:block;
		float:none;
		width:100%;
		overflow: hidden;
		text-align: center;
	}
	.header-options-box {
		display:block;
		float:none;
		width:100%;
		overflow: hidden;
		text-align: center;
	}
	.publisher-header {
		text-align: center;
		margin-bottom: 0.5em;
	}


	/* Front Page Author Blocks */

	.author-box-left,
	.author-box-right {
		text-align: center;
	}

 	.author-dest-link {
		display: block;
		padding: 0.2em 0 0.2em 0;
	}

	.author-dest-seperator {
		display: none;
	}

	.continue-link {
		display: none;
	}

	.front-listing-book {
		display: inline-block;
		width: 20%;
	}

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


	/* convert center content objects to centered text */

	.center-content {
		text-align: center;
	}

}