.rating {
  cursor: pointer;
  margin: 2em;
  clear: both;
  display: block;
}
.rating:after {
  content: '.';
  display: block;
  height: 0;
  width: 0;
  clear: both;
  visibility: hidden;
}
.rating .cancel,
.rating .star {
  float: left;
  width: 17px;
  height: 15px;
  overflow: hidden;
  text-indent: -999em;
  cursor: pointer;
}
.rating .cancel,
.rating .cancel a {background: url(delete.gif) no-repeat 0 -16px;}

.rating .star,
.rating .star a {background: url(star.gif) no-repeat 0 0px;}
  
.rating .cancel a,
.rating .star a {
  display: block;
  width: 100%;
  height: 100%;
  background-position: 0 0px;
}

div.rating div.on a {
  background-position: 0 -16px;
}
div.rating div.hover a,
div.rating div a:hover {
  background-position: 0 -32px;
}

.rating div.rating-message {
  clear: both;
  padding: 3px;
  text-align: center;
  color: #f33;
}

/* Default display for div-based message is hidden */
div.rating div.rating-message {
  display: none;
}

.rating div.rating-current {
  clear: both;
  text-align: center;
}