@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 86.4%;
	padding-left: 1.8%;
	padding-right: 1.8%;
}
#header {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
}
#logo {
	clear: both;
	float: left;
	margin: 1em 0 1em 1em;
	width: 60%;
	display: block;
}
#menu-button {
	clear: none;
	float: right;
	margin: 0 5% 0 8%;
	width: 20%;
	display: block;
}
#feature {
	clear: both;
	float: left;
	margin: 0;
	width: 99.8%;
	display: block;
	position: relative;
}
#featureImage {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
	overflow: hidden;
}
#featureText {
	clear: both;
	float: left;
	margin: 0 0 0 5%;
	width: 90%;
	display: block;
}
#footer {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
}
#aboutStory, #meetAuthor, #buyBook, #bookPreview, #newsEvents {
	clear: both;
	float: left;
	margin: 1em 0 1em 1.5%;
	width: 97%;
	display: block;
}
.contentHolder {
	padding: 1em;
}
#koryIcon {
	display: none;
}
#copyBlock {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
}
#imgBlock {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
}
.section {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
}
.sectionPadd {
	margin-bottom: 40px;		
}
#contentBlock {
	clear: both;
	float: left;
	margin: 0 2%;
	width: 96%;
	display: block;
}
.storeDetailBlocks {
	clear: both;
	float: left;
	margin: 0 0 1em 0;
	width: 92%;
	display: block;
}
#bioContent {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
}
#bioPhoto {
	clear: both;
	float: left;
	margin: 0 0 1em 0;
	width: 100%;
	display: block;
}
.reviewBlockBottom {
	clear: both;
	float: left;
	margin: 0 0 1em 0;
	padding-top: 60px;
	width: 100%;
	display: block;
}
#reviewBlock {
	clear: both;
	float: left;
	margin: 0;
	padding: 5%;
	width: 90%;
	display: block;
}
#reviewText, #reviewTextFull {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
}
#reviewPreview, #reviewPreviewFull {
	clear: both;
	float: left;
	margin: 1em 0;
	width: 100%;
	display: block;
}
.reviewPhoto1, .reviewPhoto2 {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
}
.reviewPhoto1 {
	padding-bottom: 10px;	
}
.characterBox {
	clear: none;
	float: left;
	margin: 0;
	width: 50%;
	display: block;
}
#buttonRight {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.reviewTableLeft, .reviewTableRight {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 91.65%;
	padding-left: 1.175%;
	padding-right: 1.175%;
}
#header {
}
#logo {
	margin: 1em;
	width: 50%;
}
#menu-button {
	margin: 0 5% 0 8%;
	width: 15%;
}
#feature {
	margin: 1em 0;	
}
#footer {
	padding: 1em 0;
}
#bookPreview {
	margin: 0 0 0 15%;
	width: 70%;
}
#bioPhoto {
	clear: both;
	float: right;
	margin: 0 0 0 10%;
	width: 50%;
}
.storeDetailBlocks {
	clear: none;
	margin: 0 0 2em 0;
	width: 42.5%;
}
#reviewBlock {
	padding: 3.5%;
	width: 93%;
}
#reviewPreview {
	margin: 1em 5%;
	width: 90%;
}
.characterBox {
	margin: 0;
	width: 33.33%;
}
.reviewTableLeft {
	clear: none;
	width: 47.5%;
	margin-right: 5%;
}
.reviewTableRight {
	clear: none;
	width: 47.5%;
}

}

@media only screen and (min-width: 481px) and (max-width: 759px) {
.storeDetailBlocks:nth-child(2n+1) {
	margin-right: 5%;
}

}
@media only screen and (min-width: 760px) {
.storeDetailBlocks {
	margin: 0 0 2em 0;
	width: 18%;
}
.storeDetailBlocks + .storeDetailBlocks { margin-left: 2%; }
}



/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 88.5%;
	max-width: 1232px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
}
#header {
	
}
#logo {
	margin: 2em 0 2em 1.5em;
	width: 28%;
}
#buttons {
	clear: both;
	float: left;
	width: 100%;
	display: block;	
}
#featureImage {
	position: relative;
	z-index: 10;
}
#featureText {
	margin: 0 1% 0 68%;
	width: 30%;
	position: absolute;
	z-index: 20;
	top: 0;
	float: right;
}
#aboutStory {
	clear: none;
	margin: 0 0 1em 1.5%;
	width: 46.5%;
}
#meetAuthor {
	clear: none;
	margin: 0 0 0 3.8%;
	width: 46.5%;
}
#buyBook, #newsEvents {
	margin: 1em 0 1em 1.5%;
	width: 97%;
	display: block;
}
#koryIcon {
	clear: both;
	float: left;
	margin: 0 2em 1em 0;
	width: 9em;
	display: block;
}

#bookPreview {
	margin: 0 0 1em 0;
	width: 100%;
}
#copyBlock {
	margin: 0;
	width: 65%;
}
#imgBlock {
	clear: none;
	margin: 0 0 0 5%;
	width: 30%;
	max-width: 320px;
}
#contentBlock {
	margin: 2em 2%;
}
#bioContent {
	margin: 0;
	width: 100%;
}
#bioPhoto {
	clear: none;
	margin: 0 0 4em 4em;
	width: 50%;
}
#reviewBlock {
	padding: 2%;
	width: 96%;
}
#reviewText {
	margin: 0 5% 0 0;
	width: 60%;
}
#reviewPreview {
	clear: none;
	margin: 0;
	width: 35%;
}
.characterBox {
	width: 20%;
}
#buttonRight {
	clear: none;
	float: right;
	margin: 0;
	width: 25%;
	text-align: right;
}

}


@media only screen and (min-width: 960px) {
#featureText {
	margin: 0 1% 0 48em;
	width: 30%;
	top: 0;
	left: 0;
	float: left;
}
.storeDetailBlocks {
	width: 19%;
}
}

@media only screen and (min-width: 1050px) {
#logo {	margin: 3em 0 3em 2em; }
#featureText {
	margin: 0 2% 0 50em;
	width: 33.5%;
}
}
@media only screen and (min-width: 1150px) {
#featureText { width: 39%; }
}
@media only screen and (min-width: 1250px) {
#featureText { width: 43.5%; }
#logo {	margin: 3em 0 3em 4em; }
}
@media only screen and (min-width: 1350px) {
#featureText { width: 43.5%; }
}
@media only screen and (min-width: 1400px) {
#featureText { width: 48%; }
}