/* RESET */
html, body, h1, h2, h3, p, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Fonts */
h1 {
	font-family: 'Waiting for the Sunrise', cursive;
	font-size: 56px;
}
h2 {
	font-family: 'Amatic SC', cursive;
	font-size: 36px;
}
h3 {
	font-family: 'Amatic SC', cursive;
	font-size: 20px;
}
h4 {
	font-family: 'Waiting for the Sunrise', cursive;
	font-size: 20px;
}

/* Basic Page Layout */
.title {
	width: 100%;
	margin-top: 25px;
	margin-bottom: 25px;
	text-align: center;
}
.container {
	position: relative;
	width: 900px;
	height: 550px;
	background-color: #EEE;
	margin: auto;
	overflow: hidden;
}
.dialogue-text {
	position: absolute;
	width: 810px;
	height: 40px;
	bottom: 20px;
	left: 20px;
	background-color: #FFF;
	z-index: 50;
	text-align: center;
	font-family: 'Amatic SC', cursive;
	font-size: 32px;
	text-transform: uppercase;
}
.dialogue-advance {
	position: absolute;
	bottom: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	background-color: #FFF;
	cursor: pointer;
	background-image: url('../img/arrow.png');
	transition: background-color .2s;
}
.dialogue-advance:hover {
	background-color: #F69F4E;
}
.label{
	position: absolute;
	width: 200px;
	height: 50px;
	display: none;
}
.label h4{
	margin: 12px;
}
#label-left{
	background-image: url('../img/label-left.png');
}
#label-right{
	background-image: url('../img/label-right.png');
}
#label-right h4 {
	margin-left: 30px;
}

/* Global Objects */
.coffee-cup {
	position: absolute;
	background-image: url('../img/coffee-cup.png');
	width: 150px;
	height: 250px;
}
.cup-name {
	position: absolute;
	width: 100px;
	top: 100px;
	left:25px;
	transform:rotate(-10deg);
	-ms-transform:rotate(-10deg); /* IE 9 */
	-webkit-transform:rotate(-10deg); /* Opera, Chrome, and Safari */
	text-align: center;
	overflow: hidden;
}
.coffee-type {
	position: absolute;
	top: 125px;
	right:35px;
	transform:rotate(12deg);
	-ms-transform:rotate(12deg); /* IE 9 */
	-webkit-transform:rotate(12deg); /* Opera, Chrome, and Safari */
	text-align: right;
	overflow: hidden;
}
.coffee-cup-small {
	position: absolute;
	background-image: url('../img/coffee-cup-small.png');
	width: 50px;
	height: 75px;
}
.cup-name-small {
	position: absolute;
	width: 33px;
	top: 25px;
	left: 9px;
	transform:rotate(-10deg);
	-ms-transform:rotate(-10deg); /* IE 9 */
	-webkit-transform:rotate(-10deg); /* Opera, Chrome, and Safari */
	text-align: center;
	overflow: hidden;
}
.cup-name-small h4 {
	font-size: 7px;
}
.coffee-type-small {
	position: absolute;
	top: 34px;
	right:12px;
	transform:rotate(12deg);
	-ms-transform:rotate(12deg); /* IE 9 */
	-webkit-transform:rotate(12deg); /* Opera, Chrome, and Safari */
	text-align: right;
	overflow: hidden;
}
.coffee-type-small h4{
	font-size: 7px;
}
.speech-bubble {
	position:absolute;
	background-image: url('../img/speech-bubble.png');
	width:100px;
	height:100px;
}

/* Cafe Objects */
.barista {
	position: absolute;
	width: 300px;
	height: 400px;
	background-image:url('../img/barista.png');
}
.grinder {
	position: absolute;
	width: 400px;
	height: 400px;
	background-image: url('../img/grinder.png');
}
.grinder-switch-on {
	position: absolute;
	width: 50px;
	height: 50px;
	background-image: url('../img/grinder-switch-on.png')
}
.grinder-switch-off {
	position: absolute;
	width: 50px;
	height: 50px;
	background-image: url('../img/grinder-switch-off.png')
}
.portafilter {
	position:absolute;
	width: 200px;
	height: 100px;
	background-image: url('../img/portafilter.png');
	cursor: pointer;	
}
.doser-lever {
	position: absolute;
	width: 50px;
	height: 50px;
	background-image: url('../img/doser-lever.png');
}
.coffee-grinds-fall {
	position: absolute;
	width: 15px;
	height: 25px;
	background-image: url('../img/coffee-grinds-fall.png');
	top: 260px;
	left: 160px;
	display:none;
}
.grinds-mound {
	position: absolute;
	width: 50px;
	height: 50px;
	background-image: url('../img/grinds-mound.png');
	top: -20px;
	left: 135px;
	display:none;
	cursor: pointer;
}
.grinds-scraped {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 85px;
	left: 165px;
}
.tamper {
	position: absolute;
	height: 100px;
	width: 60px;
	background-image: url('../img/tamper.png');
	top: 100px;
	left: 596px;
	display: none;
	cursor: pointer;
}
.tamp-drop {
	position:absolute;
	width: 40px;
	height: 2px;
	top: 30px;
	left: 140px;
}
.coffee-machine {
	position: absolute;
	width: 500px;
	height: 400px;
	top: 75px;
	left: 375px;
	background-image: url('../img/coffee-machine.png');
}
.portafilter-socket {
	position: absolute;
	width: 80px;
	height: 50px;
	top: 140px;
	left: 214px;
	background-image: url('../img/portafilter-socket.png');
	z-index: 20;
}
.portafilter-drop {
	position: absolute;
	width: 150px;
	height: 75px;
	top: 157px;
	left: 140px;
}
.portafilter-locked {
	position: absolute;
	width: 125px;
	height: 75px;
	top: 160px;
	left: 230px;
	background-image: url('../img/portafilter-locked.png');
	display: none;
}
.purge-button {
	position: absolute;
	width: 30px;
	height: 30px;
	background-image: url('../img/purge-button.png');
	top: 103px;
	left: 246px;
	cursor: pointer;
	display: none;
}
.cup-drop {
	width: 50px;
	height: 75px;
	left: 241px;
	top: 209px;
	position: absolute;
}
.purge-drip{
	position: absolute;
	top: 188px;
	left: 245px;
	height: 50px;
	width: 25px;
	background-image: url('../img/purge-drip.png');
	display: none;
}
.purge-drip-blonde{
	position: absolute;
	top: 188px;
	left: 245px;
	height: 50px;
	width: 25px;
	background-image: url('../img/purge-drip-blonde.png');
	display: none;
}
.water-spout{
	position: absolute;
	background-image: url('../img/water-spout.png');
	width: 25px;
	height: 75px;
	left: 174px;
	top: 153px;
}
.water-button {
	position: absolute;
	width: 25px;
	height: 25px;
	background-image: url('../img/water-button.png');	
	left: 176px;
	top: 111px;
	display: none;
	cursor: pointer;
}
.water {
	position: absolute;
	width: 50px;
	height: 50px;
	background-image: url('../img/water.png');
	left: 162px;
	top: 203px;
	display: none;
}
.milk-jug {
	position: absolute;
	width: 100px;
	height: 100px;
	background-image: url('../img/milk-jug.png');
	top: 300px;
	cursor: pointer;
}
.milk-jug img {
	position: absolute;
	z-index: 21;
}
.milk-jug-hot {
	display: none;
}
.steam-wand{
	position: absolute;
	width: 50px;
	height: 100px;
	background-image: url('../img/steam-wand.png');
	left: 117px;
	top: 167px;
}
.milk-jug-drop {
	position: absolute;
	left: -66px;
	top: 264px;
	height: 100px;
	width: 100px;
}