Нужна помощь по меню

[Fireblade]

Пишу сайт на joomla. Скачал шаблон, поставил, начал делать верхнее меню и тут пошёл бред...вот тут (http://www.joomlademos.de/home?template=aion_lernvid.com) видно, что элементы верхнего меню в картинках, при навидении курсора картинка меняется. У меня же эти элементы без картинок, выровнены вплотную к краенему левому краю и эти надписи слеплены друг с другом, а при наведении на какую-нибудь ссылку эта надпись исчезает и между ссылками появляются отступы и выранкивается не вплотную к краю. Жуткая картина....Картинки лежат там где надо, CSS вроде в норме. Вот не пойму в чём проблема. Помогите плиз)))

[Fireblade]

/* Formatvorlagen für die Navigation-Oben */
ul#mainlevel-nav {
list-style : none;
padding : 0;
margin : 0;
font-size : 11px;
padding-left: 20px;
}
ul#mainlevel-nav li {
background-image : url(../images/navi.jpg); background-repeat : repeat-x;
color : #fff;
font-weight : bold;
float : left;
margin : 0;
padding : 0;
font-size : 11px;
height : 65px;
line-height : 35px;
white-space : nowrap;
border-right : 5px solid #000;
}
ul#mainlevel-nav li a {
text-align : center;
font-weight : bold;
font-size : 11px;
display : block;
padding-left : 20px;
padding-right : 20px;
text-decoration : none;
color : #ffffff;
background : transparent;
padding-top: 10px;
}
#buttons > ul#mainlevel-nav li a {
width : auto; }
ul#mainlevel-nav li a:hover {
background-image : url(../images/navi_hover.jpg); background-repeat : repeat-x;
background-position: center top;
color : #000;
font-weight : bold;
padding-left : 20px;
padding-right : 20px;
float : left;
margin : 0;
font-size : 11px;
white-space : nowrap;
height : 65px;
line-height : 35px;
margin-top: 10px;
}