a.brownsquarebutton{
background: transparent url('../../assets/images/buttons/square-brown-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px 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 */
text-decoration: none;
}

a:link.brownsquarebutton, a:visited.brownsquarebutton, a:active.brownsquarebutton{
color: #fff; /*button text color*/
}

a.brownsquarebutton span{
background: transparent url('../../assets/images/buttons/square-brown-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

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

a.brownsquarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
cursor:pointer;
color: #fff;
}


a.bluesquarebutton{
background: transparent url('../../assets/images/buttons/square-blue-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px 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 */
text-decoration: none;
}

a:link.bluesquarebutton, a:visited.bluesquarebutton, a:active.bluesquarebutton{
color: #fff; /*button text color*/
}

a.bluesquarebutton span{
background: transparent url('../../assets/images/buttons/square-blue-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

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

a.bluesquarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: #fff;

}


a.redsquarebutton{
background: transparent url('images/square-red-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px 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 */
text-decoration: none;
}

a:link.redsquarebutton, a:visited.redsquarebutton, a:active.redsquarebutton{
color: #000; /*button text color*/
}

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

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

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



a.greensquarebutton{
background: transparent url('../../assets/images/buttons/square-green-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px 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 */
text-decoration: none;
}

a:link.greensquarebutton, a:visited.greensquarebutton, a:active.greensquarebutton{
color: #fff; /*button text color*/
}

a.greensquarebutton span{
background: transparent url('../../assets/images/buttons/square-green-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

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

a.greensquarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: #fff;
}




a.blacksquarebutton{
background: transparent url('images/square-black-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px 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 */
text-decoration: none;
}

a:link.blacksquarebutton, a:visited.blacksquarebutton, a:active.blacksquarebutton{
color: #fff; /*button text color*/
}

a.blacksquarebutton span{
background: transparent url('images/square-black-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

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

a.blacksquarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: #fff;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; 
width:100%;
}




a.menubutton{
background: transparent url('images/MenuTabsLeft.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Arial; /* Change 12px as desired */
line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 30px; /* Height of button background height */
padding-left: 14px; /* Width of left menu image */
text-decoration: none;
}

a:link.menubutton, a:visited.menubutton, a:active.menubutton{
color: #fff; /*button text color*/
margin-left: 2px;
}

a.menubutton span
{
	
background: transparent url('images/MenuTabsRight.gif') no-repeat top right;
display: block;
padding: 4px 15px 4px 0px; /*Set 9px below to match value of 'padding-left' value above*/
}

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

a.menubutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: #fff;
}


.menubuttonSelected{
background: transparent url('images/MenuTabsLeft.gif') no-repeat top left;
background-position: bottom left;
display: block;
float: left;
font: bold 13px Arial; /* Change 12px as desired */
line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 30px; /* Height of button background height */
padding-left: 14px; /* Width of left menu image */
text-decoration: none;
color: #fff;
margin-left: 2px;
}



.menubuttonSelected span{ /* Hover state CSS */
background: transparent url('images/MenuTabsRight.gif') no-repeat top right;
display: block;
padding: 4px 15px 4px 0px; /*Set 9px below to match value of 'padding-left' value above*/
background-position: bottom right;
}