@charset "utf-8";
/* CSS Document */

@import url(color.css);
@import url(typography.css);

/* Normalise margins and padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
{
	margin: 0;
	padding: 0;
}

/* Normalise font size for headers */
h1, h2, h3, h4, h5, h6
{
	font-size: 100%;
}

/* Remove list styles */
ol, ul
{
	list-style: none;
}

/* Normalise font styles and font weights */
address, caption, cite, code, dfn, em, strong, th, var
{
	font-style: normal;
	font-weight: normal;
}

/* Remove table styles */
table
{
	border-collapse: collapse;
	border-spacing: 0;
}

/* Remove border from fieldset and img */
fieldset, img
{
	border: 0;
}

/* Left align text in captions and th */
caption, th
{
	text-align: left;
}

/* Remove quotation marks from q */
q:before, q:after
{
	content :'';
}


/***** Main site styling starts here *****/

body
{
	width: 960px;
	height: 100%;
	margin: 0 auto;
}

#scene
{
	background: url('images/cartoon-scene.jpg');
	position: absolute;
	top: 50%;
	left: 50%;
	height: 480px;
	margin-top: -240px;
	width: 940px;
	margin-left: -470px;
	border: solid 5px #000;
}

	#tank
	{
		background: url('images/tank.gif');
		background-position: 0px -192px;
		width: 234px;
		height: 192px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		
	}
	
	#tank:hover
	{
		background-position: 0px 0px;
	}
	
	#jumbo-jet
	{
		background: url('images/jumbo-jet.png');
		background-position: 0px -101px;
		width: 182px;
		height: 82px;
		position: absolute;
		top: 38px;
		left: 406px;
	}
	
	#jumbo-jet:hover
	{
		background-position: 0px 0px;
		width: 192px;
		height: 101px;
		top: 29px;
	}

	#anime-man
	{
		background: url('images/anime-man.gif');
		background-position: -130px 0px;
		width: 96px;
		height: 203px;
		position: absolute;
		bottom: 14px;
		right: 111px;
	}
	
	#anime-man:hover
	{
		width: 226px;
		height: 203px;
		background-position: 0px -203px;
	}
	
	#invisible-girl
	{
		background: url('images/invisible-girl.png');
		background-position: 0px 0px;
		width: 57px;
		height: 107px;
		position: absolute;
		top: 147px;
		right: 69px;
	}
	
	#invisible-girl:hover
	{
		width: 124px;
		height: 175px;
		background-position: 0px -107px;
		top: 79px;
		right: 1px;
	}
	
	#goth-girl
	{
		background: url('images/goth-girl.gif');
		background-repeat: no-repeat;
		width: 206px;
		height: 178px;
		position: absolute;
		bottom: 8px;
		left: 343px;
	}
	
	#goth-girl:hover
	{
		background-position: -9999px;
	}
	
	#explosion
	{
		background: url('images/explosion.png');
		width: 49px;
		height: 39px;
		background-position: bottom right;
		position: absolute;
		bottom: 5px;
		right: 3px;
	}
	
	#explosion:hover
	{
		width: 940px;
		height: 480px;
		background-position: 0px 0px;
		top: 0px;
		left: 0px;
	}
	
#header
{
	width: 950px;
	margin: 10px auto;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.625em;
}