/*-------------------- SEITEN-NAVIGATION -----------------
--------------------------------------------------------*/

#navi {
position: relative;
background: #f5f5f5;
width: 200px;
margin: 50px auto;
border-top: 1px solid #00f; 
}

#navi>li {
border-bottom: 1px solid #00f;
position: relative;
}

#navi>li>a {
text-decoration: none;
font-size: 80%;
font-weight: normal;
display: block;
padding: 3px;
padding-left: 23px;
}

#navi>li>a:link,
#navi>li>a:visited {
background: url(img/bg/liststyle.gif) no-repeat scroll 3px 3px; 
color: #00f;
}

#navi>li>a:hover,
#navi>li>a:active,
#navi>li>a:focus {
background: #00f url(img/bg/liststylewhite.gif) no-repeat scroll 3px 3px;
color: #fff;
}

#navi>li:hover,
#navi>li:hover>a {
background: #00f url(img/bg/liststylewhite.gif) no-repeat scroll 3px 3px;
color: #fff;
}

#navi li:hover .submenue {
display: block;
position: absolute;
left: 200px;
top: -1px;
}

.submenue {
display: none;
background: #f5f5f5;
width: 180px;
border: 1px solid #00f;
z-index: 1000;
}

.submenue>li a {
text-decoration: none;
font-size: 60%;
font-weight: normal;
display: block;
padding: 3px 3px 3px 15px;
}

.submenue>li a:link,
.submenue>li a:visited {
background: transparent; 
color: #00f;
}

.submenue>li a:hover,
.submenue>li a:active,
.submenue>li a:focus {
background: #00f;
color: #fff;
}