/* styles for the star rater */

.star-rating { position: relative; width: 80px; height: 16px; overflow: hidden; margin: 0; padding: 0; list-style: none; background: url(/images/star_rating/star_rating.png) left 0 repeat-x;z-index:0; }
*html .star-rating { position: relative; width: 80px; height: 16px; overflow: hidden; margin: 0; padding: 0; list-style: none; background: url(/images/star_rating/star_rating.gif) left 0 repeat-x; }
    .star-rating li { /*  */float: left; margin: 0; padding: 0; }
        .star-rating li a { display: block; position: absolute; z-index: 20; width: 16px; height: 16px; margin: 0; padding: 0; text-decoration: none; text-indent: -9000px; cursor: default; }
            .star-rating li a.rate:hover { z-index: 1; left: 0; background: url(/images/star_rating/star_rating.png) left 16px; }
            *html .star-rating li a.rate:hover { z-index: 1; left: 0; background: url(/images/star_rating/star_rating.gif) left 16px; }
            
                .star-rating a#one-star { right: 64px; }
                    .star-rating a#one-star.rate:hover { width: 16px; }
                    .star-rating a#one-star.on { z-index: 1; left: 0; width: 16px; background: url(/images/star_rating/star_rating.png) left 16px; }
                    *html .star-rating a#one-star.on { z-index: 1; left: 0; width: 16px; background: url(/images/star_rating/star_rating.gif) left 16px; }
                    
                .star-rating a#two-stars { right: 48px; }
                    .star-rating a#two-stars.rate:hover { width: 32px; }
                    .star-rating a#two-stars.on { z-index: 1; left: 0; width: 32px; background: url(/images/star_rating/star_rating.png) left 16px; }
                    *html .star-rating a#two-stars.on { z-index: 1; left: 0; width: 32px; background: url(/images/star_rating/star_rating.gif) left 16px; }

                .star-rating a#three-stars { right: 32px; }
                    .star-rating a#three-stars.rate:hover { width: 48px; }
                    .star-rating a#three-stars.on { z-index: 1; left: 0; width: 48px; background: url(/images/star_rating/star_rating.png) left 16px; }
                    *html .star-rating a#three-stars.on { z-index: 1; left: 0; width: 48px; background: url(/images/star_rating/star_rating.gif) left 16px; }

                .star-rating a#four-stars { right: 16px; }
                    .star-rating a#four-stars.rate:hover { width: 64px; }
                    .star-rating a#four-stars.on { z-index: 1; left: 0; width: 64px; background: url(/images/star_rating/star_rating.png) left 16px; }
                    *html .star-rating a#four-stars.on { z-index: 1; left: 0; width: 64px; background: url(/images/star_rating/star_rating.gif) left 16px; }

                .star-rating a#five-stars { right: 0; }
                    .star-rating a#five-stars.rate:hover { width: 80px; }
                    .star-rating a#five-stars.on { z-index: 1; left: 0; width: 80px; background: url(/images/star_rating/star_rating.png) left 16px; }
                    *html .star-rating a#five-stars.on { z-index: 1; left: 0; width: 80px; background: url(/images/star_rating/star_rating.gif) left 16px; }

.star-rating a#one-stars.rate, .star-rating a#two-stars.rate, .star-rating a#three-stars.rate, .star-rating a#four-stars.rate, .star-rating a#five-stars.rate { cursor: pointer; }


/* Stars Front */
.stars { position: relative; width: 80px; height: 16px; overflow: hidden; margin: 0; padding: 0; list-style: none; }
    .stars li { /*  */float: left; margin: 0; padding: 0; }
        .stars li a { display: block; z-index: 20; width: 16px; height: 16px; margin: 0; padding: 0; text-decoration: none; text-indent: -9000px; cursor: default; }
        
            .stars li a { z-index: 1; left: 0; background: url(/images/star_rating/star_rating.png) left 0; }
            *html .stars li a { z-index: 1; left: 0; background: url(/images/star_rating/star_rating.gif) left 0; }
            .stars li a.on { z-index: 1; left: 0; background: url(/images/star_rating/star_rating.png) left 16px; }
            *html .stars li a.on { z-index: 1; left: 0; background: url(/images/star_rating/star_rating.gif) left 16px; }