#rating, #rating a:hover, #rating .current
{
background: url(images/rating/rating_stars2.gif) left;
}

#rating
{
position: relative;
width: 130px; /* 10 stars width */
height: 12px; /* 1 star height */
overflow: hidden;
list-style: none;
margin: 0px;
padding: 0px;
background-position: top left;
}

#rating li
{
display: inline;
}

#rating a, #rating .current
{
position: absolute;
top: 0;
left: 0;
text-indent: -9000px;
height: 12px; /* 1 star height */
line-height: 12px; /* 1 star height */
outline: none;
overflow: hidden;
border: none;
/* I replaced the pixel-width with an em-width, but must set font size in px */
font-size: 13px; /* 1 star width */
}
 
/* Show stars when hovered */
#rating a:hover
{
background-position: left bottom;
}

/* Set each section to the appropriate width, stacking so leftmost is topmost */
#rating a.rate1
{
width: 10%;
z-index: 11;
}

#rating a.rate2
{
width:20%;
z-index: 10;
}

#rating a.rate3
{
width:30%;
z-index: 9;
}

#rating a.rate4
{
width:40%;
z-index: 8;
}

#rating a.rate5
{
width: 50%;
z-index: 7;
}

#rating a.rate6
{
width: 60%;
z-index: 6;
}

#rating a.rate7
{
width: 70%;
z-index: 5;
}

#rating a.rate8
{
width: 80%;
z-index: 4;
}

#rating a.rate9
{
width: 90%;
z-index: 3;
}

#rating a.rate10
{
width: 100%;
z-index: 2;
}

#rating .current
{
z-index: 1;
background-position: left center;
}