.starlight {
	color: #e00;
}

div.reviewRate {
	display:block;
	clear:both;
	float:left;
	height:20px;
	margin-left:10px;
}
#grade,
div.reviewRate,
#star-rating {
	margin-bottom:10px;
	padding:0;
}

div.reviewRate ul,
#grade ul,
#star-rating ul {
	list-style: none;
	margin: 3px 3px 3px 0;
	padding: 0px;
	width: 100px;
	height: 20px;
	position: relative;
	background: url(rating/rating.png) top left repeat-x;
	display:block;
border:none;
}

div.reviewRate li,
#grade li,
#star-rating li {
	padding: 0px;
	margin: 0px;
	/*\*/
	float: left;
display:inline;
clear:none;
height:20px;
border:none;
	/* */
	padding-bottom:0;
}

div.reviewRate li.current-rating,
#grade li.current-rating,
#star-rating li.current-rating {
	border:none;
	background: url(rating/rating.png) left bottom;
	position: absolute;
	height: 20px;
	display: block;
	text-indent: -9000px;
	z-index: 1;
}
div.reviewRate li span,
#star-rating li span,
#grade li a,
#star-rating li a {
	display: block;
	width: 20px;
	height: 20px;
	text-decoration: none;
	text-indent: -9000px;
	z-index: 20;
	position: absolute;
	padding: 0px;
	background-image: none;
}

#grade li a:hover,
#star-rating li a:hover {
	background: url(rating/rating.gif) left center;
	z-index: 1;
	left: 0px;
}

div.reviewRate span.star-1,
#star-rating span.star-1,
#grade a.star-1,
#star-rating a.star-1 {
	left: 0px;
}

#grade a.star-1:hover,
#star-rating a.star-1:hover {
	width: 20px;
}
div.reviewRate span.star-2,
#star-rating span.star-2,
#grade a.star-2,
#star-rating a.star-2 {
	left: 20px;
}

#grade a.star-2:hover,
#star-rating a.star-2:hover {
	width: 40px;
}

.reviewRate span.star-3,
#star-rating span.star-3,
#grade a.star-3,
#star-rating a.star-3 {
	left: 40px;
}

#grade a.star-3:hover,
#star-rating a.star-3:hover {
	width: 60px;
}

.reviewRate span.star-4,
#star-rating span.star-4,
#grade a.star-4,
#star-rating a.star-4 {
	left: 60px;
}

#grade a.star-4:hover,
#star-rating a.star-4:hover {
	width: 80px;
}

.reviewRate span.star-5,
#star-rating span.star-5,
#grade a.star-5,
#star-rating a.star-5 {
	left: 80px;
}

#grade a.star-5:hover,
#star-rating a.star-5:hover {
	width: 100px;
}

#score strong,
#score {
	font-size:110%;

}

#score {
	display:block;
	margin-bottom:5px;
	padding:0;
}

.rate:not(old){
  display        : inline-block;
  width          : 8.5em;
  height         : 1.7em;
  overflow       : hidden;
  vertical-align : bottom;
}

.rate:not(old) > input{
  margin-right : -100%;
  opacity      : 0;
}

.rate:not(old) > label{
  display         : block;
  float           : right;
  position        : relative;
  background      : url('rating/star-off.png');
  background-size : contain;
}

.rate:not(old) > label:before{
  content         : '';
  display         : block;
  width           : 1.7em;
  height          : 1.7em;
  background      : url('rating/star-on.png');
  background-size : contain;
  opacity         : 0;
  transition      : opacity 0.2s linear;
}

.rate:not(old) > label:hover:before,
.rate:not(old) > label:hover ~ label:before,
.rate:not(:hover) > :checked ~ label:before{
  opacity : 1;
}
