/* Wrappers */
.rating-wrap{
	width:100px;
	height:16px;
	position:relative;
	border: 0px solid red;
}


.radio-wrap{
	width:100%;
	height:100%;
	border: 0px solid green;
}

.rating-text {
	float:right;
}

/* Radio Buttons */
input[type=radio] {
	display:inline-block;
	position:relative;
	z-index:2;
	margin:0;
	width:16px;
	height:100%;
	opacity:0;
}

/* Filled Rating */
.rating-fill{
	width:0;
	height:100%;
	background:url(/shared/images/skin_bl/star_rating.png) #efaf16;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}


/* Checked Inputs */

input[value="5"]:checked + .rating-fill{
	width:100%;
}

input[value="4"]:checked + .rating-fill{
	width:80%;
}

input[value="3"]:checked + .rating-fill{
	width:60%;
}

input[value="2"]:checked + .rating-fill{
	width:40%;
}

input[value="1"]:checked + .rating-fill{
	width:20%;
}


/* Blank Stars */

.rating-blank{
	width:100%;
	height:100%;
	background:url(/shared/images/skin_bl/star_rating.png) #ccc;
	position:absolute;
	top:0;
	left:0;	
	z-index:0;
	
	border: 0px solid green;
}

/* Optional Hover Effect */

input[value="5"]:hover + .rating-fill{
	width:100%;
}

input[value="4"]:hover + .rating-fill{
	width:80%;
}

input[value="3"]:hover + .rating-fill{
	width:60%;
}

input[value="2"]:hover + .rating-fill{
	width:40%;
}

input[value="1"]:hover + .rating-fill{
	width:20%;
}