@charset "UTF-8";

/*
.testBox { display:block; float:left; width:100%; clear:both; border:1px solid red; }
	.testBox span { display:block; float:left; width:50px; height:50px; border:1px solid #000; }
*/

/******************************
	Signup Globals
******************************/

article.signup, article.profile { width:100%; height:auto; overflow:hidden; }
	.signup section, .profile section { display:none; position:absolute; z-index:0; top:0; left:0; width:100%; }

.errorMain { display:none; /*float:left;*/ clear:both; width:100%; color:#f00; font-weight:bold; font-size:1.2em; margin-bottom:1em; }

#frmProfile p { display:inline-block; clear:both; }


/******************************
	Errors
******************************/
	.errorWrap { float:left; clear:both; width:100%; }
		.errorWrap.pass input { border:1px solid green; }
		.errorWrap.fail input { /*border:1px solid red;*/ border:none; background:#fad4d5; }
	
	.errorWrap .error { display:none; z-index:2; position:absolute; bottom:-2.3em; right:0; min-height:2em; padding:0.3em 2em; color:#fff; background:#ff0000; }
	.errorWrap.fail .error { display:block; }
		.errorWrap .error .errorTriangle { position:absolute; top:-10px; right:0.7em; width:0; height:0; border-top:0; border-bottom:12px solid #ff0000; border-left:11px solid rgba(255,255,255,0); border-right:11px solid rgba(255,255,255,0); }
	.errorWrap .validIcon { display:block; z-index:1; position:absolute; top:1.5em; right:0.5em; padding:0.5em 0.8em; }
		.errorWrap.pass .validIcon { background:url("../../images/oll/oll_input_check_68x68.png") no-repeat 0 0 / contain; height:20px; width:20px; }
		.errorWrap.fail .validIcon { background:url("../../images/oll/oll_input_x_68x68.png") no-repeat 0 0 / contain; height:20px; width:20px; }
	.errorWrap input { z-index:1; }

	/* Info bubble (email-specific) */
	.info { display:none; position:absolute; z-index:0; top:0; left:102%; width:68%; height:3.5em; font-size:1.2em; padding:1.2em; background:#eaf4fa; }
		.info .infoTriangle { position:absolute; left:-12px; top:1.2em; width:0; height:0; border-left:0; border-right:12px solid #eaf4fa; border-top:11px solid rgba(255,255,255,0); border-bottom:11px solid rgba(255,255,255,0); }


/******************************
	Game Logos
******************************/
.gameIcons { float:left; /*width:14%; max-width:125px;*/ width:20%; padding-top:1em; }
	/*.gameIcons img { width:100%; }*/
	.gameIcons img { float:left; width:50%; }


/******************************
	Radios
******************************/
.optins { float:left; /*width:80%;*/ width:75%; margin-right:5%; font-size:0.9em; }
	.optins .label { margin:0; }
	.optins > .label { margin:1.2em 0; }

	.optins .inputGroup { width:100%; margin:1.2em 0; }
	.optins .inputGroup.indent { width:96%; margin-left:4%; }

		.optins .inputGroup.indent .label { width:47.7%; }
	.optins .inputGroup .errorWrap { /*width:50%;*/ clear:none; }
		.optins .inputGroup .label { display:block; float:left; width:50%; margin:0; padding-right:0.5em; }
		.optins .inputGroup label, .optins .inputGroup input { display:inline-block; float:none; }
		.optins .inputGroup label { padding:0; text-transform:uppercase; font-size:1.1em; }
		.optins .inputGroup input { width:auto; height:auto; font-size:1em; padding:0.2em; margin-left:1em; color:#616466; border:none; /*border:1px solid #b3b3b3;*/ }
			.optins .inputGroup input:first-of-type { margin-left:0; }

.optins .errorWrap.fail .label, .optins .errorWrap.fail label { color:#f00; }
	.optins .errorWrap .error { left:0; right:auto; }
	.optins .errorWrap .error .errorTriangle { top:-6px; left:0.7em; right:auto; }
	.optins .errorWrap .validIcon { background:none; }

#wnOptins { display:none; float:left; padding:2% 4%; background:#f2f2f2; }
	#wnOptins .inputGroup { /*margin:0.5em 0;*/ margin:1em 0 1em 1em; }
		#wnOptins .inputGroup.error .label, #wnOptins .inputGroup.error label { color:#f00; }
	#wnOptins .inputGroup.radio p.label { width:45%; }


.inputGroup.radio label { display:inline-block; min-height:18px; padding:0.5em 0 0.5em 22px; margin-right:0.8em; line-height:1em; background:url("../../images/oll/input_radio_off_40x40.png") no-repeat 0 0.3em / 18px 18px; }
.inputGroup.radio label.checked { background:url("../../images/oll/input_radio_on_40x40.png") no-repeat 0 0.3em / 18px 18px; }
.inputGroup.radio label:hover, .inputGroup.radio label.focus { background:url("../../images/oll/input_radio_off_focus_40x40.png") no-repeat 0 0.3em / 18px 18px; }
.inputGroup.radio label.checked:hover, .inputGroup.radio label.checked.focus { background:url("../../images/oll/input_radio_on_focus_40x40.png") no-repeat 0 0.3em / 18px 18px; }

/******************************
	Checkbox
******************************/
.inputGroup.checkbox { width:75%; margin:2em 0; font-size:0.9em; }
	.inputGroup.checkbox label, .inputGroup.checkbox input, .inputGroup.checkbox .errorWrap { display:block; float:left; clear:none; width:auto; }
	.inputGroup.checkbox label { /*float:right; max-width:94%;*/ width:100%; padding:0 0 0 48px; }
		.inputGroup.checkbox label span.icon { position:absolute; top:0.2em; left:5px; display:block; width:31px; height:30px; background:url("../../images/oll/input_check_off_62x60.png") no-repeat 0 0; background-size:cover; }
		.inputGroup.checkbox.checked label span.icon { background:url("../../images/oll/input_check_on_62x60.png") no-repeat 0 0; background-size:cover; }
		.inputGroup.checkbox label:hover span.icon, .inputGroup.checkbox.focus span.icon { background:url("../../images/oll/input_check_focus_62x60.png") no-repeat 0 0; background-size:cover; }
		.inputGroup.checkbox.checked label:hover span.icon, .inputGroup.checkbox.checked.focus label span.icon { background:url("../../images/oll/input_check_on_focus_62x60.png") no-repeat 0 0; background-size:cover; }
	.inputGroup.checkbox input { float:left; width:auto; height:auto; }

.inputGroup.checkbox.sm label { width:75%; padding-top:0.2em; }

.checkbox .errorWrap.fail .label, .checkbox .errorWrap.fail label { color:#f00; }
	.checkbox .errorWrap .error { left:0; right:auto; }
	.checkbox .errorWrap .error .errorTriangle { left:0.7em; right:auto; }
	.checkbox .errorWrap .validIcon { background:none; }


/******************************
	Email
******************************/
/*.inputGroup.email { width:60%; }*/
.inputGroup.email { width:60%; margin-left:0; }


/******************************
	Password
******************************/
.inputGroup.password { margin-left:0; }
#pwStrength { display:block; float:left; /*width:100%;*/ padding:0.5em 0 0 3em; font-size:0.9em; color:#999; }
	#pwStrength span { display:block; clear:both; }
	#pwStrength .check { color:#5cbd60; } /* Temporary */

#pwProgress { float:left; /*clear:both;*/ width:274px; margin-top:1.5em; margin-left:2em; }
	#pwProgress .red { background-color:#e5292c; }
	#pwProgress .orange { background-color:#f3e906; }
	#pwProgress .green { background-color:#5dbb5f; }
	#pwProgress .grey { background-color:#e2ecf1; }

	#pwBgLine { display:block; z-index:0; position:absolute; top:6px; left:-1px; width:220px; height:9px; background-color:#e2ecf1; border-radius:9px; }
		#pwBgStrength { position:absolute; z-index:1; top:-0.75em; left:190px; width:6em; height:2em; padding:0.5em; text-align:center; background-color:inherit; border-radius:inherit; }
			#pwBgStrength span { display:block; position:absolute; top:0.5em; left:0; width:100%; height:100%; line-height:1em; font-weight:bold; color:#fff; }
			#pwBgStrength .weak { color:#e5292c; }
			#pwBgStrength .medium { color:#ddbb00; }
			#pwBgStrength .strong { color:#5dbb5f; }

		.pwBgBubble { position:absolute; top:-7px; left:0; width:22px; height:22px; background:#e2ecf1; border-radius:22px; }
			.pwBgBubble.step3 { left:135px; }
			.pwBgBubble.step2 { left:85px; }
			.pwBgBubble.step1 { left:35px; }

	
	#pwLine { display:block; z-index:1; width:0; height:9px; margin-top:6px; border-radius:9px; }
		#pwCheck { position:absolute; top:-7px; right:0; display:block; /*width:22px; height:22px;*/ width:0; height:0; border-radius:22px; background-color:inherit; background-image:url("../../images/oll/pwstrength_check_100x100.png"); background-position:center center; background-repeat:no-repeat; background-size:12px 12px; }

		.rating { display:none; left:auto; right:0; width:100px; height:22px; background:#e2ecf1; border-radius:22px; }
			.rating .pwStep { width:200px; }


/******************************
	Date of birth
******************************/
.inputGroup.dob { float:right; width:auto; }
	.dobWrap { float:right; clear:both; }
		.dobWrap input, .dobWrap select, .dobWrap #user_birthdate_mm-button { z-index:1; display:block; float:left; margin-right:0.5em; /*width:100px;*/ /*height:58px;*/height:3.5em; /*border:none;*/ }
			.dobWrap input:last-of-type { margin-right:0; }
		.dobWrap input { text-align:center; }
		#user_birthdate_dd { width:4.5em; }
		#user_birthdate_yyyy { width:6.5em; }
		#user_dob { position:absolute; top:0; left:0; visibility:hidden; }

/* jQuery UI Overrides */
#user_birthdate_mm-button { padding:0.6em 0.5em; width:10em !important; font-size:1.2em; border-radius:0; color:#333; }
#user_birthdate_mm-button.ui-state-hover .ui-selectmenu-text, #user_birthdate_mm-button.ui-state-focus .ui-selectmenu-text { color:#fff; }
	#user_birthdate_mm-button .ui-selectmenu-text { font-size:1em; color:#333; }
	#user_birthdate_mm-menu { font-size:1.1em; color:#333; }
.inputGroup.dob .fail #user_birthdate_mm-button { background:#fad4d5; border:none; }
.inputGroup.dob .pass #user_birthdate_mm-button { border-color:green; }


/******************************
	First Name
******************************/
.inputGroup.firstName { margin-left:0; }


/******************************
	Address
******************************/
/*.inputGroup.address { width:75%; }*/
.inputGroup.address { width:75%; margin-left:0; }


/******************************
	Postal Code
******************************/
.inputGroup.postalCode { width:23%; }


/******************************
	City
******************************/
.inputGroup.city { width:40%; margin-left:0; }


/******************************
	Province
******************************/
.inputGroup.province { width:21%; margin-top:1.8em; padding-right:0; }
	.inputGroup.province p { margin:0; }


/******************************
	Phone
******************************/
.inputGroup.phone { width:35%; }


/******************************
	OLL - TCR
******************************/

section.oll-tcr-banner {  }
	
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) { }