/* the default rating is placed as a background image in the ul */
/* use the background position according to the table above to display the required images*/
.rating 
{
    display: inline-block;
	width: 60px;
	height: 12px;
	margin: 0 0 0.5em 0;
	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 */
.norate { background-position: 0 0; }
.star0 { background-position: 0 -12px; }
.star1 { background-position: 0 -24px; }
.star2 { background-position: 0 -36px; }
.star3 { background-position: 0 -48px; }
.star4 { background-position: 0 -60px; }
.star5 { background-position: 0 -72px; }
.star6 { background-position: 0 -84px; }
.star7 { background-position: 0 -96px; }
.star8 { background-position: 0 -108px; }
.star9 { background-position: 0 -120px; }
.star10 { background-position: 0 -132px; }

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: 12px;
	height: 12px;
	text-decoration: none;
	z-index: 200;
}
ul.rating li.ratestar1 a { left: 0; }
ul.rating li.ratestar2 a { left: 12px; }
ul.rating li.ratestar3 a { left: 24px; }
ul.rating li.ratestar4 a { left: 36px; }
ul.rating li.ratestar5 a { left: 48px; }

ul.rating li a:hover {
	z-index: 2;
	width: 60px;
	height: 12px;
	overflow: hidden;
	left: 0;
	background: url(../Images/Star_Matrix.gif) no-repeat 0 0;
}
ul.rating li.ratestar1 a:hover { background-position: 0 -144px; }
ul.rating li.ratestar2 a:hover { background-position: 0 -156px; }
ul.rating li.ratestar3 a:hover { background-position: 0 -168px; }
ul.rating li.ratestar4 a:hover { background-position: 0 -180px; }
ul.rating li.ratestar5 a:hover { background-position: 0 -192px; }

/* Rating container - primarily used on the article detail page. */
#body .rating-controls { background: #EAEAEA; padding: 0.4em 0.8em; margin: 0 0 20px 0; color: #999999; overflow: hidden; }
#body .rating-controls div { float: right; }
#body .rating-controls div label { margin: 0 0.8em 0 0; display: block; }
#body .rating-controls div .rating { margin: 0; }