/* ==========================================
GLOBAL

#satellite	 		=	z-index: 12; 
#ribbon-onStart	 	=	z-index: 11; 


#coral-(1 to 3)	 	=	z-index: 1;
#ribbon-(11 to 18)	=	z-index: 2;
#rocket				=	z-index: 6;
#robby	 			=	z-index: 5;
.rocket-backround	=	z-index: 3;
========================================== */

@font-face
{
	font-family: 'Arial-Rounded-Regular';
    src: url('../_fonts/ArialRoundedMTPro.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
	font-family: 'Arial-Rounded-Light';
    src: url('../_fonts/ArialRoundedMTPro-Light.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
	font-family: 'Arial-Rounded-Bold';
    src: url('../_fonts/ArialRoundedMTPro-Bold.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
	font-family: 'Arial-Rounded-Extra-bold';
    src: url('../_fonts/ArialRoundedMTPro-ExtraBold.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body 			{margin: 0px; background-color: #00baee; font-family: "Arial-Rounded-Regular", arial; }

a { text-decoration: none; border: none;}

.displaynone 	{ display: none; }
.transparent	{ opacity: 0; filter: alpha(opacity=0); }


#page			{ left: 0px; top: 0px; width: 100%; }
#container		{ position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; }


.layer-horizontal					{ position: absolute; left: 0px; top: 100%; height: 100%;}
	#layer-horizontal-1				{ width:  4000px; }
	#layer-horizontal-2				{ width: 17000px; }
	#layer-horizontal-3				{ width: 12000px; }
	#layer-horizontal-4				{ width: 14000px; }
	#layer-horizontal-5				{ width: 17500px; }
	#layer-horizontal-6				{ width: 19500px; }

.layer-vertical		{ position: absolute; bottom: 0px; width: 100%; }
	#layer-vertical-1	{ height: 3500px; }
	#layer-vertical-2	{ height: 6000px; }
	#layer-vertical-3	{ /*height is set by javascript*/ }



/*#sea-1	{ position: absolute; left: 8100px; height: 100%; width: 5220px; top: 80%; }*/
#sea-1	{ position: absolute; left: 8100px; height: 105%; width: 4220px; top: 80%;}

/*#sea-floor	{ position: absolute; left: 0px; top: 175%; width: 22500px; height: 5%; background-color: #ae6b43; }*/
#sea-floor	{ position: absolute; left: 0px; top: 185%; width: 18500px; height: 5%; background-color: #ae6b43; }

#experience-1-container
{
	position: absolute;
	left: 13388px;
	bottom: 20%;
	width: 1000px;
	height: 80%;
}



#panel-and-floor-container
{
	position: absolute;
	left: 12320px;
	top: 80%;
	width: 4600px;
	height: 105%;
	background-color: #444444;
	overflow: hidden;
}


#experience-2-container
{
	position: absolute;
	left: 15200px;
	bottom: 20%;
	width: 600px;
	height: 80%;
}

#experience-3-container
{
	position: absolute;
	left: 16000px;
	bottom: 20%;
	width: 900px;
	height: 80%;
}



#robby
{
	position: relative;
	left: -50%;
	width: 200px;
	height: 175px;
	overflow: hidden;
	 z-index: 5;
}

#robby-container
{
	position: absolute;
	left: 50%;
	bottom: 100%;
}

#robby-eyes-close
{
	position: absolute;
	top: 38px;
	left: 88px;
	width: 42px;
	height: 25px;
	background-image: url(../_img/bob-eyes-close.png);
}

#robby-slides
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 1800px;
	height: 400px;
	background-image: url(../_img/bob-sprite.png);
}



#Level-1	{ position: absolute; left: 2300px; bottom: 20%;}
#Level-2	{ position: absolute; left: 7668px; bottom: 20%;}
#Level-3	{ position: absolute; left: 12320px; bottom: 20%;}
#Level-4	{ position: absolute; left: 16910px; bottom: 20%;}


.gate-1			{ position: absolute; bottom: 0; left: 0px;  width: 385px; height: 320px; background: url(../_img/gates-sprite.png) no-repeat 0 0;  }
.gate-1-text-a 	{ position: relative; width: 300px; left:80px; top:11px; text-align:center; color: #753c23; font-size: 28px; font-family: "Arial-Rounded-Bold"; }
.gate-1-text-b	{ position: relative; width: 300px; left:80px; top:17px; text-align:center; color: #753c23; font-size: 48px; font-family: "Arial-Rounded-Extra-Bold"; }


.gate-2			{ position: absolute; bottom: 0; left: 415px; width: 385px; height: 300px; background: url(../_img/gates-sprite.png) no-repeat 0 -320px; }
.gate-2-text-a 	{ position: relative; width: 302px; left:415px; bottom:208px; text-align:center; color: #753c23; font-size: 28px; font-family: "Arial-Rounded-Bold"; }
.gate-2-text-b 	{ position: relative; width: 302px; left:415px; bottom:200px; text-align:center; color: #753c23; font-size: 40px;font-family: "Arial-Rounded-Bold"; }

.gate-3			{ position: absolute; bottom: 0; left: 0px;  width: 298px; height: 316px; background: url(../_img/gates-sprite.png) no-repeat 0 -620px;  }
.gate-3-text-a 	{ position: relative; width: 292px; bottom: -20px; text-align:center; color: #fff; font-size: 26px; font-family: "Arial-Rounded-Bold"; }
.gate-3-text-b 	{ position: relative; width: 292px; bottom: -20px; text-align:center; color: #fff; font-size: 42px;font-family: "Arial-Rounded-Bold"; }

.gate-4			{ position: absolute; bottom: 0; left: 0px;  width: 326px; height: 318px; background: url(../_img/gates-sprite.png) no-repeat 0 -936px;  }
.gate-4-text-a 	{ position: relative; width: 320px; bottom: -15px; text-align:center; color: #333; font-size: 28px; font-family: "Arial-Rounded-Bold"; }
.gate-4-text-b 	{ position: relative; width: 320px; bottom: -15px; text-align:center; color: #333; font-size: 48px;font-family: "Arial-Rounded-Extra-Bold"; }



#sea-layer-horizontal-1
{
	left: 0px;
	width: 100%;
	top: 80%;
	background-image: url(../_img/ground-2.png); 
}

#sea-layer-horizontal-1
{
	left: 0px;
	width: 100%;
	top: 80%;
	background-image: url(../_img/ground-2.png); 
}

/*
==========================================
LOADING
==========================================
*/

#preloader-container		{ position: absolute; left: 50%; top: 50%; }
#preloader					{ position: absolute; left: 0px; bottom: 0px; width: 100%; height: 100%; }
#preloader-cloud-container	{ position: absolute; left: 50%; top: 50%; }
#preloader-cloud			{ position: relative; left: -50%; margin-top: -150px; width: 360px; height: 200px; background: url(../_img/preloader-cloud.png); }
#preloader-wheel			{ position: absolute; left: 130px; top: 50px; width: 120px; height: 120px; }

.preloader-wheel-animation	{ background-image: url(../_img/preloader-wheel-animation.gif); }
.preloader-wheel-static 	{ background-image: url(../_img/preloader-wheel-static.png); }


#scroll-message-container,
#swipe-message-container	{ z-index: 11; position: absolute; bottom: 0px; width: 100%; height: 71px; opacity: 0; filter: alpha(opacity=0); }

#scroll-message-container #ribbon-onStart 							{ width: 465px; }
#scroll-message-container #ribbon-onStart div.ribbon-onStart	 	{ width: 400px; }

#swipe-message-container #ribbon-onStart 							{ width: 505px; }
#swipe-message-container #ribbon-onStart div.ribbon-onStart	 		{ width: 440px; }


.icon-scroll,
.icon-swipe		{ display:block; height: 38px; padding: 0 58px 0 0; margin-top: 10px; text-align: center; line-height: 42px; font-family: 'Arial-Rounded-Bold'; color: #ffffff; font-size: 28px;	 }

.icon-scroll	{ background: url(../_img/icon-scroll-sprite.png) no-repeat top right; }
.icon-swipe		{ background: url(../_img/icon-scroll-sprite.png) no-repeat bottom right; }

/*
==========================================
LEVEL ONE - Farm
==========================================
*/

#logo-layer		{ position: absolute; width: 100%; height: 550px; left: 0px; }
#logo-container	{ position: relative; margin: 0 auto; bottom: 100%; width: 432px; height: 550px; background: url(../_img/logo-sign.png) no-repeat left bottom; }


.grass								{ position: absolute; width: 100%; height: 50px; background-image: url(../_img/grass.png); }
.ground								{ position: absolute; width: 100%; height: 100%; background-image: url(../_img/ground-1.png); }
	#ground-and-grass-container-1	{ position: absolute; left: 0px; top: 80%; width: 8100px; height: 105%; }
	#ground-and-grass-container-2	{ position: absolute; right: 0%; bottom: 0%; width: 1160px; height: 2000px; }


#barn 		{ left: -10px; bottom: 0px; }
	.barn 	{ position:absolute; width: 425px; height: 420px; background-image: url(../_img/barn.png); }


.cloud-a	{ position: absolute; width: 220px; height: 110px; background-image: url(../_img/cloud-a.png); }
.cloud-b	{ position: absolute; width: 230px; height: 105px; background-image: url(../_img/cloud-b.png); }
.cloud-c	{ position: absolute; width: 170px; height: 130px; background-image: url(../_img/cloud-c.png); }

#cloud-1	{ left: 30px; top: 10%; }
#cloud-2	{ left: 600px; top: 2%; }
#cloud-3	{ left: 1300px; top: 30%; }
#cloud-4	{ left: 1900px; top: 20%; }
#cloud-5	{ left: 10%; bottom: 550px; }
#cloud-6	{ left: 25%; bottom: 1200px; }
#cloud-7	{ left: 70%; bottom: 1400px; }
#cloud-8	{ left: 40%; bottom: 1800px; }
#cloud-9	{ left: 80%; bottom: 2000px; }


.cow	{ position: absolute; }

#cows-container	{ position: absolute; left: 2664px; bottom: 20%; width: 900px; height: 100%; }

#cow-1		{ bottom: 0; width: 236px; height: 100%; }
#cow-2		{ bottom: 0; width: 236px; height: 100%; }
#cow-3		{ bottom: 0; width: 236px; height: 100%; }


.cow-1, .cow-2, .cow-3										{ position: absolute; width: 236px; height: 182px; bottom: 0; }
.cow-1-eyes-close, .cow-2-eyes-close, .cow-3-eyes-close		{ position: absolute; width: 236px; height: 182px; opacity:0; filter:alpha(opacity=0); }


.cow-1				{ background: url(../_img/cows-sprite.png) no-repeat 0 0; }
.cow-1-eyes-close	{ background: url(../_img/cows-sprite.png) no-repeat 0 -182px; }

.cow-2				{ background: url(../_img/cows-sprite.png) no-repeat -236px 0; }
.cow-2-eyes-close	{ background: url(../_img/cows-sprite.png) no-repeat -236px -182px; }

.cow-3 				{ background: url(../_img/cows-sprite.png) no-repeat -472px 0; }
.cow-3-eyes-close	{ background: url(../_img/cows-sprite.png) no-repeat -472px -182px; }


#cow-leg-container-1, #cow-leg-container-2, #cow-leg-container-3	{ position: absolute; overflow: hidden; bottom: 0; width: 236px; height: 182px; }

.cow-leg-frame-a, .cow-leg-frame-b	{ position: absolute; bottom: 0; width: 472px; height: 182px; }
/* width: 472px; - full length is used as javascript shifts image to the left by 50% */

.cow-leg-frame-a	{ background: url(../_img/cows-sprite.png) no-repeat 0 -364px; }
.cow-leg-frame-b	{ background: url(../_img/cows-sprite.png) no-repeat 0 -546px; }


.cow-ribbon-container					{ position: absolute; bottom: 250px; }
.cow-ribbon-container div.ribbon-a 		{ width: 172px; height: 41px; padding: 10px 0 0 0; text-align: center; color: #ffffff; font-family: "Arial-Rounded-Bold"; font-size: 20px; line-height: 32px; }
.cow-ribbon-container div.ribbon-a a 	{ color: #fff; /*text-decoration: underline;*/ }

#fence-container	{ position: absolute; bottom: 0; left: 0; bottom: 0; width: 1105px; height: 74px; padding-right: 85px; background: url(../_img/fence-sprite.png) no-repeat right -74px;}
.fence				{ position: absolute; bottom: 0; float:left; width: 1105px; height: 74px; background: url(../_img/fence-sprite.png) repeat-x 0 0; }


.mountain-a					{ position: absolute; width: 405px; height: 418px; background-image: url(../_img/mountain-a.png); }
.mountain-b					{ position: absolute; width: 570px; height: 476px; background-image: url(../_img/mountain-b.png); }
.mountain-c					{ position: absolute; width: 698px; height: 552px; background-image: url(../_img/mountain-c.png); }
.mountain-d					{ position: absolute; width: 737px; height: 638px; background-image: url(../_img/mountain-d.png); }
	
	
	#mountain-container-1 	{bottom: 20%;  left: 900px;}		/* mountain-c */
	#mountain-container-2 	{bottom: 20%;  left: 1100px;}		/* mountain-b */
	#mountain-container-3 	{bottom: 20%;  left: 850px;}		/* mountain-a */
	#mountain-container-4 	{bottom: 20%; left: 2800px; } 	/* mountain-a */
	
	#mountain-container-5 	{bottom: 0; left: 37px; } 	/* mountain-a */
	#mountain-container-6 	{bottom: 0; left: 536px; } 	/* mountain-a */
	#mountain-container-7 	{bottom: 0; left: 200px; } 	/* mountain-a */



#jump-1			{ left: 1150px; bottom: 20%; width: 400px; height: 120px; }
#jump-2			{ left: 7100px; bottom: 20%; width: 400px; height: 120px; }
#jump-3			{ left: 14588px; bottom: 20%; width: 400px; height: 150px; }
#jump-4			{ left: 17680px; bottom: 20%; width: 400px; height: 150px; }

.jump					{ position: absolute; }
.jump-scaffolding		{ position: absolute; width: 100%; height: 100px; bottom: 0px; background-image: url(../_img/scaffolding.png); }
.jump-floor			{ position: absolute; width: 100%; height: 50px; background-image: url(../_img/base-floor.png); }




#plant-1		{ left: 510px; } 	/* bush-a-light */
#plant-2		{ left: 1900px;} 	/* bush-a */
#plant-3		{ left: 1720px;} 	/* bush-b-light */
#plant-4		{ left: 1000px;; }
#plant-5		{ left: 1200px; }
#plant-6		{ left: 1400px; bottom: 0px; }
#plant-7		{ left: 1600px; bottom: 0px; }
#plant-8		{ left: 1800px; bottom: 0px; }
#plant-9		{ left: 2000px; bottom: 0px; }
#plant-10		{ left: 2200px; bottom: 0px; }
#plant-11		{ left: 2400px; bottom: 0px; }
#plant-12		{ left: 2600px; bottom: 0px; }
#plant-13		{ left: 2800px; bottom: 0px; }
#plant-14		{ left: 3000px; bottom: 0px; }
#plant-15		{ left: 3200px; bottom: 0px; }
#plant-16		{ left: 3400px; bottom: 0px; }
#plant-17		{ left: 3600px; bottom: 0px; }
#plant-18		{ left: 3800px; bottom: 0px; }


.bush-a-light	{ position:absolute; bottom: 20%; width: 220px; height: 125px; background: url(../_img/plants-sprite.png) no-repeat 0 0; }
.bush-a			{ position:absolute; bottom: 20%; width: 220px; height: 125px; background: url(../_img/plants-sprite.png) no-repeat -220px 0; }
.bush-a-dark	{ position:absolute; bottom: 20%; width: 220px; height: 125px; background: url(../_img/plants-sprite.png) no-repeat -440px 0; }

.bush-b-light	{ position:absolute; bottom: 20%; width: 262px; height: 154px; background: url(../_img/plants-sprite.png) no-repeat 0 -125px; }
.bush-b			{ position:absolute; bottom: 20%; width: 262px; height: 154px; background: url(../_img/plants-sprite.png) no-repeat -262px -125px; }
.bush-b-dark	{ position:absolute; bottom: 20%; width: 262px; height: 154px; background: url(../_img/plants-sprite.png) no-repeat -524px -125px; }

.bush-c-light	{ position:absolute; bottom: 20%; width: 254px; height: 200px; background: url(../_img/plants-sprite.png) no-repeat 0 -279px; }
.bush-c			{ position:absolute; bottom: 20%; width: 254px; height: 200px; background: url(../_img/plants-sprite.png) no-repeat -254px -279px; }
.bush-c-dark	{ position:absolute; bottom: 20%; width: 254px; height: 200px; background: url(../_img/plants-sprite.png) no-repeat -508px -279px; }


.tree-a-light	{ position:absolute; bottom: 20%; width: 345px; height: 328px; background: url(../_img/plants-sprite.png) no-repeat 0 -479px; }
.tree-a			{ position:absolute; bottom: 20%; width: 345px; height: 328px; background: url(../_img/plants-sprite.png) no-repeat -345px -479px; }
.tree-a-dark	{ position:absolute; bottom: 20%; width: 345px; height: 328px; background: url(../_img/plants-sprite.png) no-repeat -690px -479px; }

.tree-b-light	{ position:absolute; bottom: 20%; width: 380px; height: 390px; background: url(../_img/plants-sprite.png) no-repeat 0 -807px; }
.tree-b			{ position:absolute; bottom: 20%; width: 380px; height: 390px; background: url(../_img/plants-sprite.png) no-repeat -380px -807px; }
.tree-b-dark	{ position:absolute; bottom: 20%; width: 380px; height: 390px; background: url(../_img/plants-sprite.png) no-repeat -760px -807px; }

.tree-c-light	{ position:absolute; bottom: 20%; width: 366px; height: 452px; background: url(../_img/plants-sprite.png) no-repeat 0 -1197px; }
.tree-c			{ position:absolute; bottom: 20%; width: 366px; height: 452px; background: url(../_img/plants-sprite.png) no-repeat -366px -1197px; }
.tree-c-dark	{ position:absolute; bottom: 20%; width: 366px; height: 452px; background: url(../_img/plants-sprite.png) no-repeat -732px -1197px; }


#hay-bale		{ position: absolute; left: 4188px; bottom: 20%; width: 270px; height: 120px; background-image: url(../_img/hay-bale.png); }

#tracktor-frame	{ position: absolute; left: 4000px; bottom: 20%; width: 418px; height: 255px; background-image: url(../_img/tractor-sprite.png); }


#flowers-container	{ position: absolute; left: 5100px; bottom: 20%; width: 900px; height: 85%; }

#flower-line-1		{ bottom: 65%; }
.flower-line		{ position: absolute; width: 100%; height: 1px; }

.flower-ribbon-container				{ position: absolute; top: -90px; }
.flower-ribbon-container div.ribbon-b 	{ width: 175px; height: 39px; padding: 12px 0 0 0;  text-align: center; color: #ffffff; font-family: "Arial-Rounded-Bold"; font-size: 22px; }
.flower-ribbon-container div.ribbon-b a 	{ color: #fff; /*text-decoration: underline;*/ }


.flower				{ position: absolute; width: 245px; height: 100%; }
.flower-head-leaves	{ position: relative; width: 160px; height: 265px; margin: 0 auto; background-image: url(../_img/flower-head-leaves.png); }
.flower-stalk		{ position: absolute; left: 116px; top: 95px; width: 14px; height: 100%; background: url(../_img/flower-stalk.png) repeat-y; }

#flower-1	{ left: 0; top: 65%; }
#flower-2	{ left: 250px; top: 65%; }
#flower-3	{ left: 500px; top: 65%; }
#flower-4	{ left: 750px; top: 65%; }


#mine-cart-container	{ position: absolute; left: 6808px; bottom: 20%; width: 1000px; height: 188px; }
#mine-cart				{ position: relative; width: 211px; height: 188px; background-image: url(../_img/mine-cart.png); }

/* ==================================================== */



.ribbon-a			{ position: relative; float: left; background: url(../_img/ribbons-sprite.png) repeat-x 0 0; }
.ribbon-a-left		{ position: relative; float: left; width: 30px; height: 51px; margin-right: -1px; background: url(../_img/ribbons-sprite.png) no-repeat 0 -51px; }
.ribbon-a-right		{ position: relative; float: left; width: 36px; height: 51px; margin-left: -1px; background: url(../_img/ribbons-sprite.png) no-repeat 0 -102px; }
/* margin-left: -1px; = to cover 1 line gap between div in safari*/

.ribbon-b			{ position: relative; float: left; background: url(../_img/ribbons-sprite.png) repeat-x 0 -153px; }
.ribbon-b-left		{ position: relative; float: left; width: 30px; height: 51px; margin-right: -1px; background: url(../_img/ribbons-sprite.png) no-repeat 0 -204px; }
.ribbon-b-right		{ position: relative; float: left; width: 36px; height: 51px; margin-left: -1px; background: url(../_img/ribbons-sprite.png) no-repeat 0 -255px; }

.ribbon-c			{ position: relative; float: left; background: url(../_img/ribbons-sprite.png) repeat-x 0 -306px; }
.ribbon-c-left		{ position: relative; float: left; width: 30px; height: 51px; margin-right: -1px; background: url(../_img/ribbons-sprite.png) no-repeat 0 -357px; }
.ribbon-c-right		{ position: relative; float: left; width: 36px; height: 51px; margin-left: -1px; background: url(../_img/ribbons-sprite.png) no-repeat 0 -408px; }

.ribbon-d			{ position: relative; float: left; background: url(../_img/ribbons-sprite.png) repeat-x 0 -459px; }
.ribbon-d-left		{ position: relative; float: left; width: 30px; height: 50px; margin-right: -1px; background: url(../_img/ribbons-sprite.png) no-repeat 0 -510px; }
.ribbon-d-right		{ position: relative; float: left; width: 36px; height: 50px; margin-left: -1px; background: url(../_img/ribbons-sprite.png) no-repeat 0 -561px; }

.ribbon-e			{ position: relative; float: left; background: url(../_img/ribbons-sprite.png) repeat-x 0 -612px; }
.ribbon-e-left		{ position: relative; float: left; width: 42px; height: 140px; margin-right: -1px; background: url(../_img/ribbons-sprite.png) no-repeat 0 -752px; }
.ribbon-e-right		{ position: relative; float: left; width: 42px; height: 140px; margin-left: -1px; background: url(../_img/ribbons-sprite.png) no-repeat 0 -892px; }

#ribbon-onStart			{ position: relative; margin: 0 auto; bottom: -55%; height: 550px; z-index: 1; }
.ribbon-onStart			{ position: relative; float: left; height: 64px; background: url(../_img/ribbons-sprite.png) repeat-x 0 -1032px; }
.ribbon-onStart-left	{ position: relative; float: left; width: 30px; height: 64px; margin-right: -1px; background: url(../_img/ribbons-sprite.png) no-repeat 0 -1096px; }
.ribbon-onStart-right	{ position: relative; float: left; width: 36px; height: 64px; margin-left: -1px; background: url(../_img/ribbons-sprite.png) no-repeat 0 -1160px; }


/*
==========================================
LEVEL TWO - Gold mine
==========================================
*/

iframe {
	-webkit-border-radius: 180px; 
-moz-border-radius: 180px;
border-radius: 180px; 
border: none;
}

#underground-ribbon-a			{ position: absolute; left: 120px; bottom: -5px; }
#underground-ribbon-b			{ position: relative; left: 580px; bottom: 30px; }
#underground-ribbon-c			{ position: absolute; left: 50px; bottom: 135px; }

#underground-ribbon-a div.ribbon-c,
#underground-ribbon-b div.ribbon-c,
#underground-ribbon-c div.ribbon-c 		{ width: 580; height: 39px; padding: 12px 0 0 0;  text-align: center; color: #ffffff; font-family: "Arial-Rounded-Bold"; font-size: 22px; }
#underground-ribbon-a div.ribbon-c a,
#underground-ribbon-b div.ribbon-c a,
#underground-ribbon-c div.ribbon-c a 		{ color: #fff; /*text-decoration: underline;*/ }


#underground-background	{ position: absolute; left: 0px; height: 105%; width: 100%; top: 80%; background-image: url(../_img/ground-2.png); }

.soil-1
{
	position: absolute;
	left: 7600px;
	width: 152px;
	height: 140px;
	bottom: -85%;
	background-image: url(../_img/soil-1.png);
}


#skill-1-container
{
	position: absolute;
	left: 400px;
	bottom: 20%;
	width: 590px;
	height: 390px;
}

#skill-2-container
{
	position: absolute;
	left: 1380px;
	bottom: 40%;
	width: 1500px;
	height: 360px;
}

#skill-3-container
{
	position: absolute;
	left: 3280px;
	bottom: 0px;
	width: 520px;
	height: 100%;
}




.ladder-1 				{ position:absolute; left: 62px; top: 0; width: 156px; height: 100%; background-image: url(../_img/ladder-1.png); }
.ladder-2 				{ position:absolute; right: 62px; top: 0; width: 156px; height: 100%; background-image: url(../_img/ladder-2.png); }

.dinosuar 					{ }
	.dinosuar-container 	{ position:absolute; width: 590px; height: 390px; background: url(../_img/dinosaur-sprite.png) no-repeat -190px 0; }
	


.dinosuar-animate {
    position:absolute;
	width: 190px;
	height: 190px;
    background-image: url("../_img/dinosaur-sprite.png");
    
    -webkit-animation: play-dinosuar 4s steps(16) infinite;
       -moz-animation: play-dinosuar 4s steps(16) infinite;
        -ms-animation: play-dinosuar 4s steps(16) infinite;
         -o-animation: play-dinosuar 4s steps(16) infinite;
            animation: play-dinosuar 4s steps(16) infinite;
}

@-webkit-keyframes play-dinosuar {
   from { background-position: 0 0px; }
   80% { background-position: 0 0px; }
     to { background-position: 0px -3040px; }
}

@-moz-keyframes play-dinosuar {
   from { background-position: 0 0px; }
   80% { background-position: 0 0px; }
     to { background-position: 0px -3040px; }
}

@-ms-keyframes play-dinosuar {
   from { background-position: 0 0px; }
   80% { background-position: 0 0px; }
     to { background-position: 0px -3040px; }
}

@-o-keyframes play-dinosuar {
   from { background-position: 0 0px; }
   80% { background-position: 0 0px; }
     to { background-position: 0px -3040px; }
}

@keyframes play-dinosuar {
   from { background-position: 0 0px; }
   60% { background-position: 0 0px; }
     to { background-position: 0px -3040px; }
}






#station				{ bottom: -15%; }
	.station-container	{ position: relative; width: 1500px; height: 360px; /*background-image: url(../_img/station.png);*/ }

#train 					{ left: 0; top: 0; }
	.train-container 	{ position: relative; width: 1076px; height: 270px; background-image: url(../_img/train.png); }

#queen 					{ left: 450px; top: 92px; }
	.queen-container 	{ position: relative; width: 80px; height: 166px; background-image: url(../_img/queen.png); }


#treasure-pile 					{ bottom: 0%; }
	.treasure-pile-container 	{ position:absolute; width: 520px; height: 330px; background-image: url(../_img/treasure-pile.png); }
	
.treasure-chest {
    position:absolute;
	left:180px; 
	width: 138px;
	height: 145px;
    background-image: url("../_img/treasure-chest-sprite.png");
    
    -webkit-animation: play-treasure-chest 6s steps(24) infinite;
       -moz-animation: play-treasure-chest 6s steps(24) infinite;
        -ms-animation: play-treasure-chest 6s steps(24) infinite;
         -o-animation: play-treasure-chest 6s steps(24) infinite;
            animation: play-treasure-chest 6s steps(24) infinite;
}

@-webkit-keyframes play-treasure-chest {
   from { background-position: 0 0px; }
   80% { background-position: 0 0px; }
     to { background-position: 0px -3480px; }
}

@-moz-keyframes play-treasure-chest {
   from { background-position: 0 0px; }
   80% { background-position: 0 0px; }
     to { background-position: 0px -3480px; }
}

@-ms-keyframes play-treasure-chest {
   from { background-position: 0 0px; }
   80% { background-position: 0 0px; }
     to { background-position: 0px -3480px; }
}

@-o-keyframes play-treasure-chest {
   from { background-position: 0 0px; }
   80% { background-position: 0 0px; }
     to { background-position: 0px -3480px; }
}

@keyframes play-treasure-chest {
   from { background-position: 0 0px; }
   50% { background-position: 0 0px; }
     to { background-position: 0px -3480px; }
}

#underground-and-grass-container	{ position: relative; bottom: 0%; width: 100%; height: 2000px; clear:both;}

.underground-ceiling-1		{ float:left; height: 50px; width: 269px; display:block; }
.underground-ceiling-2 		{ float:left; height: 50px; width: 2660px; background-image: url(../_img/grass.png);}
.underground-ceiling-3		{ float:left; height: 50px; width: 1010px; background-image: url(../_img/base-floor.png);  } 


/* ======= Water under falls ====== */
#launch-pad  { left: 16920px; width: 2970px; height: 100%; }


.sea-wave
{
	position: absolute;
	bottom: 10%;
	height: 6px;
	background-image: url(../_img/img/sea-wave.png);
}

#sea-wave-1 	{ left: 8100px; width: 5220px; }
#sea-wave-2 	{ left: 19530px; width: 2970px; }

/*
==========================================
LEVEL THREE - Base
==========================================
*/

#base-ribbon-container-1			{ position: absolute; width: 550px; left: 100px; bottom: 110px; z-index: 2;}
#base-ribbon-container-2			{ position: absolute; width: 550px; left: 10px; bottom: 140px; z-index: 2;}
#base-ribbon-container-3			{ position: absolute; width: 550px; left: 340px; bottom: 210px; z-index: 2;}
#base-ribbon-container-4			{ position: absolute; width: 550px; left: 80px; top: 12%; z-index: 2;}

#base-ribbon-container-1 div.ribbon-d,
#base-ribbon-container-2 div.ribbon-d,
#base-ribbon-container-3 div.ribbon-d,
#base-ribbon-container-4 div.ribbon-d 	{ width: 250px; height: 40px; padding: 10px 0 0 0; text-align: center; color: #ffffff; font-family: "Arial-Rounded-Bold"; font-size: 22px; }

.ribbon-d a 	{ text-decoration: none; color: #fff; } 
.ribbon-d i 	{ /*text-decoration: underline;*/ font-style: normal;  } 

.left-wall
{
	position: absolute;
	left: 10897px;
	bottom: 20%;
	width: 1142px;
	height: 100%;
	background: url(../_img/wall.png) repeat left bottom;
}

#base-floor
{
	position: absolute;
	width: 100%;
	height: 50px;
	background-image: url(../_img/base-floor.png);
}

#base-background
{
	position: absolute;
	left: 9720px;
	width: 100%;
	height: 100%;
	bottom: 20%;
	background-image: url(../_img/base-background.png); 
}

.machine-background
{
	position: absolute;
	bottom: 20%;
	width: 474px;
	height: 374px;
	background-image: url(../_img/machine-background.png);
	background-position: 0% 100%;
}

#machine-background-1	{ left: 6600px; }
#machine-background-2	{ left: 9800px; }


#xray-machine
{
	position: absolute;
	left: 10830px;
	bottom: 20%;
	width: 533px;
	height: 190px;
	background-image: url(../_img/xray-machine.png);
}

#guard
{
	position: absolute;
	left: 11295px;
	bottom: 20%;
	width: 125px;
	height: 175px;
	background-image: url(../_img/guard.png);
}



#panel
{
	position: absolute;
	top: 60px;
	width: 100%;
	height: 100%;
	background-image: url(../_img/wall.png);
}



#robot
{
	position: absolute;
	left: 380px;
	bottom: 53px;
	width: 620px;
	height: 100%;
}

#robot-body
{
	position: absolute;
	left: 60px;
	top: 0px;
	width: 342px;
	height: 100%;
	background: url(../_img/robot-sprite.png) no-repeat 0 bottom;
}

#robot-hand-left
{
	position: absolute;
	left: 184px;
	bottom: 294px;
	width: 88px;
	height: 88px;
	background: url(../_img/robot-sprite.png) no-repeat 0 0;
}

.robot-hand-a
{
	position: absolute;
	width: 88px;
	height: 88px;
	background: url(../_img/robot-sprite.png) no-repeat -88px 0;
}

.robot-hand-b
{
	position: absolute;
	width: 88px;
	height: 88px;
	background: url(../_img/robot-sprite.png) no-repeat -176px 0;
}

.robot-hand-c
{
	position: absolute;
	width: 88px;
	height: 88px;
	background: url(../_img/robot-sprite.png) no-repeat -264px 0;
}

.robot-hand-d
{
	position: absolute;
	width: 88px;
	height: 88px;
	background: url(../_img/robot-sprite.png) no-repeat -352px 0;
}


.computer-monitor
{
	position: absolute;
	width: 456px;
	height: 316px;
	background-image: url(../_img/computer-monitor.png);
}


.blackboard
{
	position: absolute;
	width: 466px;
	height: 366px;
	background-image: url(../_img/blackboard.png);
}


.einstein
{
	position: absolute;
	left: 16330px;
	bottom: 20%;
	width: 106px;
	height: 189px;
	background-image: url(../_img/einstein.png);
}




/* -- copier -- */
#squid
{
	position: absolute;
	bottom: 0px;
	width: 649px;
	height: 288px;
}

.squid-hand-close
{
	position: absolute;
}

#squid-hand-close-1
{
	width: 694px;
	height: 288px;
	background: url(../_img/copier-sprite.png) no-repeat 0 0;
}



.squid-hand-open
{
	position: absolute;
}

#squid-hand-open-1
{
	width: 694px;
	height: 288px;
	background: url(../_img/copier-sprite.png) no-repeat 0 -288px;
}


/*
==========================================
LEVEL FOUR - Rocket
==========================================
*/


/*


#base-ribbon-container-1			{ position: absolute; width: 550px; left: 100px; bottom: 110px; z-index: 2;}
#base-ribbon-container-2			{ position: absolute; width: 550px; left: 10px; bottom: 140px; z-index: 2;}
#base-ribbon-container-3			{ position: absolute; width: 550px; left: 340px; bottom: 210px; z-index: 2;}
#base-ribbon-container-4			{ position: absolute; width: 550px; left: 80px; top: 12%; z-index: 2;}

#base-ribbon-container-1 div.ribbon-d,
#base-ribbon-container-2 div.ribbon-d,
#base-ribbon-container-3 div.ribbon-d,
#base-ribbon-container-4 div.ribbon-d 	{ width: 250px; height: 40px; padding: 10px 0 0 0; text-align: center; color: #ffffff; font-family: "Arial-Rounded-Bold"; font-size: 22px; }

.ribbon-d a 	{ text-decoration: none; color: #fff; } 
.ribbon-d i 	{ text-decoration: underline; font-style: normal;  } 


*/


#awards							{ position: absolute; left: 5%; width: 562px; }

.awards-ribbon-container 		{ position: relative; height: 300px; width: 100%; margin: 150px 0; }

.awards-ribbon 					{ position:relative; width: 100%; height: 64px; top: -48px; }


.awards-ribbon div.ribbon-e 		{ width: 470px; height: 125px; padding: 15px 0 0 0; text-align: center;}
.awards-ribbon div.ribbon-e a 		{ text-decoration: none; color: #fff; font-family: "Arial-Rounded-Extra-bold"; font-size: 28px; }
.awards-ribbon div.ribbon-e i 		{ /*text-decoration: underline;*/ font-style: normal; } 
.awards-ribbon div.ribbon-e div 	{ color: #ffffff; line-height: 32px; font-family: "Arial-Rounded-light"; font-size: 18px;  } 
.awards-ribbon div.ribbon-e span 	{ color: #ffffff; line-height: 22px; font-family: "Arial-Rounded-bold"; font-size: 19px;  } 

.awards-star-1,
.awards-star-2,
.awards-star-3,
.awards-star-4,
.awards-star-5,
.awards-star-6,
.awards-star-7,
.awards-star-8,
.awards-star-9 { position: relative; display:block; width: 256px; height: 256px; margin: 0 auto; border: none; }

.awards-star-1		{ background: url(../_img/star-awards-sprite.png) no-repeat 0 0; }
.awards-star-2		{ background: url(../_img/star-awards-sprite.png) no-repeat -256px 0; }
.awards-star-3		{ background: url(../_img/star-awards-sprite.png) no-repeat -512px 0 ; }
.awards-star-4		{ background: url(../_img/star-awards-sprite.png) no-repeat -768px 0 ; }
.awards-star-5		{ background: url(../_img/star-awards-sprite.png) no-repeat 0 -256px; }
.awards-star-6		{ background: url(../_img/star-awards-sprite.png) no-repeat -256px -256px; }
.awards-star-7		{ background: url(../_img/star-awards-sprite.png) no-repeat -512px -256px; }
.awards-star-8		{ background: url(../_img/star-awards-sprite.png) no-repeat 0 -512px; }
.awards-star-9		{ background: url(../_img/star-awards-sprite.png) no-repeat -256px -512px; }






/* ============================================== */


#rocket					{ position: absolute; width: 338px; height: 464px; background: url(../_img/rocket-sprite.png) no-repeat 0 -470px; }
	.rocket-container 	{ position: relative; z-index: 6; width: 338px; height: 465px; background: url(../_img/rocket-sprite.png) no-repeat 0 0; }

.space { width: 100%; height: 100%; background: url(../_img/stars-background.png) repeat #000; }



#launch-ramp	{ position: absolute; left: 16880px; bottom: 20%; width: 198px; height: 490px; background-image: url(../_img/launch-ramp.png); }
	

#launch-pad-background
{
	position: absolute;
	left: 14613px;
	bottom: 20%;
	width: 100%;
	height: 100%;
	background: url(../_img/launch-pad-background.png) repeat;
	/*border-left: 30px solid #e1e1e1;*/
	border-left: 3px solid #e1e1e1;
}


#control-tower
{
	position: absolute;
	left: 15480px;
	bottom: 20%;
	width: 880px;
	height: 530px;
}

#control-tower-piller
{
	position: absolute;
	left: 100px;
	width: 680px;
	height: 100%;
	background-color: #808080;
}

#control-tower-door
{
	position: absolute;
	left: 200px;
	width: 480px;
	height: 100%;
	background-color: #515151;
}


#control-tower-window
{
	position: absolute;
	width: 880px;
	height: 330px;
	background-image: url(../_img/control-tower.png);
}




/*
==========================================
THE END - Mars
==========================================
*/

.firework
{
	position: relative;
	left: -50%;
	top: -50%;
    width: 500px;
    height: 500px;
	background-color: transparent;
}

.firework-container
{
	position: absolute;
	width: 500px;
	height: 500px;
}

#firework-container-1	{ left: 90%; top: 30%; }
#firework-container-2	{ left: 10%; top: 20%; }
#firework-container-3	{ left: 50%; top: 10%; }
#firework-container-4	{ left: 90%; top: 50%; }
#firework-container-5	{ left: 30%; top: 15%; }
#firework-container-6	{ left: 90%; top: 30%; }

#fireworks-container
{
	position: absolute;
	width: 100%;
	height: 100%;
}



#satellite {
	position: absolute;
	right: 30px;
	height: 102px;
	top: 30px;
	width: 352px;
	background-image: url(../_img/satellite.png); 
	clear: both;
	z-index: 12;
	}

a.link-1 { position: relative; display: block; float: left; margin: 9px 0 0 0; width:105px; height:55px;}
a.link-3 { position: relative; display: block; float: left; margin: 9px 0 0 120px; width:105px; height:55px;}

/*
a.link-1 { position: relative; display: block; float: left; margin: 9px 0 0 0; width:55px; height:55px;}
a.link-2 { position: relative; display: block; float: left; margin: 9px 0 0 3px; width:55px; height:55px;}
a.link-3 { position: relative; display: block; float: left; margin: 9px 0 0 120px; width:55px; height:55px;}
a.link-4 { position: relative; display: block; float: left; margin: 9px 0 0 3px; width:55px; height:55px;}
*/

#alien				{ position: absolute; left: 20%; bottom: 20%; width: 175px; height: 175px; background: url(../_img/alien-sprite.png) no-repeat 0 0; }
	.alien-animate	{ position: relative; width: 175px; height: 175px; background: url(../_img/alien-sprite.png) no-repeat 0 -175px; }

#you-win	{ position: absolute; left: 30%; bottom: 50%; width: 410px; height: 243px; background: url(../_img/you-win.png) no-repeat 0 0; }


#moon-mountain 	{bottom: 20%;  left: 50px; position: absolute; width: 435px; height: 300px; background-image: url(../_img/moon-mountain.png); }	



#contact-cloud-bottom
{
	position: absolute;
	left: 0px;
	top: 85%;
	width: 100%;
	height: 90px;
	/*background-image: url(../_img/img/contact-cloud-bottom.png);*/
	background-image: url(../_img/moon-floor-bottom.png);
	border-top: 100px solid #913d05;
}

#contact-cloud-middle
{
	position: absolute;
	left: 0px;
	top: 80%;
	width: 100%;
	height: 5%;
	/*background-color: #ffffff;*/
		background-color: #b1613b;
}

#contact-cloud-seal-bottom /*to cover 1 line gap between div in safari*/
{
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: -1px;
	background-color: #b1613b;
}

#contact-cloud-seal-top /*to cover 1 line gap between div in safari*/
{
	position: absolute;
	width: 100%;
	height: 2px;
	top: -1px;
	background-color: #b1613b;
}

#contact-cloud-top
{
	position: absolute;
	left: 0px;
	bottom: 20%;
	width: 100%;
	height: 21px;
	/*
	background-image: url(../_img/img/contact-cloud-top.png);
	*/

}



/* OLD CSS
########################################################################################################
########################################################################################################
########################################################################################################
########################################################################################################
########################################################################################################
*/


#android
{
	position: absolute;
	left: 0px;
	bottom: 30px;
	width: 400px;
	height: 636px;
}

#android-body
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 400px;
	height: 515px;
	background-image: url(../_img/img/alien-body.png);
}

#android-ship
{
	position: absolute;
	left: 0px;
	top: 515px;
	width: 400px;
	height: 121px;
	background-image: url(../_img/img/alien-ship.png);
}

#android-steer
{
	position: absolute;
	left: 90px;
	top: 430px;
	width: 220px;
	height: 170px;
	background-image: url(../_img/img/alien-steer.png);
}

.banner
{
	margin-bottom: 60px;
}

.banner-button
{
	position: relative;
	width: 152px;
	height: 32px;
}

.banner-line
{
	position: relative;
	width: 440px;
	height: 1px;
	background-color: #ffffff;
	margin-bottom: 12px;
}

.banner-bottom-a
{
	position: relative;
	left: 20px;
	width: 480px;
	height: 56px;
	margin-top: -1px; /*to cover 1 line gap between div in safari*/
	background-image: url(../_img/img/banner-bottom-a.png);
}

.banner-bottom-b
{
	position: relative;
	left: 20px;
	width: 480px;
	height: 56px;
	margin-top: -1px; /*to cover 1 line gap between div in safari*/
	background-image: url(../_img/img/banner-bottom-b.png);
}

.banner-middle-a
{
	position: relative;
	left: 20px;
	width: 440px;
	padding: 20px;
	background-color: #f7941d;
	overflow: hidden;
}

.banner-middle-b
{
	position: relative;
	left: 20px;
	width: 440px;
	padding: 20px;
	background-color: #f26d7d;
	overflow: hidden;
}

.banner-top-a
{
	position: relative;
	width: 520px;
	height: 23px;
	margin-bottom: -1px; /*to cover 1 line gap between div in safari*/
	background-image: url(../_img/img/banner-top-a.png);
}

.banner-top-b
{
	position: relative;
	width: 520px;
	height: 23px;
	margin-bottom: -1px; /*to cover 1 line gap between div in safari*/
	background-image: url(../_img/img/banner-top-b.png);
}


#bubble
{
	position: relative;
	left: -50%;
	width: 16px;
	height: 16px;
	background-image: url(../_img/img/bubble.png);
}

#bubble-container
{
	position: absolute;
}


.chain-block
{
	position: absolute;
	bottom: 0px;
	width: 100px;
	height: 90px;
	background-image: url(../_img/img/chain-block.png);
}

.chain-block-string
{
	position: absolute;
	left: 28px;
	bottom: 60px;
	width: 44px;
	height: 100%;
	background-image: url(../_img/img/chain-block-string.png);
}

.chain-block-and-string-container
{
	position: absolute;
	width: 100px;
	height: 100%;
}


.crab
{
	position: absolute;
	width: 130px;
	height: 89px;
	overflow: hidden;
	background-image: url(../_img/img/crab.png);
}

.crab-eyes
{
	position: absolute;
	left: 31px;
	top: 41px;
	width: 38px;
	height: 19px;
	opacity: 0;
	filter: alpha(opacity=0);
	background-image: url(../_img/img/crab-eyes.png);
}

#crab-ribbon-container-1	{ top: 0px; }
#crab-ribbon-container-2	{ top: 100px; }
#crab-ribbon-container-3	{ top: 200px; }
#crab-ribbon-container-4	{ top: 300px; }

#crabs-container
{
	position: absolute;
	left: 270px;
	top: 50px;
	width: 730px;
	height: 489px;
}

#crab-text-container
{
	position: absolute;
	top: 79px;
	right: 760px;
	width: 480px;
	height: 440px;
}


#detect-container
{
	position: absolute;
	background-color: #000000;
	padding: 10px;
	display: inline-block;
	
	opacity: 0.8;
	filter:alpha(opacity=80);
}

.detect-name
{
	font-family: arial;
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
	margin-right: 10px;
}

.detect-value
{
	font-family: arial;
	color: #ffffff;
	font-size: 14px;
}

#dock-floor
{
	position:absolute;
	left: 16920px;
	top: 80%;
	width: 2970px;
	height: 50px;
	background-image: url(../_img/img/dock-floor.png);
}

#dock-column
{
	position:absolute;
	left: 19530px;
	top: 80%;
	width: 2970px;
	height: 20%;
	background-image: url(../_img/img/dock-column.png);
}



.experience-text-a
{
	position: relative;
	width: 100%;
	margin-bottom: 20px;
	font-family: frankfurter-medium-plain;
	color: #ffffff;
	font-size: 35px;
	line-height: 35px;
}

.experience-text-b
{
	position: relative;
	width: 100%;
	margin-bottom: 20px;
	font-family: frankfurter-plain;
	color: #ffffff;
	font-size: 60px;
	line-height: 54px;
}

.experience-text-c
{
	position: relative;
	width: 100%;
	margin-bottom: 20px;
	font-family: Arial;
	color: #ffffff;
	font-size: 18px;
}

.experience-text-d
{
	position: relative;
	width: 75%;
	margin-bottom: 20px;
	font-family: Arial;
	color: #ffffff;
	font-size: 18px;
}

.experience-text-e
{
	position: relative;
	width: 85%;
	margin-bottom: 20px;
	font-family: Arial;
	color: #ffffff;
	font-size: 18px;
}

.experience-text-container
{
	position: absolute;
	bottom: 185px;
	width: 510px;
	background-color: #444444;
	padding: 40px;
	border-style:solid;
	border-width: 10px;
	border-color: #777777;
}

#email-button
{
	position: absolute;
	width: 485px;
	height: 230px;
	background-image: url(../_img/img/email-button.png);
}

.face-left
{
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*ie*/
    filter: fliph; /*ie*/
}

.face-right
{
    -moz-transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}

#fence
{
	position: absolute;
	width: 740px;
	height: 100px;
	background-image: url(../_img/img/fence.png);
}


.fish
{
	position: absolute;
	width: 125px;
	height: 93px;
	overflow: hidden;
	background-image: url(../_img/img/fish.png);
}

.fish-eyes
{
	position: absolute;
	left: 18px;
	top: 45px;
	width: 39px;
	height: 18px;
	opacity:0;
	filter:alpha(opacity=0);
	background-image: url(../_img/img/fish-eyes.png);
}

#fishes-container
{
	position: absolute;
	left: 270px;
	top: 50px;
	width: 725px;
	height: 493px;
}

#fish-ribbon-container-1	{ top: 0px; }
#fish-ribbon-container-2	{ top: 100px; }
#fish-ribbon-container-3	{ top: 200px; }
#fish-ribbon-container-4	{ top: 300px; }

#fish-text-container
{
	position: absolute;
	top: 83px;
	right: 760px;
	width: 480px;
	height: 440px;
}

.foundation
{
	position: absolute;
	top: 80%;
	height: 90%;
	background-image: url(../_img/img/foundation.png);
}

#foundation-1
{
	left: 13320px;
	width: 6220px;
}

img
{ 
	border-style: none;
}

#javascript-banner
{
	position: relative;
	left: -50%;
	margin-top: -115px;
	width: 600px;
	height: 230px;
}

#javascript-banner-container
{
	position: absolute;
	left: 50%;
	top: 50%;
}

#javascript-banner-left
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 80px;
	height: 230px;
	background-image: url(../_img/img/javascript-banner-left.png);
}

#javascript-banner-middle
{
	position: absolute;
	left: 79px;
	top: 0px;
	width: 440px;
	height: 190px;
	background-color: #F7941D;
}

#javascript-banner-right
{
	position: absolute;
	left: 518px;
	top: 0px;
	width: 80px;
	height: 230px;
	background-image: url(../_img/img/javascript-banner-right.png);
}

#javascript-banner-text-a
{
	position: relative;
	font-family: frankfurter-plain;
	color: #ffffff;
	font-size: 39px;
	text-align: center;
	margin-top: 37px;
}

#javascript-banner-text-b
{
	position: relative;
	font-family: frankfurter-plain;
	color: #ffffff;
	font-size: 72px;
	text-align: center;
	margin-top: -12px;
}




.piechart
{
	position: absolute;
	width: 300px;
	height: 300px;
	overflow: hidden;
}

#piechart-aol
{
	left: 160px;
	top: 30px;
}

#piechart-aol-text-graphic-1
{
	left: 98px;
	top: 98px;
}

#piechart-aol-text-graphic-2
{
	left: 100px;
	top: 150px;
}

.piechart-back
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 300px;
	height: 300px;
	background-image: url(../_img/img/piechart-back.png);
}

#piechart-foxnews
{
	left: 50px;
	top: 130px;
}

#piechart-foxnews-front
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 300px;
	height: 300px;
	background-image: url(../_img/img/piechart-foxnews-front.png);
}

#piechart-foxnews-text-graphic-1
{
	left: 25px;
	top: 98px;
}

#piechart-foxnews-text-graphic-2	{ left: 42px; top: 150px; }
#piechart-foxnews-text-animation-1	{ left: 191px; top: 155px; }
#piechart-foxnews-text-animation-2	{ left: 218px; top: 193px; }
#piechart-foxnews-text-code-1		{ left: 220px; top: 67px; }
#piechart-foxnews-text-code-2		{ left: 221px; top: 105px; }
#piechart-incognito					{ left: 135px; top: 20px; }

#piechart-incognito-front
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 300px;
	height: 300px;
	background-image: url(../_img/img/piechart-foxnews-front.png);
}

#piechart-incognito-text-graphic-1		{ left: 202px; top: 155px; }
#piechart-incognito-text-graphic-2		{ left: 216px; top: 194px; }
#piechart-incognito-text-animation-1	{ left: 10px; top: 97px; }
#piechart-incognito-text-animation-2	{ left: 46px; top: 148px; }
#piechart-incognito-text-code-1 		{ left: 220px; top: 67px; }
#piechart-incognito-text-code-2 		{ left: 221px; top: 106px; }

.piechart-text-a
{
	position: absolute;
	font-family: poster-sans-bold;
	color: #ffffff;
	font-size: 36px;
}

.piechart-text-b
{
	position: absolute;
	font-family: frankfurter-medium-plain;
	color: #ffffff;
	font-size: 30px;
}

.piechart-text-c
{
	position: absolute;
	font-family: poster-sans-bold;
	color: #ffffff;
	font-size: 50px;
}

.piechart-text-d
{
	position: absolute;
	font-family: frankfurter-medium-plain;
	color: #ffffff;
	font-size: 40px;
}

.ribbon-container
{
	position: absolute;
	width: 100%;
	height: 75px;
	top: 5%;
	text-align: center; /*to center div, combine with display: inline-block*/
}

.ribbon-left
{
	position: relative;
	float: left;
	width: 55px;
	height: 75px;
	margin-right: -1px; /*to cover 1 line gap between div in safari*/
	background-image: url(../_img/img/ribbon-left.png);
}

.ribbon-middle
{
	position: relative;
	float: left;
	height: 50px;
	background-color: #ed1c24;
	
	font-family: lobster;
	color: #ffffff;
	font-size: 36px;
	text-align: center;
}

.ribbon-right
{
	position: relative;
	float: left;
	width: 55px;
	height: 75px;
	margin-left: -1px; /*to cover 1 line gap between div in safari*/
	background-image: url(../_img/img/ribbon-right.png);
}

.ribbon-relative
{
	display: inline-block; /*to center div, combine with text-align: center*/
}




#social-bottom
{
	position: relative;
	left: 20px;
	width: 80px;
	height: 21px;
	margin-top: -1px; /*to cover 1 line gap between div in safari*/
	background-image: url(../_img/img/social-bottom.png);
}

#social-container
{
	position: absolute;
	width: 120px;
	left: 85%;
}

#social-middle
{
	position: relative;
	left: 20px;
	width: 70px;
	padding-top: 20px;
	padding-left: 10px;
	padding-bottom: 10px;
	background-color: #ed1c24;
}

#social-top
{
	position: relative;
	width: 120px;
	height: 23px;
	margin-bottom: -1px; /*to cover 1 line gap between div in safari*/
	background-image: url(../_img/img/social-top.png);
}

.social-icon
{
	position: relative;
	width: 60px;
	height: 60px;
	margin-bottom: 10px;
}

#splash-container
{
	position: absolute;
	bottom: 20%;
	width: 1300px;
	height: 548px;
}



.turtle
{
	position:absolute;
	width: 125px;
	height: 75px;
	overflow: hidden;
	background-image: url(../_img/img/turtle.png);
}

.turtle-eyes
{
	position: absolute;
	left: 3px;
	top: 27px;
	width: 39px;
	height: 18px;
	opacity: 0;
	filter: alpha(opacity=0);
	background-image: url(../_img/img/turtle-eyes.png);
}

#turtle-ribbon-container-1	{ top: 0px; }
#turtle-ribbon-container-2	{ top: 100px; }
#turtle-ribbon-container-3	{ top: 200px; }
#turtle-ribbon-container-4	{ top: 300px; }

#turtles-container
{
	position: absolute;
	left: 270px;
	top: 50px;
	width: 725px;
	height: 475px;
}

#turtle-text-container
{
	position: absolute;
	top: 65px;
	right: 760px;
	width: 480px;
	height: 440px;
}

.window
{
	position:absolute;
	width: 190px;
	height: 110px;
	background-image: url(../_img/img/window.png);
}


#contact-box
{
	position: absolute;
	top: 120px;
	margin-left: -840px;
	width: 940px;
	height: 420px;
	background-image: url(../_img/img/contact-box.png);
}

#contact-box-email
{
	position: absolute;
	left: 570px;
	top: 20px;
	width: 350px;
	height: 30px;
	background-image: url(../_img/img/contact-box-hole-a.png);
}

#contact-box-email input
{
	font-family: Arial;
	font-size: 14px;
	color: #ffffff;
	width: 340px;
	margin: 5px;
	border: none;
	background-color: transparent;
}

#contact-box-email input:focus
{
    outline: none;
}

#contact-box-subject
{
	position: absolute;
	left: 570px;
	top: 65px;
	width: 350px;
	height: 30px;
	background-image: url(../_img/img/contact-box-hole-a.png);
}

#contact-box-subject input
{
	font-family: Arial;
	font-size: 14px;
	color: #ffffff;
	width: 340px;
	margin: 5px;
	border: none;
	background-color: transparent;
}

#contact-box-subject input:focus
{
    outline: none;
}

#contact-box-message
{
	position: absolute;
	left: 570px;
	top: 110px;
	width: 350px;
	height: 170px;
	background-image: url(../_img/img/contact-box-hole-b.png);
}

#contact-box-message textarea
{
	font-family: Arial;
	font-size: 14px;
	color: #ffffff;
	width: 340px;
	height: 160px;
	margin: 5px;
	border: none;
	overflow:hidden;  /*no scroll bar*/
	resize: none; /*hide the resize corner handle*/
	background-color: transparent;
}

#contact-box-message textarea:focus
{
    outline: none;
}

#contact-button
{
	position: absolute;
	top: 440px;
	margin-left: -210px;
	width: 355px;
	height: 100px;
}

#contact-center
{
	position: absolute;
	height: 540px;
	left: 50%;
	bottom: 20%;
}


.contact-confirmation-container
{
	position: absolute;
}

.contact-confirmation
{
	position: relative;
	width: 260px;
	height: 190px;
	left: -50%;
}

.contact-confirmation-rectangle
{
	position: absolute;
	width: 260px;
	height: 170px;
	background-color: #333333;
}

.contact-confirmation-title-a
{
	position: absolute;
	left: 30px;
	top: 26px;
	font-family: frankfurter-plain;
	color: #c69c6d;
	font-size: 35px;
}

.contact-confirmation-title-b
{
	position: absolute;
	left: 30px;
	top: 26px;
	font-family: frankfurter-plain;
	color: #c69c6d;
	font-size: 48px;
}

.contact-confirmation-text-a
{
	position: absolute;
	left: 30px;
	top: 70px;
	width: 200px;
	font-family: frankfurter-medium-plain;
	font-size: 19px;
	line-height: 22px;
	color: #aaaaaa;
}

.contact-confirmation-text-b
{
	position: absolute;
	left: 30px;
	top: 82px;
	width: 200px;
	font-family: frankfurter-medium-plain;
	font-size: 24px;
	line-height: 24px;
	color: #aaaaaa;
}

.contact-confirmation-text-c
{
	position: absolute;
	left: 30px;
	top: 82px;
	width: 200px;
	font-family: frankfurter-medium-plain;
	font-size: 25px;
	line-height: 25px;
	color: #aaaaaa;
}

.contact-confirmation-text-d
{
	position: absolute;
	left: 72px;
	top: 68px;
	font-family: frankfurter-medium-plain;
	font-size: 25px;
	color: #aaaaaa;
}

.contact-confirmation-triangle
{
	position: absolute;
	left: 120px;
	top: 170px;
	width: 20px;
	height: 20px;
	background-image: url(../_img/img/contact-confirmation-triangle.png);
}

#contact-container
{
	position: absolute;
	width: 100%;
	height: 100%;
}

.content-noscroll
{
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* PORTFOLIO ========================================== */


#portfolio			{}
#portfolio h2		{ font-size: 32px; line-height: 48px; }
#portfolio h3		{ font-size: 22px; line-height: 48px; }
#portfolio p		{ font-size: 16px; line-height: 22px; }


.portfolio-default
{
	margin: 0px 40px 40px 40px;
	overflow: hidden;
}

.portfolio-default-scroll
{
	margin: 0px 40px 40px 40px;

}

.portfolio-left-side
{
	/* float: left; */
	width: auto;
	/* margin: 0px 2% 0px 2%; */
	padding: 0px 40px 40px 40px;
	overflow: hidden;
}

.portfolio-thumbnail-container { }

.portfolio-thumbnail-container a
{
	color: #000;
  	font-size: 12px;
}

.portfolio-thumbnail-container p
{
	margin: 10px 0;
	font-weight: bold;
}



.portfolio-thumbnail
{
	float: left;
	padding-right: 16px;
}

.portfolio-thumbnail img
{
/* border: 5px solid #fff; */
}

.portfolio-thumbnail div
{
padding-top: 6px;	
}





/* right side */


.portfolio-right-side
{
	/* float: left; */
	width: auto;
	/* margin: 0px 2% 0px 2%; */
	padding: 0px 40px 40px 40px;
	overflow: hidden;
}
.portfolio-info-container {}

.portfolio-info img {border: 5px solid #fff;}



 .mobile-close-button a { 
 	display: none; 
	color: #000; 
	text-decoration:none; 
	color: #000; 
	font-size: 38px;
	width: 100%;
	height: 50px;
	
	position: absolute;
	
	background: rgba(0, 0, 0, 0.1);
	text-align: center;
	padding: 10px 0 0 0;
}
	
@media only screen and (max-device-width: 480px) {
	.mobile-close-button a { display: block !important; }
	
	.featherlight-close-icon { display:none !important; }
	.portfolio-left-side { margin: 50px 4% 0px 4% !important; }
	.portfolio-right-side { margin: 50px 4% 0px 4% !important; }
}