/* Базовый класс кнопки */
fieldset input[type=submit],
fieldset .btn {
    width: 100%;
}

input[type=submit],
.btn {
    cursor: pointer;
    padding: 14px 20px;
    color: white;
    font: 14px / 1.2em "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    margin-top: 10px;
    border-radius: 8px;
    border: solid 1px #b5b5b5;
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    width: 200px;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    border: none;
    box-sizing: border-box;
}

/* Цветовые модификаторы для кнопок */
.btn-purple {
    background: #9b59b6;
    background: -webkit-gradient(linear, left top, left bottom, from(#9b59b6), to(#82409D));
    background: -moz-linear-gradient(top, #9b59b6, #82409D);
    background: linear-gradient(to bottom, #9b59b6, #82409D);
    border-top-color: #b568d4;
    border-left-color: #8a5c9d;
    border-right-color: #8a5c9d;
    border-bottom-color: #76448a;
    box-shadow: inset 0 1px 1px 0 #b568d4;
}

.btn-turquoise {
    background: #1abc9c;
    background: -webkit-gradient(linear, left top, left bottom, from(#1abc9c), to(#16a085));
    background: -moz-linear-gradient(top, #1abc9c, #16a085);
    background: linear-gradient(to bottom, #1abc9c, #16a085);
    border-top-color: #2fe2bf;
    border-left-color: #18b499;
    border-right-color: #18b499;
    border-bottom-color: #14947b;
    box-shadow: inset 0 1px 1px 0 #2fe2bf;
}

/* Состояния кнопок */
.btn:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.btn:focus {
    outline: none;
    box-shadow:
            inset 0 1px 1px 0 rgba(255, 255, 255, 0.3),
            0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Специфичные состояния для цветов */
.btn-purple:hover {
    background: #a66bbe;
    background: -webkit-gradient(linear, left top, left bottom, from(#a66bbe), to(#8b4ba8));
    background: -moz-linear-gradient(top, #a66bbe, #8b4ba8);
    background: linear-gradient(to bottom, #a66bbe, #8b4ba8);
}

.btn-purple:active {
    background: #82409D;
    background: -webkit-gradient(linear, left top, left bottom, from(#82409D), to(#9b59b6));
    background: -moz-linear-gradient(top, #82409D, #9b59b6);
    background: linear-gradient(to bottom, #82409D, #9b59b6);
}

.btn-purple:focus {
    box-shadow:
            inset 0 1px 1px 0 #b568d4,
            0 0 0 3px rgba(155, 89, 182, 0.3);
}

.btn-turquoise:hover {
    background: #1dd2af;
    background: -webkit-gradient(linear, left top, left bottom, from(#1dd2af), to(#17b394));
    background: -moz-linear-gradient(top, #1dd2af, #17b394);
    background: linear-gradient(to bottom, #1dd2af, #17b394);
}

.btn-turquoise:active {
    background: #16a085;
    background: -webkit-gradient(linear, left top, left bottom, from(#16a085), to(#1abc9c));
    background: -moz-linear-gradient(top, #16a085, #1abc9c);
    background: linear-gradient(to bottom, #16a085, #1abc9c);
}

.btn-turquoise:focus {
    box-shadow:
            inset 0 1px 1px 0 #2fe2bf,
            0 0 0 3px rgba(26, 188, 156, 0.3);
}

html:not(.touch) .btn:active {
    transform: translate(0px, 5px);
    -webkit-transform: translate(0px, 5px);
    box-shadow: 0px 1px 0px 0px;
}

.btn_red {
    background-color: #e74c3c;
    box-shadow: 0px 5px 0px 0px #CE3323;
}

html:not(.touch) .btn_red:hover {
    background-color: #FF6656;
}

.btn_purple {
    background-color: #9b59b6;
    box-shadow: 0px 5px 0px 0px #82409D;
}

html:not(.touch) .btn_purple:hover {
    background-color: #B573D0;
}

.btn_orange {
    background-color: #e67e22;
    box-shadow: 0px 5px 0px 0px #CD6509;
}

html:not(.touch) .btn_orange:hover {
    background-color: #FF983C;
}

.btn_yellow {
    background-color: #f1c40f;
    box-shadow: 0px 5px 0px 0px #D8AB00;
}

html:not(.touch) .btn_yellow:hover {
    background-color: #FFDE29;
}

.btn_blue {
    background-color: #55acee;
    box-shadow: 0px 5px 0px 0px #3C93D5;
}

html:not(.touch) .btn_blue:hover {
    background-color: #6FC6FF;
}

.btn_green {
    background-color: #2ecc71;
    box-shadow: 0px 5px 0px 0px #15B358;
}

html:not(.touch) .btn_green:hover {
    background-color: #48E68B;
}