/*******************************************************************************
********************************************************************************
**
* - GENERAL
*
* - PAGE CONTAINERS
*
* - CONTENT
*
**
********************************************************************************
 ******************************************************************************/


/* GENERAL ------------------------------------------------------------------ */

/* Zero default margin & padding around common elements */
body, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, li, ol, p, ul
{
	margin: 0;
	border: 0 none #FFFFFF;
	padding: 0;
}

body
{
	background-color: #FFFFFF;
	color: #000000;
	line-height: 1.4;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
	text-align: center;
}

a:link
{
	color: #0066CC;
}

a:visited
{
	color: #B266B2;
}

a:hover
{
	text-decoration: none;
}

img
{
	border: 0 none transparent;
}

input, select, table, textarea
{
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
}

.clearer
{
	clear: both;
	height: 1px;
	overflow: hidden;
	margin-bottom: -1px;
	font-size: 1px;
	line-height: 1px;
}

.hidden
{
	position: absolute;
	left: -1500em;
	height: 1px;
	width: 1px;
	overflow: hidden;
	margin-right: -1px;
	margin-bottom: -1px;
	font-size: 1px;
	line-height: 1px;
}

.replacement
{
	position: absolute;
	z-index: 10;
	background-repeat: no-repeat;
}

* html .replacement
{
	top: 0;
}

a .replacement
{
	z-index: 20;
	cursor: hand;
	c\ursor: pointer;
}

.divider
{
	clear: both;
	background-image: url(../images/divider_down.jpg);
	background-repeat: repeat-x;
	background-position: 0 100%;
}

.dividerInner
{
	background-image: url(../images/divider_down_left.jpg);
	background-repeat: no-repeat;
	background-position: 0 100%;
}

.dividerInner2
{
	height: 35px;
	background-image: url(../images/divider_down_right.jpg);
	background-repeat: no-repeat;
	background-position: 100% 100%;
}




/* PAGE CONTAINERS ---------------------------------------------------------- */

#splash
{
	position: relative;
	width: 800px;
	height: 400px;
	overflow: hidden;
	margin: 50px auto 0 auto;
	background-image: url(../images/splash.jpg);
	text-align: left;
}

#splash.ready
{
	display: none;
}

#stage
{
	display: none;
	position: relative;
	width: 800px;
	height: 400px;
	overflow: hidden;
	margin: 50px auto 0 auto;
	background-image: url(../images/stage.jpg);
	text-align: left;
	cursor: crosshair;
}

#stage.ready
{
	display: block;
}

#closing
{
	display: none;
	position: relative;
	width: 800px;
	height: 400px;
	overflow: hidden;
	margin: 50px auto 0 auto;
	background-image: url(../images/closing.jpg);
}

#closing.ready
{
	display: block;
}




/* CONTENT ------------------------------------------------------------------ */

#loadingMessage
{
	position: absolute;
	left: 87px;
	top: 260px;
	text-align: center;
}

#loadingMessage p
{
	text-align: left;
}

#loadingMessage div
{
	width: 359px;
	height: 5px;
	overflow: hidden;
	margin-top: 7px;
	background-color: #7F7F7F;
	text-align: left;
}

#loadingMessage div div
{
	float: none;
	width: 0;
	height: 5px;
	overflow: hidden;
	margin-top: 0;
	background-color: #FF0000;
}

#loadingMessage input
{
	margin-top: 1em;
	cursor: hand;
	c\ursor: pointer;
}

#level
{
	position: absolute;
	right: 300px;
	top: 10px;
	overflow: hidden;
	z-index: 300;
	opacity: 0.65;
}

* html #level
{
	filter: alpha(opacity=65);
}

#level h2
{
	float: left;
	margin-right: 1em;
	font-size: 100%;
	font-weight: normal;
	line-height: 21px;
	text-transform: uppercase;
}

#level p
{
	float: left;
	width: 1em;
	margin-right: 1em;
	font-weight: bold;
	line-height: 21px;
}

#level div
{
	float: left;
	width: 100px;
	height: 5px;
	overflow: hidden;
	margin-top: 7px;
	background-color: #7F7F7F;
}

#level div div
{
	float: none;
	width: 0;
	height: 5px;
	overflow: hidden;
	margin-top: 0;
	background-color: #FF0000;
}

#lives
{
	position: absolute;
	right: 150px;
	top: 10px;
	height: 21px;
	overflow: hidden;
	z-index: 300;
	opacity: 0.65;
	padding-right: 75px;
	background-image: url(../images/lives.gif);
	background-repeat: no-repeat;
	background-position: 100% 0;
}

* html #lives
{
	filter: alpha(opacity=65);
}

.lost1
{
	background-position: 100% -21px !important;
}

.lost2
{
	background-position: 100% -42px !important;
}

.lost3
{
	background-position: 100% -63px !important;
}

#lives h2
{
	font-size: 100%;
	font-weight: normal;
	line-height: 21px;
	text-transform: uppercase;
}

#score
{
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 300;
	opacity: 0.65;
}

* html #score
{
	filter: alpha(opacity=65);
}

#score h2
{
	float: left;
	margin-right: 1em;
	font-size: 100%;
	text-transform: uppercase;
	font-weight: normal;
	line-height: 21px;
}

#score p
{
	float: left;
	width: 3em;
	font-weight: bold;
	line-height: 21px;
}

#hill1
{
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 100;
	width: 800px;
	height: 165px;
	background-image: url(../images/hills.png);
}

* html #hill1
{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/hills.png", sizingMethod="crop");
}

#hill2
{
	position: absolute;
	left: 75px;
	bottom: 0;
	z-index: 101;
	width: 347px;
	height: 112px;
	background-image: url(../images/hill.png);
}

* html #hill2
{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/hill.png", sizingMethod="crop");
}

#hill3
{
	position: absolute;
	left: 280px;
	bottom: 0;
	z-index: 102;
	width: 219px;
	height: 66px;
	background-image: url(../images/hill2.png);
}

* html #hill3
{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/hill2.png", sizingMethod="crop");
}

#cloud1
{
	position: absolute;
	left: 225px;
	top: 18px;
	z-index: 200;
	width: 98px;
	height: 58px;
	background-image: url(../images/cloud.png);
}

* html #cloud1
{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/cloud.png", sizingMethod="crop");
}

#cloud2
{
	position: absolute;
	left: 75px;
	top: 22px;
	z-index: 201;
	width: 67px;
	height: 44px;
	background-image: url(../images/cloud2.png);
}

* html #cloud2
{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/cloud2.png", sizingMethod="crop");
}

.bunny
{
	position: absolute;
	height: 152px;
	overflow: hidden;
}

.bunny div
{
	position: relative;
	height: 456px;
}

.bunny1
{
	width: 84px;
}

.bunny1 div
{
	width: 84px;
	background-image: url(../images/bunny1.png);
}

* html .bunny1 div
{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bunny1.png", sizingMethod="crop");
}

.bunny2
{
	width: 119px;
}

.bunny2 div
{
	width: 119px;
	background-image: url(../images/bunny2.png);
}

* html .bunny2 div
{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bunny2.png", sizingMethod="crop");
}

.bunny3
{
	width: 122px;
}

.bunny3 div
{
	width: 122px;
	background-image: url(../images/bunny3.png);
}

* html .bunny3 div
{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bunny3.png", sizingMethod="crop");
}

.bunny4
{
	width: 135px;
}

.bunny4 div
{
	width: 135px;
	background-image: url(../images/bunny4.png);
}

* html .bunny4 div
{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bunny4.png", sizingMethod="crop");
}

.bunny5
{
	width: 140px;
}

.bunny5 div
{
	width: 140px;
	background-image: url(../images/bunny5.png);
}

* html .bunny5 div
{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bunny5.png", sizingMethod="crop");
}

.dead div
{
	top: -152px;
}

.poison div
{
	top: -304px;
}

#bunny1
{
	left: -20px;
	bottom: -5px;
	z-index: 99;
}

#bunny2
{
	left: 75px;
	bottom: -120px;
	z-index: 100;
}

#bunny3
{
	left: 200px;
	bottom: -50px;
	z-index: 100;
}

#bunny4
{
	left: 265px;
	bottom: -140px;
	z-index: 101;
}

#bunny5
{
	left: 350px;
	bottom: -100px;
	z-index: 101;
}

#bunny6
{
	left: 400px;
	bottom: -145px;
	z-index: 101;
}

#bunny7
{
	left: 500px;
	bottom: -35px;
	z-index: 99;
}

#bunny8
{
	left: 620px;
	bottom: -30px;
	z-index: 99;
}

#bunny9
{
	left: 690px;
	bottom: -45px;
	z-index: 99;
}

#bunny10
{
	left: -135px;
	top: 50px;
	z-index: 98;
}

#bunny11
{
	right: -140px;
	top: 50px;
	z-index: 101;
}

.bomb
{
	position: absolute;
	top: 120px;
	z-index: 102;
	width: 69px;
	height: 75px;
	overflow: hidden;
}

.bomb div
{
	position: relative;
	width: 69px;
	height: 225px;
	background-image: url(../images/bomb.png);
}

* html .bomb div
{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bomb.png", sizingMethod="crop");
}

#bomb1
{
	left: -69px;
}

#bomb2
{
	right: -69px;
}

#bomb1 div
{
	top: -75px;
}

.exploded div
{
	top: -150px !important;
}

#cover
{
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1000;
	width: 800px;
	height: 400px;
	background-color: #000000;
	opacity: 0.5;
}

* html #cover
{
	filter: alpha(opacity=50);
}

.gameOver #cover
{
	display: block;
}

#message
{
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1001;
	width: 800px;
	height: 400px;
	he\ight: 300px;
	padding-top: 100px;
	color: #FFFFFF;
	font-size: 200%;
	text-align: center;
}

.gameOver #message
{
	display: block;
}

#message p
{
	font-size: 200%;
}

#message input
{
	margin: 0 0.5em;
	cursor: hand;
	c\ursor: pointer;
}

#levelMessage
{
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1001;
	width: 800px;
	height: 400px;
	line-height: 400px;
	font-size: 300%;
	text-align: center;
}

#credit
{
	width: 800px;
	height: 35px;
	overflow: hidden;
	margin: 30px auto 0 auto;
	background-image: url(../images/logo.gif);
	background-repeat: no-repeat;
	line-height: 35px;
}

#credit a
{
	display: block;
	height: 35px;
	overflow: hidden;
	margin-left: 38px;
	padding-right: 38px;
	background-color: #BBDDFF;
	color: #0066CC;
	text-decoration: none;
}

#credit a:hover
{
	background-color: #0066CC;
	color: #FFFFFF;
}