html {
}

body {
	font-family: "Lora", serif;
	padding: 0;
	margin: 0;
	height: 100%;
	background: #3782d3;
	color: #222;
}

a {
	color: #3d6dda;
}

a:visited {
	color: #3d6dda;
}

details summary {
	font-weight: bold;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

details summary:hover {
	cursor: pointer;
}

#main {
	width: 670px;
	margin: 0 auto;
	padding: 40px 30px 80px 30px;
	background: #ffffff;
	/*box-shadow: #111 0 0 20px;*/
	height: 100%;
}

.blurb {
	padding-top: 20px;
	vertical-align: top;
	margin-bottom: 25px;
}

.format {
	margin-top: 40px;
	background: #f0f7ff;
	padding: 20px;
	border-radius: 10px;
}


.format img {
	float: right;
	max-width: 50%;
	max-height: 230px;
	box-shadow: #99c 0 0 15px 0px;
	margin-left: 20px;
}

.format img.darker-shadow {
	box-shadow: #99c 0 0 15px 0px;
}

.format + .format {
	margin-top: 30px;
}

.format h2 {
	margin-top: 0;
}

.format .info {
	vertical-align: top;
	padding: 10px 5px 0 20px;
}

.format a.buy {
	display: inline-block;
	background: #3782d3;
	color: #fff;
	text-decoration: none;
	padding: 2px 5px;
	border: 1px solid #222;
	border-radius: 6px;
	margin-top: 4px;
}

.format a.buy.disabled, .format a.buy.disabled:hover, .format a.buy.disabled:active {
	background: #777;
}

.format a.buy span {
	color: #fff;
	font-size: 0.6em;
	vertical-align: top;
	font-weight: bold;
}

.format a.buy:hover {
	background: #6191db;
}

.format a.buy:active {
	background: #4d74bf;
}

.blurb p {
	margin-top: 0;
	font-size: 22px;
	line-height: 32px;
}

p {
	font-size: 16px;
	line-height: 22px;
}

p.top {
	margin-top: 0;
}

hr {
	margin-top: 50px;
	margin-bottom: 40px;
	color: #3782d3;
}

#cover {
	width: 200px;
	float: left;
	margin-right: 30px;
	margin-bottom: 20px;
	box-shadow: #3782d3 0 0 15px 0px;
}

#portrait {
	max-width: 40%;
	float: left;
	max-height: 200px;
	margin-right: 15px;
	margin-bottom: 10px;
}

#cover-narrow {
	display: none;
}

#available-formats {
	margin-top: 30px;
	margin-bottom: 0;
}

.format.first {
	margin-top: 20px;
}


blockquote {
	border-left: 6px solid #3782d3;
	margin-left: 0;
	padding-left: 12px;
	font-style: italic;
}

@media screen and (max-width: 750px) {
	body {
		padding: 0;
	}

	

	#main {
		padding: 15px;
		width: calc(100% - 30px);
	}

	#cover {
		width: 35%;
	}

	.blurb {
	}

	.format {
		margin-left: -15px;
		margin-right: -15px;
		padding: 15px;
		border-radius: 0;
	}

	.blurb p {
		font-size: 20px;
		line-height: 28px;
	}
}

@media screen and (max-width: 520px) {
	#main {
		margin-top: 0;
		padding-top: 0;
	}

	.blurb {
		padding-top: 15px;
		margin-bottom: 45px;
	}

	#cover {
		display: none;
	}

	#cover-narrow {
		width: 100%;
		display: block;
	}
}