/* Style rules for the first page of this website*/
/* Prevent scroll bars from showing up */
body.open {
	overflow:hidden;
}
/* Position the div that holds the letters is positioned to fill the entire viewable area of the page*/
body.open div.animateLetters {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	text-align:center;
}
/* Position all the letter spans relatively */
body.open div.animateLetters span {
	position:relative;
}
/* Even letters fly in after the even letters */
body.open div.animateLetters span:nth-of-type(even) {
	-webkit-animation:up 1s;
	-webkit-animation-delay:1s;
	-webkit-animation-fill-mode: forwards;
	top:2000px;
	animation:up 1s;
	animation-delay:1s;
	animation-fill-mode:forwards;
}
/* Odd letters fly in first*/
body.open div.animateLetters span:nth-of-type(odd) {
	-webkit-animation:down 1s;
	-webkit-animation-fill-mode:forwards;
	animation:down 1s;
	animation-fill-mode:forwards;
}
/* Move 2015 from the top left to the center of the page  */
body.open div.topDown {
	position:relative;
	text-align:center;
	top:-3rem;
	left:-500px;
	-webkit-animation:topDown 3s;
	-webkit-animation-delay:2s;
	-webkit-animation-fill-mode:forwards;
	animation:topDown 3s;
	animation-delay:2s;
	animation-fill-mode:forwards;
}
/* Slide in my name */
body.open div.slideLeft {
	position:relative;
	text-align: center;
	top:calc(500px - 2rem);
	right:-1000px;
	-webkit-animation:slideLeft 1s;
	-webkit-animation-delay:6s;
	-webkit-animation-fill-mode:forwards;
	animation:slideLeft 1s;
	animation-delay:6s;
	animation-fill-mode:forwards;
}
/* Keyframes for the down animation */
@keyframes down {
	from{top:0;}
	to{top:500px;}
}
@-webkit-keyframes down {
	from{top:0;}
	to{top:500px;}
}
/* Keyframes for the up animation */
@keyframes up {
	from{top:2000px;}
	to{top:500px;}
}
@-webkit-keyframes up {
	from{top:2000px;}
	to{top:500px;}
}
/* Keyframes for the topDown animation */
@keyframes topDown {
	from{top:-2em;left:-10em;}
	to{top:500px;left:0;}
}
@-webkit-keyframes topDown {
	from{top:-2em;left:-10em;}
	to{top:500px;left:0;}
}
/* Keyframes for the slideLeft animation */
@keyframes slideLeft {
	from{left:-2000px;}
	to{left:0;}
}
@-webkit-keyframes slideLeft {
	from{left:-2000px;}
	to{left:0;}
}
/* Styles for the introduction page */
/* Make the list behave less like a list */
body.intro ul {
	list-style-type:none;
	padding:0;
	border:none;
	width:150px;
	margin:0 auto;
}
/* Style the a elements so they look like they have images */
body.intro ul li a {
	background:linear-gradient(to top, #1a2980, #26d0ce);
	display:block;
	padding:8px;
	margin-bottom:8px;
	color:white;
	text-shadow:1px 0 black, -1px 0 black, 0 1px black, 0 -1px black;
	text-decoration:none;
}
/* When the links are hovered over change their gradient */
body.intro ul li a:hover {
	background:linear-gradient(to top, #4d5480, #7bd0cf);
}
/* Styles for the order form page */
/* Put some shadow on the element to make the page look nicer */
body.wrap > div:first-of-type {
	box-shadow:0 -20px 10px black;
}
/* Make the page title have the appropriate styling */
body.order header h1 {
	background:linear-gradient(to top, lightblue, white);
	margin:0;
	padding:1em;
	padding-bottom:.5em;
	text-align:center;
	text-shadow:1px 0 white, -1px 0 white, 0 1px white, 0 -1px white;
	font-family:Helvetica, sans-serif;
}
/* Like I don't understand why we have to comment this stuff, it literally says what it does */
body.order form {
	display:block;
	padding:16px 8px;
	border-top:1px dotted black;
	border-bottom:1px dotted black;
	background:lightblue;
}
/* Clearfix to make everything fit better */
body.order form label, body.order form div {
	overflow:auto;
	padding-bottom:8px;
	display:block;
}
/* Span to hold the text for the label */
body.order form label span:first-of-type {
	float:left;
	width:100px;
	display:inline-block;
}
/* Inputs need some padding too */
body.order form label input {
	padding-left:8px;
	padding-right:8px;
}
/* Error has red text that is a different font from the rest of the text*/
body.order form label span.error {
	color:black;
	padding-left:8px;
	text-shadow:1px 0 pink, -1px 0 pink, 0 1px pink, 0 -1px pink;
	font-family:Helvetica, sans-serif;
}
/* Footer element designed to make the page appear as if it fades back to white */
body.order footer {
	background:linear-gradient(to bottom, lightblue, white);
	margin:0;
	padding:8px;
	padding-bottom:16px;
	padding-top:.5em;
	font-family:Helvetica, sans-serif;
}
/* Position the back button in a seperate column*/
body.order footer div.two div {
	display:inline-block;
	width:49%;
}
/* Styles for the slideshow init page */
body.slideshow button, body.slideshow a {
	margin:8px;
}
/* Styles for the slideshow page */
body.runshow div {
	padding:8px;
}
/* Images are only 800px wide and have additional styling to make them look better*/
body.runshow img {
	width:100%;
	margin:8px 0;
	border:1px solid black;
	border-radius:4px;
	box-shadow:2px 2px 8px -2px black;
}
/* Styles for the draggable car page */
/* Body is the entire viewable area of the page */
body.drag {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
/* Setup a 600 by 600 box to hold the images and make them stay withing this box*/
body.drag div.imageholder {
	width:600px;
	height:600px;
	top:50px;
	margin:0 auto;
	border:1px solid black;
	position:relative;
	overflow:hidden;
	box-shadow:0 0 4px black;
}
/* Images are positioned absolutely so the top and left changes affect them */
body.drag div.imageholder img {
	position:absolute;
}
/* General styles for all pages */
body.wrap {
	padding:0;
	margin:0;
}
body.wrap > div:first-of-type {
	width:800px;
	margin:0 auto;
}