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

Tugboat - Master Screen Styles

By: Andrew Philpott - www.himynameisandrew.com

Author:			Andrew Philpott
Date Created:	02-25-10
Last Modified:	02-25-10

Copyright 2009, All Rights Reserved.

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

@import 'reset.css';


body {
	background: url(/tugboat/assets/images/waves-back.png) #9bd3df repeat-x -196px 245px;
	-webkit-animation-name: waves-back;
	-webkit-animation-duration: 30s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

#smoke {
	background: url(/tugboat/assets/images/smoke.png) no-repeat;
	height: 61px;
	margin: 0 auto;
	left: 50px;
	position: relative;
	width: 110px;
	-webkit-animation-name: smoke-float;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

#tugboat {
	background: url(/tugboat/assets/images/tugboat.png) no-repeat;
	height: 240px;
	margin: 10px auto 0;
	position: relative;
	top: 0;
	width: 338px;
	-webkit-animation-name: tugboat-float;
	-webkit-animation-duration: 1.8s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-direction: alternate;
}


#water {
	background: url(/tugboat/assets/images/waves-front.png) repeat-x 196px top;
	height: 100%;
	position: absolute;
	top: 250px;
	width: 100%;
	-webkit-animation-name: waves-front;
	-webkit-animation-duration: 30s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}


@-webkit-keyframes waves-front {
	from {
		background-position: 196px top;
	}
	to {
		background-position: 1960px top;
	}
}

@-webkit-keyframes waves-back {
	from {
		background-position: -196px 245px;
	}
	to {
		background-position: -1960px 245px;
	}
}

@-webkit-keyframes tugboat-float {
	from {
		top: 0;
		-webkit-transform: rotate(0deg);
	}
	to {
		top: 10px;
		-webkit-transform: rotate(-5deg);
	}
}

@-webkit-keyframes smoke-float {
	from {
		left: 30px;
		opacity: 0;
		top: 20px;
		-webkit-transform: scale(0.5);
	}
	5% {
		left: 50px;
		opacity: 1;
		top: 0;
		-webkit-transform: scale(1);
	}
	to {
		left: 250px;
		opacity: 0;
		top: -50px;
		-webkit-transform: scale(0.1);
	}
}