/*==============================
	GLOBALS
Sets the default document font size, family
and color
===============================*/
body
{
	font-family:Arial;
	font-size:12px; 
	/* color: #0033FF; */
	background: #3067CB;
}

/*==============================
	SITE WRAPPER
===============================*/
.site-wrapper
{
	width:600px; 
 
	/* min-height lets your site grow vertically 
	(like in tables). */
	/*min-height:600px; 
 
	/* By setting these to auto you are centering the 
	site */
	margin-left:auto;  
	margin-right:auto; 
 
	border:solid 1px black; 
	background-color:#3067CB;
}

/*==============================
	HEADER WRAPPER
===============================*/
#header-wrapper
{
  width: 100%; /* replaces 468px width */
  height: 8em; /* replaces 60px height */
 
	background:url('images/header.gif');
	background-color: #3067CB; 
 
	/* css lets you designate how you want an image to 
	repeat. Along the x-axis, y-axis or not at all. */
	background-repeat: no-repeat; 
}

/* this sets the position of the title. 
header.gif goes here here */
.header-title
{
	float:left; 
}

/*==============================
		BODY WRAPPER
===============================*/
#body-wrapper
{
		/* floats are crucial to the creation of any
	web interface. Every web developer must master
	this concept. Don't worry I'll be writing a
	tutorial about this a little later.	:)	*/
	/* float:left;  */
	/*width:800px;*/ 
	/*min-height:510px;*/
	font-size: 95%;
	line-height: 1.6em; 
	padding-left: 5em;
	padding-right:5em;
	padding-top:1em;
	padding-bottom:2em;
	margin-top:2em; 
	margin-left:19em;
	margin-right:5em;
	background-color:#FFFFFF;
	border-color:#000066;
	border:medium;
}

/*=============================
		Picture Placement
==============================*/

#picture
{
	position:relative;
	left: 1em;
	width: 14em;
	padding:1em;
	}
	
#picture2
{
	position:relative;
	left: 24em;
	width: 14em;
	padding:1em;
}

#picture3
{
	left: 45em;
	width: 14em;
	padding:1em;
}

/*==============================
		FOOTER
===============================*/
#footer
{
	/* clears are the sisters to float, it's 
	time to meet the whole family :) */
	clear:left; 
	height:4em;
	background:url('images/footer.gif') no-repeat; 
	background-color: #3067CB;
	}
	
#time {
	float:left;
	padding-right: .5em;
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	top: 40px;
	}

#nav {
	position: absolute;
	top: 150px;
	left: 10px;
	width: 14em;
}


#nav ul {
	list-style: none;
	margin-left: 1em;
	padding-left: 0;
}
#nav li {
	font-size: 90%;
	border-bottom: 1px dotted #B2BCC6;
	margin-bottom: 0.3em;
}


#nav a:link, 

#nav a:visited {
	text-decoration: none;
	color: #00FFFF;
	background-color: transparent;
}
#nav a:hover {
	color: #778899;
}
#nav h2 {
	font: 110% Verdana, Arial, Helvetica, sans-serif;
	color: #00FFFF;
	background-color: transparent;
	border-bottom: 1px dotted #cccccc;
}

h1 {
	font: 150% Verdana, Arial, Helvetica, sans-serif;
}