/* WELCOME SCREEN */


/* WebKit animations */
@-webkit-keyframes bounce-horizontally
{
	0%		{ left: -800px; -webkit-animation-timing-function: ease-in; -webkit-transform: skew(30deg); }
	80%	{ left: 80px; }
	100%	{ left: 50px; -webkit-animation-timing-function: ease-out; }
}

@-webkit-keyframes fallfromsky
{
	0%		{ top: -200px; -webkit-animation-timing-function: ease-in; }
	25%	{ top: 20px; -webkit-transform: scale(1.0); }
	27%	{ -webkit-transform: scale(1.0, 0.7); }
	70%	{ top: -10px; -webkit-transform: scale(1.0, 1.06); }
	100%	{ top: 0px; -webkit-animation-timing-function: ease-out; }
}

/* TOTAL AREA */
#welcome
{	
	position: absolute;
	top: 1px;
	left: 0px;
	height: 438px;
	width: 750px;
	background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#616161), to(#616161), color-stop(.3, rgba(97, 97, 97, 0.4)), color-stop(.5, rgba(97, 97, 97, 0)), color-stop(.7, rgba(97, 97, 97, 0.4))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#adadad), to(#616161), color-stop(.4, #616161));
}

/* MAIN STAGE */

#main
{
	position:				absolute;
	left:					0px;
	top:					0px;
	width:				649px;
	height:				379px;
	padding:				30px 50px 30px 50px;
	border:				none;
}

/* The box for picture, text, and movie */
#introtext
{
	position:				relative;
	top:					0px;
	left:					0px;
	width:				100%;
	height:				100%;
	overflow:			hidden;
	text-align:			center;
	
	opacity: 0;
	-webkit-transition: opacity 1s ease-in;
}

#introtext > h1
{
	padding-left:		50px;
	padding-right:		50px;
	padding-top:		10px;
	font-size:			24pt;
	font-weight:		normal;
	color:					#fff;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1.0)), to(rgba(0, 0, 0, 0.5)));
	text-shadow: 		0px 0px 1px #eee;
}

#introtext > h2 { font-size: 13pt; }
#introtext > p { padding-left: 0px; padding-right: 0px; font-size: 11pt; line-height: 150%; }
#introicon { -webkit-margin-before: 0px; -webkit-margin-after: 0px; }
#introicon > img {
	position: relative;
	top: 0px;
	width: 96px;
	height: 105px;
	-webkit-animation-name: fallfromsky;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-play-state: paused;
}

/* The first three steps to get started */


#steps
{
	position: absolute;
	bottom: 25px;
	-webkit-animation-name: bounce-horizontally;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-play-state: paused;
}

.step
{
	display: block;
	float: left;
	width: 180px;
	height: 130px;
	margin-right: 17px;
	border: 1px solid #88888a;
	-webkit-border-radius: 10px;
	padding: 10px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#616161), to(#747474));
	font-size: 90%;
}

.step h1 { text-align: left; font-size: 100%; font-weight: bold; color: #fff; margin: 0px 0px 0.5em 0px; }
.step p { -webkit-margin-before: 0px; -webkit-margin-after: 0px; }
.step:last-child { margin-right: 0px; }

.step > .initial
{
	float: left;
	top: 0px;
	height: 100%;
	font-size: 40px;
	color: #97c5a7;
	margin-right: 10px;
	margin-top: -8px;
}