/* something like:
 * .linear-gradient(top, white, 0%, #eeeeee, 70%, #cccccc, 90%)
 */
.linear-gradient (@start, @start-color, @start-pct, @mid-color, @mid-pct, @end-color, @end-pct, @ms-start-color, @ms-end-color) {
  background-color: @start-color;
  filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr=%d, endColorStr=%d)", @start-color, @end-color);
  background: @start-color         linear-gradient(@start, @start-color @start-pct, @mid-color @mid-pct, @end-color @end-pct);
  background: @start-color    -moz-linear-gradient(@start, @start-color @start-pct, @mid-color @mid-pct, @end-color @end-pct);
  background: @start-color -webkit-linear-gradient(@start, @start-color @start-pct, @mid-color @mid-pct, @end-color @end-pct);
}

.linear-gradient (@start, @start-color, @start-pct, @end-color, @end-pct) {
  background-color: @start-color;
  filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr=%d, endColorStr=%d)", @start-color, @end-color);
  background: @start-color         linear-gradient(@start, @start-color @start-pct, @end-color @end-pct);
  background: @start-color    -moz-linear-gradient(@start, @start-color @start-pct, @end-color @end-pct);
  background: @start-color -webkit-linear-gradient(@start, @start-color @start-pct, @end-color @end-pct);
}

.linear-gradient (@start, @start-color, @end-color) {
  background-color: @start-color;
  filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr=%d, endColorStr=%d)", @start-color, @end-color);
  background: @start-color         linear-gradient(@start, @start-color, @end-color);
  background: @start-color    -moz-linear-gradient(@start, @start-color, @end-color);
  background: @start-color -webkit-linear-gradient(@start, @start-color, @end-color);
}

.alpha-gradient(@rgba1, @rgba2, @ms-start-color, @ms-end-color) {
  /* webkit example */
  background-image: -webkit-gradient(linear, left bottom, left top, from(@rgba1), to(@rgba2));

  /* mozilla example - FF3.6+ */
  background-image: -moz-linear-gradient(center bottom, @rgba1, @rgba2);

  /* IE */
  filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr=%d, endColorStr=%d)", @ms-start-color, @ms-end-color);

  /* IE8 uses -ms-filter for whatever reason...
   * My tests show that IE8 uses filter so ... whatever */
  -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr=%d, endColorStr=%d)", @ms-start-color, @ms-end-color);

  /* IE 10 */
//  background-image: -ms-linear-gradient(top, @start, @end);

  /* w3c */
  background-image: linear-gradient(top, @rgba1, @rgba2);
}

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

.box-shadow (@offset-x, @offset-y, @radius, @spread, @color) {
          box-shadow: @offset-x @offset-y @radius @spread @color;
     -moz-box-shadow: @offset-x @offset-y @radius @spread @color;
  -webkit-box-shadow: @offset-x @offset-y @radius @spread @color;
}

.inset-box-shadow (@offset-x, @offset-y, @radius, @spread, @color) {
          box-shadow: inset @offset-x @offset-y @radius @spread @color;
     -moz-box-shadow: inset @offset-x @offset-y @radius @spread @color;
  -webkit-box-shadow: inset @offset-x @offset-y @radius @spread @color;
}

.box-shadow (@none) {
          box-shadow: @none;
     -moz-box-shadow: @none;
  -webkit-box-shadow: @none;
}
.border-radius (@radius) {
          border-radius: @radius;
     -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
.border-radius (@top, @right, @bottom, @left) {
          border-radius: @top @right @bottom @left;
     -moz-border-radius: @top @right @bottom @left;
  -webkit-border-radius: @top @right @bottom @left;
}
.opacity(@op:100) {
    filter:alpha(opacity=@op);
    -moz-opacity:@op/100;
    -khtml-opacity:@op/100;
    opacity:@op/100;
}
.user-select(@val) {
  -webkit-touch-callout: @val;
    -webkit-user-select: @val;
     -khtml-user-select: @val;
       -moz-user-select: @val;
        -ms-user-select: @val;
         -o-user-select: @val;
            user-select: @val;
}

@section-margin: 8px;
@section-padding: 8px;
@body-padding: 0px;