/*
ON BG Images grösse: left und right 225px x 32px
 */
<!-- Pro Blue
#pronav_container {
position:relative;
height:56px;
color:#E0E0E0;
background:#143D55;
width:100%;
}

#pronav {
/* position:relative; Mag IE6 nicht*/
height:32px;
font-size:12px;
text-transform:uppercase;
font-weight:bold;
background:#fff url(images/pro_bg.png) repeat-x bottom left;
padding:0 0 0 20px;
border-bottom: 8px solid #A90305;
}

#pronav ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;
}

#pronav ul li {
display:block;
float:left;
margin:0 1px;
}

#pronav ul li a {
display:block;
float:left;
color:#3F3F3F;
text-decoration:none;
padding:0 0 0 20px;
height:32px;
background:#333 url(images/silver-left-ON.png) no-repeat top left;
}

#pronav ul li a span {
padding:11px 20px 0 0;
height:21px;
float:left;
font-weight: bold;
font-family: "Myriad Pro", Helvetica, Arial, Verdana, sans-serif;
background:#333 url(images/silver-right-ON.png) no-repeat top right;
}


/* ################################## */

/* ON Red [Ratgeber]
images/red-left-ON.jpg
images/red-right-ON.jpg
Border - Leiste: 169,3,5 #A90305 */

#pronav ul li a#ratgeber:hover,
#pronav ul li a.current,
#pronav ul li a.current:hover {
color:#fff;
background:#A90305 url(images/red-left-ON.png) no-repeat top left;
line-height:275%;
}

#pronav ul li a#ratgeber:hover span,
#pronav ul li a.current span {
display:block;
padding:0px 20px 0 0;
width:auto;
background:#A90305 url(images/red-right-ON.png) no-repeat top right;
height:32px;
}

/* ################################## */

/* ON Orange [Blogs]
images/orange-left-ON.jpg
images/orange-right-ON.jpg
Border - Leiste: rgb(216,115,21) oder #D87315 */


#pronav ul li a#blogs:hover,
#pronav ul li a#blogs.current,
#pronav ul li a#blogs:hover {
color:#fff;
background:#D87315 url(images/orange-left-ON.png) no-repeat top left;
line-height:275%;
}

#pronav ul li a#blogs.current span,
#pronav ul li a#blogs:hover span {
background:#D87315 url(images/orange-right-ON.png) no-repeat top right;
display:block;
padding:0px 20px 0 0;
width:auto;
height:32px;
}

/* ################################## */
/* ON Blue [Forum]
images/blue_left-ON.jpg
images/blue_right-ON.jpg
Border - Leiste: 15,15,255 #0F0FFF
NEU rgb(76, 96, 116) #4C6074               */

#pronav ul li a#forum:hover,
#pronav ul li a#forum.current,
#pronav ul li a#forum:hover {
color:#fff;
background:#4C6074 url(images/blue-left-ON.png) no-repeat top left;
line-height:275%;
}

#pronav ul li a#forum.current span,
#pronav ul li a#forum:hover span {
background:#4C6074 url(images/blue-right-ON.png) no-repeat top right;
display:block;
padding:0px 20px 0 0;
width:auto;
height:32px;
}

/* ################################## */
/* ON Green [Verzeichnis]
images/green-left-ON.jpg
images/green-right-ON.jpg
Border Leiste 0,128,0 #008000 */

#pronav ul li a#verzeichnis:hover,
#pronav ul li a#verzeichnis.current,
#pronav ul li a#verzeichnis.current:hover {
color:#fff;
background:#008000 url(images/green-left-ON.png) no-repeat top left;
line-height:275%;
}

#pronav ul li a#verzeichnis.current span,
#pronav ul li a#verzeichnis:hover span {
background:#008000 url(images/green-right-ON.png) no-repeat top right;
display:block;
padding:0px 20px 0 0;
width:auto;
height:32px;
}

/* ################################## */
/* ON Fuchsia [Shop]
images/fuchsia-left-ON.jpg
images/fuchsia-right-ON.jpg
Border - Leiste(fuchsia): 102,0,102 #660066
Border - Leiste dark: 51,51,51  #333333*/

#pronav ul li a#shop:hover,
#pronav ul li a#shop.current,
#pronav ul li a#shop:hover {
color:#fff;
background:rgb(51,51,51) url(images/dark-shop-left-ON.png) no-repeat top left;
line-height:275%;
}

#pronav ul li a#shop.current span,
#pronav ul li a#shop:hover span {
background:rgb(51,51,51) url(images/dark-shop-right-ON.png) no-repeat top right;
display:block;
padding:0px 20px 0 0;
width:auto;
height:32px;
}

/* ################################## */