/*
* Author: Larry Botha
* Website: themousepotatowebsite.co.za
* Post: Reusable CSS: buttons
*
*/

* { margin: 0; padding: 0;}

.btn {
  position: relative;
  display: inline-block;
  
  background-color: #f3f3f3;
  background-origin: border-box;
  
  background-image: -webkit-linear-gradient(
                      left, hsla(0,0%,0%,.05) 0%,
                      hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,.05) 100%
                    );
  background-image: -moz-linear-gradient(
                      left, hsla(0,0%,0%,.05) 0%,
                      hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,.05) 100%
                    );
  background-image: -o-linear-gradient(
                      left, hsla(0,0%,0%,.05) 0%,
                      hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,.05) 100%
                    );
  background-image: -ms-linear-gradient(
                      left, hsla(0,0%,0%,.05) 0%,
                      hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,.05) 100%
                    );
  background-image: linear-gradient(
                      left, hsla(0,0%,0%,.05) 0%,
                      hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,.05) 100%
                    );
  
  font: bold 12px Helvetica, Arial, sans-serif;
  color: #666;
  text-decoration: none;
  text-shadow: 0 1px 0 hsla(0, 0%, 100%, 1);
  
  margin: 1em .8em 1em 0;
  padding: .5em 1em;

  border-bottom: solid 1px #f3f3f3;
  border-bottom: solid 1px hsla(0,0%,0%, .25);
  border-radius: 4px;
  
  outline: none;
  
  -webkit-transition: color 150ms ease-in;
  -moz-transition: color 150ms ease-in;
  -o-transition: color 150ms ease-in;
  -ms-transition: color 150ms ease-in;
  transition: color 150ms ease-in;
}

.btn-primary,
.btn-success,
.btn-warning,
.btn-info {
  color: #F1F1F1;
  text-shadow: 0 -1px 0 hsla(0, 0%, 0%, .3);
}

.btn-large {
  font-size: 16px;
  padding: 10px 15px;
}

.btn-left {
  background-image: -webkit-linear-gradient(
                      left, hsla(0,0%,0%,.06) 0%,
                      hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,0) 100%
                    );
  background-image: -moz-linear-gradient(
                      left, hsla(0,0%,0%,.06) 0%,
                      hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,0) 100%
                    );
  background-image: -o-linear-gradient(
                      left, hsla(0,0%,0%,.06) 0%,
                      hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,0) 100%
                    );
  background-image: -ms-linear-gradient(
                      left, hsla(0,0%,0%,.06) 0%,
                      hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,0) 100%
                    );
  background-image: linear-gradient(
                      left, hsla(0,0%,0%,.06) 0%,
                      hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,0) 100%
                    );
  
  margin-right: 0;
  border-left: solid 1px #f3f3f3;
  border-left: solid 1px hsla(0,0%,0%, .03);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-middle {
  background-image: -webkit-linear-gradient(
                      left, hsla(0,0%,0%,0) 0%,
                      hsla(0,0%,0%,0) 100%
                    );
  background-image: -moz-linear-gradient(
                      left, hsla(0,0%,0%,0) 0%,
                      hsla(0,0%,0%,0) 100%
                    );
  background-image: -o-linear-gradient(
                      left, hsla(0,0%,0%,0) 0%,
                      hsla(0,0%,0%,0) 100%
                    );
  background-image: -ms-linear-gradient(
                      left, hsla(0,0%,0%,0) 0%,
                      hsla(0,0%,0%,0) 100%
                    );
  background-image: linear-gradient(
                      left, hsla(0,0%,0%,0) 0%,
                      hsla(0,0%,0%,0) 100%
                    );
  
  margin-left: 0;
  margin-right: 0;
  border-left: solid 1px #f3f3f3;
  border-right: solid 1px #f3f3f3;
  border-left: solid 1px hsla(0,0%,0%, .03);
  border-right: solid 1px hsla(0,0%,0%, .03);
  border-radius: 0;
}
.btn-right {
  background-image: -webkit-linear-gradient(
                      left, hsla(0,0%,0%,0) 0%,
                      hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,.06) 100%
                    );
  background-image: -moz-linear-gradient(
                      left, hsla(0,0%,0%,0) 0%,
                      hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,.06) 100%
                    );
  background-image: -o-linear-gradient(
                      left, hsla(0,0%,0%,0) 0%,
                      hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,.06) 100%
                    );
  background-image: -ms-linear-gradient(
                      left, hsla(0,0%,0%,0) 0%,
                      hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,.06) 100%
                    );
  background-image: linear-gradient(
                      left, hsla(0,0%,0%,0) 0%,
                      hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,.06) 100%
                    );
  
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-right-alone {
  background-image: -webkit-linear-gradient(
                      left, hsla(0,0%,100%,1) 0%,
                      hsla(0,0%,100%,0) 50%,
                      hsla(0,0%,0%,.06) 100%
                    ),
                    -webkit-linear-gradient(
                      bottom, hsla(0,0%,0%,.08) 1px,
                      hsla(0,0%,0%,0) 1px
                    );
  background-image: -moz-linear-gradient(
                      left, hsla(0,0%,100%,1) 0%,
                      hsla(0,0%,100%,0) 50%,
                      hsla(0,0%,0%,.06) 100%
                    ),
                    -moz-linear-gradient(
                      bottom, hsla(0,0%,0%,.08) 1px,
                      hsla(0,0%,0%,0) 1px
                    );
  background-image: -o-linear-gradient(
                      left, hsla(0,0%,100%,1) 0%,
                      hsla(0,0%,100%,0) 50%,
                      hsla(0,0%,0%,.06) 100%
                    ),
                    -o-linear-gradient(
                      bottom, hsla(0,0%,0%,.08) 1px,
                      hsla(0,0%,0%,0) 1px
                    );
  background-image: -ms-linear-gradient(
                      left, hsla(0,0%,100%,1) 0%,
                      hsla(0,0%,100%,0) 50%,
                      hsla(0,0%,0%,.06) 100%
                    ),
                    -ms-linear-gradient(
                      bottom, hsla(0,0%,0%,.08) 1px,
                      hsla(0,0%,0%,0) 1px
                    );
  background-image: linear-gradient(
                      left, hsla(0,0%,100%,1) 0%,
                      hsla(0,0%,100%,0) 50%,
                      hsla(0,0%,0%,.06) 100%
                    ),
                    linear-gradient(
                      bottom, hsla(0,0%,0%,.08) 1px,
                      hsla(0,0%,0%,0) 1px
                    );
  padding-left: 2em;
  border-right: none;
  border-bottom: none;
  border-color: hsla(0,0%,0%,.1);
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.btn-left-alone {
  background-image: -webkit-linear-gradient(
                      right, hsla(0,0%,100%,1) 0%,
                      hsla(0,0%,100%,0) 50%,
                      hsla(0,0%,0%,.06) 100%
                    ),
                    -webkit-linear-gradient(
                      bottom, hsla(0,0%,0%,.08) 1px,
                      hsla(0,0%,0%,0) 1px
                    );
  background-image: -moz-linear-gradient(
                      right, hsla(0,0%,100%,1) 0%,
                      hsla(0,0%,100%,0) 50%,
                      hsla(0,0%,0%,.06) 100%
                    ),
                    -moz-linear-gradient(
                      bottom, hsla(0,0%,0%,.08) 1px,
                      hsla(0,0%,0%,0) 1px
                    );
  background-image: -o-linear-gradient(
                      right, hsla(0,0%,100%,1) 0%,
                      hsla(0,0%,100%,0) 50%,
                      hsla(0,0%,0%,.06) 100%
                    ),
                    -o-linear-gradient(
                      bottom, hsla(0,0%,0%,.08) 1px,
                      hsla(0,0%,0%,0) 1px
                    );
  background-image: -ms-linear-gradient(
                      right, hsla(0,0%,100%,1) 0%,
                      hsla(0,0%,100%,0) 50%,
                      hsla(0,0%,0%,.06) 100%
                    ),
                    -ms-linear-gradient(
                      bottom, hsla(0,0%,0%,.08) 1px,
                      hsla(0,0%,0%,0) 1px
                    );
  background-image: linear-gradient(
                      right, hsla(0,0%,100%,1) 0%,
                      hsla(0,0%,100%,0) 50%,
                      hsla(0,0%,0%,.06) 100%
                    ),
                    linear-gradient(
                      bottom, hsla(0,0%,0%,.08) 1px,
                      hsla(0,0%,0%,0) 1px
                    );
  padding-right: 2em;
  border-left: none;
  border-bottom: none;
  border-color: hsla(0,0%,0%,.1);
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.btn-left, .btn-middle, .btn-right {
  -moz-box-shadow: 0 1px 1px hsla(0,0%,0%,.3);
  box-shadow: 0 1px 1px hsla(0,0%,0%,.3);
  border-bottom: none;
}

.btn-primary { background-color: #0064CD;}
.btn-success { background-color: #57A957;}
.btn-warning { background-color: #C43C35;}
.btn-info { background-color: #339BB9;}

.btn:hover { color: #333;}

.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-info:hover { color: #F9F9F9;}

.btn:active, input[type="submit"]:active, button:active {
  color: #000;
  -webkit-transition: color 0s;
  -moz-transition: color 0s;
  -o-transition: color 0s;
  -ms-transition: color 0s;
  transition: color 0s;
}

.btn-primary:active,
.btn-success:active,
.btn-warning:active,
.btn-info:active { color: #FFF;}

.btn:before, .btn:after {
  position: absolute;
  content: "";
  width: 1%;
  top: 1.5em;
  -moz-box-shadow: 0 0 .4em .9em hsla(0, 0%, 0%, .5);
  box-shadow: 0 0 .4em .9em hsla(0, 0%, 0%, .5);
  z-index: -100;
}

.btn:before {
  left: 1.5em;
  -webkit-transform: skewY(-12.5deg);
  -moz-transform: skewY(-12.5deg);
  -o-transform: skewY(-12.5deg);
  -ms-transform: skewY(-12.5deg);
  transform: skewY(-12.5deg);
}

.btn:after{
  right: 1.5em;
  -webkit-transform: skewY(12.5deg);
  -moz-transform: skewY(12.5deg);
  -otransform: skewY(12.5deg);
  -ms-transform: skewY(12.5deg);
  transform: skewY(12.5deg);
}

.btn-large:before,
.btn-large:after { top: 1.65em;}

.btn-middle:before, .btn-middle:after,
.btn-left:after, .btn-right:before,
.btn-right-alone:before, .btn-left-alone:after {
  -moz-box-shadow: none;
  box-shadow: none;
}