// Border Radius
@mixin border-radius($radius: 5px) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

// Drop shadows
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: $shadow;
     -moz-box-shadow: $shadow;
          box-shadow: $shadow;
}

@mixin no-box-shadow {
	box-shadow: 0 0 0;
  -moz-box-shadow: 0 0 0;
  -webkit-box-shadow: 0 0 0;
}


// Clearfix for clearing floats like a boss h5bp.com/q
@mixin clearfix {
  zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    zoom: 1;
    *display: inline;
  }
  &:after {
    clear: both;
  }
}
.clearfix { @include clearfix; }


// Gradients
@mixin horizontal-gradient ($startColor: #555, $endColor: #333) {
  background-color: $endColor;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror
  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
  background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
  background-image: linear-gradient(left, $startColor, $endColor); // Le standard
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1); // IE9 and down
}

@mixin vertical-gradient ($startColor: #555, $endColor: #333) {
  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: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down
}

// Transitions
@mixin transition($transition) {
  -webkit-transition: $transition;
     -moz-transition: $transition;
      -ms-transition: $transition;
       -o-transition: $transition;
          transition: $transition;
}

// Opacity
@mixin opacity($opacity: 100) {
  filter: alpha(opacity=$opacity);
  -khtml-opacity: $opacity / 100;
    -moz-opacity: $opacity / 100;
         opacity: $opacity / 100;
}

// Box sizing
@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
      -ms-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
}


// Background clipping (from bootstrap-sass)
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
@mixin background-clip($clip) {
  -webkit-background-clip: $clip;
     -moz-background-clip: $clip;
          background-clip: $clip;
}


// Font Stacks
@mixin shorthand-font($weight: normal, $size: 14px, $lineHeight: 20px) {
  font-size: $size;
  font-weight: $weight;
  line-height: $lineHeight;
}
@mixin sans-serif-font($weight: normal, $size: 14px, $lineHeight: 20px) {
  font-family: $sans-body;
  font-size: $size;
  font-weight: $weight;
  line-height: $lineHeight;
}
@mixin serif-font($weight: normal, $size: 14px, $lineHeight: 20px) {
  font-family: "Georgia", Times New Roman, Times, serif;
  font-size: $size;
  font-weight: $weight;
  line-height: $lineHeight;
}
@mixin monospace-font($weight: normal, $size: 12px, $lineHeight: 20px) {
  font-family: "Monaco", Courier New, monospace;
  font-size: $size;
  font-weight: $weight;
  line-height: $lineHeight;
}


// form fields

@mixin input-block-level() {
  display: block;
  width: 100%;
  min-height: 28px; // Make inputs at least the height of their button counterpart
  @include box-sizing(border-box); // Makes inputs behave like true block-level elements
}


// Horizontal dividers
// -------------------
// Dividers (basically an hr) within dropdowns and nav lists
@mixin nav-divider($top: #e5e5e5, $bottom: $white) {
  // IE7 needs a set width since we gave a height. Restricting just
  // to IE7 to keep the 1px left/right space in other browsers.
  // It is unclear where IE is getting the extra space that we need
  // to negative-margin away, but so it goes.
  *width: 100%;
  height: 1px;
  margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
  *margin: -5px 0 5px;
  overflow: hidden;
  background-color: $top;
  border-bottom: 1px solid $bottom;
}



// IE7 inline-block
// ----------------
@mixin ie7-inline-block() {
  *display: inline; /* IE7 inline-block hack */
  *zoom: 1;
}

// IE7 likes to collapse whitespace on either side of the inline-block elements.
// Ems because we're attempting to match the width of a space character. Left
// version is for form buttons, which typically come after other elements, and
// right version is for icons, which come before. Applying both is ok, but it will
// mean that space between those elements will be .6em (~2 space characters) in IE7,
// instead of the 1 space in other browsers.
@mixin ie7-restore-left-whitespace() {
  *margin-left: .3em;

  &:first-child {
    *margin-left: 0;
  }
}

@mixin ie7-restore-right-whitespace() {
  *margin-right: .3em;

  &:last-child {
    *margin-left: 0;
  }
}


@mixin at2x($image_name, $w: auto, $h: auto, $extention: '.png') {
  background-image: image_url($image_name + $extention);
  $x2img : $image_name + '@2x' + $extention;

  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
    background-image: image_url($x2img);
    background-size: $w $h;
  }  
}


// The Grid
@mixin gridCore($columnWidth, $gutterWidth) {
  .row {
    margin-left: $gutterWidth * -1;
    @include clearfix();
  }

  [class*="span"] {
    float: left;
    margin-left: $gutterWidth;
  }

  // Set the container width, and override it for fixed navbars in media queries
  .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { @include gridCoreSpan($gridColumns, $columnWidth, $gutterWidth); }

  @include gridCoreSpanX($gridColumns, $columnWidth, $gutterWidth);
  @include gridCoreOffsetX($gridColumns, $columnWidth, $gutterWidth);
}
@mixin gridCoreSpanX($cols, $columnWidth, $gutterWidth) {
  @for $i from 1 through $cols {
    .span#{$i} { @include gridCoreSpan($i, $columnWidth, $gutterWidth) };
  }
}
@mixin gridCoreSpan($columns, $columnWidth, $gutterWidth) {
  width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
}
@mixin gridCoreOffsetX($cols, $columnWidth, $gutterWidth) {
  @for $i from 1 through $cols {
    .offset#{$i} { @include gridCoreOffset($i, $columnWidth, $gutterWidth); };
  }
}
@mixin gridCoreOffset($columns, $columnWidth, $gutterWidth) {
  margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns + 1));
}

// responsive grid

@mixin gridFluid($columnWidth, $gutterWidth) {
  .row-fluid {
    width: 100%;
    @include clearfix();
    [class*="span"] {
      @include input-block-level();
      float: left;
      margin-left: $gutterWidth;
      *margin-left: $gutterWidth - (.5 / ($gridRowWidth/1px) * 100 * 1%);
    }
    [class*="span"]:first-child {
      margin-left: 0;
    }

    // generate .spanX
    @include gridFluidSpanX($gridColumns, $columnWidth, $gutterWidth);
  }
}
@mixin gridFluidSpanX($cols, $columnWidth, $gutterWidth) {
  @for $i from 1 through $cols {
    .span#{$i} { @include gridFluidSpan($i, $columnWidth, $gutterWidth) };
  }
}
@mixin gridFluidSpan($columns, $columnWidth, $gutterWidth) {
  width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
  *width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) - (.5 / ($gridRowWidth/1px) * 100 * 1%);
}

@mixin gridInput($columnWidth, $gutterWidth) {
  input, textarea, .uneditable-input {
    margin-left: 0; // override margin-left from core grid system
  }

  // generate .spanX
  @include gridInputSpanX($gridColumns, $columnWidth, $gutterWidth);
}
@mixin gridInputSpanX($cols, $columnWidth, $gutterWidth) {
  @for $i from 1 through $cols {
    input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include gridInputSpan($i, $columnWidth, $gutterWidth); }
  }
}
@mixin gridInputSpan($columns, $columnWidth, $gutterWidth) {
  width: (($columnWidth) * $columns) + ($gutterWidth * ($columns - 1)) - 10;
}

@mixin makeFluidColumn($columns, $columnWidth, $gutterWidth) {
  // This isn't perfect, but it's better than nothing.
  float: left;
  margin-left: $gutterWidth;
  @include gridFluidSpan($columns, $columnWidth, $gutterWidth);
}