// From the Twitter bootstrap
#gradient(@startColor, @endColor) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(top, @startColor, @endColor); // The standard
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
}

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

.inline-block {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.wrap {
    width: @fixedWidth;
    margin: 0 auto;
}

.center-align {
    text-align: center;
}

.right-float {
    float: right;
}

.button {
    line-height: 20px;
    .inline-block;
    #gradient(@mediumBlue, @darkBlue);
    .border-radius(5px);
    padding: 10px;
    color: @white;
    text-shadow: @darkSheer 0px 1px 0;
    border: 1px solid @darkBlue;

    &:hover {
        color: @white;
        text-decoration: none;
        #gradient(@darkBlue, @darkBlue);
    }

    &.large {
        font-size: 1.5em;
    }

}

button.button {
    cursor: pointer;
    outline: 0;
}

.pill {
    .inline-block;
    background: @lighterGrey;
    border: 1px solid lighten(@mediumGrey, 10%);
    .border-radius(3px);
    color: @darkGrey;
    padding: 8px 20px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 1px 0 @white;
    .box-shadow(inset 0 0 3px 0px @white);

    &:hover {
        color: @white;
        text-decoration: none;
        background: @mediumBlue;
        border-color: @mediumBlue;
        text-shadow: 0 1px 0 @darkBlue;
        .box-shadow(inset 0 0 2px 0 @lightBlue);
    }
}

.hidden {
    display: none;
}