body,#header,#footer { background-color:white;}
html, body, input, select, textarea {
    font-family: Arial, Helvetica, Verdana, sans-serif;

}
#footer{ border-color:#CEE2F6; background-repeat:repeat-x;}
#header { border-color:white; background-repeat:repeat-x; border-width:5px;}

#header	{ background-image:url(../images/MHeaderbg.png); background-size:1px 83px;} 

/* #header img is needed for the new high definition images.  The width and height should be 1/2 of what the MLogo image size is.
    Example: You have an image that is width: 526 x height: 138, you will set your width to 263px and height to 69px.
    NOTE: Mobile works better with .em (percentages).  If you can use .em for mobile, then go for it.  */
#header img { width:127px; height:83px;}

#footer	{ background-image:url(../images/MFooterbg.gif);}
/* **** Mobile background color **** 
.SurveyHolder {background-color: #f5e7d0;} */
/* #Content { background-color: white; }  This will cover it all. .SurveyHolder will not cover the ProgresBar. */

.InputRowEven, .InputRowOdd { background-color: #FFF !important;  border-bottom:solid 1px #D0D0D0 !important;}

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

input#NextButton {
	background-color: #0067B2 !important; /* Should be same color as Desktop button */
	color:#ffffff !important;
	border: none !important; 
    /* Don't touch anything the below */
    font-size:1.4em !important;
	height:46px !important;
	width:100% !important;
    border-radius:0px !important;
    -webkit-appearance: none !important; 
}
.SurveyHolder {padding: .5em .7em;}

 .BlockHeader,  div.FNSText.blocktitle {color:#333333 !important; text-align:left !important;}
.FinishHeader {color:#333333 !important;}
  .IndexHeader  {color:#333333 !important;}
 .IndexNote { color:#333333;}
 div.FNSText span {color: #333333;}

 div#Advert
{
    text-align:center;
}

/* **** Repeating header image ****
#header { background-repeat:repeat-x; background-image:url(../images/MHeaderbg.gif);border:none;}
body, #footer { background-color:#003b62;border-color:#8e8e8e;}
*/

/* **** Footer **** */
#footerPP, #footerPP a, #footerTC, #footerTC a, #footerSR, #footerSR a { color: #4C4C4C; }
#footerCR, #PwBY{ color:#4C4C4C !important; }


/* **** Finish Page **** */
div#finishConnect {margin-top: 3em; border-top: solid thin black;}
div#finishContainer hr {background-color: Transparent; border-width: 0; height: 0; margin: 0; padding: 0;}
div#connectContent {margin:1em;}
div#connectContent div ul {margin:0 !important;list-style:none;padding:0;}
div#connectContent div ul li {padding:.2em;}
.ConnectOn p.connectHeader, .ConnectOn p.FinishHeader {font-weight:bolder;}


/* **** Pick Language **** */
ul.languageOption {text-align:left !important;padding-left:0;}
ul.languageOption li { display:inline; padding:0; margin:0 1em 0 0;}
ul.languageOption a {color: #333333; }

/* **** Branded Looks **** */
body.__, body.__ #footer { background-color:#ef3e42;}
body.__ #footerPP, body.__ #footerPP a, body.__ #footerSW, body.__ #footerSW a { color:#ffffff; }
body.__ #footerCR, body.__ #PwBY{ color:#000000 !important; }

/* Mobile Receipt */
body.MobileEntryImage .IndexText00 { padding:.5em 2.4em; background-repeat:no-repeat; background-position: left center;margin-bottom: 0;  }
body.MobileEntryImage .ItemOne { background-image:url('../../../Common/images/1.png');} 
body.MobileEntryImage .ItemTwo { background-image:url('../../../Common/images/2.png');} 
body.MobileEntryImage .ItemThree { background-image:url('../../../Common/images/3.png');} 
body.MobileEntryImage .ItemFour { background-image:url('../../../Common/images/4.png');} 
body.MobileEntryImage .IndexText01 { background-image:none;} 

#Rules h1 {color:#004990;}