/* common styling */
#menu_wrapper {
	width: 1010px;
	text-align: left; 
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
}

#menu {
	width: 1010px;
	margin-left: auto;
	margin-right: auto;
	position:relative;
}

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

#menu ul li {
	float:left; 
	position:relative;
}
#menu ul li a, #menu ul li a:visited {
	float:left; 
	display:block; 
	text-decoration: none;
	color: #FFFFFF;	
	font-size: 15px;
	height:46px; 
}

#menu ul li:hover {
	width:auto;
}

#menu ul li ul {
	display: none;
}

#menu table {
	margin:0; 
	border-collapse:collapse; 
	font-size:12px; 
	position:absolute; 
	top:0; 
	left:0;
}


#menu #home  {background: url(../images/navigation/home.jpg) no-repeat; margin-left: 105px; width: 103px;}
#menu #home:hover {background-position: 0 -47px;}
body.home #menu #home {background-position: 0 -93px;}

#menu #windsurfing  {background: url(../images/navigation/windsurfing.jpg) no-repeat; width: 160px; height: 46px;}
#menu #windsurfing:hover {background-position: 0 -47px;}
body.windsurfing #menu #windsurfing {background-position: 0 -93px;}
#menu ul li:hover #windsurfing {background-position: 0 -47px;}

#menu #surfing  {background: url(../images/navigation/surfing.jpg) no-repeat; width: 119px; height: 46px;}
#menu #surfing:hover {background-position: 0 -47px;}
body.surfing #menu #surfing {background-position: 0 -93px;}
#menu ul li:hover #surfing {background-position: 0 -47px;}

#menu #boating  {background: url(../images/navigation/boating.jpg) no-repeat; width: 130px; height: 46px;}
#menu #boating:hover {background-position: 0 -47px;}
body.boating #menu #boating {background-position: 0 -93px;}
#menu ul li:hover #boating {background-position: 0 -47px;}

#menu #diving  {background: url(../images/navigation/diving.jpg) no-repeat; width: 115px; height: 46px;}
#menu #diving:hover {background-position: 0 -47px;}
body.diving #menu #diving {background-position: 0 -93px;}
#menu ul li:hover #diving {background-position: 0 -47px;}

#menu #contactus  {background: url(../images/navigation/contactus.jpg) no-repeat; width: 143px; height: 46px;}
#menu #contactus:hover {background-position: 0 -47px;}
body.contactus #menu #contactus {background-position: 0 -47px;}
#menu ul li:hover #contactus {background-position: 0 -47px;}






/* specific to non IE browsers */

#menu ul li:hover ul {
    display:block; 
    position:absolute;
    top:42px;
    margin-top:2px;
    left:0;
	text-align: left;
    width: auto; 
	z-index: 5;
	background-color: #346b9e;
	width: 223px;
}

#menu ul li:hover ul li a {
	text-decoration: none;
	color: #ffffff;
	font-size: 12px;
	height: 16px;
	padding: 10px 0 10px 22px;
	border-bottom: 1px solid #87c2d2;
	width: 200px;
}

#menu ul li:hover ul li a:hover {
	background-color: #141f4d;
}

/* specific to IE5.5 and IE6 browsers */

#menu ul li a:hover ul {
    display:block; 
    position:absolute;
    top:42px;
    margin-top:2px;
    left:0;
	text-align: left;
    width: auto; 
	z-index: 5;
	background-color: #346b9e;
	border-top: 1px solid #325460;
}

#menu ul li a:hover ul li a {
	text-decoration: none;
	color: #ffffff;
	font-size: 12px;
	height: 16px;
	padding: 10px 0 10px 35px;
	border-bottom: 1px solid #87c2d2;
	width: 200px;
}

#menu ul li a:hover ul li a:hover {
	background-color: #141f4d;
}
#menu ul li a:hover ul li a ul {
	visibility:hidden; 
	position:absolute; 
	height:0; 
	width:0;
}