/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php

.button { margin: 0 10px 25px; }

.button {
  margin: 0 0 5px;
  padding: 0 12px;
  height: 28px;
  line-height: 28px;
  font-size: 11px;
  font-weight: bold;
  color: #555555;
  text-decoration: none;
  text-shadow: 0 1px white;
  background: #dfdfdf;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #cecece #bababa #a8a8a8;
  border-radius: 3px 3px 2px 2px;
  outline: 0;
  @include inline-block;
  @include box-sizing(content-box);
  @include linear-gradient(top, #f1f1f1, #dfdfdf 70%, #dadada);
  @include box-shadow(inset 0 1px #fdfdfd,
                      inset 0 0 0 1px #eaeaea,
                      0 1px #a8a8a8,
                      0 3px #bbb,
                      0 4px #a8a8a8,
                      0 5px 2px rgba(black, .25));
  i {
    color: #555555;
    text-shadow: 0 1px white;
  }

  &:hover, &:active {
    background: #dfdfdf;
    border-top-color: #c9c9c9;
  }

  &:active, &.green:active, &.blue:active, &.yellow:active, &.red:active, &.purple:active, &.grey:active, &.black:active {
    vertical-align: -5px;
    margin-bottom: 0;
    padding: 1px 13px 0;
    border-width: 0;
    border-radius: 3px;
    @include box-shadow(inset 0 0 3px rgba(black, .3), inset 0 1px 1px rgba(black, .4), 0 1px white);
  }

  &.green {
    color: #465f25;
    text-shadow: 0 1px #d9f3b5;
    background: #94d362;
    border-color: #91ce5e #7ab04b #5e903f;
    @include linear-gradient(top, #c0eb85, #94d362 70%, #8ed258);
    @include box-shadow(inset 0 1px #d9f3b5,
                        inset 0 0 0 1px #b1e095,
                        0 1px #5e903f,
                        0 3px #6da445,
                        0 4px #5e903f,
                        0 5px 2px rgba(black, .4));

    &:hover, &:active {
      background: #94d362;
      border-top-color: #82bd53;
    }
    i {
      color: #465f25;
      text-shadow: 0 1px #d9f3b5;
    }
  }

  &.blue {
    color: #236277;
    text-shadow: 0 1px #c2ecf9;
    background: #61cdf3;
    border-color: #6fbad1 #3fa3c0 #3583ab;
    @include linear-gradient(top, #9be5fa, #61cdf3 70%, #5fbde8);
    @include box-shadow(inset 0 1px #c5f0fd,
                        inset 0 0 0 1px #8ad1eb,
                        0 1px #3583ab,
                        0 3px #3f9db8,
                        0 4px #3583ab,
                        0 5px 2px rgba(black, .4));

    &:hover, &:active {
      background: #61cdf3;
      border-top-color: #3eaac9;
    }
  }

  &.yellow {
    color: #7e4f27;
    text-shadow: 0 1px #f2e294;
    background: #f6ba49;
    border-color: #efb443 #d9a238 #a57825;
    @include linear-gradient(top, #ffdd67, #f6ba49 70%, #f4b03e);
    @include box-shadow(inset 0 1px #ffeca6,
                        inset 0 0 0 1px #e5c96d,
                        0 1px #a57825,
                        0 3px #c08a28,
                        0 4px #a57825,
                        0 5px 2px rgba(black, .4));

    &:hover, &:active {
      background: #f6ba49;
      border-top-color: #e5ab3d;
    }
    i {
      color: #7e4f27;
      text-shadow: 0 1px #f2e294;
    }
  }

  &.red {
    color: #702526;
    text-shadow: 0 1px #ea8f99;
    background: #e46565;
    border-color: #e1696e #c85252 #a03a38;
    @include linear-gradient(top, #eb9093, #e46565 70%, #e25755);
    @include box-shadow(inset 0 1px #dcaaaa,
                        inset 0 0 0 1px #df777a,
                        0 1px #a03a38,
                        0 3px #be4b49,
                        0 4px #a03a38,
                        0 5px 2px rgba(black, .4));

    &:hover, &:active {
      background: #e46565;
      border-top-color: #d0585a;
    }
    i {
      color: #702526;
      text-shadow: 0 1px #ea8f99;

    }
  }

  &.purple {
    color: #714667;
    text-shadow: 0 1px #f2c5e6;
    background: #e393d3;
    border-color: #e391d0 #c27ab3 #8a517d;
    @include linear-gradient(top, #f1bee3, #e393d3 70%, #df8dce);
    @include box-shadow(inset 0 1px #f5d6ee,
                        inset 0 0 0 1px #dcaacf,
                        0 1px #8a517d,
                        0 3px #a7619a,
                        0 4px #8a517d,
                        0 5px 2px rgba(black, .4));

    &:hover, &:active {
      background: #e393d3;
      border-top-color: #c87eb8;
    }
    i {
      color: #714667;
      text-shadow: 0 1px #f2c5e6;      
    }
  }

  &.grey {
    color: #41505b;
    text-shadow: 0 1px #c2d0db;
    background: #90aabd;
    border-color: #909eab #768791 #50606e;
    @include linear-gradient(top, #bccbd7, #90aabd 70%, #83a0b4);
    @include box-shadow(inset 0 1px #d0dae2,
                        inset 0 0 0 1px #99b5ce,
                        0 1px #50606e,
                        0 3px #627786,
                        0 4px #50606e,
                        0 5px 2px rgba(black, .4));

    &:hover, &:active {
      background: #90aabd;
      border-top-color: #8495a0;
    }
  }

  &.black {
    color: #f1f1f1;
    text-shadow: 0 1px #111;
    background: #4f4f4f;
    border-color: #505050 #414141 #2c2c2c;
    @include linear-gradient(top, #696969, #4f4f4f 70%, #3c3c3c);
    @include box-shadow(inset 0 1px #828282,
                        inset 0 0 0 1px #555,
                        0 1px #2c2c2c,
                        0 3px #444,
                        0 4px #2c2c2c,
                        0 5px 2px rgba(black, .4));

    &:hover, &:active {
      background: #4f4f4f;
      border-top-color: #494949;
    }
  }
}

.lt-ie9 .button {
  border-width: 1px;
  padding: 0 12px;
}

@mixin button-block ($bg : #DA3276, $color : #fff, $round : 0) {
  @include inline-block;
  margin: 0 0 5px;
  padding: 0 18px;
  line-height: 36px;
  font-size: 16px;
  color: $color;
  text-decoration: none;
  background: $bg;
  border:0;
  border-radius: $round;
  outline: 0;
  &:hover {
    opacity:.7;
  }
}
*/