/* -------------- Button base --------------------- */
.bar-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);
}
.bar-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);
}
.bar-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);
}
.bar-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 */
.bar-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);
}
.bar-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 */
.bar-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);
}
.bar-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 --------------------- */
.bar-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;
}

.bar-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;
}
.bar-button-red-normal, .bar-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;
}

.bar-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;
}
.bar-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 --------------------- */

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

/* -------------- Button green --------------------- */
.bar-button-green-normal, .bar-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;
}

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

.bar-button-green-normal:hover,
.bar-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 ----------------------------- */
.bar-button-metall-normal {
    /*display: block;*/
    background: #434343;
}
.bar-button-metall-active {
    /*display: block;*/
    background: #434343;
}

.bar-button-metall-normal, .bar-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%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.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%,.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%,.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%,.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%);
}

.bar-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);
}

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

.bar-button-metall-normal:before,
.bar-button-metall-normal:after,
.bar-button-metall-active:before,
.bar-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%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient(  50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient(   0%  50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient( 100%  50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
}

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

/* ---------------- Nice buttons ---------------------------------- */
.bar-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;
}
.bar-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;
}
.bar-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;
}
.bar-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;
}
.bar-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;
}
.bar-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;
}

.bar-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;
}
.bar-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;
}
.bar-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;
}
.bar-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;
}
.bar-button-nice-blue, .bar-button-nice-red, .bar-button-nice-green, .bar-button-nice-yellow, .bar-button-nice-grey {
    border: 3px solid #fff;
}

/* ------------------------- Push butons ------------------------------------- */
.bar-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, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
    box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
}

.bar-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, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
    box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
}

.bar-button-push-red,
.bar-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;
}

.bar-button-push-red:before,
.bar-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, .5) inset, 0 1px 0 #FFF;
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
    box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;

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

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

.bar-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);
}

.bar-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);
}

.bar-button-glossy-blue:active,
.bar-button-glossy-green:active,
.bar-button-nice-blue:active,
.bar-button-nice-red:active,
.bar-button-nice-green:active,
.bar-button-nice-yellow:active,
.bar-button-nice-grey:active,
.bar-button-base-normal:active,
.bar-button-base-on:active,
.bar-button-base-outtemp:active,
.bar-button-base-intemp:active,
.bar-button-red-normal:active,
.bar-button-red-active:active,
.bar-button-green-normal:active,
.bar-button-green-active:active,
.bar-button-no-background:active
{
    transform: scale(0.95);
}

/* -------------------------------------- COMBINED STYLES ---------------------------------------------------*/
.bar-button-gloss-grey,
.bar-button-gloss-blue,
.bar-button-gloss-green,
.bar-button-gloss-pink,
.bar-button-gloss-orange,
.bar-button-gloss-grey-active,
.bar-button-gloss-blue-active,
.bar-button-gloss-green-active,
.bar-button-gloss-pink-active,
.bar-button-gloss-orange-active
{
    background:            #777777;
    cursor:                pointer;
    /* text */
    text-decoration: 		none;
    font: 					24px/1em 'Droid Sans', sans-serif;
    font-weight: 			bold;
    text-shadow: 			rgba(255,255,255,.5) 0 1px 0;
    -webkit-user-select: 	none;
    -moz-user-select: 		none;
    user-select: 			none;

    /* layout */
    /*padding: 				.5em .6em .4em .6em;
    margin: 				.5em;*/
    display: 				inline-block;

    /* effects */
    border-top: 		1px solid rgba(255,255,255,0.8);
    border-bottom: 		1px solid rgba(0,0,0,0.1);

    background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(../img/noise.png);
    background-image: 	-moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(../img/noise.png);
    background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(../img/noise.png);

    -webkit-transition: background .2s ease-in-out;
    -moz-transition: 	background .2s ease-in-out;
    transition: 		background .2s ease-in-out;

}
.bar-button-gloss-grey:active,
.bar-button-gloss-blue:active,
.bar-button-gloss-green:active,
.bar-button-gloss-pink:active,
.bar-button-gloss-orange:active,
.bar-button-gloss-grey-active:active,
.bar-button-gloss-blue-active:active,
.bar-button-gloss-green-active:active,
.bar-button-gloss-pink-active:active,
.bar-button-gloss-orange-active:active
{
    background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
    background-image: 	-moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
    background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);

    -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em,
    rgba(0,0,0,0.4) 0 .1em 1px,
    rgba(0,0,0,0.2) 0 .2em 6px;
    -moz-box-shadow: 	inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em,
    rgba(0,0,0,0.4) 0 .1em 1px,
    rgba(0,0,0,0.2) 0 .2em 6px;
    box-shadow: 		inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em,
    rgba(0,0,0,0.4) 0 .1em 1px,
    rgba(0,0,0,0.2) 0 .2em 6px;

    -webkit-transform: 	translateY(.2em);
    -moz-transform: 	translateY(.2em);
    transform: 			translateY(.2em);
}

.bar-button-gloss-grey,
.bar-button-gloss-grey-active
{
    /* color */
    color: 				hsl(0, 0%, 40%) !important;
    background-color: 	hsl(0, 0%, 75%);

    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
    hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    -moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
    hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
    hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}

.bar-button-gloss-grey:hover,
.bar-button-gloss-grey-active:hover
{ 	background-color: 	hsl(0, 0%, 83%); }

/* -------------- colours -------------- */
.bar-button-gloss-orange,
.bar-button-gloss-orange-active
{
    color: 				hsl(39, 100%, 30%) !important;
    background-color: 	hsl(39, 100%, 50%);

    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
    hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    -moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
    hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
    hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}

.bar-button-gloss-orange:hover,
.bar-button-gloss-orange-active:hover
{ 	background-color: hsl(39, 100%, 65%); }


.bar-button-gloss-blue,
.bar-button-gloss-blue-active
{
    color: 				hsl(208, 50%, 40%) !important;
    background-color: 	hsl(208, 100%, 75%);

    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
    hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
    -moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
    hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
    box-shadow: 		inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
    hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
}
.bar-button-gloss-blue:hover,
.bar-button-gloss-blue-active:hover
{ 	background-color: hsl(208, 100%, 83%); }

.bar-button-gloss-green,
.bar-button-gloss-green-active
{
    color: 				hsl(88, 70%, 30%) !important;
    background-color: 	hsl(88, 70%, 60%);
    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
    hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    -moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
    hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
    hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}

.bar-button-gloss-green:hover,
.bar-button-gloss-green-active:hover
{ 	background-color: hsl(88, 70%, 75%); }


.bar-button-gloss-pink,
.bar-button-gloss-pink-active
{
    color: 				hsl(340, 100%, 30%) !important;
    background-color: 	hsl(340, 100%, 75%);
    -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
    hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    -moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
    hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    box-shadow: 		inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
    hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}

.bar-button-gloss-pink:hover,
.bar-button-gloss-pink-active:hover
{ 	background-color: hsl(340, 100%, 83%); }

.bar-button-gloss-grey-active,
.bar-button-gloss-blue-active,
.bar-button-gloss-green-active,
.bar-button-gloss-pink-active,
.bar-button-gloss-orange-active
{
    background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(../img/noise.png);
    background-image: 	-moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(../img/noise.png);
    background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(../img/noise.png);

    -webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
    rgba(0,0,0,0.4) 0 .1em 1px, /* border */
    rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
    -moz-box-shadow: 	inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
    rgba(0,0,0,0.4) 0 .1em 1px, /* border */
    rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
    box-shadow: 		inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
    rgba(0,0,0,0.4) 0 .1em 1px, /* border */
    rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

    -webkit-transform: 	translateY(.2em);
    -moz-transform: 	translateY(.2em);
    transform: 			translateY(.2em);
}