rating stars

dabblet.css

/**
 * rating stars
 */

.rating {
	height: 18px;
	width: 82px;
}

.rating_star {
	background: repeat-x url('http://dl.dropbox.com/u/14779502/rating_new.png');
	line-height: 18px;
	height: 18px;
	overflow: hidden;
	text-indent: -999em;
	
	z-index: 1;
	
	float: right;
	width: 15px;
}
.rating_star + .rating_star {
	padding-right: 1px;
}

.rating:hover .rating_star {
	background-position: 0 -36px;
}

.rating_marked,
.rating_marked ~ .rating_star {
	background-position: 0 -54px;
}

.rating:hover .rating_star:hover,
.rating_star:hover ~ .rating_star {
	background-position: 0 -18px;	
}

dabblet.html

<div class="rating">
	<a class="rating_star star_five" href="#">5</a>
	<a class="rating_star star_four" href="#">4</a>
	<a class="rating_star star_three" href="#">3</a>
	<a class="rating_star star_two" href="#">2</a>
	<a class="rating_star star_one" href="#">1</a>
</div>

<div class="rating">
	<a class="rating_star star_five" href="#">5</a>
	<a class="rating_star star_four" href="#">4</a>
	<a class="rating_star star_three rating_marked" href="#">3</a>
	<a class="rating_star star_two" href="#">2</a>
	<a class="rating_star star_one" href="#">1</a>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}