stylesheet.less

body {
    padding-top: 50px;
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

.rating {
    unicode-bidi:bidi-override;
    direction:rtl;
    font-size:30px;
    span.star{
        font-family: FontAwesome;
        font-weight:normal;
        font-style:normal;
        display:inline-block;
        &:hover{cursor:pointer;}
        &:before{
            content:"\f006";
            padding-right:5px;
            color:#999999;
        }
        &:hover:before,&:hover~span.star:before{
            content:"\f005";
            color:#e3cf7a;
        }
    }
    .labels {
        line-height: 0;
    }
    label { 
        visibility: hidden; 
        color: #999999;
        font-size: 12pt;
        font-weight: normal;
        direction: ltr;
        margin: 0 15px 0 15px;
    }
    &:hover label { 
        visibility: visible; 
    }
}

@media (max-width: 480px) {
    .rating {
        margin: 0 -5px;
        span.star {
            margin: -5px;
            font-size: 24px;
        }
    }
}

.annotation_progress {
    float: right;
    width: 150px;
    margin: 20px 14px 0;
    &:hover a { display: inherit; }
    a {
        display: none;
        color: #aaa;
        float: right;
        text-decoration: none;
        margin: 0 3px 0;
        &:hover { text-decoration: underline; }
    }
}