@font-face {
	font-family: 'LaffayetteComicProRegular';
	src: url('fonts/Laffayette_Comic_Pro.eot');
	src: local('fonts/Laffayette Comic Pro Regular'), local('fonts/LaffayetteComicPro'), url('fonts/Laffayette_Comic_Pro.woff') format('woff'), url('fonts/Laffayette_Comic_Pro.ttf') format('truetype'), url('fonts/Laffayette_Comic_Pro.svg#LaffayetteComicPro') format('svg');
}



html, body {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	
	background-color: #d3c4b4;
	background-image: url(../images/thickstripe.jpg);
	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.813em;
}

header, nav, section, article, footer {
	display: block;
	
	margin: 0;
	padding: 0;
}




header h1 {
	position: absolute;
	left: 0;
	top: 50%;
	
	width: 482px;
	height: 700px;
	margin: -350px 0 0 350px;
	padding: 0;
	
	background-image: url(../images/cover.jpg);
	background-repeat: no-repeat;
	
	color: transparent;
	font-size: 0px;
	text-indent: -99999999999px;
	
	-moz-box-shadow: 0px 2px 5px #111;
	-webkit-box-shadow: 0px 2px 5px #111;
	box-shadow: 0px 2px 5px #111;
	
	-moz-transform: rotate(-1.5deg);
	-webkit-transform: rotate(-1.5deg);
	transform: rotate(-1.5deg);
	
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	
	-moz-border-radius-topright: 7px;
	-webkit-border-top-right-radius: 7px;
	border-top-right-radius: 7px;

	-moz-border-radius-bottomright: 9px;
	-webkit-border-bottom-right-radius: 9px;
	border-bottom-right-radius: 9px;
	
	display: none;
}

header h2 {
	display: none;
}



nav {
	position: absolute;
	left: 0;
	top: 20px;
	
	width: 200px;
	height: 200px;
	margin: 0 0 0 20px;
	padding: 10px;
	overflow: hidden;
	
	background-color: #e5dc6c;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4ed98), to(#d2ca6c));
	background: -moz-linear-gradient(top left, #f4ed98, #d2ca6c);

	-moz-box-shadow: 0px 2px 5px #111;
	-webkit-box-shadow: 0px 2px 5px #111;
	box-shadow: 0px 2px 5px #111;
	
	-moz-transform: rotate(2.3deg);
	-webkit-transform: rotate(2.3deg);
	transform: rotate(2.3deg);

	font-family: LaffayetteComicProRegular, 'Marker Felt', 'Gill Sans', Tahoma, 'Trebuchet MS', Arial, sans-serif;
}

nav h1 {
	margin: 0;
	padding: 0;
	
	text-align: center;
	text-transform: uppercase;
}

nav ul {
	margin: 0;
	padding: 0 0 0 1.25em;

	font-size: 1.25em;
}

nav ul li {
	margin-top: 0.5em;
}

nav a {
	color: #636DC7;
	text-decoration: none;
}

nav a:hover {
	color: #6c76d2;
	text-decoration: underline;
}

nav a:active {
	color: #3743b6;
}

section#instructions {
	position: absolute;
	top: 50px;
	left: 275px;
	
	width: 425px;
	height: 700px;
	
	font-family: 'Toronto Subway Bold', Futura, 'Gill Sans', Verdana, Arial, sans-serif;
	font-size: 4em;
	text-align: center;
	
	-moz-shadow: #333 0px 2px 5px;
	-webkit-text-shadow: #333 0px 2px 5px;
	text-shadow: #333 0px 2px 5px;
}

section#instructions p {
	margin: 0 0 1.5em 0;
	padding: 0;
}

section#instructions p#instructions_download {
	position: absolute;
	top: 250px;
	left: -250px;
	
	width: 200px;
	
	font-size: 0.5em;
}

section#instructions p span {
	display: block;
	
	font-size: 0.8em;
}

section#instructions p#instructions_read, section#instructions p#instructions_download {
	display: none;
}

section#comics {
	width: 960px;
	position: relative;
	margin: 20px 20px 20px 250px;
}

section#comics article {
	position: absolute;
	top: -750px;
	left: -1020px;
	
	overflow: hidden;
	padding-bottom: 10px;

	-moz-transform: rotate(-1800deg);
	-webkit-transform: rotate(-1800deg);
	transform: rotate(-1800deg);
}

.flipPage {
	position: absolute;
	top: 0;
	overflow: hidden;
}

.flipPage1, .flipPage2, .flipPage3 { left: 0; }
.flipPage4, .flipPage5, .flipPage6 { right: 0; }

.flipPage2, .flipPage5 {
	background-color: #333;
	background-color: rgba(0,0,0,.25);
	width: 0;
	padding: 0;
	text-indent: 0;
}

.flipPage2 img { float: right; }

/*
.flipPage1, .flipPage6 {
	-moz-box-shadow: 0px 2px 5px #111;
	-webkit-box-shadow: 0px 2px 5px #111;
	box-shadow: 0px 2px 5px #111;
}

.flipPage1.empty, .flipPage6.empty {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
*/


.flipPageImage {
	display: none;
}
.flipPageImage.empty {
	display: none;
}

footer {
	position: absolute;
	top: 750px;
	left: 0;
	
	width: 100%;
	
	text-align: center;
}

footer span {
	padding: 1em;
	
	background-color: #fff;
}