/*  
    Basic Imageless Button Style Template
        by David Potsiadlo
        last modified February 17, 2008
  
    Applies a basic background color and borders to create a shadow effect. 
    Includes three button sizes & two button shades.
    Also includes form input button styling (at the bottom).
    Tested in FF, IE6/7, Safari, Chrome

    Use the following HTML to see a sample of the styles in action:

        <p><a href="" class="make-button">Login</a> <a href="" class="make-button-alt">Wonderful</a></p>
        <p><a href="" class="make-button-small">Login</a> <a href="" class="make-button-alt-small">Wonderful</a></p>
        <p><a href="" class="make-button-smaller">Login</a> <a href="" class="make-button-alt-smaller">Wonderful</a></p>
        <p><form><input type="submit" value="Login" class="make-button-form" /></form></p>

/* -------------------------------------------------------------------- */

/* -------- Button Sizes --------- */

        .make-button,
        .make-button-alt {
            font-size: 13px;
            line-height: 26px;
            padding: 0 12px;
        }
        
        .make-button-small,
        .make-button-alt-small {
            font-size: 11px;
            line-height: 18px;
            padding: 0 7px;
        }      
        
        .make-button-smaller,
        .make-button-alt-smaller {
            font-size: 11px;
            line-height: 14px;
            padding: 0 5px;
        }          

/* -------- Button Colors --------- */

        .make-button,
        .make-button-small,
        .make-button-smaller,
        .make-button:hover,
        .make-button-small:hover,
        .make-button-smaller:hover {
            color: #fff;    
            display: inline-block;
            background: #3e6fae;    
            border: 1px solid #3e6fae;
            border-bottom: 1px solid #254774;
            border-right: 1px solid #254774;
        }

        .make-button-alt,
        .make-button-alt-small,
        .make-button-alt-smaller,
        .make-button-alt:hover,
        .make-button-alt-small:hover,
        .make-button-alt-smaller:hover {
            color: #fff;    
            display: inline-block;
            background: #737373;                
            border: 1px solid #737373;
            border-bottom: 1px solid #444;
            border-right: 1px solid #444;   
        }

/* -------- Form Input --------- */

        input.make-button-form {
            background: #3e6fae;
            border: 1px solid #3e6fae;
            border-bottom: 1px solid #254774;
            border-right: 1px solid #254774;
            color: #fff;
            cursor: pointer;
            font-size: 13px;
            padding: 3px 10px;
        }