@import url( 'http://fonts.googleapis.com/css?family=Lato:300,400,700,800,900');

:root {
    --rating-padding: 0.5rem 1rem;
    --rating-margin: 1.5rem auto;

    --rating-border-color: #CCC;
    --rating-border-radius: 0.33rem;
    --rating-box-shadow: 0px 0.5rem 0.75rem rgba( 0, 0, 0, 0.15 );

    --rating-accent-color: rgba( 255, 0, 0, 0.6 );
    --rating-accent-text-color: #FFF;

    --rating-link-color: rgba( 255, 0, 0, 0.6 );
    --rating-link-hover-color: rgba( 255, 0, 0, 0.8 );

    --rating-detail-font-size: 0.8rem;
    --rating-detail-font-weight: 400;
}

#reviews {
    font-family: Lato, Helvetica, Arial, sans-serif;
    font-weight: 300;
}

#reviews div.public-review {
    display: block;
    position: relative;
    overflow: hidden;

    margin: var( --rating-margin );
    padding: var( --rating-padding );
    box-sizing: border-box;

    border: 1px solid var( --rating-border-color );
    border-top: 0.33rem solid var( --rating-accent-color );

    -webkit-box-shadow: var( --rating-box-shadow );
    -moz-box-shadow: var( --rating-box-shadow );
    box-shadow: var( --rating-box-shadow );
}

#reviews div.public-review div.details {
    display: block;

    padding: 0.5rem 1.5rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: 1rem;

    border-bottom: 1px solid var( --rating-border-color );

    font-size: var( --rating-detail-font-size );
    font-weight: var( --rating-detail-font-weight );

    text-transform: uppercase;
    letter-spacing: 1px;

    color: rgba( 0, 0, 0, 0.66 );
}

#reviews div.public-review div.details span.dtreviewed {
    font-weight: 800;
}

#reviews #reviews-link {
    display: block;

    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;

    text-align: center;
}

#reviews a {
    color: var( --rating-link-color );
    text-decoration: none;
}

#reviews a:hover {
    color: var( --rating-link-hover-color );
    text-decoration: underline;
}