#hide {
    display:none;
}

.rating input {
    position:absolute;
    filter:alpha(opacity=0);/* 1: Dark*/
    -moz-opacity:0;
    -khtml-opacity:0;
    opacity:0;
    cursor:pointer;
    width:17px;
    border: 1px solid red;
}

.rating span {
    width:24px;
    height:16px;
    line-height:16px;
    padding:1px 22px 1px 0; /* 1px FireFox fix */  /* Change 22px to get more space between stars */
    /*background:url(../images/stars1.png) no-repeat -22px 0;*/
    /*background:url(../images/stars1_50.png) no-repeat -22px 0;*/
    /*background:url(../images/stars1_100.png) no-repeat -22px 0;*/
    /*background:url(../images/stars2_40x20_t.png) no-repeat -22px 0;*/
    /*background:url(../images/stars3_42x18.png) no-repeat -22px 0;*/
    background:url(../images/stars3_42x18.png) no-repeat -22px 0;
    /*border: 1px solid blue;*/
}

/* See this url: "https://techbrij.com/css-selector-adjacent-child-sibling" to lear about these selectors*/
/* Change span immediately following the checked radio */
.rating input:checked + span {
    background-position:-22px 0;
    /*border: 1px solid green;*/
}

/* Reset all remaining stars back to default background. This supersedes the above due to its ordering. */
.rating input:checked + span ~ span {
    background-position:0 0;
    /*border: 1px solid yellow;*/
}

/* E: When hovering, "jshoverNext" class is added to nextAll stars, and "jshover" class is added to prevAll stars */
/* See L.1604 and search as "$('.rating input[type="radio"]').hover(function()" in g2.php */
.jshover {
    background-position:-22px 0 !important;
    /*border: 1px solid magenta;*/
}
.jshoverNext {
    background-position:0 0 !important;
    /*border: 1px solid cyan;*/
}