.rating {
    width: 80px;
    height: 16px;
    margin: 0px 0px;
    padding: 0;
    list-style: none;
    clear: both;
    position: relative;
    background: url(../images/star-matrix.gif) no-repeat 0 0;
}

/* add these classes to the ul to effect the change to the correct number of stars */
.nostar {
    background-position: 0 0
}

.onestar {
    background-position: 0 -16px
}

.twostar {
    background-position: 0 -32px
}

.threestar {
    background-position: 0 -48px
}

.fourstar {
    background-position: 0 -64px
}

.fivestar {
    background-position: 0 -80px
}

ul.rating li {
    cursor: pointer;
    /*ie5 mac doesn't like it if the list is floated\*/
    float: left;
    /* end hide*/
    text-indent: -999em;
}

ul.rating li a {
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    text-decoration: none;
    z-index: 200;
}

ul.rating li.one a {
    left: 0
}

ul.rating li.two a {
    left: 16px;
}

ul.rating li.three a {
    left: 32px;
}

ul.rating li.four a {
    left: 48px;
}

ul.rating li.five a {
    left: 64px;
}

ul.rating li a:hover {
    z-index: 2;
    width: 80px;
    height: 16px;
    overflow: hidden;
    left: 0;
    background: url(../images/star-matrix.gif) no-repeat 0 0;
    text-decoration: none !improtant;
}

ul.rating li.one a:hover {
    background-position: 0 -96px;
}

ul.rating li.two a:hover {
    background-position: 0 -112px;
}

ul.rating li.three a:hover {
    background-position: 0 -128px
}

ul.rating li.four a:hover {
    background-position: 0 -144px
}

ul.rating li.five a:hover {
    background-position: 0 -160px
}