.rating {
  float:left;
}

.rating:not(:checked) > input {
  position:absolute;
  //top:-9999px;
  clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
  float:right;
  width:1em;
  padding:0 .1em;
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
  font-size:300%;
  line-height:1.2;
  color:#00acd6;
 /* text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);*/
}

.rating:not(:checked) > label:before {
  content: &#00acd6;
}

.rating > input:checked ~ label {
  color: #ffcb50;
  /*text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);*/
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: gold;

  /*text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);*/
}

.rating> input:checked + label:hover,
.rating> input:checked + label:hover ~ label,
.rating> input:checked ~ label:hover,
.rating> input:checked ~ label:hover ~ label,
.rating> label:hover ~ input:checked ~ label {
  color: #ea0;
  /*text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);*/
}

.rating > label:active {
  position:relative;
  top:2px;
  left:2px;
}