/* CSS cleaned up a bit, it seems some members of the team do not close CSS values correctly. Why leave this open to error? 

selector {
	property: value; Semi-colon to close off value
}

*/

#sddm {
	margin: 0;
	padding: 0;
	z-index: 60;
}

#sddm li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 16px century gothic, verdana;
}

#sddm li a {
	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 104px;
	background: #A0798E;
	color: #fff;
	text-align: center;
	text-decoration: none;
	height: 50px;
}

#sddm li a:hover {
	background: #789A89;
}

#sddm div {
	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background-image: url(images/buton2.jpg);
	height: 30px;
}

#m2 { /* This seems to be a red herring, I experimented with changing stuff here and it had little effect */
	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background-image: url(images/buton2.jpg);
	height: 30px;
}

/* This section seems to control the styles of the drop down nav items */
#sddm div a {
	position: relative;
	display: block;
	margin: 0 0 2px 0; /* Edited by Paul to compenstate for the the 2px height border inbetween nav elements */
	padding: 5px 10px;
	width: 102px;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	background: #A0798E;
	color: #fff;
	border: 1px solid #fff; /* Added by Paul, this gives the entire nav element a border around it. If left with no margin, (specified above), then it gives the appreance of a 2px height line inbetween nav items. */
	font: 14px century gothic, verdana;
	height: 20px;
}

#sddm div a:hover {
	background-image: url(images/butoff2.jpg);
	color: #fff;
	height: 20px;
}