/* Copyright 2012-2013 Metropolitan Life Insurance, All Rights Reserved */

/********************************************************
	CSS module for defining styling for the dijit/form/Button widget.
    Assumes it's extending the Claro theme. 
*********************************************************/

/* attempt to avoid/reduce FOUC */
BUTTON[data-dojo-type] {
	height: 32px;
	margin: 2px; border: none; padding: 0px;
	visibility: hidden;
	
}
.metlife.phoenix .dijitButton {
	/* ecch...to get the button states "just right" we need to use BG images
	   which unfortunately locks the button height at 32px;
	 */
	 background-image: url('../img/sprite-button1.png');
	 background-position: left 0px;
	 background-color: transparent;
	 border: none;
	 border-radius: 0px;
	 box-shadow: none;
	 margin: 2px;
	 margin-right: 0px;
	 height: 32px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}
.metlife.phoenix .dijitButton .dijitButtonNode {
	background-image: url('../img/sprite-button1-c.png');
	 background-position: right 0px;
	 background-repeat: no-repeat;
	 background-color: transparent;
	 border: none;
	 border-radius: 0px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	 margin: 0px;
	 margin-right: -4px;
	height: 26px; /* FIXME why do i need this...feels kludgy */
	 
}
.metlife.phoenix .dijitButton.dijitButtonHover {
	background-position: left -34px;
}
.metlife.phoenix .dijitButton.dijitButtonHover  .dijitButtonNode {
	background-position: right -34px;
}
.metlife.phoenix .dijitButton.dijitButtonActive {
	background-position: left -68px;
}
.metlife.phoenix .dijitButton.dijitButtonActive  .dijitButtonNode {
	background-position: right -68px;
}

.metlife.phoenix .dijitButton .dijitButtonText {
	color: white;
	font-size:13px;
	font-family: "Frutiger", Arial, Helvetica, sans-serif;
	padding-left: 9px;
	padding-right: 9px;
	padding-top: .4em; /* FIXME leftover from CSS gradient style -- should be better tuned to support absolute pixel styling */
	padding-bottom: .4em;
	text-shadow: #388CB4 0px -1px 0px;
	outline: none;
}
.metlife.phoenix .dijitButton.c4 .dijitButtonText {
	text-shadow: #595959 0px -1px 0px;
}
/* Additional Button Colors */


.metlife.phoenix .dijitButton.c2 {
	background-image: url('../../cms/img/sprite-button2.png');
}
.metlife.phoenix .dijitButton.c2 .dijitButtonNode{
	background-image: url('../../cms/img/sprite-button2-c.png');
}
.metlife.phoenix .dijitButton.c2 .dijitButtonText {
	text-shadow: #688288 0px -1px 0px;
}

.metlife.phoenix .textPreferenceSubmit .dijitButtonText{
	padding-top: 0em;
	padding-bottom: 0em;
}

.metlife.phoenix .dijitButton.loginButton {
	/* ecch...to get the button states "just right" we need to use BG images
	   which unfortunately locks the button height at 32px;
	 */
	 background-image: url('../../cms/img/sprite-button1.png');
	 background-position: left 0px;
	 background-color: transparent;
	 border: none;
	 border-radius: 0px;
	 box-shadow: none;
	 margin: 2px;
	 margin-right: 0px;
	 height: 32px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}
.metlife.phoenix .dijitButton.loginButton  .dijitButtonNode{
	background-image: url('../../cms/img/sprite-button1-c.png');
	 background-position: right 0px;
	 background-repeat: no-repeat;
	 background-color: transparent;
	 border: none;
	 border-radius: 0px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	 margin: 0px;
	 margin-right: -4px;
	height: 26px; /* FIXME why do i need this...feels kludgy */
	 
}
.metlife.phoenix .dijitButton.loginButton.dijitButtonHover {
	background-position: left -34px;
}
.metlife.phoenix .dijitButton.dijitButtonHover.loginButton  .dijitButtonNode {
	background-position: right -34px;
}
.metlife.phoenix .dijitButton.loginButton.dijitButtonActive {
	background-position: left -68px;
}
.metlife.phoenix .dijitButton.loginButton.dijitButtonActive  .dijitButtonNode {
	background-position: right -68px;
}

.metlife.phoenix .dijitButton .loginButton.dijitButtonText {
	color: white;
	font-size:13px;
	font-family: "Frutiger", Arial, Helvetica, sans-serif;
	padding-left: 9px;
	padding-right: 9px;
	padding-top: .4em; /* FIXME leftover from CSS gradient style -- should be better tuned to support absolute pixel styling */
	padding-bottom: .4em;
	text-shadow: #388CB4 0px -1px 0px;
	outline: none;
}


.metlife.phoenix .dijitButton.c3,
.metlife.phoenix .dijitButton.callToAction
 {
	background-image: url('../img/sprite-button3.png');
	height: 26px;
}
.metlife.phoenix .dijitButton.c3 .dijitButtonNode,
.metlife.phoenix .dijitButton.callToAction .dijitButtonNode{
	background-image: url('../img/sprite-button3-c.png');
	height: 20px;
}

.metlife.phoenix .dijitButton.c3 .dijitButtonText,
.metlife.phoenix .dijitButton.callToAction .dijitButtonText{
	padding-top: .2em; /* FIXME leftover from CSS gradient style -- should be better tuned to support absolute pixel styling */
	padding-bottom: .2em;
}

.metlife.phoenix .dijitButton.c3.dijitButtonHover,
.metlife.phoenix .dijitButton.callToAction.dijitButtonHover {
	background-position: left -28px;
}
.metlife.phoenix .dijitButton.c3.dijitButtonHover .dijitButtonNode,
.metlife.phoenix .dijitButton.callToAction.dijitButtonHover .dijitButtonNode {
	background-position: right -28px;
}
.metlife.phoenix .dijitButton.c3.dijitButtonActive,
.metlife.phoenix .dijitButton.callToAction.dijitButtonActive {
	background-position: left -56px;
}
.metlife.phoenix .dijitButton.c3.dijitButtonActive .dijitButtonNode,
.metlife.phoenix .dijitButton.callToAction.dijitButtonActive .dijitButtonNode {
	background-position: right -56px;
}

.metlife.phoenix .dijitButton.c3,
.metlife.phoenix .dijitButton.callToAction
 {
	background-image: url('../img/sprite-button3.png');
	height: 26px;
}
.metlife.phoenix .dijitButton.c3 .dijitButtonNode,
.metlife.phoenix .dijitButton.callToAction .dijitButtonNode{
	background-image: url('../img/sprite-button3-c.png');
	height: 20px;
}

.metlife.phoenix .dijitButton.c3 .dijitButtonText,
.metlife.phoenix .dijitButton.callToAction .dijitButtonText{
	padding-top: .2em; /* FIXME leftover from CSS gradient style -- should be better tuned to support absolute pixel styling */
	padding-bottom: .2em;
}

.metlife.phoenix .dijitButton.c3.dijitButtonHover,
.metlife.phoenix .dijitButton.callToAction.dijitButtonHover {
	background-position: left -28px;
}
.metlife.phoenix .dijitButton.c3.dijitButtonHover .dijitButtonNode,
.metlife.phoenix .dijitButton.callToAction.dijitButtonHover .dijitButtonNode {
	background-position: right -28px;
}
.metlife.phoenix .dijitButton.c3.dijitButtonActive,
.metlife.phoenix .dijitButton.callToAction.dijitButtonActive {
	background-position: left -56px;
}
.metlife.phoenix .dijitButton.c3.dijitButtonActive .dijitButtonNode,
.metlife.phoenix .dijitButton.callToAction.dijitButtonActive .dijitButtonNode {
	background-position: right -56px;
}



.metlife.phoenix .dijitButton.c4,
.metlife.phoenix .dijitButton.callToAction
 {
	background-image: url('../img/sprite-button4.png');
	height: 26px;
}
.metlife.phoenix .dijitButton.c4 .dijitButtonNode,
.metlife.phoenix .dijitButton.callToAction .dijitButtonNode{
	background-image: url('../img/sprite-button4-c.png');
	height: 20px;
}

.metlife.phoenix .dijitButton.c4 .dijitButtonText,
.metlife.phoenix .dijitButton.callToAction .dijitButtonText{
	padding-top: .2em; /* FIXME leftover from CSS gradient style -- should be better tuned to support absolute pixel styling */
	padding-bottom: .2em;
}

.metlife.phoenix .dijitButton.c4.dijitButtonHover,
.metlife.phoenix .dijitButton.callToAction.dijitButtonHover {
	background-position: left -28px;
}
.metlife.phoenix .dijitButton.c4.dijitButtonHover .dijitButtonNode,
.metlife.phoenix .dijitButton.callToAction.dijitButtonHover .dijitButtonNode {
	background-position: right -28px;
}
.metlife.phoenix .dijitButton.c4.dijitButtonActive,
.metlife.phoenix .dijitButton.callToAction.dijitButtonActive {
	background-position: left -56px;
}
.metlife.phoenix .dijitButton.c4.dijitButtonActive .dijitButtonNode,
.metlife.phoenix .dijitButton.callToAction.dijitButtonActive .dijitButtonNode {
	background-position: right -56px;
}
.metlife.phoenix .dijitButton.metlifeSecondaryAction,
.metlife.phoenix .dijitButton.secondaryAction
{
	background: none !important;
	margin-right: 2px;
}
.metlife.phoenix .dijitButton.metlifeSecondaryAction .dijitButtonNode,
.metlife.phoenix .dijitButton.secondaryAction .dijitButtonNode
{
	background: none !important;
	margin-right: 0px;
}
.metlife.phoenix .dijitButton.metlifeSecondaryAction .dijitButtonText, 
.metlife.phoenix .dijitButton.secondaryAction .dijitButtonText
{
	color: #007CC2;
	text-decoration: none;
	text-shadow: none;
	background-color: inherit !important;
	padding-left: 10px;
}
.metlife.phoenix.claro .profilesection .dijitButton.secondaryAction .dijitButtonText{
	text-decoration: none;
}
/********************************************************
		Added for Page differentiation and overlay
*********************************************************/

.metlife.phoenix .dijitButton.secondaryAction.secondaryActionPage .dijitButtonText{
	text-decoration: none;
}
.metlife.phoenix .dijitButtonHover.metlifeSecondaryAction .dijitButtonText, 
.metlife.phoenix .dijitButtonHover.secondaryAction .dijitButtonText 
{
	color: #7EB764;
}

.metlife.phoenix .dijitButton.c5 {
	background-image: url('../img/sprite-button2.png');
}
.metlife.phoenix .dijitButton.c5 .dijitButtonNode{
	background-image: url('../img/sprite-button2-c.png');
}
.metlife.phoenix .dijitButton.c5 .dijitButtonText {
	text-shadow: #688288 0px -1px 0px;
}
/********************************************************
				Radios / Checkboxes
*********************************************************/
.metlife.phoenix .dijitRadio {
	background-image: url('../img/sprite-cb.png');
	background-position: -1px -2px;
	width: 16px; height: 16px;
	float: left;
	margin: 0 5px 0 0;
}
.metlife.phoenix .dijitRadioChecked {
	background-position: -1px -21px;
}
.metlife.phoenix .dijitCheckBox {
	background-image: url('../img/sprite-cb.png');
	background-position: 1px -40px;
	width: 18px; height: 20px;
	margin-top: -3px; /* FIXME transparent BG required in sprite */
}
.metlife.phoenix .dijitCheckBoxChecked {
	background-position: 0px -58px;
}
/********************************************************
	Disabled Button 
*********************************************************/

.metlife.phoenix .dijitButton.dijitButtonDisabled {
	background-image: url('../img/sprite-button-disabled.png');
}
.metlife.phoenix .dijitButton.dijitButtonDisabled .dijitButtonNode{
	background-image: url('../img/sprite-button-disabled-c.png');
	margin-right: -11px;
}
.metlife.phoenix .dijitButton.dijitButtonDisabled .dijitButtonText {
	text-shadow: none;
}

/********************************************************
	Button like Anchor
*********************************************************/
.buttonLikeAnchor {
	display:inline-block;
	margin: 2px 0px 2px 2px;
	padding: 0px 0px 0px 12px;
	height: 32px;
	background-image: url('../img/sprite-button1.png');
	background-position: left 0px;
	background-color: rgba(0, 0, 0, 0);
	border: none;
	border-radius: 0px;
	box-shadow: none;
}
.buttonLikeAnchor span {
	display: inline-block;
	margin: 0px -4px 0 0;
	padding: 8px 12px 0 0;
	height: 26px;
	background-image: url('../img/sprite-button1-c.png');
	background-position: right 0px;
	background-repeat: no-repeat;
	background-color: rgba(0, 0, 0, 0);
	border: none;
	border-radius: 0px;
	box-shadow: none;
	text-shadow: rgb(56, 140, 180) 0px -1px 0px;
	color:#ffffff;
}
.buttonLikeAnchor:hover {
	background-position: left -34px;
}
.buttonLikeAnchor:hover span{
	background-position: right -34px;
}
.buttonLikeAnchor:active {
	background-position: left -68px;
}
.buttonLikeAnchor:active span{
	background-position: right -68px;
}

/** Button with black background **/
.metlife.phoenix .dijitButton.c6 {
	background-image: url('../../cms/img/sprite-button3.png');
}
.metlife.phoenix .dijitButton.c6 .dijitButtonNode{
	background-image: url('../../cms/img/sprite-button3-c.png');
}