.rating {
    cursor: pointer;
    margin: 0;
    display: block;
    vertical-align: top;
    width: 150px;
    height: 0px;
    overflow: hidden;
    float: left;
}

.rating.small {
    width: 78px;
}
.rating input {
    display: inline;
}

.rating:after {
    content: '.';
    display: block;
    height: 0;
    width: 0;
/*    clear: both;*/
    visibility: hidden;
}
.cancel,
.star {
    float: left;
    width: 25px;
    height: 25px;
    overflow: hidden;
    text-indent: -999em;
    cursor: pointer;
}

.small .cancel, .small .star {
    width: 13px;
    height: 13px;
}
.cancel,
.cancel a {background: url(/graficos/no-star.gif) no-repeat 0 0px;}

.small .cancel,
.small .cancel a { background-image: url(/graficos/small-no-star.png);}

.star.userrating,
.star.userrating a {background: url(/graficos/user-star.gif) no-repeat 0 0px;}

.small .star.userrating,
.small .star.userrating a {background-image: url(/graficos/small-user-star.png);}

.star.averagerating,
.star.averagerating a {background: url(/graficos/avg-star.gif) no-repeat 0 0px;}

.small .star.averagerating,
.small .star.averagerating a {background-image: url(/graficos/small-avg-star.png);}

.cancel a,
.star a {
    display: block;
    width: 100%;
    height: 100%;
    background-position: 0 0px;
}

div.rating div.on a {
    display: block;
    background-position: 0 -24px;
}

div.rating.small div.on a {
    background-position: 0 -12px;
}

div.rating div.hover a,
div.rating div a:hover {
    display: block;
    background-position: 0 -48px;
}

div.rating.small div.hover a,
div.rating.small div a:hover {
    background-position: 0 -24px;
}