/******* EXAMPLE F *******/
.br-wrapper-f .br-widget {
  height: 30px;
}
.br-wrapper-f .br-widget a {
  background-image: url("../image/star.png") !important;
  width: 30px;
  height: 30px;
  display: block;
  float: left;
  margin-right: 7px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .br-wrapper-f .br-widget a {
    background-image: url("../img/star@2x.png");
    background-size: 30px 60px;
  }
}
.br-wrapper-f .br-widget a:hover,
.br-wrapper-f .br-widget a.br-active,
.br-wrapper-f .br-widget a.br-selected {
  background-position: 0 30px;
}
.br-wrapper-f .br-widget .br-current-rating {
  clear: both;
  width: 330px;
  text-align: center;
  font-weight: 600;
  display: block;
  padding: .5em 0;
  color: #646464;
}
.br-wrapper-f .br-readonly a.br-active,
.br-wrapper-f .br-readonly a.br-selected {
  background-color: #50e3c2;
}
/* Center in container */
.br-wrapper-f {
}