a.navButton
{
	display: inline-block;
	font: bold 14px "Trebuchet MS", Verdana, Arial, Serif;
	text-decoration: none;
	color: #fff;
	outline: none;
	background: url(images/btnGradient.png) no-repeat left top;
	line-height: 40px;
	padding-left: 10px;
}
a.navButton:hover { background-color: /*#9900CC*/ darkred; }

a.navButton span
{
	line-height: 40px;
	display: block;
	padding-right: 10px;
	background: url(images/btnGradient.png) no-repeat right bottom;
}
.button span
{
 
}
/*---Adjustable Color Classes--*/
 
a.red { background-color: red;}
a.green { background-color: green;}
a.orange { background-color: orange;}
a.blue { background-color: blue;}
a.darkblue { background-color: darkblue;}
a.disabled { background-color: #303030; cursor: default}
a.disabled:hover {background-color: #303030;} /* override previous hover */



/*

    <ul> 
        <li> 
            <a href="#" class="button red" title="red button"><span>Buttons</span></a> 
        </li> 
        <li> 
            <a href="#" class="button green" title="green button"><span>liquid up to a fixed width size.</span></a> 
        </li> 
        <li> 
            <a href="#" class="button orange" title="orange button"><span>which in this example, its 600px...</span></a> 
        </li> 
        <li> 
            <a href="#" class="button blue" title="blue button"><span>If you want it wider, just increase width of the image.</span></a> 
        </li> 
    </ul> 
    
*/