/*======================================================================================
                                Top Menu Elements
========================================================================================*/
/* TODO: Examine to what degree #head styling can be copied to #menu to achieve same effect */
#head {
	color: black;
	font-weight: bold;
	height: 82px; 
	margin-top:0;
	padding: 0px 0 0px 0; 
	position: absolute;  
	width: 900px;
	z-index: 1; 
}

#menu {
	float: left;
	font-size: 12px;
	padding-top: 0px;
	text-align: center;
	width: 900px; 
}

#menu a:link, #menu a:active, #menu a:visited, #menu span {
	border-bottom: 1px dotted #e1e1e1; 
}

#menu a:hover, #menu span:hover {
	border-bottom: 1px solid #e1e1e1;
}

#menu ul {
	background: rgba(0,0,0,0.4);
	border-bottom: 1px dotted #e1e1e1; 
	height: 40px; 
	list-style: none;						/* Consider removing */
	margin:0px; 
	padding: 0px; 
	position:absolute; 
}

#menu ul:hover {
	background: rgba(0,0,0,0.6);
}

#menu ul li {
	display: inline;
}

#menu ul:hover li ul:hover {
	background: rgba(0,0,0,0.5);
}

#menu ul li a, #menu ul li span {
	color: white;
	display: block; 
	float: left; 
	padding: 15px 10px 10px 10px; 
	text-decoration: none; 
	width: 130px; 
}

#menu ul li a:hover, #menu ul li span:hover {
	cursor: pointer; 
	background: rgba(0,0,0,0.8);
}

#menu ul li	ul {
	display:none; 
}

#menu ul li:hover ul {
	display: block; 
	height: 40px; 
	top:40px; 
}

#menu ul li ul li a:hover, #menu ul li ul li span:hover {
	border-bottom: 1px solid #e1e1e1; 
}

.hide {
	visibility: hidden;
}

#top_banner {
	background: url('../images/datasci_header.jpg') no-repeat; 
	background-position:0px -45px; 
	cursor:pointer;
	margin: 0px 0px 15px 0px;
	height: 300px;
	width: 900px; 
}