.button {
    font: 15px Calibri, Arial, sans-serif;
    /* A semi-transparent text shadow */
    text-shadow: 1px 1px 0 #ffffff;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
    /* Overriding the default underline styling of the links */
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
    background-repeat: no-repeat;
    /* The following two rules are fallbacks, in case
	   the browser does not support multiple backgrounds. */
    background-position: bottom left;
    background-image: url('button_bg.png');
    /* Multiple backgrounds version. The background images
	   are defined individually in color classes */
    background-position: bottom left, top right, 0 0, 0 0;
    background-clip: border-box;
    /* Applying a default border raidus of 8px */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    /* A 1px highlight inside of the button */
    -moz-box-shadow: 0 0 1px #fff inset;
    -webkit-box-shadow: 0 0 1px #fff inset;
    box-shadow: 0 0 1px #fff inset;
    /* Animating the background positions with CSS3 */
    /* Currently works only in Safari/Chrome */
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

    .button:hover {
        /* The first rule is a fallback, in case the browser
	   does not support multiple backgrounds
	*/
        background-position: top left;
        background-position: top left, bottom right, 0 0, 0 0;
    }

    .button:active {
        /* Moving the button 1px to the bottom when clicked */
        bottom: -1px;
    }

    /* The three buttons sizes */

    .button.big {
        font-size: 30px;
    }
    .button.large {
        font-size: 22px;
    }

    .button.medium {
        font-size: 18px;
    }

    .button.small {
        font-size: 13px;
    }

    /* A more rounded button */

    .button.rounded {
        -moz-border-radius: 4em;
        -webkit-border-radius: 4em;
        border-radius: 4em;
    }


/* Defining four button colors */


/* BlueButton */

.blue.button {
    color: #eeeeee !important;
    border: 1px solid #84acc3 !important;
    /* A fallback background color */
    background-color: #115588;
    /* Specifying a version with gradients according to */
    background-image: url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(#115588, #3faeeb);
    background-image: url('button_bg.png'), url('button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(#115588), to(rgba(89,208,244,0))), -webkit-gradient(linear, 0 0, 0 100%, from(#115588), to(#3faeeb));
}

    .blue.button:hover {
        background-color: #11a1e1;
        background-image: url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), -moz-linear-gradient(#115588, #58bef7);
        background-image: url('button_bg.png'), url('button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(#115588), to(rgba(109,217,250,0))), -webkit-gradient(linear, 0 0, 0 100%, from(#115588), to(#58bef7));
    }
.orange.button {
    color: #eeeeee !important;
    border: 1px solid #84acc3 !important;
    /* A fallback background color */
    background-color: #FFA319;
    /* Specifying a version with gradients according to */
    background-image: url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(255,102,0,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(#FFA319, #ff0000);
    background-image: url('button_bg.png'), url('button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(#FFA319), to(rgba(89,208,244,0))), -webkit-gradient(linear, 0 0, 0 100%, from(#FFA319), to(#ff0000));
}

    .orange.button:hover {
        background-color: #FFA319;
        background-image: url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(255,102,0,1) 0,rgba(109,217,250,0) 100px), -moz-linear-gradient(#FFA319, #FF6600);
        background-image: url('button_bg.png'), url('button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(#FFA319), to(rgba(109,217,250,0))), -webkit-gradient(linear, 0 0, 0 100%, from(#FFA319), to(#FF6600));
    }