@CHARSET "ISO-8859-1";

.button, .button:visited {
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    border-radius: 10px;
    border-color: #ffffff;
    border-width: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
}

.zk_button, .zk_button:visited {
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    text-decoration: none;
    border-color: #ffffff;
    border-width: 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
    background-color: #483E37;
}

.link-clr.button, .link-lnk.button:visited {
    background-color: #63A4C2;
}

    .link-clr.button:disabled {
        background-color: gray;
    }

    .link-clr.button:hover {
        background-color: #5288A1;
    }

.quad, .quad:visited {
    margin: 0px;
    padding: 0px;
    width: 60px;
    height: 50px;
    font-size: 20px;
}

.miniquad, .miniquad:visited {
    margin: 0px;
    padding: 0px;
    width: 30px;
    height: 30px;
    font-size: 20px;
    border-radius: 5px;
}

.micro, .micro:visited {
    width: 120px;
    height: 30px;
    font-size: 15px;
}

.mini, .mini:visited {
    height: 40px;
    font-size: 20px;
}

.small.button, .small.button:visited {
    width: 200px;
    height: 60px;
    font-size: 40px;
}

.big, .big:visited {
    width: 300px;
    height: 80px;
    font-size: 50px;
}

.key, .key:visited {
    width: 80px;
    height: 80px;
    font-size: 50px;
}

.tuerkis.button, .tuerkis.button.visited {
    background-color: rgba(10, 189, 177, 1);
}

.brown.button, .brown.button.visited {
    background-color: rgb(64, 32, 5);
}

.pink.button, .pink.button:visited {
    background-color: #e22092;
}

    .pink.button:hover {
        background-color: #c81e82;
    }

.green.button, .green.button:visited {
    background-color: #91bd09;
}

    .green.button:hover {
        background-color: #749a02;
    }

.red.button, .red.button:visited {
    background-color: #e62727;
}

    .red.button:hover {
        background-color: #cf2525;
    }

.orange.button, .orange.button:visited {
    background-color: #ff5c00;
}

    .orange.button:hover {
        background-color: #d45500;
    }

.blue.button, .blue.button:visited {
    background-color: #2981e4;
}

    .blue.button:hover {
        background-color: #2575cf;
    }

.yellow.button, .yellow.button:visited {
    background-color: #ffb515;
}

    .yellow.button:hover {
        background-color: #fc9200;
    }

.link-clr.button, .link-lnk.button:visited {
    background-color: #63A4C2;
}

    .link-clr.button:disabled {
        background-color: gray;
    }

    .link-clr.button:hover {
        background-color: #5288A1;
    }

.back-clr.button, .back-clr.button:visited {
    background-color: #202020;
}

    .back-clr.button:hover {
        background-color: #000000;
    }

.function-clr.button, .function-clr.button:visited {
    background-color: #CC9447;
}

    .function-clr.button:disabled {
        background-color: gray;
    }

    .function-clr.button:hover {
        background-color: #B26F12;
    }

.info-clr.button, .info-clr.button:visited {
    background-color: #C0C0C0;
}

    .info-clr.button:hover {
        background-color: #B0B0B0;
    }

.info-dark-clr.button, .info-dark-clr.button:visited {
    background-color: #808080;
}

    .info-dark-clr.button:hover {
        background-color: #909090;
    }

/* Buttons */
.deluxe_button {
    width: 200px;
    height: 40px;
    padding: 5px 10px 6px;
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-weight: bold;
    /* BACKGROUND GRADIENTS */
    background: #014464;
    /* Verlauf: Oben, Mitte, Mitte, Unten */
    /* background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C); */
    background: (top, #A05A2C, #784421 50%, #502D16 51%, #2B1100);
    background: -moz-linear-gradient(top, #A05A2C, #784421 50%, #502D16 51%, #2B1100);
    background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0, #A05A2C), color-stop(.5, #784421), color-stop(.5, #502D16), to(#2B1100));
    background: -ms-linear-gradient(top, #A05A2C, #784421 50%, #502D16 51%, #2B1100);
    /* IE10+ */
    /* BORDER RADIUS */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #28170B;
    border-top: 1px solid #c3d6df;
    /* TEXT SHADOW */
    text-shadow: 1px 1px 1px black;
    /* BOX SHADOW */
    -moz-box-shadow: 0 1px 3px black;
    -webkit-box-shadow: 0 1px 3px black;
    box-shadow: 0 1px 3px black;
}

    /* WHILE HOVERED */
    .deluxe_button:hover {
        background: #014464;
        background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
        background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
        background: -ms-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
        /* IE10+ */
    }

    /* WHILE BEING CLICKED */
    .deluxe_button:active {
        -moz-box-shadow: 0 2px 6px black;
        -webkit-box-shadow: 0 2px 6px black;
    }

.button_top {
    margin-top: 5px;
}

.treeButton{
    margin-top: 10px;
    margin-bottom: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: Math.round(translate(-50%, -50%));
    font-size: 20px;
}