div.menu{
	width: 600px;
	margin: 100px 0 0 0;
	float: left;
}

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

ul#menu li{
	float: left;
	display: inline;
}

div.menu a {
    background: transparent url(menu-bg-right.png) no-repeat scroll top right;
    color: #777;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 27px;
    margin-right: 6px;
    padding-right: 13px; /* sliding doors padding */
    text-decoration: none;
}

div.menu a span {
	/*Note: Make sure the span's vertical padding (5 + 5) and line-height (14) amount to the total height of the button (24). Using a different padding, means setting a different height. */
    background: transparent url('menu-bg-fill.png') no-repeat;
    display: block;
    line-height: 17px;
    padding: 5px 0 5px 11px;
}


div.menu a:hover {
    background-position: bottom right;
    color: #fff;
    outline: none; /* hide dotted outline in Firefox */
}

div.menu a:hover span {
    background-position: bottom left;
    /*padding: 6px 0 4px 18px; /* push text down 1px */
}


/* Aktiv lŠnk (current page) */
li.active a{
    background-position: bottom right;
    color: #fff;
    outline: none; /* hide dotted outline in Firefox */
}

li.active a span {
    background-position: bottom left;
    /*padding: 6px 0 4px 18px; /* push text down 1px */
}