﻿.button {
    width: 260px;
    text-decoration: none;
    font: 18px/1em 'Droid Sans', sans-serif;
    text-shadow: rgba(255,255,255,.5) 0 1px 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    padding: .5em .6em .4em .6em;
    margin: .3em;
    display: inline-block;
    position: relative;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border-top: 1px solid rgba(255,255,255,0.8);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    -webkit-transition: background .2s ease-in-out;
    -moz-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
    color: white;
    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 */
}

    .button.blue {
        color: white;
        width: 10%;
        background-color: #133984;
        -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;
    }

        .button.blue:hover {
            cursor: pointer;
            background-color: #133984;
        }

    .button:active {
        -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);
    }

    .button:focus {
        outline: none;
        text-shadow: rgba(0,0,0,0.2) 0 1px 2px;
    }
