html, body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-color: #FFFFCC;
	position: relative;
	height:100%;
}


.bodyClass #mainContainer {
	position:relative;
	width:100%;
	background-color: #000033;
	height:100%;
}

.bodyClass #mainContainer a {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

.bodyClass #subContainer {
	position:absolute;
	top:50%;
	left:50%;
	height:300px;
	width:300px;
	margin: -150px 0 0 -150px;
	background-color: #000033;
}

.bodyClass #person1 {
	top: 20px;
	right: 0px;
	height: 120px;
	width: 120px;
	left: 20px;
	background-color: #00FF66;
	padding: 0px;
	position: absolute;
	background-image: url(per1.jpg);
}
	
.bodyClass #person1 a{
	position: absolute;
	top: 0px;
	right: 0px;
	height: 120px;
	width: 120px;
	left: 0px;
}

.bodyClass #person2 {
	top: 20px;
	right: 0px;
	height: 120px;
	width: 120px;
	left: 160px;
	background-color: #FFFF00;
	padding: 0px;
	position: absolute;
	background-image: url(per2.jpg);
}

.bodyClass #person2 a {
	top: 0px;
	right: 0px;
	height: 120px;
	width: 120px;
	left: 0px;
	position: absolute;
}
	
.bodyClass #person3 {
	top: 160px;
	right: 0px;
	height: 120px;
	width: 120px;
	left: 20px;
	background-color: #FF3333;
	padding: 0px;
	position: absolute;
	background-image: url(per3.jpg);
}

.bodyClass #person3 a {
	top: 0px;
	right: 0px;
	height: 120px;
	width: 120px;
	left: 0px;
	position: absolute;
}

.bodyClass #person4 {
	top: 160px;
	right: 0px;
	height: 120px;
	width: 120px;
	left: 160px;
	background-color: #33FFFF;
	padding: 0px;
	position: absolute;
	background-image: url(per4.jpg);
}


.bodyClass #person4 a {
	top: 0px;
	right: 0px;
	height: 120px;
	width: 120px;
	left: 0px;
	position: absolute;
}