/*---------- left aligned button ----------*/
.btn
{
    display: block;
    position: relative;
    background: #f0f0f0;
    padding: 8px;
    margin: 0px;
    float: left;
    color: #333;
    text-decoration: none;
    cursor: pointer;    
}
.btn i,.btn span
{
    font-style: normal;
    background-image: url('Images/btn/btnframe.png');
    background-repeat: no-repeat;
    display: block;
    position: relative;
    font-size:11pt;
}
.btn i
{
    background-position: top left;
    position: absolute;
    margin-bottom: -8px;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
}

.btn img
{
    border:0;
}

.btn span
{
    background-position: bottom left;
    left: -8px;
    padding: 0 0 8px 16px;
    margin-bottom: -8px;
}
.btn span i
{
    background-position: bottom right;
    margin-bottom: 0;
    position: absolute;
    left: 100%;
    width: 16px;
    height: 100%;
    top: 0;
}
.btn span span
{
    background-position: top right;
    position: absolute;
    right: -16px;
    margin-left: 16px;
    top: -8px;
    height: 0;
}

* html .btn span, * html .btn i
{
    float: left;
    width: auto;
    background-image: none;
    cursor: pointer;
}

.btn:hover
{
    background-color: #dedede;
    color: #333;
    text-decoration:none;
}
.btn:active
{
    background-color: #f0f0f0;
    color: #333;
}
.btn[class]
{
    background-image: url('Images/btn/transgradient.png');
    background-position: bottom;
}

* html .btn
{
    border: 3px double #aaa;
}

* html .btn:hover
{
    border-color: #dedede;
}
.btn.red { background-color: #bE0000; color:White; }
.btn.red:hover { background-color: #aE0000; color:White; }