/* STYLESHEET */
.rating-widget {
    display: inline-block;
}
.yellow-star {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('../store/images/star.png') 0 0px no-repeat;
    background-size: 100%;
}

.gray-star {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('../store/images/star.png') 0 -16px no-repeat;
    background-size: 100%;
}

.half-star {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('../store/images/star.png') 0 -32px no-repeat;
    background-size: 100%;
}

.large-yellow-star {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('../store/images/star.png') 0 0px no-repeat;
    background-size: 100%;
}

.large-gray-star {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('../store/images/star.png') 0 -32px no-repeat;
    background-size: 100%;
}

.large-half-star {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('../store/images/star.png') 0 -64px no-repeat;
    background-size: 100%;
}

.rating-count {
    position: relative;
    font-size:90%;
    color: #77AA3C;
}

.rating {
    overflow: hidden;
    display: inline-block;
}

.rating-input {
    display: none;
    float: right;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0 0 0 -16px;
    opacity: 0;
}

.rating-star {
    position: relative;
    float: right;
    display: block;
    width: 32px;
    height: 32px;
    padding:0;
    background: url('../store/images/star.png') 0 -32px no-repeat;
    background-size: 100%;
}

.rating-star:hover,
.rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
    background-position: 0 0;
}

.rating-distribution-bar {
    width: 200px;
    border:solid;
    border-top-color: #EDEDED;
    border-top-style: ridge;
    border-top-width: 1.5px;
    border-right-color: #DDDDD7;
    border-right-style: solid;
    border-right-width: 1.5px;
    border-bottom-color: #D0D0D0;
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    border-left-color: #D0D0D0;
    border-left-style: solid;
    border-left-width: 1px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-color: #efefef;
    background: linear-gradient(#dddddd, #efefef);
}

.rating-distribution-gradient {
    /* can be treated like a fallback */
    height:24px;
    background-color:#eea400;
    background: linear-gradient(#f3d455, #eea400);
}