body {
	background: #92A4A4;
}

#container {
	width: 1024px;
	margin: auto;
}

#intro {
	text-align: center;
	margin-top: 200px;
}

#plate {
	text-align: center;
	position: fixed;
	top: 450px;
	margin-left: 385px;
	z-index: -1;
}

#mug1 {
	text-align: center;
	position: absolute;
	top: 100px;
	display: none;
}

#mug2 {
	text-align: center;
	position: absolute;
	top: 350px;
	display: none;
}

#mug3 {
	text-align: center;
	position: absolute;
	top: 550px;
	display: none;
}

#mug1milk {
	text-align: center;
	position: absolute;
	top: 350px;
	left: 650px;
	display: none;
}

#mug2milk {
	text-align: center;
	position: absolute;
	top: 400px;
	left: 645px;
	display: none;
}

#mug3cream {
	text-align: center;
	position: absolute;
	top: 315px;
	left: 645px;
	display: none;
}

#mug1sprite {
	background: url(images/mug1sprite.png) 0 0 no-repeat;
	width: 193px;
	height: 190px;
	text-align: center;
	position: absolute;
	top: 350px;
	left: 650px;
	display: none; 
	
	-webkit-animation: animate-mug1 1s steps(3);
    -moz-animation: animate-mug1 1s steps(3);
     animation: animate-mug1 1s steps(3);
}

@-webkit-keyframes animate-mug1 {
	0% { background-position: -579px 0; }
	100% { background-position: 0 0; }
}

@-moz-keyframes animate-mug1 {
	0% { background-position: -579px 0; }
	100% { background-position: 0 0; }
}

@keyframes animate-mug1 {
	0% { background-position: -579px 0; }
	100% { background-position: 0 0; }
}


#mug2sprite {
	background: url(images/mug2sprite.png) 0 0 no-repeat;
	width: 194.4px;
	height: 152px;
	text-align: center;
	position: absolute;
	top: 400px;
	left: 645px;
	display: none;
	
	-webkit-animation: animate-mug2 1s steps(3);
    -moz-animation: animate-mug2 1s steps(3);
     animation: animate-mug2 1s steps(3);
}

@-webkit-keyframes animate-mug2 {
	0% { background-position: -584px 0; }
	100% { background-position: 0 0; }
}

@-moz-keyframes animate-mug2 {
	0% { background-position: -584px 0; }
	100% { background-position: 0 0; }
}

@keyframes animate-mug2 {
	0% { background-position: -584px 0; }
	100% { background-position: 0 0; }
}


#mug3sprite {
	background: url(images/mug3sprite.png) 0 0 no-repeat;
	width: 205px;
	height: 226px;
	text-align: center;
	position: absolute;
	top: 330px;
	left: 645px;
	display: none;
	
	-webkit-animation: animate-mug3 1s steps(3);
    -moz-animation: animate-mug3 1s steps(3);
     animation: animate-mug3 1s steps(3);
}

@-webkit-keyframes animate-mug3 {
	0% { background-position: -617px 0; }
	100% { background-position: 0 0; }
}

@-moz-keyframes animate-mug3 {
	0% { background-position: -617px 0; }
	100% { background-position: 0 0; }
}

@keyframes animate-mug3 {
	0% { background-position: -617px 0; }
	100% { background-position: 0 0; }
}

#pot, #pot2, #capp, #milk, #milk2 {
	text-align: center;
	position: absolute;
	top: 50px;
	left: 1024px;
	display: none;
}

#whiskey, #spoon, #whipped, #sugar, #sugar2 {
	text-align: center;
	position: absolute;
	top: 150px;
	left: 1024px;
	display: none;
}

#steam {
	text-align: center;
	position: absolute;
	top: 200px;
	left: 645px;
	display: none;
	
}

#white, #blue {
	text-align: center;
	position: absolute;
	top: 200px;
	left: 660px;
	display: none;
	
}

#orange {
	text-align: center;
	position: absolute;
	top: 300px;
	left: 700px;
	display: none;
}

#cream {
	text-align: center;
	position: absolute;
	top: 200px;
	left: 700px;
	display: none;
}

#milkbutton {
	position: absolute;
	text-align: center;
	top: 620px;
	left: 640px;
	display: none;
}

#milkbutton2 {
	position: absolute;
	text-align: center;
	top: 620px;
	left: 640px;
	display: none;
}

#sugarbutton {
	position: absolute;
	text-align: center;
	top: 620px;
	left: 640px;
	display: none;
}

#sugarbutton2 {
	position: absolute;
	text-align: center;
	top: 620px;
	left: 640px;
	display: none;
}


#brownsugarbutton {
	position: absolute;
	text-align: center;
	top: 620px;
	left: 640px;
	display: none;
}

#creambutton {
	position: absolute;
	text-align: center;
	top: 620px;
	left: 640px;
	display: none;
}

#whiskeybutton {
	position: absolute;
	text-align: center;
	top: 620px;
	left: 640px;
	display: none;
}

#finishbutton {
	position: absolute;
	text-align: center;
	top: 620px;
	left: 640px;
	display: none;
}

#refresh {
	position: absolute;
	text-align: center;
	top: 620px;
	left: 640px;
	display: none;
}