.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.MenuButton{
	background: transparent url('square-green-left.gif') no-repeat top left;
	display			: block;
	float				: left;
	font				: bold 12px Arial; /* Change 12px as desired */
	line-height	: 15px;							 /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
	height			: 23px; 						 /* Height of button background height */
	padding-left: 9px; 							 /* Width of left menu image */
	padding-right:20px;
	text-decoration	: none;
	color: Blue;										/*button text color*/
}

a.MenuButtonSelected{
	background: transparent url('square-red-left.gif') no-repeat top left;
	display			: block;
	float				: left;
	font				: bold 12px Arial;	/* Change 12px as desired */
	line-height	: 15px;							/* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
	height			: 23px; 						/* Height of button background height */
	padding-left: 9px; 							/* Width of left menu image */
	padding-right:20px;
	text-decoration: none;
	color: red; 										/*button text color*/
}

a.MenuButtonSelected span{
	background: transparent url('square-red-right.gif') no-repeat top right;
	display		: block;
	padding		: 4px 9px 4px 4px; /*Set to match 'padding-left' value in MenuButtonSelected*/
}


a:link.MenuButton, a:visited.MenuButton, a:active.MenuButton{
	color: blue; /*button text color*/
}

a.MenuButton span{
	background: transparent url('square-green-right.gif') no-repeat top right;
	display		: block;
	padding		: 4px 9px 4px 4px; /*Set to match 'padding-left' value in MenuButtonSelected*/
}

a.MenuButton:hover{ /* Hover state CSS */
	background-position: bottom left;
}

a.MenuButton:hover span{ /* Hover state CSS */
	background-position: bottom right;
	color: red;
}