/**

    Beer Donation Button

    Copyright (c) 2013 by ikkez
    Christian Knuth <ikkez0n3@gmail.com>
    https://github.com/ikkez/

    WTFPL - DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
    http://www.wtfpl.net/txt/copying/

**/


/* general default styles
 **************************/
*[class |= "donate-beer"] {
    display: block;
    display: inline-block;
    padding: 0;
    outline: 0;
    border: 0;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background-color: #ffbe00;
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.4);
    -moz-box-shadow: 0 2px 6px rgba(0,0,0,.4);
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    -webkit-animation: beer-bg infinite 6s linear;
    -moz-animation: beer-bg infinite 6s linear;
    -ms-animation: beer-bg infinite 6s linear;
    -o-animation: beer-bg infinite 6s linear;
    animation: beer-bg infinite 6s linear;
}
    /* preload hover image */
    *[class |= "donate-beer"]:before {
        visibility: hidden;
        content: "";
    }
    *[class |= "donate-beer"]:hover {
        /* it seems better to use an additional image here, rather than a sprite
           to fix ugly animation resets / gaps in the transition */
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    }

/* by the power of Grayskull, animate this multiple backgrounds! */
@-moz-keyframes beer-bg {
    0%   { background-position: 0 0, 2px 0; }
    100% { background-position: 0 0, 2px -116px; }
}
@-webkit-keyframes beer-bg {
    0%   { background-position: 0 0, 2px 0; }
    100% { background-position: 0 0, 2px -116px; }
}
@-ms-keyframes beer-bg {
    0%   { background-position: 0 0, 2px 0; }
    100% { background-position: 0 0, 2px -116px; }
}
@-o-keyframes beer-bg {
    0%   { background-position: 0 0, 2px 0; }
    100% { background-position: 0 0, 2px -116px; }
}
@keyframes beer-bg {
    0%   { background-position: 0 0, 2px 0; }
    100% { background-position: 0 0, 2px -116px; }
}
/*************************/



/* .donate-beer-large
 **************************/
.donate-beer-large {
	width: 150px;
	height: 72px;
	background: url(../img/beer_btn_0.png) no-repeat 0 0, url(../img/beer_btn_bg_pattern.jpg) repeat 2px 0;
}
	.donate-beer-large:before {
		background: url(../img/beer_btn_1.png);
	}
	.donate-beer-large:hover {
		background: url(../img/beer_btn_1.png) no-repeat 0 0, url(../img/beer_btn_bg_pattern.jpg) repeat 2px 0;
	}


/* .donate-beer-small
 **************************/
.donate-beer-small {
	width: 175px;
	height: 57px;
	background: url(../img/beer_btn_small_0.png) no-repeat 0 0, url(../img/beer_btn_bg_pattern.jpg) repeat 2px 0;
}
    .donate-beer-small:before {
        background: url(../img/beer_btn_small_1.png);
    }
    .donate-beer-small:hover {
        background: url(../img/beer_btn_small_1.png) no-repeat 0 0, url(../img/beer_btn_bg_pattern.jpg) repeat 2px 0;
    }


/* .donate-beer-mini
 **************************/
.donate-beer-mini {
	width: 144px;
	height: 57px;
	background: url(../img/beer_btn_mini_0.png) no-repeat 0 0, url(../img/beer_btn_bg_pattern.jpg) repeat 2px 0;
}
    .donate-beer-mini:before {
        background: url(../img/beer_btn_mini_1.png);
    }
    .donate-beer-mini:hover {
        background: url(../img/beer_btn_mini_1.png) no-repeat 0 0, url(../img/beer_btn_bg_pattern.jpg) repeat 2px 0;
    }