/* Containers -------------------------------------------------*/

#container{
	width:960px; 																		/* or 960px for 1024 display or your width */
	margin: 10px auto;																	/* to centre layout */
	text-align:left;																	/* to counter text-align:center in body */
}
#header{
	height:110px;
}
#content{
	clear:both;
	margin:2em 0;
	padding:0 20px;
}
#footer{
	padding-left:10px;
	height:30px;
	line-height:20px;
	clear:both;
	border-bottom:1px solid #660033;
	border-top:1px solid #660033;
}
#copyright{
	width:960px;																		/* set this to same width as container */
	margin:1em auto;																	/* centre layout if main container is centred */
	text-align:center;
}
/* End Containers ---------------------------------------------*/



/* Navigation -------------------------------------------------*/
#nav{																					/* set this to same width as container */
	width:960px;
	background:#660033;
}
#nav ul{
	float:left;	
	background:#663366;
	height:20px;
}
#nav li{
	float:left;
	border-right:1px solid #939ba7;														/* adds a seperator to the menu items */
	line-height:20px;																	/* use line-height to vertical align text not padding */
	text-align:center;
}

#nav li.first{
	border-left:1px solid #939ba7														/* adds a sperator to left of first menu item */
}
#nav a{
	font-weight:bold;
	text-transform:uppercase;
	font-size:12px;
	text-decoration:none;
	display:block;
	padding-right:12px;
	padding-left:12px;																	/* do not set height unless you are also going to set a width
																						on the a tag as IE6 will not display properly */
}
#nav a:hover{
	background-color:#bfcde5;
	color:#606f85;
}