<STYLE TYPE="text/css">
//
button { 
  width:auto; 
  overflow:visible; 
}
button span { 
  margin-top:1px; 
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

a.tfbutton{
background: transparent url(/images/tfbuttonleft.gif) no-repeat top left;
display: block;
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif; /* Change 13px as desired */
font-size: 12px;
font-weight:bold;
line-height: 13px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 21px; /* Height of button background height */
padding-left: 14px; /* Width of left menu image */
text-decoration: none;
cursor: pointer;
}

a:link.tfbutton, a:visited.tfbutton, a:active.tfbutton{
color: #FFFFFF; /*button text color*/
}

a.tfbutton span{
background: transparent url(/images/tfbuttonright.gif) no-repeat top right;
display: block;
padding: 4px 14px 4px 0; /*Set 8px below to match value of 'padding-left' value above*/
width:50px; /* can be upto width of right button  - 8px */
text-align:center;
}

a.tfbutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.tfbutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color:#CCCCCC;
}


 /*******************************************************************************************/


a.tfbutton_lg{
background: transparent url(/images/tfbuttonleft.gif) no-repeat top left;
display: block;
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif; /* Change 13px as desired */
font-size: 12px;
font-weight:bold;
line-height: 13px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 21px; /* Height of button background height */
padding-left: 14px; /* Width of left menu image */
text-decoration: none;
cursor: pointer;
}

a:link.tfbutton_lg, a:visited.tfbutton, a:active.tfbutton{
color: #FFFFFF; /*button text color*/
}

a.tfbutton_lg span{
background: transparent url(/images/tfbuttonright.gif) no-repeat top right;
display: block;
padding: 4px 14px 4px 0; /*Set 8px below to match value of 'padding-left' value above*/
width:60px; /* can be upto width of right button  - 8px */
text-align:center;
}

a.tfbutton_lg:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.tfbutton_lg:hover span{ /* Hover state CSS */
background-position: bottom right;
color:#CCCCCC;
}


</STYLE>

