/* button -------------------------------------------------------*/
.button {
    position: relative;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: small/100% Arial, Helvetica, sans-serif;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    padding: .2em 1em .25em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}

/* button gradient : gray color */
.gray {
    color: #000000;
    border: solid 1px #696969;
    background: #696969;
    background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#6f6f6f));
    background: -moz-linear-gradient(top,  #f3f3f3,  #6f6f6f);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#6f6f6f');
}
.gray:hover {
    background: #696969;
    background: -webkit-gradient(linear, left top, left bottom, from(#c0c0c0), to(#808080));
    background: -moz-linear-gradient(top,  #c0c0c0,  #808080);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c0c0c0', endColorstr='#808080');
}
.gray:active {
    color: #000000;
    background: -webkit-gradient(linear, left top, left bottom, from(#6f6f6f), to(#f3f3f3));
    background: -moz-linear-gradient(top,  #6f6f6f,  #f3f3f3);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6f6f6f', endColorstr='#f3f3f3');
}