#body {background-color: rgb(50,50,100);}

/* center area with the menu and picture */
#center {position: absolute; left: 50%; top: 0px; background-color: #000033; width: 980px; height: 930px; margin-left: -490px; 
		border-left: 4px #000033  ridge; border-right: 4px #000033 groove; border-bottom: 4px #000033 groove}
		
/* Image in center that has blue to white fade at top and bottom */		
#cen { width: 100%; height: 722px; }

/* Area behind moving pictures where an alternate display is */
#pic {position: absolute; top: 40px; left: 0px}
#centerpic {position: absolute; top: 110px; left: 380px; width: 200px}

/* Picture behind menu that has the blue to gold fade */
#menuback { position: absolute; left: 0px; top: 2px; z-index: 2}

/* sets width of image behind the moving pictures */
#lca {width: 400px}

/* text at top of screen */
#info { width: 980px; text-align: center; font-size: 1.3em; color: white; position: absolute; left: 0px; top: 0px; z-index:5}

/* div that contains both sports and sycamore image */
#sports{ position: absolute; left: 0px; top: 661px; z-index: 4; }

/* actual sycamore image */
#syc {width: 478px; height:144px}

/* actual sports image */
#sps {width: 478px; height: 148px}

/* div with the changing pictures */   
#motion {position: absolute; left: 170px; top: 124px; z-index: 6; border-right: 4px #000033 solid; }




			
/* Menu styles on hompage */
#menu {position: absolute; top: 90px; left: 0px; z-index: 8;
width: 180px; background-color: 000033 ;
} 

#menu ul { list-style: none; margin: 0; padding: 0;
			}

#menu a{font: bold 14px arial, helvetica,sans-serif;
		display: block; height: 30px;
		border-width: 1px;
		border-style: solid;
		border-color: #ccc #888 #555 #bbb;
		margin: 0;
		padding: 2px 3px;
		
}

#menu a {color: 000033; background: yellow; text-decoration: none;
}

#menu a:hover {
color: black;
background-image: url('cougar.gif');
}

#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
} 

#menu ul ul ul{ position: absolute; top: 0; left: 100%; /* position them to the right of their containing block */
				width: 100%; /* width is based on the containing block */
}

div#menu ul ul ul,
div#menu ul ul li:hover ul 
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover 
{display: block;}

#big {font-size: 24px}