/* Base setup */
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.rate {
    display: inline-block;
    border: 0;
    position: relative;
}
    /* Hide radio */
    .rate > input {
        display: none;
    }
    /* Order correctly by floating highest to the right */
    .rate > label {
        float: right;
        color: #a7a7a7;
        margin-bottom: 0;
    }
        /* The star of the show */
        .rate > label:before {
            display: inline-block;
            font-size: 1.3rem;
            padding: .3rem .2rem;
            margin: 0;
            cursor: pointer;
            font-family: FontAwesome;
            content: "\f005 "; /* full star */
        }

    /* Half star trick */
    .rate .half:before {
        content: "\f089 "; /* half star no outline */
        position: absolute;
        padding-right: 0;
        width: 10px
    }
/* Click + hover color */
input:checked ~ label, /* color current and previous stars on checked */
label:hover, label:hover ~ label {
    color: #f8b704;
}
    /* color previous stars on hover */

    /* Hover highlights */
    input:checked + label:hover, input:checked ~ label:hover, /* highlight current and previous stars */
    input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
    label:hover ~ input:checked ~ label /* highlight previous selected stars */ {
        color: #f8b704;
    }