.star-rating, .star-rating a:hover, .star-rating a:active, .star-rating .current-rating{ background: url(images/rating_star.gif) left -1000px repeat-x; } .star-rating{ position:relative; width:125px; height:25px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top; } .star-rating li{ display: inline; } .star-rating a, .star-rating .current-rating{ position:absolute; top:0; left:0; text-indent:-1000em; height:25px; line-height:25px; outline:none; overflow:hidden; border: none; } .star-rating a:hover{ background-position: left bottom; } .star-rating a.one-star{ width:20%; z-index:6; } .star-rating a.two-stars{ width:40%; z-index:5; } .star-rating a.three-stars{ width:60%; z-index:4; } .star-rating a.four-stars{ width:80%; z-index:3; } .star-rating a.five-stars{ width:100%; z-index:2; } .star-rating .current-rating{ z-index:1; background-position: left center; } /* SECOND STAR (ALREADY VOTED */ .star-rating2, .star-rating2 a:active, .star-rating2 .current-rating{ background: url(images/rating_star_2.gif) left -1000px repeat-x; } .star-rating2{ position:relative; width:125px; height:25px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top; } .star-rating2 li{ display: inline; } .star-rating2 a, .star-rating2 .current-rating { position:absolute; top:0; left:0; text-indent:-1000em; height:25px; line-height:25px; outline:none; overflow:hidden; border: none; cursor:default; } .star-rating2 a.one-star{ width:20%; z-index:6; } .star-rating2 a.two-stars{ width:40%; z-index:5; } .star-rating2 a.three-stars{ width:60%; z-index:4; } .star-rating2 a.four-stars{ width:80%; z-index:3; } .star-rating2 a.five-stars{ width:100%; z-index:2; } .star-rating2 .current-rating{ z-index:1; background-position: left center; } /* END SECOND STAR */ /* for an inline rater */ .inline-rating{ display:-moz-inline-block; display:-moz-inline-box; display:inline-block; vertical-align: middle; } .voted_twice { background: #FFDDDD url(images/rating_warning.gif) no-repeat 5px 50%; padding:5px 5px 5px 16px; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; color:#333; width:130px; font-size:11px; } .voted { background: #E7FFCE url(images/rating_tick.gif) no-repeat 5px 50%; padding:5px 5px 5px 16px; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; color:#333; width:130px; font-size:11px; } /* The text that displays the rating information */ .rated_text { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; margin-bottom:5px; color:#666; } /* Green text that shows 3.34/5 */ .out5Class { color:#00CC00; font-weight:bold; } .percentClass { /* Insert styles here for the percentage display. Example (74%) */ } .votesClass { /* Insert styles here for the votes display. Example (2 Votes) */ } .topRatedList { padding:0; margin:0; } .topRatedList li { list-style-type:none; }