body {
    background: white;
    color: black;
}

.example {
    margin-top: 3em;
}

.button {
    display: inline-block;
    padding: 10px;
    /* IE6 and IE7 default to aligning it top. */
    *vertical-align: middle;
    /* Do not clip contents in IE6. */
    /*
    _zoom: 1;
    */
}
.button button,
.button :link,
.button :visited,
.button input {
    /* Gecko and Presto default to treating buttons as border-box. */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border: 0;
    text-decoration: none;
    background: none;
    text-align: left;
    width: auto; /*op - not sure what opera has set as default but its not auto*/
    overflow: visible; /*ie - get rid of extra space*/
    cursor: pointer;
    display: inline-block;
    /*
    _display: inline-block;
    *zoom: 1;
    */
    *white-space: nowrap; /*ie - you must set white-space nowrap or set a width on the button*/
    vertical-align: middle;
    margin: 0 0;
    padding: 3px 7px;
}

/* IE6 and IE7 have border-box */
.button button,
.button input {
    *padding: 2px 7px;
    *margin: 0 -2px;
}

.button :focus,
.button a:focus,
.button input[type="button"]:focus,
.button button:focus,
.button button:active {
    outline: 2px solid blue;
    outline: auto 5px -webkit-focus-ring-color;
    border: 0;
    *border: 2px solid blue;
    -moz-outline-radius: 5px;
    /* -webkit-outline-radius: 5px; */
    margin-bottom: -1px;
    /* -webkit-focus-ring-color: blue; */
    /* Required to see a focus ring in IE8 */
    /* margin: 2px; */
    /* outline-offset: 2px; */
    background-color: #ad3d41;
}

/*
:root .button :focus,
:root .button a:focus,
:root .button input[type="button"]:focus,
:root .button button:focus,
:root .button button:active {
    margin: 0;
}
*/ 

/* Make Fx's inner focus area cover the whole button. */

.button button::-moz-focus-inner,
.button input[type="reset"]::-moz-focus-inner,
.button input[type="button"]::-moz-focus-inner,
.button input[type="submit"]::-moz-focus-inner,
.button input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    display: inline;
    padding: 3px 7px;
    margin: -3px -7px;
}

/* Remove focus ring on Fx's inner focus area. */

.button button:focus::-moz-focus-inner,
.button input[type="reset"]:focus::-moz-focus-inner,
.button input[type="button"]:focus::-moz-focus-inner,
.button input[type="submit"]:focus::-moz-focus-inner,
.button input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
     border: 0;
     display: inline;
     outline: 0;
}

.button span {
    _display: block;
}

.button span span {
   /* Horizontal borders for notched corners: */
   border-top: 1px solid;
   border-bottom: 1px solid;
   display: inline-block;
}

.button :link,
.button :visited,
.button input,
.button button {
    /* No borders wanted: */
    border: 0;
    /* Extend left and right of container top/bottom borders to create notched corners: */
    margin-left: -1px;
    margin-right: -1px;
    /** 
     * IE6 does not shift the box left with its negative margin, so nudge it
     * leftwards with relative positioning:
     */
    _position: relative;
    _left: -1px;
}

/* IE6/IE7 pushe the link 1px down for some reason: */
.button :link,
.button :visited {
    *position: relative;
    *left: -1px;
    *top: -1px;
}

/**
 * Skin:
 * 
 * Lightest red: #ad3d41
 * Darkest red:  #853f3e
 *
 */
.button span span {
    border-top-color: #ad3d41;
    border-bottom-color: #853f3e;
}

.button :link,
.button :visited,
.button input,
.button button {
    /* More aggressively rounded corners in supporting browsers: */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}


/* Hide the notching borders in WebKit and Gecko: */
@media (-webkit-min-device-pixel-ratio: 0) {
    
    .button span span {
        border-color: transparent;
    }

}

@-moz-document url-prefix() {
    
    .button span span {
        border-color: transparent;
    }

}

.button :link,
.button :visited,
.button input,
.button button {
    /* Base */
    background-color: #ad3d41;
    color: #fff;
    /* Gradients: */
    -moz-box-shadow: inset 0 -15px 10px #853f3e;
    -opera-box-shadow:  inset 0 -15px 10px #853f3e;
    box-shadow: inset 0 -15px 10px #853f3e;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ad3d41), to(#853f3e));
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ad3d41', EndColorStr='#853f3e')";
    *filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ad3d41', EndColorStr='#853f3e');
}

.button :link,
.button :visited,
.button input,
.button button {
    color: #fff;
    font-weight: bold;
    font: 90% bold 'trebuchet ms',arial,sans-serif;
    text-decoration: none;
}

.button :hover,
.button :focus,
.button :active {
    text-decoration: underline;
}