a:focus {
outline: none;
}
.star-rating,  
.star-rating a:hover,  
.star-rating a:active,  
.star-rating a:focus,  
.star-rating .current-rating{  
background: url(/images/starrating_stars.gif) left -1000px repeat-x;  
/* В качестве фона для сылок, списка и текущего рейтинга 
зададим нашу картинку и расположим ее пока за 
пределами элемента */  
}  


.star-rating{  
display:inline-block;
position: relative;  
width: 250px; /* Ширина всего рейтинга*/  
height: 25px;  
overflow: hidden;  
list-style: none;  
margin: 0;  
/*margin-top: 5px;*/
margin-left: 50px;
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,  
.star-rating a:active,  
.star-rating a:focus{  
background-position: left bottom;  
/* При наведении мышки и т.д. фоном будет 
   нижняя часть картинки, а именно "подсвеченная" 
   звездочка */  
}  

/* Зададим стили для каждой звездочки */  
.star-rating a.one-star { width: 10%; z-index: 11; }  
.star-rating a.two-stars { width: 20%; z-index: 10; }  
.star-rating a.three-stars { width: 30%; z-index: 9; }  
.star-rating a.four-stars { width: 40%; z-index: 8; }  
.star-rating a.five-stars { width:50%; z-index:7; } 
.star-rating a.six-stars { width:60%; z-index:6; }  
.star-rating a.seven-stars { width:70%; z-index:5; } 
.star-rating a.eight-stars { width:80%; z-index:4; } 
.star-rating a.nine-stars { width:90%; z-index:3; } 
.star-rating a.ten-stars { width:100%; z-index:2; } 

/* Текущий рейтинг выше всех и имеет в качестве 
  фона "нормальную" звездочку */  
.star-rating .current-rating{  
z-index: 1;  
background-position: left center;  
}