/* BrandID = CAS is the default look and feel.  Branded Styles towards the bottom. */
body {background: #0561a8 url('../images/CAS/bg.png') repeat-x center top;}
	div#outerframe { width: 822px;}
	div#headerpush {display:none;} 

    /* WCAG setup - Note that they don't begin with "div" */
	#header { background-image:url('../images/CAS/Header.png'); height: 129px;}
	#middle { background-image:url('../images/CAS/Middle.png'); }	
	#footer { background-image:url('../images/CAS/Footer.png'); height: 63px;}	
	
	/* WCAG es-US  (You will still need this + the DesktopHeaderText variable in your config) */
	body.CAS_es-US #header { background-image:url('../images/CAS/Header_es-US.png');}
	body.CNW_es-US #header { background-image:url('../images/CNW/Header_es-US.png');}
	
	div#Progress {	background-image:url('../images/CAS/ProgressBar.png'); }

	/* New for WCAG Next Button, Back Button */
	input#NextButton {
		background-image: url('../images/CAS/Button.png');
		border-style: none;
		background-color: transparent;
		color: White;
		font-weight: bold;
		height: 35px;
		width: 115px;
		margin-left: 5px;
		margin-right: 5px;
	}	

/* Simple Radio Button & Checkbox */
.checkboxSimpleInput { background: url(../images/CAS/WSE_Checkboxes_@1x.png) no-repeat;}


/* Alt. Background Color */
.InputRowEven { background-color: #eeeeee; }

#content { margin:0 15px !important;} /* Required for Privacy Policy */
h2 {font-size: 1.2em;} /* Required for ADA Compliant Header Sizing */
h3 {font-size: 1.0em;}  /* Used for the Sweepstakes text below the start button - .2 smaller than h2 */


/* Translations will have lengthier text.  We can use this for US or en-GB text as well to help format the footer links. */
body.US #footer, body.es-US #footer {padding:5px 15px 0 15px !important;}
body.US #footerCRT, body.es-US #footerCRT {padding:5px 0px 0 0px !important;}



#footerCRT {
	padding: 0 6px;
	margin: 0;	
	position: relative;
}

#footerCRT li {
	list-style-type: none;
	float: left;
	text-align: right;
	margin: -.3em 0 0 1em;
}

body.IndexPage #surveyEntryForm, body.IndexPage div#Buttonholder {text-align:left;}


/* **** IndexPage PickLanguageLinks - WCAG **** */
ul.languageOption {width:100%;text-align:left;padding:0;margin:0;}
ul.languageOption li {display:block;margin-right:1em;}
div.languageOption {text-align: left !important;}


/* **** Finish Page *****/
div#finishContainer {text-align:left;margin:auto;}

div#connectContent ul {padding:0;margin:auto;}
div#connectContent ul li {display:inline;margin:0 auto;list-style:none;}

.ConnectOn p.connectHeader, .ConnectOn p.FinishHeader {font-weight:bold;font-size:1.4em;margin:auto;}
.ConnectOn div#finishIncentiveHolder
{
	padding:15px;
	margin:5px;
}
 
/* Change the background-color here to match the drop shadow of your Homepage/Loyalty button on the finish page. */
.ConnectOn div#finishConnectHolder 
{
	border:solid 1px #e4e4e4;
	padding:15px;
	margin:5px;
	background-color:#e4e4e4;
	-moz-border-radius:.2em;
	border-radius:.2em;
	-webkit-border-radius:.2em;
}
.ConnectOn div#finishIncentive {float:left;width:63%;}
.ConnectOn div#finishConnect {float:left;width:37%;text-align:center;}
.ConnectOn div#finishIncentive hr, .ConnectOn div#finishConnect hr {border:none;background-color:#cccccc;height:1px;margin:1em auto;}
.ConnectOn hr.connectHeaderRule {margin-top:.5em !important;}
.ConnectOn div#finishConnect div#connectContent div#connectSocial {text-align:left;padding-left:1.5em;}
.ConnectOn div#finishConnect div#connectContent div#connectSocial li {padding: 0 .25em;}

.ConnectOff p.connectHeader {display:none;}
.ConnectOff div#connectContent ul li {padding-right:1em;}
.ConnectOff div#finishConnect {text-align:center;}
.ConnectOff div#finishIncentive hr, .ConnectOff div#finishConnect hr {display:none;}
.SocialOff div#finishIncentive {float:none;margin:auto;}


/* Used to add padding to the Social buttons on the finish page for WCAG now that they use <span> */
a img {padding: 4px 4px !important;}


/* WCAG - control the color of the radio buttons (https://confluence.smg.com/pages/viewpage.action?spaceKey=WSE&title=Upgrading+to+WCAG+survey+setup) */
input[type="radio"] ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	/*  content: "\f6be";*/
	color: #de0b18; /* - Controls the color of the font awesome radio buttons before they are selected */
}

input[type="radio"]:checked ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	/*  content: "\f6be";*/
	color: #de0b18; /* - Controls the color of the font awesome radio buttons after they are selected */
}

/* **** Branded Looks **** */
/* CCW - Currently, looks just like the CAS look, but separating them to keep this project organized by BrandID. - T. Perez */
body.CCW {background: #0561a8 url('../images/CCW/bg.png') repeat-x center top;}

	body.CCW #header { background-image:url('../images/CCW/Header.png'); height: 129px;}
	body.CCW #middle { background-image:url('../images/CCW/Middle.png'); }	
	body.CCW #footer { background-image:url('../images/CCW/Footer.png'); height: 63px;}	
	
	body.CCW_es-US #header { background-image:url('../images/CCW/Header_es-US.png');}
	
	body.CCW div#Progress {	background-image:url('../images/CCW/ProgressBar.png'); }

	body.CCW input#NextButton {
		background-image: url('../images/CCW/Button.png');
		border-style: none;
		background-color: transparent;
		color: White;
		font-weight: bold;
		height: 35px;
		width: 115px;
		margin-left: 5px;
		margin-right: 5px;
	}	

/* Simple Radio Button & Checkbox */
body.CCW .checkboxSimpleInput { background: url(../images/CCW/WSE_Checkboxes_@1x.png) no-repeat;}

/* CNW - Currently, looks just like the CAS look, but separating them to keep this project organized by BrandID. - T. Perez */
body.CNW {background: #0561a8 url('../images/CNW/bg.png') repeat-x center top;}

	body.CNW #header { background-image:url('../images/CNW/Header.png'); height: 129px;}
	body.CNW #middle { background-image:url('../images/CNW/Middle.png'); }	
	body.CNW #footer { background-image:url('../images/CNW/Footer.png'); height: 63px;}	
	
	body.CNW_es-US #header { background-image:url('../images/CNW/Header_es-US.png');}
	
	body.CNW div#Progress {	background-image:url('../images/CNW/ProgressBar.png'); }

	body.CNW input#NextButton {
		background-image: url('../images/CNW/Button.png');
		border-style: none;
		background-color: transparent;
		color: White;
		font-weight: bold;
		height: 35px;
		width: 115px;
		margin-left: 5px;
		margin-right: 5px;
	}	

/* Simple Radio Button & Checkbox */
body.CNW .checkboxSimpleInput { background: url(../images/CNW/WSE_Checkboxes_@1x.png) no-repeat;}



/*      FCW, FNY, FPH sharing FCW look and feel      */
body.FCW {background: #ce0e2d url('../images/FCW/bg.png') repeat-x center top;}
body.FNY {background: #ce0e2d url('../images/FCW/bg.png') repeat-x center top;}
body.FPH {background: #ce0e2d url('../images/FCW/bg.png') repeat-x center top;}

	body.FCW #header , body.FNY #header , body.FPH #header { background-image:url('../images/FCW/Header.png'); height: 129px;}
	body.FCW #middle, body.FNY #middle, body.FPH #middle { background-image:url('../images/FCW/Middle.png'); }	
	body.FCW #footer, body.FNY #footer, body.FPH #footer { background-image:url('../images/FCW/Footer.png'); height: 63px;}	
	
	body.FCW_es-US #header, body.FNY_es-US #header, body.FPH_es-US #header { background-image:url('../images/FCW/Header_es-US.png');}
	
	body.FCW div#Progress, body.FNY div#Progress, body.FPH div#Progress {	background-image:url('../images/FCW/ProgressBar.png'); }

	body.FCW input#NextButton, body.FNY input#NextButton, body.FPH input#NextButton {
		background-image: url('../images/FCW/Button.png');
		border-style: none;
		background-color: transparent;
		color: White;
		font-weight: bold;
		height: 35px;
		width: 115px;
		margin-left: 5px;
		margin-right: 5px;
	}	

/* Simple Radio Button & Checkbox */
body.FCW .checkboxSimpleInput, body.FNY .checkboxSimpleInput, body.FPH .checkboxSimpleInput { background: url(../images/FCW/WSE_Checkboxes_@1x.png) no-repeat;}

	body.FCW #footer, body.FCW #footer a, body.FNY #footer, body.FNY #footer a, body.FPH #footer, body.FPH #footer a {
		color: white !important;
	}


body.FCW input[type="radio"] ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	color: #1d1d1d;
}

body.FCW input[type="radio"]:checked ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	color: #1d1d1d;
}

body.FNY input[type="radio"] ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	color: #1d1d1d;
}

body.FNY input[type="radio"]:checked ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	color: #1d1d1d;
}

body.FPH input[type="radio"] ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	color: #1d1d1d;
}

body.FPH input[type="radio"]:checked ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	color: #1d1d1d;
}

/*      FNE      */
body.FNE {background: #ce0e2d url('../images/FNE/bg.png') repeat-x center top;}

	body.FNE #header { background-image:url('../images/FNE/Header.png'); height: 129px;}
	body.FNE #middle { background-image:url('../images/FNE/Middle.png'); }	
	body.FNE #footer { background-image:url('../images/FNE/Footer.png'); height: 63px;}	
	
	body.FNE_es-US #header { background-image:url('../images/FNE/Header_es-US.png');}
	
	body.FNE div#Progress {	background-image:url('../images/FNE/ProgressBar.png'); }

	body.FNE input#NextButton {
		background-image: url('../images/FNE/Button.png');
		border-style: none;
		background-color: transparent;
		color: White;
		font-weight: bold;
		height: 35px;
		width: 115px;
		margin-left: 5px;
		margin-right: 5px;
	}	

/* Simple Radio Button & Checkbox */
body.FNE .checkboxSimpleInput { background: url(../images/FNE/WSE_Checkboxes_@1x.png) no-repeat;}

body.FNE #footer, body.FNE #footer a {
	color: white !important;
}


body.FNE input[type="radio"] ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	color: #1d1d1d; 
}

body.FNE input[type="radio"]:checked ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	color: #1d1d1d;
}


/*      OEA      */
body.OEA {background: #1f4491 url('../images/OEA/bg.png') repeat-x center top;}

	body.OEA #header { background-image:url('../images/OEA/Header.png'); height: 129px;}
	body.OEA #middle { background-image:url('../images/OEA/Middle.png'); }	
	body.OEA #footer { background-image:url('../images/OEA/Footer.png'); height: 63px;}	
	
	body.OEA_es-US #header { background-image:url('../images/OEA/Header_es-US.png');}
	
	body.OEA div#Progress {	background-image:url('../images/OEA/ProgressBar.png'); }

	body.OEA input#NextButton {
		background-image: url('../images/OEA/Button.png');
		border-style: none;
		background-color: transparent;
		color: White;
		font-weight: bold;
		height: 35px;
		width: 115px;
		margin-left: 5px;
		margin-right: 5px;
	}	

/* Simple Radio Button & Checkbox */
body.OEA .checkboxSimpleInput { background: url(../images/OEA/WSE_Checkboxes_@1x.png) no-repeat;}

body.OEA #footer, body.OEA #footer a {
	color: black !important;
}

body.OEA input[type="radio"] ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	color: #8c857e;
}

body.OEA input[type="radio"]:checked ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	color: #8c857e;
}



/*      USC      */
body.USC {background: #085190 url('../images/USC/bg.png') repeat-x center top;}

	body.USC #header { background-image:url('../images/USC/Header.png'); height: 129px;}
	body.USC #middle { background-image:url('../images/USC/Middle.png'); }	
	body.USC #footer { background-image:url('../images/USC/Footer.png'); height: 63px;}	
	
	body.USC_es-US #header { background-image:url('../images/USC/Header_es-US.png');}
	
	body.USC div#Progress {	background-image:url('../images/USC/ProgressBar.png'); }

	body.USC input#NextButton {
		background-image: url('../images/USC/Button.png');
		border-style: none;
		background-color: transparent;
		color: White;
		font-weight: bold;
		height: 35px;
		width: 115px;
		margin-left: 5px;
		margin-right: 5px;
	}	

/* Simple Radio Button & Checkbox */
body.USC .checkboxSimpleInput { background: url(../images/USC/WSE_Checkboxes_@1x.png) no-repeat;}

body.USC #footer, body.USC #footer a {
	color: black !important;
}

body.USC input[type="radio"] ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	color: #e52530;
}

body.USC input[type="radio"]:checked ~ label.radioSimpleInput:before {
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	color: #e52530;
}



/* Store Picker - Display the text boxes below the Instruction text (as outlined in OneNote in the Store Picker - Styles section. - 2023-08-31 T. Perez. */
/* Used to format the Store Picker on Mobile so the text boxes are below the instruction text. */
/*.picklist-hidden { display: none;}
#picklistGroup { padding: .5em; }
.picklist { min-width: 200px;}
.picklisttext{ float: left; min-width: 100px;}
 
#picklistGroup [disabled]
{
    color: #575757;
    background-color:#e5e5e5;
}*/