/* set width and height, width to full width of image matrix, height to height of one row in image matrix */
.rating{ width:110px; height:20px; margin:0; padding:0; list-style:none; position:relative; background: url(images/star-matrix.gif) no-repeat 0 0; }

/* set each of these to background-position: 0 -Xpx} where X = offset height of image matrix */
.nostar {background-position:0 0; }
.onestar {background-position:0 -20px; }
.twostar {background-position:0 -40px; }
.threestar {background-position:0 -60px; }
.fourstar {background-position:0 -80px; }
.fivestar {background-position:0 -100px; }
ul.rating li.one a:hover {background-position:0 -120px;}
ul.rating li.two a:hover {background-position:0 -140px;}
ul.rating li.three a:hover {background-position:0 -160px}
ul.rating li.four a:hover {background-position:0 -180px}
ul.rating li.five a:hover {background-position:0 -200px}

ul.rating li { cursor: pointer; /*ie5 mac doesn't like it if the list is floated\*/ float:left; /* end hide*/ text-indent:-999em; }

/* set height and width to height and width value for one star in image matrix */
ul.rating li a { position:absolute; left:0; top:0; width:22px; height:20px; text-decoration:none; z-index:200; }

/* set left:Xpx where X = offset width of one star in image matrix */
ul.rating li.one a {left:0}
ul.rating li.two a {left:22px;}
ul.rating li.three a {left:44px;}
ul.rating li.four a {left:66px;}
ul.rating li.five a {left:88px;}

/* set width and height, width to full width of image matrix, height to height of one row in image matrix */
ul.rating li a:hover { z-index:2; width:110px; height:20px; overflow:hidden; left:0; background: url(images/star-matrix.gif) no-repeat 0 0; }

.rating__container { text-align:center; margin:10px auto 4px 30px; border:dotted 1px #000; padding:5px; width:110px; }
.rating__label { font-size:10px; }
.rating__label__larger { font-size:13px; }