reviews.less

@import 'lib';

.stars {
    display: inline-block;
    vertical-align: middle;
    width: 63px;
    height: 12px;
    background: url(../../img/impala/stars.png) no-repeat left top;
    text-indent: -9999px;
    margin-right: 4px;
    &.stars-4 { background-position: -13px 0; }
    &.stars-3 { background-position: -26px 0; }
    &.stars-2 { background-position: -39px 0; }
    &.stars-1 { background-position: -52px 0; }
    &.stars-0 { background-position: -65px 0; }
    &.large {
        display: block;
        background: url(../../img/impala/stars-16.png) no-repeat left top;
        width: 89px;
        height: 16px;
        &.stars-4 { background-position: -18px 0; }
        &.stars-3 { background-position: -36px 0; }
        &.stars-2 { background-position: -54px 0; }
        &.stars-1 { background-position: -70px 0; }
    }
}

.html-rtl .stars {
    text-indent: 9999px;
    margin-right: 0;
    margin-left: 4px;
}


/* grouped ratings style */

.grouped_ratings {
    font-family: @sans-stack;
    color: #666;
    li {
        margin: 0;
        padding: 0;
        border: 0;
    }
    .rating_bar {
        border-left: 1px solid #999;
        height: 20px;
        float: left;
        width: 0px;
        overflow: visible;
        width: 96px;
        span.bar {
            display:block;
            height: 100%;
            position: relative;
            background: #ddd;
            margin: .4em .5em 0 0;
            height: 10px;
        }
    }
    .num_ratings {
        width: 1px;
        position: absolute;
        right: -5px;
        top: -2px;
        line-height: 12px;
        font-size: 10px;
    }
    .stars {
        float: left;
        margin: 4px 8px 0 0 ;
    }
}

.html-rtl .grouped_ratings {
    .rating_bar {
        border-left: 0;
        border-right: 1px solid black;
        float: right;
        span.bar {
            float: right;
            margin: .4em 0 0 .5em;
        }
        span.num_ratings {
            right: auto;
            left: -4px;
        }
    }
}

#review-add-box {
    width: 650px;
}
#review-box {
    position: relative;
    form {
        width: 50%;
        height: 212px;
        float: left;
        padding: 0 10px 0 0;
        margin-right: 1em;
    }
    textarea {
        height: 100px;
    }
    div {
        padding-left: 50%;
        p {
            padding-left: 1em;
        }
    }
    .ratingwidget {
        display: inline-block;
        margin: 0 0 2px 8px;
    }
}

.ratingwidget {
    display: block;
    float: none;
    width: 65px;
    margin-bottom: 1em;
    input {
        display: none;
    }
    label {
        text-indent: -5000px;
        display: block;
        float: left;
        width: 13px;
        cursor: pointer;
    }
}