@charset "utf-8";



#page-wrap {
     
     background: none repeat scroll 0 0 white;
     box-shadow: 0 0 20px black;
	 padding: 20px;
     position: relative;
	 width: 800px;
     margin: 0 auto;
	 text-align: left;
 
}



.content {
	padding: 10px 0;
	width: 60%;
	float: left;
}






.header {
	background: #FFF;
}



#nav {
    background: none repeat scroll 0 0 #fff;
    float: left;
    height: 2em;
    list-style: none outside none;
    margin: 0 0 0 20px;
    width: 780px;
}
#nav li {
    background: none repeat scroll 0 0 #330099;
    float: left;
    padding: 10px 20px;
    position: relative;
    text-align: center;
	border-top:2px solid #3300FF;
	border-right:0px solid #FFF;
	border-bottom:0px solid #330099;
	border-left:2px solid #330099;
	text-transform:uppercase

   
}
#nav li:hover {
    background: none repeat scroll 0 0 #330099;
}
#nav a {
    color: #FFFFFF;
    display: block;
    line-height: 1em;
    text-decoration: none;
}
#nav ul {
    left: -999em;
    list-style: none outside none;
    position: absolute;
    top: 1em;
    z-index: 100;
}
#nav li:hover ul {
    left: 0;
    top: 35px;

}
#nav li li {
    padding: 0 0 4px 10px;
    text-align: left;
	text-transform:uppercase;
    width: 200px;
	background: none repeat scroll 0 0 #cc0066;
	border-top:0px solid #000;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	border-left:1px solid #000;

	
}


/* ~~ These are the columns for the layout. ~~ */

.content {
	padding: 100px 0;
	width: 100%;
	float: left;
}



/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; 
}




/* ~~The footer ~~ */
.footer {
	padding: 10px 0;
	background: #660099;
	position: relative;
	clear: both; 
}