.ui-widget button.btn {
      font-family:Verdana, Arial, Helvetica, sans-serif;
	  font-size:10px;
} 
   /* Start custom button CSS here
    ---------------------------------------- */
    .btn {
      display:inline-block;
      background:none;
      margin:0;
      padding:3px 0;
      border-width:0;
      overflow:visible;
      font-family:Verdana, Arial, Helvetica, sans-serif;
	  font-size:10px;
      text-decoration:none;
      color:#333;
	  outline:none;
      }
    * html button.btn {
      padding-bottom:1px;
      }
    /* Immediately below is a temporary hack to serve the 
       following margin values only to Gecko browsers
       Gecko browsers add an extra 3px of left/right 
       padding to button elements which can't be overriden.
       Thus, we use -3px of left/right margin to overcome this. */
    html:not([lang*=""]) button.btn {
      margin:0 -3px;
      }
    .btn span {
      background:#f9f9f9;
      z-index:1;
      margin:0;
      padding:3px 0;
      border-left:1px solid #ccc;
      border-right:1px solid #bbb;
      }
    * html .btn span {
      padding-top:0;
      }
    .btn span span {
      background:none;
      position:relative;
      padding:3px .4em;
      border-width:0;
      border-top:1px solid #ccc;
      border-bottom:1px solid #bbb;
      }
    .btn b {
      background:#e3e3e3;
      position:absolute;
      z-index:2;
      bottom:0;
      left:0;
      width:100%;
      overflow:hidden;
      height:40%;
      border-top:3px solid #eee;
      }
    * html .btn b {
      top:1px;
      }
    .btn span span u {
		text-decoration:none;
		position:relative; 
		z-index:99;
      }
    
    /* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
    button.pill-l span {
      border-right-width:0;
      }
    button.pill-l span span {
      border-right:1px solid #ccc;
      }
    button.pill-c span {
      border-right-style:none;
      border-left-color:#fff;
      }
    button.pill-c span span {
      border-right:1px solid #ccc;
      }
    button.pill-r span {
      border-left-color:#fff;
      }
    
    /* only needed if implementing separate hover state for buttons */
    .btn:hover span, .btn:hover span span {
      cursor:pointer;
      border-color:#FEF7D3 !important;
      color:#f7f7f7;
      }
    
    /* use if one button should be the 'primary' button */
    .primary {
      font-weight:bold;
      color:#000;
      }
	
	.btn.blue {
		font-size:11px;
		color:#fff;
	}
	.btn.blue b{
		background-color:#1C7497;
		border-color:#228EB7;	
	}	  
	.btn.blue span{
		background-color:#3EAFDB;
		border-left:1px solid #228EB7;
		border-right:1px solid #1C7497;		
	}	
	.btn.blue span span{	
	    border-top:1px solid #228EB7;
      	border-bottom:1px solid #1A6C8C;
	}
	
	.btn.green {
		font-size:11px;	
		color:#fff;
	}
	.btn.green b{
		background-color:#05972E;
		border-color:#05AD33;	
	}	  
	.btn.green span{
		background-color:#06BD3A;
		border-left:1px solid #05972E;
		border-right:1px solid #048C29;				
	}	
	.btn.green span span{	
	    border-top:1px solid #05972E;
      	border-bottom:1px solid #037022;
	}
	.btn.red {
		font-size:11px;
		color:#fff;
	}
	.btn.red b{
		background-color:#D50202;
		border-color:#E30202;
	}
	.btn.red span{
		background-color:#EE0202;
		border-left:1px solid #DF0202;
		border-right:1px solid #CA0202;
	}
	.btn.red span span{
	    border-top:1px solid #D50202;
      	border-bottom:1px solid #B50202;
	}
	.btn.orange {
		font-size:11px;
		color:#fff;
	}
	.btn.orange b{
		background-color:#F57800;
		border-color:#F28E1F;
	}
	.btn.orange span{
		background-color:#F4A246;
		border-left:1px solid #F07800;
		border-right:1px solid #F07800;
	}
	.btn.orange span span{
	    border-top:1px solid #F57800;
      	border-bottom:1px solid #F57800;
	}