
/*
 * Buttons
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
button, 
input[type="submit"], 
input[type="button"], 
input[type="reset"],
.button{
    background-color: #FFFFFF;
    border: 1px solid #EFEFEF;
    color: #636363;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    line-height: 100%;
    padding: 0.654em 1.462em;
    text-decoration: none;
    text-align: center;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
         -o-border-radius: 2px;
            border-radius: 2px;
    vertical-align: top;
    margin: 3px 1.5px;
    max-width: 100%;
    white-space: pre-wrap;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
form button, 
form input[type="submit"], 
form input[type="button"], 
form input[type="reset"],
form .button{
    margin: 0;
}
button:hover, 
input[type="submit"]:hover, 
input[type="button"]:hover, 
input[type="reset"]:hover,
.button:hover{
    background-color: #F1F2F2;
    border-color: #DDDDDD;
    color: #636363;
    text-decoration: none;
}
button:focus,
button:active,
button.active,
input[type="submit"]:active,
input[type="submit"].active,
input[type="submit"]:focus,
input[type="button"]:active,
input[type="button"].active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"].active,
input[type="reset"]:focus,
a.button:active,
a.button.active,
a.button:focus,
.button:active,
.button.active,
.button:focus{
    background-color: #F1F2F2;
    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
       -moz-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
         -o-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
            box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
    color: #636363;
    text-decoration: none;
    outline: none;
}
button[disabled], 
input[type="submit"][disabled], 
input[type="button"][disabled], 
input[type="reset"][disabled], 
a.button[disabled], 
.button[disabled],
a.button.disabled, 
.button.disabled{
    background-color: #F1F2F2;
    filter: Alpha(Opacity=50);
    opacity: 0.5;
    cursor: not-allowed;
}
button[disabled]:active, 
input[type="submit"][disabled]:active, 
input[type="button"][disabled]:active, 
input[type="reset"][disabled]:active, 
a.button[disabled]:active, 
.button[disabled]:active,
a.button.disabled:active, 
.button.disabled:active{
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
}
.button.rounded{
    -webkit-border-radius: 1.231em;
       -moz-border-radius: 1.231em;
         -o-border-radius: 1.231em;
            border-radius: 1.231em;
}
.button.small{
    font-size: 0.769em;
    padding: 0.6em 1.6em;
}
.button.small.rounded{
    -webkit-border-radius: 1.2em;
       -moz-border-radius: 1.2em;
         -o-border-radius: 1.2em;
            border-radius: 1.2em;
}
.button.medium{
    font-size: 1.077em;
    padding: 0.857em 1.714em;
}
.button.medium.rounded{
    -webkit-border-radius: 1.429em;
       -moz-border-radius: 1.429em;
         -o-border-radius: 1.429em;
            border-radius: 1.429em;
}
.button.large{
    font-size: 1.231em;
    padding: 0.938em 1.875em;
}
.button.large.rounded{
    -webkit-border-radius: 1.5em;
       -moz-border-radius: 1.5em;
         -o-border-radius: 1.5em;
            border-radius: 1.5em;
}

/* Primary button */
.button.primary{
    background-color: #3498DB;
    border-color: #3498DB;
    color: #FFFFFF;
}
.button.primary:hover,
.button.primary:focus,
.button.primary:active,
.button.primary.disabled,
.button.primary[disabled]{
    background-color: #3486BC;
    border-color: #3486BC;
    color: #FFFFFF;
}

/* Black button */
.button.black{
    background-color: #686868;
    border-color: #686868;
    color: #FFFFFF;
}
.button.black:hover,
.button.black:focus,
.button.black:active,
.button.black.disabled,
.button.black[disabled]{
    background-color: #636363;
    border-color: #636363;
    color: #FFFFFF;
}

/* blue button */
.button.blue{
    background-color: #00ACEE;
    border-color: #00ACEE;
    color: #FFFFFF;
}
.button.blue:hover,
.button.blue:focus,
.button.blue:active,
.button.blue.disabled,
.button.blue[disabled]{
    background-color: #02A1DB;
    border-color: #02A1DB;
    color: #FFFFFF;
}

/* Green button */
.button.green{
    background-color: #58B25E;
    border-color: #58B25E;
    color: #FFFFFF;
}
.button.green:hover,
.button.green:focus,
.button.green:active,
.button.green.disabled,
.button.green[disabled]{
    background-color: #51A057;
    border-color: #51A057;
    color: #FFFFFF;
}

/* Orange button */
.button.orange{
    background-color: #EF7B45;
    border-color: #EF7B45;
    color: #FFFFFF;
}
.button.orange:hover,
.button.orange:focus,
.button.orange:active,
.button.orange.disabled,
.button.orange[disabled]{
    background-color: #DD7544;
    border-color: #DD7544;
    color: #FFFFFF;
}

/* Purple button */
.button.purple{
    background-color: #A085C6;
    border-color: #A085C6;
    color: #FFFFFF;
}
.button.purple:hover,
.button.purple:focus,
.button.purple:active,
.button.purple.disabled,
.button.purple[disabled]{
    background-color: #9880BC;
    border-color: #9880BC;
    color: #FFFFFF;
}

/* Red button */
.button.red{
    background-color: #F35958;
    border-color: #F35958;
    color: #FFFFFF;
}
.button.red:hover,
.button.red:focus,
.button.red:active,
.button.red.disabled,
.button.red[disabled]{
    background-color: #DD5252;
    border-color: #DD5252;
    color: #FFFFFF;
}

/* Yellow button */
.button.yellow{
    background-color: #FBAD2F;
    border-color: #FBAD2F;
    color: #FFFFFF;
}
.button.yellow:hover,
.button.yellow:focus,
.button.yellow:active,
.button.yellow.disabled,
.button.yellow[disabled]{
    background-color: #E29C2B;
    border-color: #E29C2B;
    color: #FFFFFF;
}

/* White button */
.button.white{
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: #636363;
}
.button.white:hover,
.button.white:focus,
.button.white:active,
.button.white.disabled,
.button.white[disabled]{
    background-color: #FAFAFA;
    border-color: #FAFAFA;
    color: #636363;
}
