/* Wrappers */

#ratin {
    text-align:center;
    margin:0 auto;
    min-height:100px;
}

.rating-wrap{
	width:240px;
	height:48px;
	position:relative;
        margin:0 auto;
}


.radio-wrap{
	width:100%;
	height:100%;
}

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

/* Filled Rating */
.rating-fill{
	width:0;
	height:100%;
	background:url(star.png) 0 -96px;
	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(star.png) 0 0;
	position:absolute;
	top:0;
	left:0;	
	z-index:0;
}

.rating-rated {
   height:48px;
   background:url(star.png) 0 -48px repeat-x;
   position:relative;
   top:-48px;
}

/* 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%;
}

.rating-result{
    display:none;
}