review/static/style.less @ cd17a814bf17

@font-normal: "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
@font-mono: Menlo, Monaco, Consolas, "Courier New", monospace;

@c-cream: #edecc7;
@c-green: #648239;
@c-orange: #bf4c18;
@c-green-light: #9AF040;
@c-orange-light: #FF6F24;

@c-dark: #292620;
@c-light: #fcfcfc;

@content-width: 800px;

.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.box-shadow(@horiz, @vert, @blur, @color) {
  box-shadow: @horiz @vert @blur @color;
  -moz-box-shadow: @horiz @vert @blur @color;
  -webkit-box-shadow: @horiz @vert @blur @color;
}
.multi-border(@top, @sides, @bottom) {
    border-top: 1px solid @top;
    border-right: 1px solid @sides;
    border-left: 1px solid @sides;
    border-bottom: 1px solid @bottom;
}
.button(@color: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) {
    font: bold @fsize @font-normal;
    color: @color - #ccc;
    line-height: @lheight;
    display: inline-block;
    text-decoration: none;
    padding: 1px;
    background-color: @color + #0c0c0c;
    .box-shadow(0px, 1px, 2px, rgba(0,0,0,0.5));
    .border-radius(4px);
    .multi-border((@color - #333), (@color - #444), (@color - #555));

    span {
        background-color: @color;
        display: inline-block;
        padding: 0 @fsize/2;
        text-shadow: 0px 1px 1px (@color + #333);
        .border-radius(3px);
    }
    &:hover {
        .multi-border(desaturate(darken(@color, 10%), 10%), desaturate(darken(@color, 20%), 20%), desaturate(darken(@color, 30%), 30%));
        background-color: @color + #111;
        span {
            background-color: @color + #111;
        }
    }
    &:active {
        margin-top: 1px;
        margin-bottom: -1px;
    }
}

.group:after {
    clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0;
}
* html .group, *:first-child + html .group {
    zoom:1
}

html, body {
    background-color: @c-cream;
}
body {
    color: @c-dark;
    font-family: @font-normal;

    .hr {
        height: 0;
        width: 100%;
        border-top: 1px solid @c-light;
    }
    .wrap {
        width: @content-width;
        margin: 0 auto;
    }
    .hr.one {
        border-top: none;
        height: 3px;
        background-color: lighten(@c-green, 35%);
        border-bottom: 1px solid @c-green;
    }
    .hr.two {
        border-top: none;
        border-bottom: 1px solid lighten(@c-green, 50%);
    }
    .header {
        background-color: @c-green;
        border-bottom: 1px solid darken(@c-green, 10%);

        h1 {
            color: @c-dark;
            text-shadow: 0px 1px 1px lighten(@c-green, 50%);
            float: right;
            line-height: 60px;
            margin: 0 10px 0 0;

            a {
                color: black;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .remotes {
            .remote {
                padding-top: 6px;
            }
            form {
                display: inline;
                margin-bottom: 0;

                a {
                    .button(@c-cream, #000, 12px, 1.45);
                }
            }
        }
    }
    .content {
        border-top: 1px solid lighten(@c-cream, 10%);

        .wrap {
            border: 1px solid darken(@c-cream, 20%);
            .border-radius(7px);
            @content-padding-horiz: 20px;

            margin-top: 20px;
            padding: 21px @content-padding-horiz;
            width: @content-width - (@content-padding-horiz * 2);
            background-color: #fdfdfd;
        }
    }
    .footer {
        text-align: center;
        margin-top: 14px;

        a {
            color: @c-dark;
            font-weight: bold;
            text-decoration: none;

            &:hover {
                color: @c-orange;
            }
        }
    }
}