/* ------------------------------Drop down List------------------------------------ 

How to get this to work:
Make sure the div that contains the text or image is high enough to reach the top of where
the dropdown appear.
IOW the bottom of the div and the top of the dropdown must overlap

*/


.MenuItem {
	display: block;
	font-size:11px;
	text-decoration: none;
	border-bottom: 1px solid #cccccc; /* border for each item */
	text-align:left;
	line-height:15px;
	padding:5px;
	margin-left:0px;
	margin-right:0px;
}

#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style:none;
	color: black;
	font-family: verdana;
	cursor: pointer;
	border: 1px none;
}

#nav li {
	float: left;
	text-align:left;
	margin-right:-11px;
	padding:0;
}

#nav li:hover {background-position: 0 0;}

#nav li span {
	position: absolute;
	left:0;
	top:30px;/* Change the top element to adjust vertical position of the drop down menu. Change the height of the box in the header file to ensure they overlap  */
	width: 130px;
	left: -999em;
	border: 2px solid #65236d; /* border for box */
	border-top:0px;
	text-align:left;
	background: #f6f6f6;
}

#nav li:hover span {
	left:auto;
}


#nav li:hover span, #nav li.sfhover span {
	left:auto;
	
}

#navServices a, #navAbout a, #navContact a {
color:#65236d;
}

#nav a:hover { /* This sets the title bg color when hovered over */
	color: #cccccc;
	cursor:pointer;
	text-decoration:none;
	
}

#navServices a:hover, #navAbout a:hover, #navContact a:hover { /* This sets the list items bg color when hovered over */
	color: #ffffff;
	background-color:#b52f19;
	text-decoration:none;
	
}