/* ------------------------------------------
 * CSS3 GITHUB BUTTONS
 * Licensed under Unlicense
 * --------------------------------------- */


/* =============================================================================
   Base Button
   ========================================================================== */

.button {
    position: relative;
    overflow: visible;
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid #d4d4d4;
    margin: 0;
    text-decoration: none;
    text-align: center;
    text-shadow: 1px 1px 0 #fff;
    font:11px/normal sans-serif;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    background-color: #ececec;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
    background-image: -moz-linear-gradient(#f4f4f4, #ececec);
    background-image: -ms-linear-gradient(#f4f4f4, #ececec);
    background-image: -o-linear-gradient(#f4f4f4, #ececec);
    background-image: linear-gradient(#f4f4f4, #ececec);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f4f4f4, endColorstr=#ececec)";
    -moz-background-clip: padding; /* for Firefox 3.6 */
    background-clip: padding-box;
    border-radius: 0.2em;
    /* IE hacks */
    zoom: 1;
    *display: inline;
}

.button.active {
    text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
    border-color: #bbbbbb;
    background-color: #3c8dde;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
    background-image: -moz-linear-gradient(#599bdc, #3072b3);
    background-image: -o-linear-gradient(#599bdc, #3072b3);
    background-image: linear-gradient(#cccccc, #d5d5d5);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#cccccc, endColorstr=#d5d5d5)";
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.075) inset;
}


.button:hover,
.button:focus,
.button:active {
    border-color: #3072b3;
    border-bottom-color: #2a65a0;
    text-decoration: none;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    color: #fff;
    background-color: #3c8dde;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
    background-image: -moz-linear-gradient(#599bdc, #3072b3);
    background-image: -o-linear-gradient(#599bdc, #3072b3);
    background-image: linear-gradient(#599bdc, #3072b3);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#599bdc, endColorstr=#3072b3)";
}

.button:active {
    border-color: #2a65a0;
    border-bottom-color: #3884cd;
    background-color: #3072b3;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));
    background-image: -moz-linear-gradient(#3072b3, #599bdc);
    background-image: -ms-linear-gradient(#3072b3, #599bdc);
    background-image: -o-linear-gradient(#3072b3, #599bdc);
    background-image: linear-gradient(#3072b3, #599bdc);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#3072b3, endColorstr=#599bdc)";
}

/* overrides extra padding on button elements in Firefox */
.button::-moz-focus-inner {
    padding: 0;
    border: 0;
}


/* =============================================================================
   Button icons
   ========================================================================== */

.button.icon:before {
    content: "";
    position: relative;
    top: 1px;
    float:left;
    width: 12px;
    height: 12px;
    margin: 0 0.75em 0 -0.25em;
}

.button.icon:hover:before,
.button.icon:focus:before,
.button.icon:active:before {
    background-position: -12px 0;
}

.button.icon.icon-only {
    padding-right: 0px !important;
}

.button.icon.icon-only:after {
    content: "\00a0";
    display: block;
}

/* Example:
    .button.iconname.icon:before {
        background: url("data:image/png;base64,…");
    }
*/


/* =============================================================================
   Button extensions
   ========================================================================== */

/* Primary button
   ========================================================================== */

.button.primary {
    font-weight: 900;
}

/* Danger button
   ========================================================================== */

.button.danger {
    color: #900;
}

.button.danger:hover,
.button.danger:focus,
.button.danger:active,
.button.danger.active {
    border-color: #b53f3a;
    border-bottom-color: #a0302a;
    color: #fff !important;
    background-color: #dc5f59 !important;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630));
    background-image: -moz-linear-gradient(#dc5f59, #b33630);
    background-image: -ms-linear-gradient(#dc5f59, #b33630);
    background-image: -o-linear-gradient(#dc5f59, #b33630);
    background-image: linear-gradient(#dc5f59, #b33630);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#dc5f59, endColorstr=#b33630)";
}

.button.danger:active,
.button.danger.active {
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    border-color: #a0302a;
    border-bottom-color: #bf4843;
    background-color: #b33630 !important;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59));
    background-image: -moz-linear-gradient(#b33630, #dc5f59);
    background-image: -ms-linear-gradient(#b33630, #dc5f59);
    background-image: -o-linear-gradient(#b33630, #dc5f59);
    background-image: linear-gradient(#b33630, #dc5f59);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#b33630, endColorstr=#dc5f59)";
}

/* Positive button
   ========================================================================== */

.button.positive {
    color: #080;
}

.button.positive:hover,
.button.positive:focus,
.button.positive:active,
.button.positive.active {
    border-color: #3c9300;
    border-bottom-color: #308100;
    color: #fff !important;
    background-color: #63b033 !important;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#63b033), to(#398a00));
    background-image: -moz-linear-gradient(#63b033, #398a00);
    background-image: -ms-linear-gradient(#63b033, #398a00);
    background-image: -o-linear-gradient(#63b033, #398a00);
    background-image: linear-gradient(#63b033, #398a00);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#63b033, endColorstr=#398a00)";
}

.button.positive:active,
.button.positive.active {
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    border-color: #308100;
    border-bottom-color: #459c12;
    background-color: #398a00 !important;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#398a00), to(#63b033));
    background-image: -moz-linear-gradient(#398a00, #63b033);
    background-image: -ms-linear-gradient(#398a00, #63b033);
    background-image: -o-linear-gradient(#398a00, #63b033);
    background-image: linear-gradient(#398a00, #63b033);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#398a00, endColorstr=#63b033)";
}

/* Pill button
   ========================================================================== */

.button.pill {
    border-radius: 50em;
}

/* Disabled button
   ========================================================================== */

.button.disabled {
    opacity: 0.5;
}

/* Big button
   ========================================================================== */

.button.big {
    font-size: 14px;
}

.button.big.icon:before {
    top: 0;
}


/* =============================================================================
   Button groups
   ========================================================================== */

/* Standard group
   ========================================================================== */

.button-group {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    /* IE hacks */
    zoom: 1;
    *display: inline;
}

.button + .button,
.button + .button-group,
.button-group + .button,
.button-group + .button-group {
    margin-left: 15px;
}

.button-group li {
    float: left;
    padding: 0;
    margin: 0;
}

.button-group .button {
    float: left;
    margin-left: -1px;
}

.button-group > .button:not(:first-child):not(:last-child),
.button-group li:not(:first-child):not(:last-child) .button {
    border-radius: 0;
}

.button-group > .button:first-child,
.button-group li:first-child .button {
    margin-left: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.button-group > .button:last-child,
.button-group li:last-child > .button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.button-group > .button:only-child,
.button-group li:only-child .button {
    border-radius: 0.2em;
}

/* Minor group
   ========================================================================== */

.button-group.minor-group .button {
    border: 1px solid #d4d4d4;
    text-shadow: none;
    font-weight: normal;
    background-image: none;
    background-color: #fff;
}

.button-group.minor-group .button.primary {
    font-weight: bold;
}

.button-group.minor-group .button:hover,
.button-group.minor-group .button:focus {
    background-color: #599bdc;
}

.button-group.minor-group .button.active {
    background-color: #eeeeee;
}

.button-group.minor-group .button:active {
    background-color: #3072b3;
}

.button-group.minor-group .button.icon:before {
    opacity: 0.8;
}

/* Slim group
   ========================================================================== */

.button-group.slim-group .button {
    padding: 0.2em 0.5em;
}

.button-group.slim-group .button.icon:before {
    margin: 0 0.5em 0 0;
}

.button-group.slim-group + .button-group.slim-group {
    margin-left: 5px;
}


/* =============================================================================
   Button container (mixing buttons and groups, e.g., nav bar)
   ========================================================================== */

.button-container .button,
.button-container .button-group {
    vertical-align: top;
}