@charset "utf-8";
/* CSS Document */
.wrap
{
	width: 600px;
	margin: 0px auto;
}
.IEold {display: none;}
.main_wrap
{
	position: relative;
	height: 400px;
	background: url(images/ninjas_three.jpg) no-repeat;
}
.main_wrap ul
{
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: block;
}
.left_ninja
{
	position: absolute;
	left: 50px;
	top: 80px;
}
.mid_ninja
{
	position: absolute;
	left: 235px;
	top: 100px;
}
.right_ninja
{
	position: absolute;
	left: 405px;
	top: 90px;
}
/* NINJA in a box */
/* difines the width and height of anchors along with block */
.left_ninja a
{
	display: block;
	width: 100px;
	height: 160px;
	position: relative;
}
.mid_ninja a
{
	display: block;
	width: 80px;
	height: 140px;
	position: relative;
}
.right_ninja a
{
	display: block;
	width: 80px;
	height: 160px;
	position: relative;
}
/* NINJA pop smoke, span disappear */
/* hides the span where the tooltip is */
/* this also hides text */
.left_ninja span,
.mid_ninja span,
.right_ninja a span,
span.smoke em
{
	display: none;
}
/* span appear like NINJA out of nowhere */

.left_ninja a:hover span
{
	display: block;
	width: 200px;
	height: 91px;
	position: absolute;
	background: url(images/left_ninja_tooltip.png) no-repeat;
	top: -45px;
	left: 40px;
}
.mid_ninja a:hover span
{
	display: block;
	width: 200px;
	height: 91px;
	position: absolute;
	background: url(images/mid_ninja_tooltip.png) no-repeat;
	top: -70px;
	left: -80px;
}
.right_ninja a:hover span
{
	display: block;
	width: 200px;
	height: 91px;
	position: absolute;
	background: url(images/right_ninja_tooltip.png) no-repeat;
	top: -40px;
	left: -160px;
}

/* this is just CSS for markup and CSS under the ninja picture */
.codestuff
{
	background-color: #eee;
	border: solid 1px #ccc;
	margin: 5px 0px;
	padding: 5px;
}
.codeguts
{
	border: solid 1px #ccc;
	padding: 5px;
	background-color: #fefefe;
}
h1
{
	text-align: center;
}