body
{
	margin: 0px;
	padding: 0px;

	background-color: rgb(240,240,240);
}

#container
{
	position: relative;

	width: 800px;

	margin-left: auto;
	margin-right: auto;
}

div.section
{
	position: relative;
	width: 100%;
}

.spacer
{
	height: 200px;
}

.spacer p
{
	font-family: sans-serif;
	font-size: 48px;

	text-align: center;

	color: rgb(96,96,96);
}

#stars
{ 
	height: 260px;
}

#progress p
{
	font-family: sans-serif;
	font-size: 48px;

	padding-top: 40px;
	padding-left: 100px;
	padding-right: 100px;

	border-top: solid 2px rgb(96,96,96);

	color: rgb(64,64,64);
}

#letter p
{
	font-family: sans-serif;
	font-size: 48px;

	padding-left: 100px;
	padding-right: 100px;

	color: rgb(64,64,64);
}

#message
{
	position: absolute;

	left: 50%;
	top: 50%;

	-webkit-transform: translate(-50%, -50%);

	pointer-events: none;

	-webkit-transition: opacity 0.33s ease-out;
}

#message p
{
	margin: 0px;

	font-family: sans-serif;
	font-size: 48px;
	font-weight: bold;

	/*color: rgb(128,128,128);*/
	color: rgb(228, 7, 58);

	text-align: center;
}

div.itembox
{
	position: absolute;

	width: 100px;
	height: 150px;
}

.itembox-bob
{
	-webkit-animation-name: itembox-bob;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes itembox-bob
{
	from{} to { -webkit-transform: translateY(50%) }
}

div.itembox-image
{
	position: absolute;

	left: 50%;
	top: 50%;

	-webkit-transform: translate(-50%, -50%);
}

.hidden
{
	display: none;
}

.black-star
{
	width: 94px;
	height: 100px;

	background: url("../images/black-star-small.png") no-repeat;
}

.white-star
{
	position: relative;

	width: 111px;
	height: 130px;

	background: url("../images/white-star-small.png") no-repeat;

	-webkit-transition: -webkit-transform 0.33s ease-in;
}

.color-star
{
	position: absolute;

	left: 0px;
	top: 0px;

	width: 111px;
	height: 130px;

	background: url("../images/white-star-small-color.png") no-repeat;

	opacity: 0;

	-webkit-transition: -webkit-transform 0.33s ease-in, opacity 0.5s ease-in;
}

.pop
{
	-webkit-animation-name: pop;
	-webkit-animation-duration: 0.33s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-direction: alternate;
	-webkit-animation-iteration-count: 2;
}

@-webkit-keyframes pop
{
	from{} to{ -webkit-transform: translate(-50%, -50%) translateY(-50%); }
}

.big
{
	-webkit-transform: scale(1.4, 1.4);
}

.star-float
{
	-webkit-animation-name: star-float;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-direction: alternate;
	-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes star-float
{
	from{} to{ -webkit-transform: translate(-50%, -50%) translateY(10px); }
}

.shoe
{
	width: 100px;
	height: 65px;

	background: url("../images/shoe-small.png") no-repeat;
}

.shoe-color
{
	width: 100px;
	height: 65px;

	background: url("../images/shoe-small-color.png") no-repeat;
}

#item1 { left: 50px; top: 50px }
#item2 { left: 150px; top: 50px }
#item3 { left: 250px; top: 50px }
#item4 { left: 350px; top: 50px }
#item5 { left: 450px; top: 50px }
#item6 { left: 550px; top: 50px }
#item7 { left: 650px; top: 50px }

.yirae
{
	position: absolute;

	top: 250px;
	left: 0px;

	width: 150px;
	height: 246px;

	background: url("../images/yirae-small.png") no-repeat;

	opacity: 0;
}

.yirae-color
{
	position: absolute;

	top: 250px;
	left: 0px;

	width: 150px;
	height: 246px;

	background: url("../images/yirae-small-color.png") no-repeat;

	opacity: 0;
}

.yirae-jump
{
	-webkit-animation-name: yirae-jump;
	-webkit-animation-duration: 0.33s;
	-webkit-animation-direction: alternate;
	-webkit-animation-iteration-count: 2;
	-webkit-animation-timing-function: ease-out;
}

@-webkit-keyframes yirae-jump
{
	from{} to{ opacity: 1; -webkit-transform: translateY(-150px); }
}

.standing-container
{
	position: relative;

	width: 100px;
	height: 246px;

	margin-left: auto;
	margin-right: auto;
}

.yirae-standing
{
	position: absolute;
	
	left: 0px;
	top: 0px;

	width: 100px;
	height: 246px;

	background: url("../images/standing-small.png") no-repeat;
}

.yirae-standing-color
{
	position: absolute;

	left: 0px;
	top: 0px;

	width: 100px;
	height: 246px;

	background: url("../images/standing-small-color.png") no-repeat;
}

.animate-opacity
{
	-webkit-transition: opacity 0.5s ease-in;
}

.fadedout
{
	opacity: 0;
}

span.blue { color: rgb(0, 165, 227); }
span.red { color: rgb(228, 7, 58); }

.signature
{
	font-size: 24px;
	text-align: right;
}

span.tinyprint
{
	font-size: 18px;
}