/* Hauptnavigation 
============================================== */

#navi {
	background:url(../images/background_navi.jpg) no-repeat;
	height:54px;
	width:884px;
	padding:0 53px 0 53px;
	z-index:100;
	margin:auto;
}
#navi ul {
	padding:0;
	margin:0;
	list-style-type: none;
}
#navi ul li {
	float:left;
	position:relative; 
}

#navi li a { float:left; display:block; text-indent:-3000px; }
#navi ul li { float:left; }

#navi ul li a { height:54px; }

#navi ul li.philosophie a { background:url(../images/bg_navi.jpg) 0 0; width:155px; }
#navi ul li.philosophie a:hover, #navi li.philosophie-active { background:url(../images/bg_navi.jpg) 0 -54px; width:155px; }
	
#navi ul li.atelier a { background:url(../images/bg_navi.jpg) -155px 0; width:194px; }
#navi ul li.atelier a:hover, #navi li.atelier-active { background:url(../images/bg_navi.jpg) -155px -54px; width:194px; }

#navi ul li.schmuck a { background:url(../images/bg_navi.jpg) -349px 0; width:108px; }
#navi ul li.schmuck a:hover, #navi li.schmuck-active { background:url(../images/bg_navi.jpg) -349px -54px; width:108px; }

#navi ul li.presse a { background:url(../images/bg_navi.jpg) -457px 0; width:86px; }
#navi ul li.presse a:hover, #navi li.presse-active { background:url(../images/bg_navi.jpg) -457px -54px; width:86px; }

#navi ul li.ausstellungen a { background:url(../images/bg_navi.jpg) -543px 0; width:218px; }
#navi ul li.ausstellungen a:hover, #navi li.ausstellungen-active { background:url(../images/bg_navi.jpg) -543px -54px; width:218px; }

#navi ul li.kontakt a { background:url(../images/bg_navi.jpg) -761px 0; width:120px; }
#navi ul li.kontakt a:hover, #navi li.kontakt-active { background:url(../images/bg_navi.jpg) -761px -54px; width:120px; }

/* Subnavi
============================================== */

#navi ul li ul { 
	visibility:hidden; 
	position:absolute; 
	top:0; 
	left:0; 
	height:0; 
	overflow:hidden; 
}
#navi ul li:hover ul, #navi ul li a:hover ul { 
	visibility:visible; 
	display:block;
	position:absolute; 
	top:54px;
	left:-1px; 
	overflow:visible; 
}
#navi ul li:hover a, #navi ul li a:hover { visibility:visible; }
#navi li ul li a { height:30px; visibility:visible; }

#navi li ul li.schmuck_werkstatt a { background:url(../images/bg_subnavi.jpg) 0 0; width:227px; }
#navi li ul li.schmuck_werkstatt a:hover, #navi li.schmuck a:hover { background:url(../images/bg_subnavi.jpg) -227px 0; width:227px; visibility:visible; }

#navi li ul li.schmuck_andere a { background:url(../images/bg_subnavi.jpg) 0 -30px; width:227px; }
#navi li ul li.schmuck_andere a:hover, li ul li.schmuck_andere { background:url(../images/bg_subnavi.jpg) -227px -30px; width:227px; }

#navi table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* make the second level visible when hover on first level link and position it */
#navi li a:hover ul {
	visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}