/* -------- Top Navigation Off -------- */

a.tabbutton{
background: transparent url('http://www.cmsfx.com/resources/graphix/0009/cms_forex_031009_redesign_tab_left.png') no-repeat top left;
display: block;
float: left;
font: normal 12px "Lucida Grande", Lucida sans, Trebuchet MS, Helvetica; /* Change 13px as desired */
line-height: 21px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 29px; /* Height of button background height */
padding-left: 16px; /* Width of left menu image */
text-decoration: none;
vertical-align: bottom;
}

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

a.tabbutton span{
background: transparent url('http://www.cmsfx.com/resources/graphix/0009/cms_forex_031009_redesign_tab_right_long.png') no-repeat top right;
display: block;
padding: 6px 16px 2px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

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

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

.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%;
}

/* -------- Top Navigation On -------- */

a.tabonbutton{
background: transparent url('http://www.cmsfx.com/resources/graphix/0009/cms_forex_031009_redesign_tab_left_on.png') no-repeat top left;
display: block;
float: left;
font: normal 12px "Lucida Grande", Lucida sans, Trebuchet MS, Helvetica; /* Change 13px as desired */
line-height: 21px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 29px; /* Height of button background height */
padding-left: 16px; /* Width of left menu image */
text-decoration: none;
}

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

a.tabonbutton span{
background: transparent url('http://www.cmsfx.com/resources/graphix/0009/cms_forex_031009_redesign_tab_right_on_long.png') no-repeat top right;
display: block;
padding: 6px 16px 2px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

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

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

.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%;
}

/* -------- Blue Button -------- */
a.blue_button{
	background: transparent url('http://www.cmsfx.com/resources/graphix/0008/cms_redesign_blue_button_left.png') no-repeat top left;
	display: block;
	float: left; /* Change 13px as desired */
	line-height: 18px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
	height: 18px; /* Height of button background height */
	padding-left: 10px; /* Width of left menu image */
	text-decoration: none;
	font-family: "Lucida Grande", Lucida sans, Trebuchet MS, Helvetica;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
}

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

a.blue_button span{
background: transparent url('http://www.cmsfx.com/resources/graphix/0008/cms_redesign_blue_button_right.png') no-repeat top right;
display: block;
padding: 0px 10px 0px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

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

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

.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%;
}

/* -------- Blue Right Align -------- */

a.blueright_button{
	background: transparent url('http://www.cmsfx.com/resources/graphix/0008/cms_redesign_blue_button_left.png') no-repeat top left;
	display: block;
	float: right; /* Change 13px as desired */
	line-height: 18px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
	height: 18px; /* Height of button background height */
	padding-left: 10px; /* Width of left menu image */
	text-decoration: none;
	font-family: "Lucida Grande", Lucida sans, Trebuchet MS, Helvetica;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
}

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

a.blueright_button span{
background: transparent url('http://www.cmsfx.com/resources/graphix/0008/cms_redesign_blue_button_right.png') no-repeat top right;
display: block;
padding: 0px 10px 0px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

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

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

.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%;
}

/* -------- Light Blue Search Button -------- */

a.lightblueright_button{
	background: transparent url('http://www.cmsfx.com/resources/graphix/0009/cms_redesign_light_blue_button_left.png') no-repeat top left;
	display: block;
	float: right; /* Change 13px as desired */
	line-height: 19px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
	height: 19px; /* Height of button background height */
	padding-left: 10px; /* Width of left menu image */
	text-decoration: none;
	font-family: "Lucida Grande", Lucida sans, Trebuchet MS, Helvetica;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
}

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

a.lightblueright_button span{
background: transparent url('http://www.cmsfx.com/resources/graphix/0009/cms_redesign_light_blue_button_right.png') no-repeat top right;
display: block;
padding: 0px 10px 0px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

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

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

.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%;
}

/* -------- Orange Button -------- */

a.orangeright_button{
	background: transparent url('http://www.cmsfx.com/resources/graphix/0010/cms_redesign_oranage_button_left.png') no-repeat top left;
	display: block;
	float: right; /* Change 13px as desired */
	line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
	height: 22px; /* Height of button background height */
	padding-left: 10px; /* Width of left menu image */
	text-decoration: none;
	font-family: "Lucida Grande", Lucida sans, Trebuchet MS, Helvetica;
	font-size: 10px;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
}

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

a.orangeright_button span{
background: transparent url('http://www.cmsfx.com/resources/graphix/0010/cms_redesign_oranage_button_right.png') no-repeat top right;
display: block;
padding: 0px 10px 0px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

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

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

.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%;
}