//
// CreateAccount panel
//

CreateAccountWizard .ScreenSaverMode
{
	opacity: 0.0;
	transition-duration: 0.4s;
}

// The login progress panel's transition animation is opacity 0 from 0s-.2s,
// then scales from opacity 0-1 from .2s-.4s. This should transition to 0
// opacity before the progress panel becomes visible.
CreateAccountWizard .ShowingLoginProgress
{
	opacity: 0.0;
	transition-duration: 0.2s;
}

//
// Credentials Children
//

.CredentialsError
{
	color: #dd4400;
	visibility: collapse;
}

.CredentialsValidationError .CredentialsError
{
	visibility: visible;
}

#CredentialsContainer
{
	width: buttonwidth;
}

#RecommendedAccountNames
{
	opacity: 0.0;
}

.RecommendationsVisible #RecommendedAccountNames
{
	opacity: 1.0;
}

#RecommendedList
{
	height: 255px;
	width: buttonwidth;
	padding: 5px;
	flow-children: down;
	background-color: ui_common_control;
}

#MessageLabel
{
	margin-top: 50px;
	margin-bottom: 20px;
	width: 100%;
}


//
// Email Child
//

#PasswordLabelContainer
{
	width: buttonwidth;
}

#StrengthLabel
{
	horizontal-align: right;
}

#AgreementsHTML
{
    margin-top: 20px;
	height: 610px;
	width: 100%;
	opacity: 1.0;
}

#AgreementsHTML:descendantfocus
{
	animation-name: main-button-glow-movement;
	animation-duration: 1.7s;
	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;	
}

#AgreementsHTML:hover
{
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
}

//
// Creating Account child
//

AccountNameValidatorWizardChild #ThrobberContainer, PasswordValidatorWizardChild #ThrobberContainer
{
	margin-top: 260px;
	horizontal-align: center;
}

.Throbber
{
	opacity: 1.0;
	width: 100px;
	height: 100px;
	horizontal-align: center;
	opacity-mask: url( "file://{images}/browser/reticle_mask_80_80.png" );
	background-image: url( "file://{images}/browser/reticle_80_80.webm" );
	background-repeat: no-repeat no-repeat;
	background-size: 100% 100%;
}

//
// Create account success
//

#CredentialsWrapper
{
	flow-children: down;
	margin-top: 70px;
}

.BigWhiteLabel
{
	font-size: 42px;
	font-family: platformfont;
	color: white;
}

CreateAccountSuccessWizardChild #PasswordTextEntry
{
	width: 480px;
}

#ShowPasswordButton
{
	width: 265px;
	margin-left: 10px;
	padding-left: 0px;
}

#ShowPasswordButton #ShowPasswordLabel
{
	horizontal-align: left;
	padding-left: 8px;
}

#RadioButtonContainer
{
	margin-top: 75px;
	flow-children: down;
	width: 100%;
}

RadioButton.Wide
{
	width: 1000px;
}

#ScrollHintXInput,
#ScrollHintSteam
{
	visibility: collapse;
	margin-top: 5px;
	font-size: 27px;
	color: white;
	opacity: 0.8;
	horizontal-align: right;
	text-align: right;
	width: 50%;
	height: 80px;

	font-family: platformfont;
}

.XInputPad #ScrollHintXInput
{
	visibility: visible;
}

.SteamPad #ScrollHintSteam
{
	visibility: visible;
}

// tickbox to turn togglebuttons into checkboxes
.CheckBox .TickBox
{
	width: 48px;
	height: 48px;
	vertical-align: center;
	background-color: ui_common_control;

	transition-property: transform, background-color, border, box-shadow, color;
	transition-timing-function: ease-out;
	transition-duration: 0.3s;
}

.CheckBox:Selected .TickBox
{
	background-image: url( "file://{images}/store/Icon_CheckDefault.png" );
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: ui_common_control;
	
}

.CheckBox:Focus .TickBox
{
	background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdff ), to( #bdbfbfff ) ); 
	border-color: #ffffff;
}

.CheckBox:Selected:Focus .TickBox
{
	background-image: url( "file://{images}/store/Icon_CheckFocus.png" );
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdff ), to( #bdbfbfff ) ); 
	border-color: #ffffff;
}

// and make room for the tickbox
.CheckBox Label
{
	padding-left: 10px;
	padding-top: 6px;
	color: detailsdatalabel;
	width: 100%;
	text-overflow: clip;
	white-space: nowrap;

	transform: translatex(-7px);
	transition-property: color, transform;
	transition-duration: 0.23s;
	transition-timing-function: ease-in;
}

.CheckBox:hover Label
{
	color: #ffffffff;
	transform: translatex(0px);
}

.CheckBox:focus Label
{
	transform: translatex(0px);
}