.star-rating{
		list-style: none;/*- turn off the default list image bullets*/
		margin: 3px; /*- I wan’t some space around this thing*/
		padding: 0px; /*- I’m anal. I’m pretty sure OL’s have a default padding of 0px, but we’ll set it to 0px just to be safe*/
		width: 100px; /*- This list is 5 stars, each star is 20px, therefore it should be 5 x 20px = 100px wide*/
		height: 20px; /*- The height of each star is 20px. Since this is a horizontal list, we will set the list height to the height of the star.*/
		position: relative; /*- Very important. We will be using absolute positioning later. We want to use relatively-absolute positioning.*/
		background: url(/images/icon/star_rating_down.gif) top left repeat-x; /*- By repeating this image horizontally, the list will appear to have five stars.*/
	}
	
	.star-rating li{
		padding:0px; /*- no padding at all*/
		margin:0px; /*- no margin at all*/
		/* - Backslash hack, this causes IE5 Mac NOT to see this rule*/
		float: left; /*- for any other browser, we are going to float left, this makes a horizontal list*/
		/*- end the IE5 Backslash hack*/
	 }
	 
	.star-rating li a{
	display:block; /*- we want a block item, so that we can mess with its height and width*/
	width:20px; /*- easy stuff, we want the width to be the same as the star width*/
	height: 20px; /*- same as the width*/
	text-decoration: none; /*- remove the underline from the link*/
	text-indent: -9000px; /*- indent the text off the screen using a image-replacement technique, we dont want to see the text anymore.*/
	z-index: 20; /*- we’ll come back to this*/
	position: absolute; /*- we can now control the exact x and y coordinates of each star, relative to the parent UL*/
	padding: 0px; /*- once again, we don’t need any padding*/
	background-image:none; /*- we will not show the star*/
	}
	
	.star-rating li a:hover{
	background: url(/images/icon/star_rating_up.gif) left center; /*- this is where the magic is*/
	z-index: 1; /*- move this star to the bottom of the z-index stack*/
	left: 0px; /*- move this star all the way to the left, aligned with the side of the UL parent item*/
	}
	
	.star-rating a.one-star{
	left: 0px;
	}
	
	.star-rating a.one-star:hover{
	width:20px;
	}
	.star-rating a.two-stars{
	left:20px;
	}
	.star-rating a.two-stars:hover{
	width: 40px;
	}
	.star-rating a.three-stars{
	left: 40px;
	}
	.star-rating a.three-stars:hover{
	width: 60px;
	}
	.star-rating a.four-stars{
	left: 60px;
	}
	.star-rating a.four-stars:hover{
	width: 80px;
	}
	.star-rating a.five-stars{
	left: 80px;
	}
	.star-rating a.five-stars:hover{
	width: 100px;
	}
	
	
	
	/***********************************************************/
	.star-rating li.current-rating{
	background: url(/images/icon/star_rating_up.gif) left bottom;
	position: absolute;
	height: 20px;
	display: block;
	text-indent: -9000px;
	z-index: 1;
	}
	
	
	
		.star-average{
		list-style: none;/*- turn off the default list image bullets*/
		margin: 3px; /*- I wan’t some space around this thing*/
		padding: 0px; /*- I’m anal. I’m pretty sure OL’s have a default padding of 0px, but we’ll set it to 0px just to be safe*/
		width: 100px; /*- This list is 5 stars, each star is 20px, therefore it should be 5 x 20px = 100px wide*/
		height: 20px; /*- The height of each star is 20px. Since this is a horizontal list, we will set the list height to the height of the star.*/
		position: relative; /*- Very important. We will be using absolute positioning later. We want to use relatively-absolute positioning.*/
		background: url(/images/icon/star_rating_down.gif) top left repeat-x; /*- By repeating this image horizontally, the list will appear to have five stars.*/
	}
	
	.star-average li{
		padding:0px; /*- no padding at all*/
		margin:0px; /*- no margin at all*/
		/* - Backslash hack, this causes IE5 Mac NOT to see this rule*/
		float: left; /*- for any other browser, we are going to float left, this makes a horizontal list*/
		/*- end the IE5 Backslash hack*/
	 }
	 
	.star-average li a{
	display:block; /*- we want a block item, so that we can mess with its height and width*/
	width:20px; /*- easy stuff, we want the width to be the same as the star width*/
	height: 20px; /*- same as the width*/
	text-decoration: none; /*- remove the underline from the link*/
	text-indent: -9000px; /*- indent the text off the screen using a image-replacement technique, we dont want to see the text anymore.*/
	z-index: 20; /*- we’ll come back to this*/
	position: absolute; /*- we can now control the exact x and y coordinates of each star, relative to the parent UL*/
	padding: 0px; /*- once again, we don’t need any padding*/
	background-image:none; /*- we will not show the star*/
	}

	.star-average a.one-star{
	left: 0px;
	}
	.star-average a.two-stars{
	left:20px;
	}
	.star-average a.three-stars{
	left: 40px;
	}
	.star-average a.four-stars{
	left: 60px;
	}
	.star-average a.five-stars{
	left: 80px;
	}
	
	
	
	/***********************************************************/
	.star-average li.current-average{
	background: url(/images/icon/star_rating_up.gif) left bottom;
	position: absolute;
	height: 20px;
	display: block;
	text-indent: -9000px;
	z-index: 1;
	}