/* STYLE SHEET FOR CF-101 Pages */
/* Web Page Design 110 Project*/
/*Amelia Avila*/

body
		{
		background: #D7D1DE url(../images/purple_bg.jpg) no-repeat; 
		background-size: cover; 
		background-position: center;
		/*text-align: center; */
		}
		
p 		{
		font-size: 14px;
		}
		
img
		{
		border: 0px;
		}
		

		
/*Page Wrapper */
#wrapper {
		margin: 0 auto;
		text-align: left;
		width: 900px;
		height: 100%;
		background-color: #fff;
		}
		
/* Begin header here*/
#header {
		width: 900px;
		background: #f3f3f3;
		}

/*Navigation Bar Begins Here*/

/* #nav  I originally tried using this fixed width code, but something was wrong. I commented out so that I could come back later and try to figure out the problem */
	/* { 
		background: #AA47CC;
	    width: 890px;
		height: 40px;
		padding: 5px;
		margin: 0;
		font-family: Trebuchet MS, Verdana, Arial, Helvetica, Sans-serif;
		font-size: 15px;
		} */
		
#nav 
		{
		margin: auto;
		text-align: center;
		width: 100%;
		background: #000;
		font-family: Trebuchet MS, Verdana, Arial, Helvetica, Sans-serif;
		font-size: 15px;
		} 
		
#nav ul ul 
		{
		display: none;
		} 

#nav ul li:hover > ul 
		{
		display: block;
		}
	
#nav ul 
		{
		background: #AA47CC; 
		padding: 0 35px;
		list-style: none;
		position: relative;
		display: inline-table;	
		} 
		
#nav ul:after  /* Not quite sure what this is for, but my understanding is that this is a pseudo hack to keep sub sub menus from appearing when sub menu is displayed while hovering on top menu. */
		{
		content: ""; 
		clear: both; 
		display: block;
		} 
	
#nav ul li 
		{
		float: left;
		} 
		
#nav ul li:hover 
		{
		background: #AA47CC;
		} 
		
#nav ul li a:hover 
		{
		color: #000;
		background: #d3bbe2; 
		} 
	
#nav ul li a 
		{
		display: block; padding: 8px 50px;
		color: #fff; text-decoration: none;
		font-weight: bold;
		} 
	
#nav ul ul {
		background: #6e238b; /* I may change this color */
		padding: 0;
		position: absolute; 
		top: 100%;
		} 
		
#nav ul ul li 
		{
		float: none; 
		border-top: 1px solid #999; /* I'm still trying different colors here, so it will probably change */
		border-bottom: 1px solid #666;
		position: relative;
		} 
		
#nav ul ul li a 
		{
		padding: 8px 50px;
		color: #fff;
		font-weight: bold;
		}	
		
#nav ul ul li:hover a
		{
		background: #d3bbe2;
		}
			
#nav ul ul ul  /* In case I ever add any sub links to the sub links */
		{
		position: absolute; 
		left: 100%; 
		top:0;
		} 


/* Container begins here */		
#container
		{
		width: 840px;
		height: 100%;
		padding: 30px;
		text-align: justify;
		font-size: 14px;
		font-family: Trebuchet MS, Verdana, Arial, Helvetica, Sans-serif;
		}
		

		

/* Container Links */

#container a
		{
		text-decoration: none;
		}
		
#container a:link 	
		{
		color:#AA47CC;
		text-decoration: none;
		font-weight: bold;
		}

#container a:hover 
		{
		background-color:#FFFF85;
		} 
#container a:active 
		{
		background-color:#FFFF85;
		color: #000;
		text-decoration: none;
		}
		
.tab
		{
		margin-left:30px;
		}
		
.indent
		{
		margin-left:20px;
		}
		
/* Begin footer here. */		
#footer {
		clear: both;
		background: #fff;
		width: 860px;
		padding: 20px;; 
		font-family: Trebuchet MS, Verdana, Arial, Helvetica, Sans-serif;
		font-style: italic;
		text-align: center;
		color: #000;
		}
#footer p
		{
		font-size: 12px;
		}
		
#footer a
		{
		text-decoration: none;
		color: #000;
		font-weight: normal;
		}