@charset "utf-8";
body {
	background-color: #39F;
	background-image: url(../images/background.gif);
	background-repeat: repeat;
}

#container {
	width: 850px;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 50px;
	margin-left: auto;
	min-height: 100%;
	
}

#header {
	width: 850px;
	height: 64px;
	clear: both;
	margin-bottom: -20px;
	margin-left: auto;
	margin-right: auto;
	
}


#content {
	background: #4D636C;
	width: 850px;
	margin: 0;
	padding: 0;
}

#nav {
/*	background: #C90;*/
	width: 650px;
	height: 30px;
	margin-bottom: 0px;
	margin-left: 120px;
	margin-right: auto;
/*	float: left;*/
	
}

#nav li {
	list-style-image: none;
	list-style-type: none;
	margin: 0;
	padding: 0	
}

.spotlightWrapper ul {
	list-style-type: none;
	margin-left:20px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}  

.spotlightWrapper ul li {
	float:left;
	position:relative; /* so we can use top and left positioning */

} 

.spotlightWrapper ul li a img {
	width:200px; /* you don't need this, i just rescaled the images they are bigger then i want them to be ' */
	border:none; /* remove the default blue border */
	position:relative; /* so we can use top and left positioning */

} 

.spotlightWrapper ul li a img.active {  
border:2px solid white; /* choose whatever you like */  
z-index:1; /* show it on top of the other images (they have z-index 0) */  
left: -2px; /* same as border width but negative */  
top: -2px; /* same as border width but negative */ 
 
}  
  
.clear { clear:both; }