/* styles for the star rater */	
#content .star-rating{
 /*remove bullets*/
 list-style:none;
 margin: 0px;
 padding:0px;
 /*5 x one star width=5x30*/ 
 width: 150px;
 /*one star height*/
 height: 30px;
 /* Very important. We will be using absolute positioning later. We want to 
  use relatively-absolute positioning.*/
 position: relative;
 /*first, unrated star is on the top of image*/
 background: url(../images/star_rating.gif) top left repeat-x;		
}

.star-rating li{
 padding:0px;
 margin:0px;
 /* width:30; height 30*/
 /*\*/
 float: left;  /*this makes a horizontal list*/ 
 /* */
}

.star-rating li a{
 /*we want a block item, so that we can mess with its height and width*/
 display:block;
 width:30px;
 height: 30px;
 line-height:30px;
 text-decoration: none;
 /*remove text*/
 text-indent: -9000px;
 /*last on the z axis*/  
 z-index: 20;
 /*we can control x and y position relative to the parent UL*/
 position: absolute;
 padding: 0px;
 /*doesn't overflow*/
 overflow:hidden;
}

.star-rating li a:hover{
 /*second start in on the center of the image*/ 
 background: url(../images/star_rating.gif) left center;
 /* second on the z axis, first is current-rating*/
 z-index: 2;
 left: 0px;
 border:none;
}


/*firts start, set left and with for our "a" tag*/
 .star-rating a.one-star{
 left: 0px;
}
.star-rating a.one-star:hover{
 width:30px;
}

.star-rating a.two-stars{
 left:30px;
}

.star-rating a.two-stars:hover{
	width: 60px;
}

.star-rating a.three-stars{
 left: 60px;
}

.star-rating a.three-stars:hover{
 width: 90px;
}

.star-rating a.four-stars{
 left: 90px;
}	

.star-rating a.four-stars:hover{
 width: 120px;
}

.star-rating a.five-stars{
 left: 120px;
}

.star-rating a.five-stars:hover{
 width: 150px;
}

/* current rating class*/
.star-rating li.current-rating{
 /*last star for the current rating is on the bottom of the image*/
 background: url(../images/star_rating.gif) left bottom;
 position: absolute;
 height: 30px;
 display: block;
 text-indent: -9000px;
 /*first index on the z axis*/
	z-index: 1;
}

/* remove halo effect in firefox   */
a:active{
 outline: none;
}
  	
