Current Page Tab Not Highlighted

I am using http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/ on my site but the current tab button (onselected2) doesn’t work; all the buttons show up as normal ones (onlink2). My navbar should be visually similar to WordPress’s own.

Here is my code in header.php

<div id="navigation">
<ul>
<li class="home"><a href="<?php echo get_settings('home'); ?>"><span>Home</span></a></li>
</ul>
</div>

and code in style.css

#navigation {
background: url(images/nav.png) top left repeat-x;
overflow: auto;
display: block;
float: left;
width: 100%;
padding:0;
margin:208px 0 0 0;
}
#navigation * {
padding:0;
margin:0 0 0 0;

}
#navigation ul {
display: block;
float: left;
padding: 4px 0 0 17px;
}
#navigation ul li {
list-style: none;
float: left;
margin: 0 0 0 10px;
}

#navigation ul li a {
background: url(images/onlink2_right.png) top right no-repeat !important;
background: url(images/onlink2_right_IE6.png) top right no-repeat;
display: block;
padding: 0 10px 0 0;
color: #7d7d7d;
text-decoration: none
}
#navigation ul li a span {
background: url(images/onlink2_left.png) top left no-repeat !important;
background: url(images/onlink2_left_IE6.png) top left no-repeat;
display: block;
padding: 5px 0 4px 10px;
}
#navigation ul li a:hover {
background: url(images/onhover2_right.png) top right no-repeat !important;
background: url(images/onhover2_right_IE6.png) top right no-repeat;
color: #FFF;
text-decoration: underline
}
#navigation ul li a:hover span {
background: url(images/onhover2_left.png) top left no-repeat !important;
background: url(images/onhover2_left_IE6.png) top left no-repeat;
}

#home #navigation ul li.home a {
background: url(images/onselected2_right.png) top right no-repeat !important;
background: url(images/onselected2_right_IE6.png) top right no-repeat;
color: #6a6a6a;
}
#home #navigation ul li.home a span {
background: url(images/onselected2_left.png) top left no-repeat !important;
background: url(images/onselected2_left_IE6.png) top left no-repeat;
}