/* Image for the ul and some height and width properties */
	ul#nav_styled {
		width: 900px;
		height: 45px;
		margin:0;
		padding:0;
		background: url('csm-nav-full.png');
		position:relative;
	} 

/* We want li as block and to be as tall as image */
	ul#nav_styled li {
		display:block;
		height:45px;
		margin: 0; 
		padding: 0; 
		list-style: none; 
		position: absolute; 
		top: 0;
	} 

/* a should also be block and 50px tall */
	ul#nav_styled li a {
		display:block;
		height:45px;
	}

/* This is the boring part, every link has to be positioned according to the image */
	li#i1 {
		left: 0px; 
		width: 150px;
	}
	
	li#i2 {
		left: 150px; 
		width: 150px;
	} 
	
	li#i3 {
		left: 300px; 
		width: 150px;
	} 
	
	li#i4 {
		left: 450px; 
		width: 150px;
	}
	li#i5 {
		left: 600px; 
		width: 150px;
	}
	li#i6 {
		left: 750px; 
		width: 150px;
	}


#i1 a:hover {
background: transparent url(csm-nav-full.png) 0 -45px no-repeat;
}
#i2 a:hover {
background: transparent url(csm-nav-full.png) -150px -45px no-repeat;
}
#i3 a:hover {
background: transparent url(csm-nav-full.png) -300px -45px no-repeat;
}
#i4 a:hover {
background: transparent url(csm-nav-full.png) -450px -45px no-repeat;
}
#i5 a:hover {
background: transparent url(csm-nav-full.png) -600px -45px no-repeat;
}
#i6 a:hover {
background: transparent url(csm-nav-full.png) -750px -45px no-repeat;
}

ul#nav_styled li a {
text-indent:-9000px; background-color:transparent; }


ul#sddm
{	
		width: 900px;
		height: 45px;

	margin: 0;
	padding: 0;

		background: url('csm-nav-full.png');
		position:relative;
		z-index: 45;

	}

ul#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 11px arial;

	display:block;
	height:45px;
	position: absolute; 
	top: 0;
	
	}

ul#sddm li a
{
	height:45px;
	
	display: block;
	margin: 0 1px 0 0;
	padding: 4px 4px;
	color: #FFF;
	text-align: center;
	text-decoration: none}

/* This is the boring part, every link has to be positioned according to the image */

	li#i1 {
		left: 0px; 
		width: 150px;
	}
	
	li#i2 {
		left: 150px; 
		width: 150px;
	} 
	
	li#i3 {
		left: 300px; 
		width: 150px;
	} 
	
	li#i4 {
		left: 450px; 
		width: 150px;
	}
	li#i5 {
		left: 600px; 
		width: 150px;
	}
	li#i6 {
		left: 750px; 
		width: 150px;
	}


#sddm div
{	position: absolute;
	visibility: hidden;
	width:150px;
	margin: 0;
	padding: 0;
	background: #856c56;
	border: 1px solid #c9ac90
	
	}

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 5px;
		width: auto;
		white-space: nowrap;
			text-transform: uppercase;
		text-align: left;
		text-decoration: none;
		background: #754517;
		color: #fff;
		font: 11px arial}

	#sddm div a:hover
	{	background: #c9ac90;
		color: #754517}
		

	li#i1 a {
		text-indent:-9000px; background-color:transparent; 
	}
	li#i2 a {
		text-indent:-9000px; background-color:transparent; 
	}
	li#i3 a {
		text-indent:-9000px; background-color:transparent; 
	}
	li#i4 a {
		text-indent:-9000px; background-color:transparent; 
	}
	li#i5 a {
		text-indent:-9000px; background-color:transparent; 
	}
	li#i6 a {
		text-indent:-9000px; background-color:transparent; 
	}