﻿/* I wrote this (Nick) talk to me before changing anything or adding new buttons, there's a lot of crap to consider to maintain compatibility for all browsers
...or just edit it anyway, I'm not the cops.

   Here's an example button: 
        <asp:Button ID="cmdSave3" runat="server" CssClass="button" Text="Save/Back" Enabled="true"/>      
   You can also set the width if you want longer buttons to match the old ones like: 
    <asp:Button ID="cmdSave3" runat="server" CssClass="button" Text="Save" Enabled="true" Width="90px"/>*/
/* Disabling the button turns it grey and makes it not show the click animation when pressed: 
    <asp:Button ID="cmdSave3" runat="server" CssClass="button" Text="Save" Enabled="false"/>*/

.button {
    display:inline-block;
    margin: 3px;
    border: 1px solid;
    border-color: gray;
    background: rgb(240,240,240); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(250,250,250,1) 10%, rgba(237,237,237,1) 21%, rgba(218,218,218,1) 67%, rgba(237,237,237,1) 87%, rgba(250,250,250,1) 97%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(250,250,250,1)), color-stop(21%,rgba(237,237,237,1)), color-stop(67%,rgba(218,218,218,1)), color-stop(87%,rgba(237,237,237,1)), color-stop(97%,rgba(250,250,250,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(250,250,250,1) 10%,rgba(237,237,237,1) 21%,rgba(218,218,218,1) 67%,rgba(237,237,237,1) 87%,rgba(250,250,250,1) 97%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(250,250,250,1) 10%,rgba(237,237,237,1) 21%,rgba(218,218,218,1) 67%,rgba(237,237,237,1) 87%,rgba(250,250,250,1) 97%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(250,250,250,1) 10%,rgba(237,237,237,1) 21%,rgba(218,218,218,1) 67%,rgba(237,237,237,1) 87%,rgba(250,250,250,1) 97%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(250,250,250,1) 10%,rgba(237,237,237,1) 21%,rgba(218,218,218,1) 67%,rgba(237,237,237,1) 87%,rgba(250,250,250,1) 97%); /* W3C */
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    -webkit-background-clip: padding-box;
    border-radius: 0.5em;
    behavior: url(csspie/PIE.htc); /*Makes border radius work for IE6-9*/
    /*color: ButtonText;*/
    /*-moz-text-shadow: 0px 1px 1px grey;
    -webkit-text-shadow: 0px 1px 1px grey;
    text-shadow: 0px 1px 1px grey;*/
    /*-moz-box-shadow: 0px 1px 1px grey;
    -webkit-box-shadow: 0px 1px 1px grey;
    box-shadow: 0px 1px 1px grey;*/
    font-family: Verdana;
    font-size: 11px;
    padding: 6px 4px 6px 4px;
    line-height: 8px;
    cursor: pointer;
    
    /*font-weight: bold;*/
}

    .button:hover {
        background: rgb(250,250,250); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(255,255,255,1) 10%, rgba(243,243,243,1) 21%, rgba(224,224,224,1) 67%, rgba(243,243,243,1) 87%, rgba(255,255,255,1) 97%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(255,255,255,1)), color-stop(21%,rgba(243,243,243,1)), color-stop(67%,rgba(224,224,224,1)), color-stop(87%,rgba(243,243,243,1)), color-stop(97%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 10%,rgba(243,243,243,1) 21%,rgba(224,224,224,1) 67%,rgba(243,243,243,1) 87%,rgba(255,255,255,1) 97%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(255,255,255,1) 10%,rgba(243,243,243,1) 21%,rgba(224,224,224,1) 67%,rgba(243,243,243,1) 87%,rgba(255,255,255,1) 97%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(255,255,255,1) 10%,rgba(243,243,243,1) 21%,rgba(224,224,224,1) 67%,rgba(243,243,243,1) 87%,rgba(255,255,255,1) 97%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(255,255,255,1) 10%,rgba(243,243,243,1) 21%,rgba(224,224,224,1) 67%,rgba(243,243,243,1) 87%,rgba(255,255,255,1) 97%); /* W3C */
        border: 1px outset;
        border-color: dimgray;
    }

    .button:active {
        background: rgb(226,226,226); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */
        border: 1px inset;
        border-color: dimgray;
    }

    .button:disabled,
    .button:disabled:hover {
        background: rgb(160,160,160); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(174,174,174,1) 0%, rgba(169,169,169,1) 50%, rgba(162,162,162,1) 51%, rgba(193,193,193,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(174,174,174,1)), color-stop(50%,rgba(169,169,169,1)), color-stop(51%,rgba(162,162,162,1)), color-stop(100%,rgba(193,193,193,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(174,174,174,1) 0%,rgba(169,169,169,1) 50%,rgba(162,162,162,1) 51%,rgba(193,193,193,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(174,174,174,1) 0%,rgba(169,169,169,1) 50%,rgba(162,162,162,1) 51%,rgba(193,193,193,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(174,174,174,1) 0%,rgba(169,169,169,1) 50%,rgba(162,162,162,1) 51%,rgba(193,193,193,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(174,174,174,1) 0%,rgba(169,169,169,1) 50%,rgba(162,162,162,1) 51%,rgba(193,193,193,1) 100%); /* W3C */
        cursor: auto;
    }

.excelbutton {
    display:inline-block;
    margin: 3px;
    border: 1px solid;
    border-color: gray;
    background: rgb(240,240,240); /* Old browsers */
    background-image: url('../images/ms_excel.gif');
    background-image: url('../images/ms_excel.gif'), -moz-linear-gradient(top, rgba(250,250,250,1) 10%, rgba(237,237,237,1) 21%, rgba(218,218,218,1) 67%, rgba(237,237,237,1) 87%, rgba(250,250,250,1) 97%); /* FF3.6+ */
    background-image: url('../images/ms_excel.gif'), -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(250,250,250,1)), color-stop(21%,rgba(237,237,237,1)), color-stop(67%,rgba(218,218,218,1)), color-stop(87%,rgba(237,237,237,1)), color-stop(97%,rgba(250,250,250,1))); /* Chrome,Safari4+ */
    background-image: url('../images/ms_excel.gif'), -webkit-linear-gradient(top, rgba(250,250,250,1) 10%,rgba(237,237,237,1) 21%,rgba(218,218,218,1) 67%,rgba(237,237,237,1) 87%,rgba(250,250,250,1) 97%); /* Chrome10+,Safari5.1+ */
    background-image: url('../images/ms_excel.gif'), -o-linear-gradient(top, rgba(250,250,250,1) 10%,rgba(237,237,237,1) 21%,rgba(218,218,218,1) 67%,rgba(237,237,237,1) 87%,rgba(250,250,250,1) 97%); /* Opera 11.10+ */
    background-image: url('../images/ms_excel.gif'), -ms-linear-gradient(top, rgba(250,250,250,1) 10%,rgba(237,237,237,1) 21%,rgba(218,218,218,1) 67%,rgba(237,237,237,1) 87%,rgba(250,250,250,1) 97%); /* IE10+ */
    background-image: url('../images/ms_excel.gif'), linear-gradient(to bottom, rgba(250,250,250,1) 10%,rgba(237,237,237,1) 21%,rgba(218,218,218,1) 67%,rgba(237,237,237,1) 87%,rgba(250,250,250,1) 97%); /* W3C */
    background-repeat: no-repeat;
    background-position: 7px 46%, center center;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    -webkit-background-clip: padding-box;
    border-radius: 0.5em;
    behavior: url(csspie/PIE.htc); /*Makes border radius work for IE6-9*/
    /*color: ButtonText;*/
    /*-moz-text-shadow: 0px 1px 1px grey;
    -webkit-text-shadow: 0px 1px 1px grey;
    text-shadow: 0px 1px 1px grey;*/
    /*-moz-box-shadow: 0px 1px 1px grey;
    -webkit-box-shadow: 0px 1px 1px grey;
    box-shadow: 0px 1px 1px grey;*/
    font-family: Verdana;
    font-size: 11px;
    padding: 6px 4px 6px 4px;
    line-height: 8px;
    cursor: pointer;
    /*font-size: 1.1em;
    padding: 0.186em 0.6em 0.257em 0.6em;
    line-height: 1.429em;
    cursor: pointer;
    font-family: Verdana;*/
    /*font-weight: bold;*/
}

    .excelbutton:hover {
        background: rgb(250,250,250); /* Old browsers */
        background-image: url('../images/ms_excel.gif');
        background-image: url('../images/ms_excel.gif'), -moz-linear-gradient(top, rgba(255,255,255,1) 10%, rgba(243,243,243,1) 21%, rgba(224,224,224,1) 67%, rgba(243,243,243,1) 87%, rgba(255,255,255,1) 97%); /* FF3.6+ */
        background-image: url('../images/ms_excel.gif'), -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(255,255,255,1)), color-stop(21%,rgba(243,243,243,1)), color-stop(67%,rgba(224,224,224,1)), color-stop(87%,rgba(243,243,243,1)), color-stop(97%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
        background-image: url('../images/ms_excel.gif'), -webkit-linear-gradient(top, rgba(255,255,255,1) 10%,rgba(243,243,243,1) 21%,rgba(224,224,224,1) 67%,rgba(243,243,243,1) 87%,rgba(255,255,255,1) 97%); /* Chrome10+,Safari5.1+ */
        background-image: url('../images/ms_excel.gif'), -o-linear-gradient(top, rgba(255,255,255,1) 10%,rgba(243,243,243,1) 21%,rgba(224,224,224,1) 67%,rgba(243,243,243,1) 87%,rgba(255,255,255,1) 97%); /* Opera 11.10+ */
        background-image: url('../images/ms_excel.gif'), -ms-linear-gradient(top, rgba(255,255,255,1) 10%,rgba(243,243,243,1) 21%,rgba(224,224,224,1) 67%,rgba(243,243,243,1) 87%,rgba(255,255,255,1) 97%); /* IE10+ */
        background-image: url('../images/ms_excel.gif'), linear-gradient(to bottom, rgba(255,255,255,1) 10%,rgba(243,243,243,1) 21%,rgba(224,224,224,1) 67%,rgba(243,243,243,1) 87%,rgba(255,255,255,1) 97%); /* W3C */
        background-repeat: no-repeat;
        background-position: 7px 46%, center center;
        border: 1px outset;
        border-color: dimgray;

    }

    .excelbutton:active {
        background: rgb(226,226,226); /* Old browsers */
        background-image: url('../images/ms_excel.gif');
        background-image: url('../images/ms_excel.gif'), -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */
        background-image: url('../images/ms_excel.gif'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */
        background-image: url('../images/ms_excel.gif'), -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */
        background-image: url('../images/ms_excel.gif'), -o-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */
        background-image: url('../images/ms_excel.gif'), -ms-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */
        background-image: url('../images/ms_excel.gif'), linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */
        background-repeat: no-repeat;
        background-position: 7px 46%, center center;
        border: 1px inset;
        border-color: dimgray;
    }

    .excelbutton:disabled,
    .excelbutton:disabled:hover {
        background: rgb(160,160,160); /* Old browsers */
        background-image: url('../images/ms_excel.gif');
        background-image: url('../images/ms_excel.gif'), -moz-linear-gradient(top, rgba(174,174,174,1) 0%, rgba(169,169,169,1) 50%, rgba(162,162,162,1) 51%, rgba(193,193,193,1) 100%); /* FF3.6+ */
        background-image: url('../images/ms_excel.gif'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(174,174,174,1)), color-stop(50%,rgba(169,169,169,1)), color-stop(51%,rgba(162,162,162,1)), color-stop(100%,rgba(193,193,193,1))); /* Chrome,Safari4+ */
        background-image: url('../images/ms_excel.gif'), -webkit-linear-gradient(top, rgba(174,174,174,1) 0%,rgba(169,169,169,1) 50%,rgba(162,162,162,1) 51%,rgba(193,193,193,1) 100%); /* Chrome10+,Safari5.1+ */
        background-image: url('../images/ms_excel.gif'), -o-linear-gradient(top, rgba(174,174,174,1) 0%,rgba(169,169,169,1) 50%,rgba(162,162,162,1) 51%,rgba(193,193,193,1) 100%); /* Opera 11.10+ */
        background-image: url('../images/ms_excel.gif'), -ms-linear-gradient(top, rgba(174,174,174,1) 0%,rgba(169,169,169,1) 50%,rgba(162,162,162,1) 51%,rgba(193,193,193,1) 100%); /* IE10+ */
        background-image: url('../images/ms_excel.gif'), linear-gradient(to bottom, rgba(174,174,174,1) 0%,rgba(169,169,169,1) 50%,rgba(162,162,162,1) 51%,rgba(193,193,193,1) 100%); /* W3C */
        background-repeat: no-repeat;
        background-position: 7px 46%, center center;
        cursor: auto;
    }
