/* -------------- Button base --------------------- */
.hq-button-base-normal {
    background-image: -ms-linear-gradient(top, #adadad 0%, #333333 100%);
    background-image: -moz-linear-gradient(top, #adadad 0%, #333333 100%);
    background-image: -o-linear-gradient(top, #adadad 0%, #333333 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #adadad), color-stop(1, #333333));
    background-image: -webkit-linear-gradient(top, #adadad 0%, #333333 100%);
    background-image: linear-gradient(to bottom, #adadad 0%, #333333 100%);
    border: 1px solid rgba(0, 0, 0, 0.9);
    box-shadow:
        inset 0 1px 0 0 rgba(128, 128, 128, 0.5),
        0 0 1px 1px rgba(128, 128, 128, 0.8),
        0 0 0 6px rgba(0, 0, 0, 0.06),
        0 0 0 3px rgba(0, 0, 0, 0.1);
}
.hq-button-base-normal:hover {
    background-image: -ms-linear-gradient(top, #e0e0e0 0%, #8f8f8f 100%);
    background-image: -moz-linear-gradient(top, #e0e0e0 0%, #8f8f8f 100%);
    background-image: -o-linear-gradient(top, #e0e0e0 0%, #8f8f8f 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e0e0), color-stop(1, #8f8f8f));
    background-image: -webkit-linear-gradient(top, #e0e0e0 0%, #8f8f8f 100%);
    background-image: linear-gradient(to bottom, #e0e0e0 0%, #8f8f8f 100%);
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow:
        inset 0 1px 0 0 rgba(128, 128, 128, 0.5),
        0 0 1px 1px rgba(128, 128, 128, 0.8),
        0 0 0 6px rgba(0, 0, 0, 0.06),
        0 0 0 3px rgba(0, 0, 0, 0.1);
}
.hq-button-base-on {
    background: rgb(255, 214, 94);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZDY1ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWJmMDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(255, 214, 94, 1) 0%, rgba(254, 191, 4, 1) 100%);
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, rgba(255, 214, 94, 1)),
        color-stop(100%, rgba(254, 191, 4, 1))
    );
    background: -webkit-linear-gradient(top, rgba(255, 214, 94, 1) 0%, rgba(254, 191, 4, 1) 100%);
    background: -o-linear-gradient(top, rgba(255, 214, 94, 1) 0%, rgba(254, 191, 4, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 214, 94, 1) 0%, rgba(254, 191, 4, 1) 100%);
    background: linear-gradient(top, rgba(255, 214, 94, 1) 0%, rgba(254, 191, 4, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 );
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
        0 0 1px 1px rgba(255, 255, 255, 0.8),
        0 0 0 6px rgba(0, 0, 0, 0.06),
        0 0 0 3px rgba(0, 0, 0, 0.1);
}
.hq-button-base-on:hover {
    background-image: -ms-linear-gradient(top, #fdcb28 0%, #e08600 100%);
    background-image: -moz-linear-gradient(top, #fdcb28 0%, #e08600 100%);
    background-image: -o-linear-gradient(top, #fdcb28 0%, #e08600 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fdcb28), color-stop(1, #e08600));
    background-image: -webkit-linear-gradient(top, #fdcb28 0%, #e08600 100%);
    background-image: linear-gradient(to bottom, #fdcb28 0%, #e08600 100%);
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
        0 0 1px 1px rgba(255, 255, 255, 0.8),
        0 0 0 6px rgba(0, 0, 0, 0.06),
        0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* ---------------------- Button outdoor temperature */
.hq-button-base-outtemp {
    background: #e0f3fa; /* Old browsers */
    background: -moz-linear-gradient(top, #e0f3fa 0%, #b6dffd 100%); /* FF3.6+ */
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, #e0f3fa),
        color-stop(100%, #b6dffd)
    ); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e0f3fa 0%, #b6dffd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e0f3fa 0%, #b6dffd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e0f3fa 0%, #b6dffd 100%); /* IE10+ */
    background: linear-gradient(to bottom, #e0f3fa 0%, #b6dffd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#b6dffd',GradientType=0 ); /* IE6-9 */
    border: 1px solid rgba(182, 223, 253, 0.9);
    box-shadow:
        inset 0 1px 0 0 rgba(182, 223, 253, 0.5),
        0 0 1px 1px rgba(182, 223, 253, 0.8),
        0 0 0 6px rgba(182, 223, 253, 0.06),
        0 0 0 3px rgba(182, 223, 253, 0.1);
}
.hq-button-base-outtemp:hover {
    background: #bbe9f9; /* Old browsers */
    background: -moz-linear-gradient(top, #bbe9f9 0%, #94d1fc 100%); /* FF3.6+ */
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, #bbe9f9),
        color-stop(100%, #94d1fc)
    ); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #bbe9f9 0%, #94d1fc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #bbe9f9 0%, #94d1fc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #bbe9f9 0%, #94d1fc 100%); /* IE10+ */
    background: linear-gradient(to bottom, #bbe9f9 0%, #94d1fc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbe9f9', endColorstr='#94d1fc',GradientType=0 ); /* IE6-9 */
    border: 1px solid rgba(182, 223, 253, 0.9);
    box-shadow:
        inset 0 1px 0 0 rgba(182, 223, 253, 0.5),
        0 0 1px 1px rgba(182, 223, 253, 0.8),
        0 0 0 6px rgba(182, 223, 253, 0.06),
        0 0 0 3px rgba(182, 223, 253, 0.1);
}

/* ---------------------- Button indoor temperature */
.hq-button-base-intemp {
    background: #f6e6b4; /* Old browsers */
    background: -moz-linear-gradient(top, #f6e6b4 0%, #eaac60 100%); /* FF3.6+ */
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, #f6e6b4),
        color-stop(100%, #eaac60)
    ); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f6e6b4 0%, #eaac60 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f6e6b4 0%, #eaac60 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f6e6b4 0%, #eaac60 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f6e6b4 0%, #eaac60 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#eaac60',GradientType=0 ); /* IE6-9 */
    border: 1px solid rgba(232, 158, 69, 0.9);
    box-shadow:
        inset 0 1px 0 0 rgba(232, 158, 69, 0.5),
        0 0 1px 1px rgba(232, 158, 69, 0.8),
        0 0 0 6px rgba(232, 158, 69, 0.06),
        0 0 0 3px rgba(232, 158, 69, 0.1);
}
.hq-button-base-intemp:hover {
    background: #f4d169; /* Old browsers */
    background: -moz-linear-gradient(top, #f4d169 0%, #e89e45 100%); /* FF3.6+ */
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, #f4d169),
        color-stop(100%, #e89e45)
    ); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f4d169 0%, #e89e45 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f4d169 0%, #e89e45 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f4d169 0%, #e89e45 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f4d169 0%, #e89e45 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4d169', endColorstr='#e89e45',GradientType=0 ); /* IE6-9 */
    border: 1px solid rgba(232, 158, 69, 0.9);
    box-shadow:
        inset 0 1px 0 0 rgba(232, 158, 69, 0.5),
        0 0 1px 1px rgba(232, 158, 69, 0.8),
        0 0 0 6px rgba(232, 158, 69, 0.06),
        0 0 0 3px rgba(232, 158, 69, 0.1);
}

/* -------------- Button red --------------------- */
.hq-button-red-normal {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
    background: -moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background: -webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background: -o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background: linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
    background-color: #ededed;
}

.hq-button-red-active {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100));
    background: -moz-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
    background: -webkit-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
    background: -o-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
    background: -ms-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
    background: linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0);

    background-color: #fe1a00;
}
.hq-button-red-normal,
.hq-button-red-active {
    -moz-box-shadow: inset 0px 1px 0px 0px #333333;
    -webkit-box-shadow: inset 0px 1px 0px 0px #333333;
    box-shadow: inset 0px 1px 0px 0px #333333;

    border: 1px solid #dcdcdc;

    display: inline-block;
    color: #777777;
    font-family: arial;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;

    text-shadow: 0px 1px 0px #ffffff;
}

.hq-button-red-normal:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
    background: -moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background: -webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background: -o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background: -ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background: linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);

    background-color: #dfdfdf;
}
.hq-button-red-active:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00));
    background: -moz-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
    background: -webkit-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
    background: -o-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
    background: -ms-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
    background: linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00',GradientType=0);

    background-color: #ce0100;
}
/* -------------- Button no background --------------------- */

.hq-button-no-background {
    background: none;
}

/* -------------- Button green --------------------- */
.hq-button-green-normal,
.hq-button-green-active {
    -moz-box-shadow: inset 3px 2px 7px 0px #d9fbbe;
    -webkit-box-shadow: inset 3px 2px 7px 0px #d9fbbe;
    box-shadow: inset 3px 2px 7px 0px #d9fbbe;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b8e356), color-stop(1, #a5cc52));
    background: -moz-linear-gradient(center top, #b8e356 5%, #a5cc52 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e356', endColorstr='#a5cc52');
    background-color: #b8e356;
    border: 1px solid #83c41a;
    display: inline-block;
    color: #ffffff;
}

.hq-button-green-active {
    position: relative;
    top: 1px;
}

.hq-button-green-normal:hover,
.hq-button-green-active:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a5cc52), color-stop(1, #b8e356));
    background: -moz-linear-gradient(center top, #a5cc52 5%, #b8e356 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cc52', endColorstr='#b8e356');
    background-color: #a5cc52;
}

/* most of them taken here: http://www.sanwebe.com/2014/02/css3-buttons-examples-with-effects-animations*/
/* ---------------------------- Button metall ----------------------------- */
.hq-button-metall-normal {
    /*display: block;*/
    background: #434343;
}
.hq-button-metall-active {
    /*display: block;*/
    background: #434343;
}

.hq-button-metall-normal,
.hq-button-metall-active {
    /*display: block;*/
    background-color: #434343;
    background-image: -webkit-linear-gradient(100% 100% 90deg, #515151, #7a7a7a);
    background-image: -moz-linear-gradient(100% 100% 90deg, #515151, #7a7a7a);
    background-image: -o-linear-gradient(100% 100% 90deg, #515151, #7a7a7a);
    background-image: -ms-linear-gradient(100% 100% 90deg, #515151, #7a7a7a);
    background-image: linear-gradient(100% 100% 90deg, #515151, #7a7a7a);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7a7a7a), to(#515151));
    border: none;
    border-top: 3px solid #c2c2c2;
    /*border-radius*/
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    /*box-shadow*/
    -webkit-box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 1px 0 #2d2d2d,
        0 2px 0 #2d2d2d,
        0 3px 0 #2c2c2c,
        0 4px 0 #2a2a2a,
        0 0 0 6px black,
        0 4px 0 6px black,
        0 0 0 7px #222,
        0 4px 0 7px #222;
    -moz-box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 1px 0 #2d2d2d,
        0 2px 0 #2d2d2d,
        0 3px 0 #2c2c2c,
        0 4px 0 #2a2a2a,
        0 0 0 6px black,
        0 4px 0 6px black,
        0 0 0 7px #222,
        0 4px 0 7px #222;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 1px 0 #2d2d2d,
        0 2px 0 #2d2d2d,
        0 3px 0 #2c2c2c,
        0 4px 0 #2a2a2a,
        0 0 0 6px black,
        0 4px 0 6px black,
        0 0 0 7px #222,
        0 4px 0 7px #222;
    padding: 10px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    margin-right: 10px;
    text-decoration: none;
    color: #242424;
    background-image:
        -webkit-radial-gradient(50% 0%, 8% 50%, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0) 100%),
        -webkit-radial-gradient(50% 100%, 12% 50%, hsla(0, 0%, 100%, 0.6) 0%, hsla(0, 0%, 100%, 0) 100%),
        -webkit-radial-gradient(0% 50%, 50% 7%, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0) 100%),
        -webkit-radial-gradient(100% 50%, 50% 5%, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0) 100%),
        -webkit-repeating-radial-gradient(
                50% 50%,
                100% 100%,
                hsla(0, 0%, 0%, 0) 0%,
                hsla(0, 0%, 0%, 0) 3%,
                hsla(0, 0%, 0%, 0.1) 3.5%
            ),
        -webkit-repeating-radial-gradient(
                50% 50%,
                100% 100%,
                hsla(0, 0%, 100%, 0) 0%,
                hsla(0, 0%, 100%, 0) 6%,
                hsla(0, 0%, 100%, 0.1) 7.5%
            ),
        -webkit-repeating-radial-gradient(
                50% 50%,
                100% 100%,
                hsla(0, 0%, 100%, 0) 0%,
                hsla(0, 0%, 100%, 0) 1.2%,
                hsla(0, 0%, 100%, 0.2) 2.2%
            ),
        -webkit-radial-gradient(
                50% 50%,
                200% 50%,
                hsla(0, 0%, 90%, 1) 5%,
                hsla(0, 0%, 85%, 1) 30%,
                hsla(0, 0%, 60%, 1) 100%
            );
}

.hq-button-metall-active {
    border-top: 0px solid #dde1e7;
    /*box-shadow*/
    -webkit-box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 1px 0 #2d2d2d,
        0 2px 0 #2d2d2d,
        0 3px 0 #2c2c2c,
        0 4px 0 #2a2a2a,
        0 0 0 6px black,
        0 4px 0 6px black,
        0 0 0 7px #222,
        0 4px 0 7px #222,
        0px 0px 5px #00aeff,
        0px 0px 50px #00aeff,
        0px 0px 50px #93d9fa;
    -moz-box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 1px 0 #2d2d2d,
        0 2px 0 #2d2d2d,
        0 3px 0 #2c2c2c,
        0 4px 0 #2a2a2a,
        0 0 0 6px black,
        0 4px 0 6px black,
        0 0 0 7px #222,
        0 4px 0 7px #222,
        0px 0px 5px #00aeff,
        0px 0px 50px #00aeff,
        0px 0px 50px #93d9fa;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 1px 0 #2d2d2d,
        0 2px 0 #2d2d2d,
        0 3px 0 #2c2c2c,
        0 4px 0 #2a2a2a,
        0 0 0 6px black,
        0 4px 0 6px black,
        0 0 0 7px #222,
        0 4px 0 7px #222,
        0px 0px 5px #00aeff,
        0px 0px 50px #00aeff,
        0px 0px 50px #93d9fa;
    /*transform*/
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);
    -ms-transform: translateY(4px);
    -o-transform: translateY(4px);
    transform: translateY(4px);
}

.hq-button-metall-normal:hover,
.hq-button-metall-active:hover {
    color: #00aeff;
    text-shadow: -1px -2px 1px #000;
}

.hq-button-metall-normal:before,
.hq-button-metall-normal:after,
.hq-button-metall-active:before,
.hq-button-metall-active:after {
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    width: inherit;
    height: inherit;
    /*border-radius*/
    -webkit-border-radius: inherit;
    -moz-border-radius: inherit;
    border-radius: inherit;
    /* fake conical gradients */
    background-image:
        -webkit-radial-gradient(50% 0%, 10% 50%, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0) 100%),
        -webkit-radial-gradient(50% 100%, 10% 50%, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0) 100%),
        -webkit-radial-gradient(0% 50%, 50% 10%, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0) 100%),
        -webkit-radial-gradient(100% 50%, 50% 06%, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0) 100%);
}

.hq-button-metall-normal:before,
.hq-button-metall-active:before {
    /*transform*/
    -webkit-transform: rotate(65deg);
    -moz-transform: rotate(65deg);
    -ms-transform: rotate(65deg);
    -o-transform: rotate(65deg);
    transform: rotate(65deg);
}
.hq-button-metall-normal:after,
.hq-button-metall-active:after {
    /*transform*/
    -webkit-transform: rotate(-65deg);
    -moz-transform: rotate(-65deg);
    -ms-transform: rotate(-65deg);
    -o-transform: rotate(-65deg);
    transform: rotate(-65deg);
}

/* ------------------------------ Glossy buttons -------------------------------------- */
.hq-button-glossy-blue {
    background: #94c4fe;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(31%, #94c4fe), color-stop(100%, #d3f6fe));
    background: -webkit-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
    background: -moz-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
    background: -o-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
    background: -ms-linear-gradient(top, #94c4fe 31%, #d3f6fe 100%);
    background: linear-gradient(to bottom, #94c4fe 31%, #d3f6fe 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe',GradientType=0 );
    border: 1px solid #4864a9;
}

.hq-button-glossy-green {
    background: #54bc3e;
    background: -moz-linear-gradient(top, #54bc3e 0%, #aee850 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #54bc3e), color-stop(100%, #aee850));
    background: -webkit-linear-gradient(top, #54bc3e 0%, #aee850 100%);
    background: -o-linear-gradient(top, #54bc3e 0%, #aee850 100%);
    background: -ms-linear-gradient(top, #54bc3e 0%, #aee850 100%);
    background: linear-gradient(to bottom, #54bc3e 0%, #aee850 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54bc3e', endColorstr='#aee850',GradientType=0 );
    border: 1px solid #1d6511;
}

.hq-button-glossy-blue,
.hq-button-glossy-green {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;

    color: #000;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);

    -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.hq-button-glossy-blue:hover,
.hq-button-glossy-green:hover {
    -webkit-filter: brightness(0.9);
    -moz-filter: brightness(0.9);
    -ms-filter: brightness(0.9);
    filter: brightness(0.9);
}

.hq-button-glossy-blue:before,
.hq-button-glossy-green:before {
    content: '';
    width: calc(100% - 10px);
    height: 50%;

    display: block;
    position: absolute;
    left: 5px;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

    background: -moz-linear-gradient(
        top,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.7) 8%,
        rgba(255, 255, 255, 0) 100%
    );
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, rgba(255, 255, 255, 1)),
        color-stop(8%, rgba(255, 255, 255, 0.7)),
        color-stop(100%, rgba(255, 255, 255, 0))
    );
    background: -webkit-linear-gradient(
        top,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.7) 8%,
        rgba(255, 255, 255, 0) 100%
    );
    background: -o-linear-gradient(
        top,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.7) 8%,
        rgba(255, 255, 255, 0) 100%
    );
    background: -ms-linear-gradient(
        top,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.7) 8%,
        rgba(255, 255, 255, 0) 100%
    );
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.7) 8%,
        rgba(255, 255, 255, 0) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}

/* ---------------- Nice buttons ---------------------------------- */
.hq-button-nice-blue {
    background: #108fe8;
    box-shadow:
        0 -2px 0 3px #0d72b8 inset,
        0 5px 5px rgba(3, 25, 41, 0.17),
        0 15px rgba(255, 255, 255, 0.25) inset;
}
.hq-button-nice-blue:hover {
    background: #333;
    box-shadow:
        0 -2px 0 3px #1a1a1a inset,
        0 5px 5px rgba(0, 0, 0, 0.17),
        0 15px rgba(255, 255, 255, 0.32) inset;
}
.hq-button-nice-red {
    background: #e53030;
    box-shadow:
        0 -2px 0 3px #c91919 inset,
        0 5px 5px rgba(65, 8, 8, 0.17),
        0 15px rgba(255, 255, 255, 0.25) inset;
}
.hq-button-nice-red:hover {
    background: #333;
    box-shadow:
        0 -2px 0 3px #1a1a1a inset,
        0 5px 5px rgba(0, 0, 0, 0.17),
        0 15px rgba(255, 255, 255, 0.32) inset;
}
.hq-button-nice-green {
    background: #0ec518;
    box-shadow:
        0 -2px 0 3px #0b9512 inset,
        0 5px 5px rgba(0, 7, 1, 0.17),
        0 15px rgba(255, 255, 255, 0.25) inset;
}
.hq-button-nice-green:hover {
    background: #333;
    box-shadow:
        0 -2px 0 3px #1a1a1a inset,
        0 5px 5px rgba(0, 0, 0, 0.17),
        0 15px rgba(255, 255, 255, 0.32) inset;
}
.hq-button-nice-yellow {
    background: #ffc334;
    box-shadow:
        0 -2px 0 3px #ffb401 inset,
        0 5px 5px rgba(103, 73, 0, 0.17),
        0 15px rgba(255, 255, 255, 0.25) inset;
}
.hq-button-nice-yellow:hover {
    background: #333;
    box-shadow:
        0 -2px 0 3px #1a1a1a inset,
        0 5px 5px rgba(0, 0, 0, 0.17),
        0 15px rgba(255, 255, 255, 0.32) inset;
}
.hq-button-nice-grey {
    background: #555555;
    box-shadow:
        0 -2px 0 3px #3b3b3b inset,
        0 5px 5px rgba(0, 0, 0, 0.17),
        0 15px rgba(255, 255, 255, 0.25) inset;
}
.hq-button-nice-grey:hover {
    background: #333;
    box-shadow:
        0 -2px 0 3px #1a1a1a inset,
        0 5px 5px rgba(0, 0, 0, 0.17),
        0 15px rgba(255, 255, 255, 0.32) inset;
}
.hq-button-nice-blue,
.hq-button-nice-red,
.hq-button-nice-green,
.hq-button-nice-yellow,
.hq-button-nice-grey {
    border: 3px solid #fff;
}

/* ------------------------- Push butons ------------------------------------- */
.hq-button-push-red {
    text-shadow: -1px -1px 0 #a84155;
    background: #d25068;
    border: 1px solid #d25068;

    background-image: -webkit-linear-gradient(top, #f66c7b, #d25068);
    background-image: -moz-linear-gradient(top, #f66c7b, #d25068);
    background-image: -ms-linear-gradient(top, #f66c7b, #d25068);
    background-image: -o-linear-gradient(top, #f66c7b, #d25068);
    background-image: linear-gradient(to bottom, #f66c7b, #d25068);

    -webkit-box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 -1px 0 rgba(255, 255, 255, 0.1) inset,
        0 4px 0 #ad4257,
        0 4px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 -1px 0 rgba(255, 255, 255, 0.1) inset,
        0 4px 0 #ad4257,
        0 4px 2px rgba(0, 0, 0, 0.5);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 -1px 0 rgba(255, 255, 255, 0.1) inset,
        0 4px 0 #ad4257,
        0 4px 2px rgba(0, 0, 0, 0.5);
}

.hq-button-push-green {
    text-shadow: -1px -1px 0 #2c7982;
    background: #3eacba;
    border: 1px solid #379aa4;

    background-image: -webkit-linear-gradient(top, #48c6d4, #3eacba);
    background-image: -moz-linear-gradient(top, #48c6d4, #3eacba);
    background-image: -ms-linear-gradient(top, #48c6d4, #3eacba);
    background-image: -o-linear-gradient(top, #48c6d4, #3eacba);
    background-image: linear-gradient(top, #48c6d4, #3eacba);

    -webkit-box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 -1px 0 rgba(255, 255, 255, 0.1) inset,
        0 4px 0 #338a94,
        0 4px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 -1px 0 rgba(255, 255, 255, 0.1) inset,
        0 4px 0 #338a94,
        0 4px 2px rgba(0, 0, 0, 0.5);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 -1px 0 rgba(255, 255, 255, 0.1) inset,
        0 4px 0 #338a94,
        0 4px 2px rgba(0, 0, 0, 0.5);
}

.hq-button-push-red,
.hq-button-push-green {
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-family: 'Oswald', Helvetica;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.hq-button-push-red:before,
.hq-button-push-green:before {
    background: #f0f0f0;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d0d0d0), to(#f0f0f0));

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5) inset,
        0 1px 0 #fff;
    -moz-box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5) inset,
        0 1px 0 #fff;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5) inset,
        0 1px 0 #fff;

    position: absolute;
    content: '';
    left: -6px;
    right: -6px;
    top: -6px;
    bottom: -10px;
    z-index: -1;
}

.hq-button-push-red:active,
.hq-button-push-green:active {
    -webkit-box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 -1px 0 rgba(255, 255, 255, 0.1) inset;
    margin-top: 5px;
}
.hq-button-push-red:active:before,
.hq-button-push-green:active:before {
    top: -6px;
    bottom: -11px;
    content: '';
}

.hq-button-push-red:hover {
    background: #f66c7b;
    background-image: -webkit-linear-gradient(top, #d25068, #f66c7b);
    background-image: -moz-linear-gradient(top, #d25068, #f66c7b);
    background-image: -ms-linear-gradient(top, #d25068, #f66c7b);
    background-image: -o-linear-gradient(top, #d25068, #f66c7b);
    background-image: linear-gradient(top, #d25068, #f66c7b);
}

.hq-button-push-green:hover {
    background: #48c6d4;
    background-image: -webkit-linear-gradient(top, #3eacba, #48c6d4);
    background-image: -moz-linear-gradient(top, #3eacba, #48c6d4);
    background-image: -ms-linear-gradient(top, #3eacba, #48c6d4);
    background-image: -o-linear-gradient(top, #3eacba, #48c6d4);
    background-image: linear-gradient(top, #3eacba, #48c6d4);
}

.hq-button-base-normal:active,
.hq-button-base-on:active,
.hq-button-base-outtemp:active,
.hq-button-base-intemp:active,
.hq-button-red-normal:active,
.hq-button-red-active:active,
.hq-button-green-normal:active,
.hq-button-green-active:active,
.hq-button-no-background:active {
    transform: scale(0.95);
}