/*CREATED FALL 2014 BY HANNAH B. MOREDO*/


/*LAYOUT*/
body{
	background-color: black;
	font-family: 'junglefeverregular';
	font-size: 15pt;
}

@font-face {
    font-family: 'junglefeverregular';
    src: url('font/JungleFever-webfont.eot');
    src: url('font/JungleFever-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/JungleFever-webfont.woff') format('woff'),
         url('font/JungleFever-webfont.ttf') format('truetype'),
         url('font/JungleFever-webfont.svg#junglefeverregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

#header{
	color: green;
	padding: 10px;
	text-align: center;
	font-size: 30pt;
}

h2{
	margin-top: 0px;
	margin-bottom: 5px;
}

i{
	color: red;
}

#rules{
	color: yellow;
	text-align: center;
	font-size: 15pt;
}

#directions{
	color: white;
	padding: 20px;
	text-align: center;
	font-size: 15pt;
}

#gameWindow{
	position: relative;
	width: 800px;
	height: 500px;
	margin: 0 auto;
	margin-bottom: 80px;
	border: 1px silver solid;
	overflow: hidden;
}




/*KEEPING TRACK LEVELS*/
#levels{
	margin-top: 10px;
	margin-right: 10px;
	float: right;
	width: 200px;
	height: 40px;
}

.levelIn{
	position: relative;
	font-size: 15pt;
	border-radius: 10px;
	background-color: gray;
	margin-right: 3px;
	padding: 10px;
	float: right;
}


/*BUTTONS*/
.button{
	padding: 10px;
	border-radius: 10px;
	width: 200px;
	text-align: center;
	cursor: hand;
	cursor: pointer;
	font-size: 25pt;
	background-color: #888888;
	color: white;
	margin: 0 auto;
	margin-top: 100px;
}

#btnContinue{
	position: absolute;
	left: 350px;
	top: 320px;

	display: none;

	background-color: rgba(255, 255, 255, 0.9);
	color: black;
	padding: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 10px;

	text-align: center;
	font-size: 14pt;

	cursor: hand;
	cursor: pointer;

	z-index: 10;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select:none;
}

#btnContinue:hover{
	background-color: rgba(255, 255, 255, 0.9);
}



/*SCREENS*/
#introScreen{
	position: absolute;
	z-index: 100;
	width: 800px;
	height: 600px;
	background-color: #336633;
}

#txtIntroScreen{
	color: black;	
}

#introScreenContent{
	width: 500px;
	height: 305px;
	padding: 40px;
	margin-top: 50px;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	border-radius: 15px;
	background-image: url("image/banana.png");
	background-color: #336633;
	margin: 80 auto;
	text-align: center;
	color: white;
}

#nextScreen{
	position: absolute;
	z-index: 101;
	width: 800px;
	height: 600px;
	background-color: #336633;
	display: none;
}

#nextContent{
	width: 500px;
	height: 305px;
	padding: 40px;
	margin-top: 50px;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	border-radius: 15px;
	background-image: url("image/banana.png");
	background-color: #336633;
	margin: 80 auto;
	text-align: center;
	color: white;	
}

#endScreen{
	position: absolute;
	z-index: 102;
	width: 800px;
	height: 600px;
	background-color: #336633;
	display: none;
}

#endScreenContent{
	width: 500px;
	height: 305px;
	padding: 40px;
	margin-top: 50px;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	border-radius: 15px;
	background-image: url("image/banana.png");
	background-color: #336633;
	margin: 80 auto;
	text-align: center;
	color: white;	
}


/*different elements*/	
#sky, #trees, #ground, #kid, #gorilla, #goal{
	position: absolute;
}

.gameObject{
	position: absolute;
	z-index: 3;
}

#sky{ z-index: 1; }
#trees{ z-index: 2; }
#ground{ z-index: 3; }
#kid{ z-index: 3; }
#gorilla{ z-index: 3; }
#goal{ z-index: 3; }
#level1{ z-index: 3; }
#level2{ z-index: 3; }
#level3{ z-index: 3; }
#level4{ z-index: 3; }
#level5{ z-index: 3; }



.flip-H{
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	transform: scaleX(-1);
	-ms-filter: fliph;
	filter: fliph;
}