/*----------------------------------------------------------------------

COMPANY NAME - Master Screen Styles

BY: MIGHTY // MIGHTYINTHEMIDWEST.COM

Author:			Andrew Philpott
Date Created:	
Last Modified:	

Copyright 2009, All Rights Reserved.

----------------------------------------------------------------------*/

@import 'reset.css';

@font-face {
	font-family:  'M41';
	src: url(../fonts/m41.ttf) format("truetype");
}


body {
	font-family: 'M41';
	font-size: 62.5%;
}

h1 {
	font-size: 1.6em;
	line-height: 1.5em;
	margin-bottom: 1em;
}

p {
	font-size: 1em;
	line-height: 2em;
	margin-bottom: 2em;
}

#wrapper {
	background: url(../images/bg-sky.png) repeat-x center bottom;
	min-height: 100%;
	position: absolute;
	width: 100%;
}
#content {
	background: url(../images/bg-clouds.png) center bottom;
	min-height: 100%;
	position: absolute;
	width: 100%;
}
#footer {
	background: url(../images/bg-ground.png);
	bottom: 0px;
	height: 50px;
	position: fixed;
	width: 100%;
}

@-webkit-keyframes skyChange {
	from {
		background-position: center bottom;
	}
	40% {
		background-position: center bottom;
	}
	50% {
		background-position: center top;
	}
	90% {
		background-position: center top;
	}
	to {
		background-position: center bottom;
	}
}

@-webkit-keyframes cloudsMove {
	from {
		background-position: 0 bottom;
	}
	50% {
		background-position: -2000px bottom;
	}
	to {
		background-position: 0 bottom;
	}
}

@-webkit-keyframes planeFly {
	from {
		left: -10000px;
		-webkit-transform: scaleX(-1);
	}
	49.9% {
		left: 10000px;
		-webkit-transform: scaleX(-1);
	}
	50% {
		left: 10000px;
		-webkit-transform: scaleX(1);
	}
	99.9% {
		left: -10000px;
		-webkit-transform: scaleX(1);
	}
	to {
		left: -10000px;
		-webkit-transform: scaleX(-1);
	}
}

@-webkit-keyframes manWalk {
	from {
		left: 100px;
		-webkit-transform: scaleX(1);
	}
	49.9% {
		left: 2100px;
		-webkit-transform: scaleX(1);
	}
	50% {
		left: 2100px;
		-webkit-transform: scaleX(-1);
	}
	99.9% {
		left: 100px;
		-webkit-transform: scaleX(-1);
	}
	to {
		left: 100px;
		-webkit-transform: scaleX(1);
	}
}

@-webkit-keyframes womanWalk {
	from {
		right: 0;
		-webkit-transform: scaleX(-1);
	}
	49.9% {
		right: 2000px;
		-webkit-transform: scaleX(-1);
	}
	50% {
		right: 2000px;
		-webkit-transform: scaleX(1);
	}
	99.9% {
		right: 0;
		-webkit-transform: scaleX(1);
	}
	to {
		right: 0;
		-webkit-transform: scaleX(-1);
	}
}

@-webkit-keyframes congratsBlink {
	from {
		opacity: 0;
	}
	49.9% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	99.9% {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

#wrapper {
	-webkit-animation-name: skyChange;
	-webkit-animation-duration: 50s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

#content {
	-webkit-animation-name: cloudsMove;
	-webkit-animation-duration: 60s;
	-webkit-animation-iteration-count: infinite;
}

section {
	background: rgba(255,255,255,0.9);
	display: block;
	height: 250px;
	margin: 200px auto 0;
	padding: 20px;
	position: relative;
	width: 500px;
}
section + section {
	display: none;
}

#nav {
	background: #555;
	float: left;
	font-size: 1.1em;
	margin: -1em 0 2em -1em;
	padding: 1em;
	width: 100%;
}
#nav + * {
	clear: left;
}
#nav li {
	float: left;
	margin-right: 1em;
}
#nav a {
	color: #fff;
}
#footer a {
	color: #0f6c0a;
}
#footer a span {
	font-size: 8px;
}
#sky-switch {
	display: inline-block;
	margin: 15px;
	padding: 0.5em;
}

img {
	position: fixed;
	bottom: 50px;
}

#airplane {
	left: -10000px;
	top: 50px;
	-webkit-animation-name: planeFly;
	-webkit-animation-duration: 120s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

#me {
	cursor: pointer;
	left: 100px;
	-webkit-animation-name: manWalk;
	-webkit-animation-duration: 40s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
#emily {
	cursor: pointer;
	right: 0;
	-webkit-animation-name: womanWalk;
	-webkit-animation-duration: 40s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

#cheater {
	color: #990000;
	cursor: pointer;
	display: none;
	font-size: 48px;
	margin: 0 auto;
	opacity: 0;
	position: relative;
	text-align: center;
	top: 80px;
	width: 500px;
	-webkit-animation-name: congratsBlink;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 10;
	-webkit-animation-timing-function: linear;
}