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

body {
	background-image: url(imgaes/flourish_light.jpg);
	background-repeat: repeat;
	text-align: left;
	font-family:"Times New Roman", Times, serif;
}



#mainbox  {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top:30px;
	width:800px;
	height:600px;
	z-index:1;
	background-color: #bfc9ed;
	border-color: #000066;
	border-width: 1px;
	border-style: solid;
}

#banner {
	position: absolute;
	margin-top: 20px;
	margin-left: 25px;
}		


#NavBar {
	background-color: #28366b;
	width: 800px;
	height: 50px;
	margin-top: 185px;
	position: absolute;
	
}


table {
	margin-top: 8px;
	margin-left: 310px;
	border: none;
}

#text {
	text-align:left;
	width: 300px;
	height: 200px;
	margin-top: 290px;
	position: absolute;
	margin-left: 430px;
}

#picture {
	margin-top: 300px;
	margin-left: 50px;
	position: absolute;
	border-color:#000000;
	border-width: medium;
	border-style:solid;
	width: 340px;
	height: 230px;
}


#rollover {
	position: absolute;
	margin-top: 250px;
	margin-left: 250px;
}


/* Below is for the photo gallery on the Portfolio page. I found the code online, but tweeked it to make it work for my  page. credits: www.freecssmenus.co.uk */
#pg { width:550px;
height:200px;
padding:5px;
padding-top:15px;
margin-top:300px;
margin-left:130px;
position:absolute;
}

#pg ul { list-style:none;
padding:0;
margin:0;
width:180px;
position:relative;
float:left;
}

#pg ul li { display:inline;
width:52px;
height:52px;
float:left;
margin:0 0 8px 8px;
}

#pg ul li a { display:block;
width:50px;
height:50px;
text-decoration:none;
border:1px solid #000;
}

#pg ul li a img { display:block;
width:50px;
height:50px;
border:0;
}

#pg ul li a:hover { white-space:normal;
border-color:#000000;
}

#pg ul li a:hover img { position:absolute;
left:210px;
top:0;
width:auto;
height:200px;
border:1px solid #000;
}

#pg ul li a span {display:none}
#pg ul li a:hover span { display:block;
position:absolute;
left:5px;
top:130px;
width:180px;
height:auto;
font-size:12px;
color:#000000;
}