/* STYLE SHEET FOR CF-101 */
/* 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;
		background-position: center;
		}
		
blockquote
		{
		text-align: justify;
		font-size: 13px;
		font-family: Trebuchet MS, Verdana, Arial, Helvetica, Sans-serif;
		}

img
		{
		border: 0px;
		
		}
		
/* page wrapper begins here */
#wrapper {
		margin: 0 auto;
		text-align: left;
		width: 900px;
		height: 100%;
		background-color: #fff;
		}
		
/* Begin header here*/
#header 
		{
		width: 900px;
		background-color: #f3f3f3;
		/*background: url(../images/header-img.jpg); */
		}
		


/*Navigation Bar Begins Here*/

#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; 
		padding: 0;
		position: absolute; 
		top: 100%;
		} 
		
#nav ul ul li 
		{
		float: none; 
		border-top: 1px solid #999; 
		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;
		} 


/*Begin sidebar here. */		
#sidebar 
		{
		float: left;
		background-color: #f8f8f8;
		/* background-color: #fff; */
		width: 180px;
		height: 840px;
		padding: 15px;
		font-family: Trebuchet MS, Verdana, Arial, Helvetica, Sans-serif;
		font-size: 14px;
		text-decoration: none;
		}
		
#sidebar img
		{
		margin-top: 20px;
		text-decoration: none;
		}

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

/* I commented out the section below because it affected the sidebar image in IE 8. I need to figure out how to fix that. */
/* #sidebar a:link
		{
		color:#AA47CC;
		text-decoration: none;
		font-weight: bold;
		} */
		
/* #sidebar a:hover 
		{
		background-color:#FFFF85;
		} */
		
/* #sidebar a:active 
		{
		background-color:#FFFF85;
		color: #000;
		} */
		
/* Table begins here */
#table 
		{
		color: #fff;
		text-decoration: none;
		text-align: center;
		font-weight: bold;
		width: 180px;
		background-color: #6e238b;
		/*background-color: #fff; */
		}
		
#table table tr td
		{
		background-color: #AA47CC;
		width: 180px;
		height: 32px;
		border: 1px solid black;
		}
		
		
#table table tr td a
		{
		color: #fff;
		text-decoration: none;
		}
		
#table table tr td:hover
		{
		background-color: #d3bbe2;
		color: #000;
		}
		
#table table tr td a:hover
		{
		color: #000;
		}
		
#table table tr td a:active
		{
		background-color: #AA47CC;
		color: #fff;
		}

#social 
		{
		text-decoration: none;
		}
#social a
		{
		text-decoration: none;
		}
	
#social a:link
		{
		text-decoration: none;
		} 
		
#social a:hover 
		{
		text-decoration: none;
		} 
		
#social a:active 
		{
		text-decoration: none;
		}
		
/* Begin main body container here. */		
#container {
		width: 620px;
		float: right;
		background-color: #fff;
		font-family: Trebuchet MS, Verdana, Arial, Helvetica, Sans-serif;
		font-size: 15px;
		padding:35px; 
		height: 800px;
		text-align: justify;
		}
		
#container table
		{
		width: 610px;
		text-align: left;
		}
		
#container table td
		{
		padding: 10px;
		}
		
#container h2
		{
		text-align: center;
		} 
		
/* Container Links */
#container a:link 	
		{
		color: #AA47CC;
		text-decoration: none;
		font-weight: bold;
		}

/* #container a:hover 
		{
		background-color:#FFFF85;
		}  */
#container a:active 
		{
		background-color:#FFFF85;
		text-decoration: none;
		color: #000;
		}
#container a:visited
		{
		color: #6e238b;
		text-decoration: none;
		}
		
#container blockquote
		{
		margin-left: 140px;
		}
		
#container ul
		{
		margin-left: 10px;
		list-style-type: circle;
		}
	
		
		
/* Begin footer here. */		
#footer {
		clear: both;
		background: #e1e1e1;
		/* background: #BABABA; */ 
		/* background: #fff; */
		width: 880px;
		padding: 10px; 
		font-family: Trebuchet MS, Verdana, Arial, Helvetica, Sans-serif;
		font-style: italic;
		font-size: 12px;
		text-align: center;
		color:#000;
		}
#footer a
		{
		text-decoration: none;
		color: #000;
		font-weight: normal;
		}