@import url(font-awesome.css);

.csStarRating { 
 width:240px;
  position:relative;
  font-family: FontAwesome;
  margin:7px 0 0 -7px;
}

.csStarRating input { display: none; } 
.csStarRating label:before { 
  margin:0 3px 0 0;
  font-size: 1.95em;
  display: inline-block;
  content: "\f005";
}

.csStarRating .csStarRating__star--half:before { 
  content: "\f089";
  position: absolute;
}

.csStarRating label { 
  color: #d3d1d1; 
  float: right; 
  transition: all 400ms 'ease';
}

.csStarRating > input:checked ~ label, .csStarRating:not(:checked) > label:hover, .csStarRating:not(:checked) > label:hover ~ label {color:#8499c2;} 

.csStarRating > input:checked + label:hover, .csStarRating > input:checked ~ label:hover, .csStarRating > label:hover ~ input:checked ~ label, .csStarRating > input:checked ~ label:hover ~ label {color:#8499c2;} 

.csStarRating__message {
  clear:left;
}