.star-rating
  background: image-url("star_rating/starbar.gif") left -1000px repeat-x
  position: relative
  width: 55px
  height: 11px
  overflow: hidden
  list-style: none
  margin: 0
  padding: 0
  background-position: left top
  a
    &:hover, &:active, &:focus
      background: image-url("star_rating/starbar.gif") left -1000px repeat-x
  .current-rating
    background: image-url("star_rating/starbar.gif") left -1000px repeat-x
  li
    display: inline
  a, .current-rating
    position: absolute
    top: 0
    left: 0
    text-indent: -1000em
    height: 11px
    line-height: 11px
    outline: none
    overflow: hidden
    border: none
  a
    &:hover, &:active, &:focus
      background-position: left bottom
    &.one-star
      width: 20%
      z-index: 6
    &.two-stars
      width: 40%
      z-index: 5
    &.three-stars
      width: 60%
      z-index: 4
    &.four-stars
      width: 80%
      z-index: 3
    &.five-stars
      width: 120%
      z-index: 2
  .current-rating
    z-index: 1
    background-position: left center

.inline-rating
  display: -moz-inline-block
  display: -moz-inline-box
  display: inline-block
  vertical-align: middle

.small-star
  width: 55px
  height: 11px
  background-image: image-url("star_rating/starbar.gif")
  line-height: 11px
  height: 11px
  a
    &:hover, &:active, &:focus
      background-image: image-url("star_rating/starbar.gif")
      line-height: 11px
      height: 11px
  .current-rating
    background-image: image-url("star_rating/starbar.gif")
    line-height: 11px
    height: 11px
