/*             styles for the star rater                */
.rating, .rating a:hover, .rating .current {
    background: url(../images/stars.jpg) left;
    }
.rating {
    position: relative; width: 80px; /* 5 stars width */ height: 16px; /* 1 star height */ overflow: hidden; list-style: none; 
    margin: 0px; padding: 0px; background-position: top left;
    }
.rating li {
    display: inline;
    }
.rating a, .rating .current {
    position: absolute; top: 0; left: 0; text-indent: -9000px; height: 16px; /* 1 star height */ line-height: 16px; /* 1 star height */
    outline: none; overflow: hidden; border: none; /* I replaced the pixel-width with an em-width, but must set font size in px */
    font-size: 16px; /* 1 star width */
    }
/* Show stars when hovered */
.rating a:hover {
    background-position: left center;
    }
/* Set each section to the appropriate width, stacking so leftmost is topmost */
.rating a.one {
    width: 20%; z-index: 6;
    }
.rating a.two {
    width:40%; z-index: 5;
    }
.rating a.three {
    width:60%; z-index: 4;
    }
.rating a.four {
    width:80%; z-index: 3;
    }
.rating a.five {
    width:100%;
    z-index: 2;
    }
.rating .current {
    z-index: 1; background-position: left bottom;
    }
	
	/* remove halo effect in firefox   
	a:active{
		outline: none;
	}*/
	
	.small-rating{
		list-style:none;
		margin: 0px;
		padding:0px;
		width: 60px;
		height: 12px;
		position: relative;
		overflow:hidden;
		background: url("../images/smallstar.jpg") top left repeat-x;		
	}
	
	.small-rating li.current {
		background: url("../images/smallstar.jpg") left bottom;
		position: absolute;
		height: 12px;
		display: block;
		text-indent: -9000px;
		z-index: 1;
	}
	a.comments {background:url("../images/comments.png") no-repeat left center; padding-left:14px; 
	            color:Black; text-decoration:none; font-size:10px;float:right}
	a.comments:hover {text-decoration:underline}
	.clears {
	    clear: both; height: 0; line-height: 0; font-size: 1px; overflow: hidden;
    }
a.commentsnormal {background:url("../images/comments.png") no-repeat left 1px; padding-left:14px; }
div.comments {padding:10px 0; border-bottom:1px dashed #DDD; width:720px}
div.ratingLink {width:200px;}
div.ratingLink ul {float:left;}
div.ratingLink a.commentsnormal {float:right; margin:0; line-height:11px}