// Some mixins from http://markdotto.com/bootstrap
// http://creativecommons.org/licenses/by/3.0/

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

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

.box-shadow(@shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1)) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  box-shadow: @shadow;
}

.transition(@transition: all linear .25s) {
  -webkit-transition: @transition;
  -moz-transition: @transition;
  -o-transition: @transition;
  -ms-transition: @transition;
  transition: @transition;
}

.transform(@transform) {
  -webkit-transform: @transform;
  -moz-transform: @transform;
  -o-transform: @transform;
  -ms-transform: @transform;
  transform: @transform;
}

.border-box {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

// Gradients
#gradient {
  .horizontal (@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); /* IE8+ */
    background-image: linear-gradient(to right, @startColor, @endColor); /* the standard */
  }
  .vertical (@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); /* IE8+ */
    background-image: linear-gradient(to bottom, @startColor, @endColor); /* the standard */
  }
  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
    background-image: linear-gradient(@deg, @startColor, @endColor); /* the standard */
  }
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    background-color: @endColor;
    background-repeat: no-repeat;
    background-image: -webkit-linear-gradient(top, @startColor 0%, @midColor @colorStop, @endColor 100%); /* Chrome10+,Safari5.1+ */
    background-image: linear-gradient(to bottom, @startColor 0%, @midColor @colorStop, @endColor 100%); /* the standard */
  }
  .radial(@posX:center, @posY:center, @shape:circle, @size:closest-side, @startColor:white, @endColor:black){
    background-image: -webkit-radial-gradient(@posX @posY, @shape @size, @startColor, @endColor);
    background-image: radial-gradient(@shape @size at @posX @posY, @startColor, @endColor);
  }
}




// Le grid system
// -------------------------
/*
 * Based on bootstrap, Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 */
#gridSystem {
  // Setup the mixins to be used
  .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
  }
  .offset(@gridColumnWidth, @gridGutterWidth, @columns) {
    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
  }
  .gridColumn(@gridGutterWidth) {
    float: left;
    margin-left: @gridGutterWidth;
  }
  // Take these values and mixins, and make 'em do their thang
  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
    // Row surrounds the columns
    .row {
      margin-left: @gridGutterWidth * -1;
      .clearfix();
    }
    // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
    [class*="span"] {
      #gridSystem > .gridColumn(@gridGutterWidth);
    }
    // Default columns
    .span1     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
    .span2     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
    .span3     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
    .span4     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
    .span5     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
    .span6     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
    .span7     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
    .span8     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
    .span9     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
    .span10    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
    .span11    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
    .span12,
    .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
    // Offset column options
    .offset1   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
    .offset2   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
    .offset3   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
    .offset4   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
    .offset5   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
    .offset6   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
    .offset7   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
    .offset8   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
    .offset9   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
    .offset10  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
    .offset11  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
  }
}

.span(@columns) {
    float: left;
    margin-left: @gridGutterWidth;
    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}

.offset(@columns) {
    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}

.row {
  margin-left: @gridGutterWidth * -1;
  .clearfix();
}

.button-hover-box-shadow(@color: #ffffff) {
    @shadow:  @shadowPartBottom,
              @shadowPartBottomInset,
              inset 0px 12px 24px 2px saturate(@color, 10%);
    .box-shadow(@shadow);
}

.button-focus-box-shadow(@color: #ffffff) {
    @shadow:  @shadowPartBottom,
              @shadowPartBottomInset,
              0 0 0 2px fade(@color, 40%);
    .box-shadow(@shadow);
}

.hidden {
  position: absolute;
  left: -999em;
}

.form-field-error {
  border-color: rgb(175,50,50);
  @shadow: 0 2px 1px rgba(0,0,0,0.1) inset, 0 0 8px 0 rgba(175,50,50,.6);
  .box-shadow(@shadow);
}

// Add chevron character after text (with space)
.trailing-arrow() {
    &:after {
        content: " »"; /* nbsp raquo */
    }
}
