#mainContainer{
	width:750px;
	height:500px;
	border:1px solid #ffffff;
	position:absolute;
	top:50%;
	margin-top:-225px;
	left:50%;
	margin-left:-375px;
	overflow:hidden;
	float:left;
	border:5px solid #ffffff;
	border-radius: 10px;
}

#zoomImg{
	position:absolute;
	right:0px;
}

body{
	background:#010101;
	overflow:hidden;
	background-image:url('../assets/galaxy.png');
	background-repeat:repeat;
}

#logo {
	position: absolute;
	top: 10px;
	left: 200px;
	margin-left: -177px;
}


.animatingTile{
	
	background-repeat:repeat-x;
	float:left;
	position:absolute;
	width:1500px;
	height:500px;
}

#child1{
	
}

#child2{
	
}

#child3{
	
}

#child1{
	left:0px;
	top:0px;
}

#child2{
	left:1500px;
	top:0;
}

#child3{
	left:3000px;
	top:0;
}

#hero{
	overflow:hidden;
}


#hero{
	position:absolute;
	top:50%;
	margin-top:-106px;
	left:-400px;
	max-height:120px;
}

#hero>img{
	max-height:80px;
	margin-top: 40px;
}

#masterRect{
	width:100%;
	height:100%;
	position:relative;
	float:left;
	left:0px;
	top:0px;
}

#cdRect {
	width: 110px;
	height: 30px;
	position: absolute;
	left: 50%;
	float: left;
	margin-left: -45px;
	top: -58px;
}

.mines{
	left:1600px;
	position:absolute;
	z-index: 200;
}

.coffee{
	left:1600px;
	position:absolute;
	z-index:200;
}

#button{
	width:100px;
	height:40px;
	position:relative;
	top:0px;
	left:50%;
	margin-left:-50px;
	background:#ececec;
	cursor:pointer;
}

#button > label {
width: 100px;
text-align: center;
line-height: 39px;
color: black;
height: 40px;
min-width: 100px;
margin-left: 35px;
cursor:pointer;
}

#buttonStop{
	width:100px;
	height:40px;
	position:absolute;
	top:8px;
	left:60%;
	margin-left:-50px;
	background:#ececec;
	cursor:pointer;
}

#buttonStop > label {
width: 100px;
text-align: center;
line-height: 39px;
color: black;
height: 40px;
min-width: 100px;
margin-left: 35px;
cursor:pointer;
}

#spriteFish{
	width:118px;
	height:24px;
	
	background-position-y: 0px;
	
}

#spriteContainer{
	background:url(fishSprite.png);
	background-repeat:no-repeat;
	position:absolute;
	left:50%;
	top:200px;
	width:38px;
	height:26px;
	overflow:hidden;
}

#mountains{
left:0px;
position:absolute;
bottom:0px;
background-image:url('../assets/mountains2.png');
z-index: 550;
background-repeat: repeat-x;
width:1500px;
height:191px;
}

#buildings{
	width:1500px;
	height:162px;
	left:0px;
	position:absolute;
	bottom:-14px;
	background-image:url('../assets/trees.png');
	z-index: 600;
	background-repeat: repeat-x;
}

/*  UI */
#scoreBoard{
	top:0px;
	left:50px;
	
	width:250px;
	height:40px;
}

#mainUI{
	max-width:300px;
	max-height:200px;
	z-index: 500;
	float:left;
	position:relative;
}

.uiText{
	padding:10px;
	padding-top:5px;
	float:left;
	position:relative;
	font-family: 'Bangers', cursive; 
	font-size:30px;
	color:#2e2e2e;
}

#points{
	float:left;
	position:relative;
	color:#ce2929;
}

#gameover {
font-size: 105px;
font-family: 'Bangers',cursive;
position: absolute;
left: 50%;
margin-left: -200px;
top: 50%;
margin-top: -100px;
display: none;
z-index: 500;
overflow: visible;
width: 500px;
height: 200px;
}

#buttons-gameover {
	position: relative;
	float: left;
	width: 600px;
	height: 70px;
	display: none;
	z-index: 600;
	top: 50%;
	margin-top: 15px;
	left: 50%;
	margin-left: -585px;
}

#splash{
	float:left;
	position:relative;
	width:500px;
	height:300px;
	z-index: 600;
}

#splash {
	float: left;
	position: relative;
	width: 500px;
	height: 300px;
	z-index: 600;
	left: 50%;
	margin-left: -400px;
	padding-top: 50px;
}

#splash>#startBtn{
	padding-left:30px;
}

#startBtn{
	float:left;
	position:relative;
	cursor:pointer;
}

#restartBtn{
	float:left;
	position:relative;
	cursor:pointer;
}

#shareBtn{
	float:left;
	position:relative;
	cursor:pointer;
}

#coffeeMeter{
	
	background-repeat:no-repeat;
	overflow:hidden;
	width:141px;
	height:21px;
	position:relative;
	float:right;
	top:0px;
	right:0px;
	z-index: 610;
}

#activeBar{
	position:absolute;
	top:5px;
	left:5px;
	z-index: 601;
}


#bgCoffeeBar{
	width:131px;
	height:21px;
	background-color:#000000;
	z-index: 600;
	position: absolute;
	top:0px;
	left:5px;
}

#coffeeMeter>img:first-child{
	width:141px;
	height:21px;
	overflow:hidden;
	z-index: 605;
	position: absolute;
}


/* MENU */

#menu{
	position:absolute;
	top:50px;
	left:70%;
	width:500px;
	height:40px;
}

.menuBtn{
	position:relative;
	float:left;
	margin:10px;
	padding:5px;
	cursor:pointer;
}

.menuLabel{
	cursor:pointer;
	float:left;
	position:relative;
	font-family: 'Bangers', cursive;
	font-size: 30px;
	color:#ffffff;
	border:2px solid #ffffff;
	border-radius: 5px;
	padding:5px;
}

#popupRules {
position: absolute;
display: block;
background: 
#030303;
border: 3px solid 
white;
border-radius: 5px;
width: 400px;
height: 200px;
left: 50%;
z-index: 999;
top: 50%;
margin-top: -100px;
margin-left: -200px;
}

#note {
top: 50px;
padding-left: 20px;
padding-right: 20px;
width: 100%;
text-align: center;
font-family: 'Bangers', cursive;
font-size: 30px;
color: white;
float: left;
width:360px;
position: relative;
}

.shadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

.xClose{
	position:absolute;
	right:5px;
	top:5px;
	cursor:pointer;
}


/* eof */