body { background: center top; background-image: url(../images/bg.png);background-repeat: no-repeat;}

    /* the width of the outerframe must be the same as the width of your header image */
	div#outerframe { width: 822px;}
	/* comment the next line if your header should not be flush with the top of the page */
	div#headerpush {display:none;} 

    /* WCAG setup - Note that they don't begin with "div" */
	#header { background-image:url('../images/Header.png'); height: 129px;}
	body.es-US #header { background-image:url('../images/Header_es-US.png'); height: 129px;}
	#middle { background-image:url('../images/Middle.png'); }	
	#footer { background-image:url('../images/Footer.png'); height: 63px;}	
	
	div#Progress {	background-image:url('../images/ProgressBar.png'); }

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

.checkboxBranded {background-image: url(../images/checkbox.png) !important;}
.radioBranded {background-image: url(../images/radio.png)  !important;}

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

/* **** 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;}


/* 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 */

div#footerframe { background-image:url(../../../Common/images/BottomLogoBlack.png);}


/* 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, body.fr-CA #footer {padding:5px 15px 0 15px !important;}
body.US #footerCRT, body.es-US #footerCRT, body.fr-CA #footerCRT {padding:0px 0px 0 0px !important;}

/* 
		NOTE: This may not work anymore as of 2023-04-17.  I had a tough time with PORT_CSI migrating to WCAG and this section not doing anything.
	      I had to set styles for #footerL li for US, and then account for the es-US language.
	      I also had to account for es-US for the #footerCRT li padding.
	
	You may need to control your footer text with what's below instead of the two lines above.

	There could have been an update to the Engine that changed that I don't know about.  - T. Perez 2023-04-17   */

/* Translations will have lengthier text.  We can use this to help format the footer links. Un-comment this chunk of code and play around with it if your footer text isn't padding. */
#footerL li {padding:12px 15px 0 15px !important;}
body.es-US #footerL li {padding-top: 0px !important;}

#footerCRT {padding-top: 14px !important;}
body.es-US #footerCRT li {padding-top: 5px !important;}



/* WCAG - I had to put the Copyright into it's own list and try to control it on the left side of the page (#footerCRT, #footerCRT li)
	NOTE: If you are having a problem with custom footer text not being clickable, comment out the line below (position: relative;), refresh and confirm it works.
*/
#footerCRT {
	padding: 0px 6px;
	margin: 0;	
	/*position: relative;*/
}

#footerCR {
	padding: 25px 6px;
	margin: 0;
}

body.es-US #footerCR {
	padding: 15px 6px;
	margin: 0;
}

#footerCRT li {
	list-style-type: none;
	float: left;
	text-align: right;
	/* -.3em top margin to center the copyright text. */
	margin: -1.2em 0 0 1em;
}

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



/* **** 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;
}
 
.ConnectOn div#finishConnectHolder 
{
	border:solid 1px #d1d1d1;
	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: #A6192E; /* - 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: #A6192E; /* - Controls the color of the font awesome radio buttons after they are selected */
}