@define shortduration: 0.25s;
@define shortmedduration: 0.3s;
@define mediumduration: 0.4s;
@define longduration: 1.7s;

@define paddinghorz: 195px;
@define buttonwidth: 480px;
@define longbuttonwidth: 980px;
@define buttonheight: 50px;
@define controlgaphorz: 25px;
@define controlgapvert: 18px;


.WizardPanel
{
	opacity: 0.0;

	transition-property: opacity;
	transition-duration: shortduration;
	transition-timing-function: bigpicture-ease-in-out;
	width: 100%;
	height: 100%;
}

.WizardPanel:descendantfocus
{
	opacity: 1.0;
}

.WizardPanel.Destructing
{
	opacity: 0.0;
}

.WizardPanel.BehindMessageBox:descendantfocus,
.WizardPanel.BehindAnotherMsgBox:descendantfocus
{
	transition-property: blur, saturation, opacity, wash-color, transform !immediate;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;

	saturation: 0.6;
	blur: gaussian( 1.5 );
	wash-color: #00000066;
}

.WizardPanel.BehindMessageBox.BehindTextInputHandler:descendantfocus,
.WizardPanel.BehindAnotherMsgBox.BehindTextInputHandler:descendantfocus
{
	blur: none;
	saturation: 1.0;
	wash-color: #00000000;
}

.ScreenSaverMode .WizardPanel, .WizardPanel.ShowingProgress
{
	opacity: 0.0;
	transition-duration: 0.4s;
	transition-property: opacity;
}


#TitleBackground
{
	background-color: gradient(linear, 0% 0%, 100% 0%, from(#111f2c), color-stop( 0.35, #142332 ), color-stop( 0.70, #0a131a ), to(#000000) );
	background-image: url("file://{images}/store/slideshow_glow.png");
	background-repeat: no-repeat no-repeat;
	background-position: left 0px top 75px;
	height: 150px;
	width: 100%;
}

#DescriptionBackground
{
	width: 100%;
	height: 100%;

	background-color: none;
	background-size: auto;
	background-position: left 0px top -150px;
}

.OOBEControllerHintBody
{
	position: 760px 612px 0px;
	width: 675px;
	text-align: left;
	transform: translateY( 40px );
}

.WizardChildDescription
{
	padding-top: 16px;
	width: 1350px;
	padding-bottom: 20px;
	font-size: 32px;
	font-family: platformfont;
	font-weight: light;
	color: tcstatictext;
	opacity: 0.8;
}

.SteamPadSpecific,
.XInputPadSpecific
{
	visibility: collapse;
}

.SteamPad .SteamPadSpecific,
.XInputPad .XInputPadSpecific
{
	visibility: visible;
}

#WizardButtons
{
	vertical-align: bottom;
	height: 200px;
	width: 100%;
	flow-children: right;
	margin-left: 195px;
}

.SSAFlowRight
{
	flow-children: right;
	width: 100%;
}


.WizardButton
{
	width: buttonwidth;


	transition-property: background-color, box-shadow;
	pre-transform-scale2d: 1.0;
	transition-duration: 0.23s;
}

.WizardButton.GapRight
{
	margin-right: controlgaphorz;
}

.WizardButton.GapBottom
{
	margin-bottom: controlgaphorz;
}

.WizardButton:descendantfocus
{

	animation-name: button-focus;
	animation-duration: 1.7s;
	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
	z-index: 100;
}

.WizardButton:hover
{
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	z-index: 100;
}

.WizardButton:disabled:hover
{
	box-shadow: box_shadow_off_color -4.5px -4.5px 16px 9px;
}

.WizardButton Label
{
	margin-bottom: 8px;
	border-width: 0px;
	vertical-align: center;
}



#RecommendedList .WizardButton
{
	background-color: none;	
}

#RecommendedList .WizardButton:hover
{
	box-shadow: none;
}

#RecommendedList .WizardButton:descendantfocus
{
	background-color: gradient(linear, 0% 0%, 100% 0%, from(#f2f2f2), to(#bdbdbd) );	
}


#ButtonCheckboxNext .TickBox
{
	height: 60px;
	width: 60px;
	background-color: #001218;
	vertical-align: center;
}

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

.WizardLabel
{
	font-size: 24px;
	font-family: platformfont;
	color: tcstatictext;
}

ToggleButton .WizardLabel
{
	margin-bottom: 10px; /* restore default */
}




.WizardTextEntry
{
	width: buttonwidth;
	height: buttonheight;

	border-width: 5px;
	border-style: solid;

	// Linux/Mac bug: border-radius != 0 results in no border - will fix
	//border-radius: 2px;

	box-shadow: box_shadow_off_color -4.5px -4.5px 16px 9px;

	border-color: none;
	background-color: ui_common_control;
	transition-property: box-shadow, transform, border, background-color;
	transition-duration: 0.23s;


	font-size: 24px;
	padding-top: 6px;
	font-family: platformfont;
	color: white;

	pre-transform-scale2d: 1.0;
}
.WizardTextEntry.ErrorState
{
	background-color: error_bgcolor;
	color: black;
	border-color: none;
}

.WizardTextEntry.GapRight
{
	margin-right: controlgaphorz;
}

.WizardTextEntry.GapBottom
{
	margin-bottom: controlgaphorz;
}

.WizardTextEntry:descendantfocus
{
	background-color: gradient(linear, 0% 0%, 100% 0%, from(#f2f2f2), to(#bdbdbd) );
	border-color: white;

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

.WizardTextEntry.ErrorState:descendantfocus
{
	background-color: gradient(linear, 0% 0%, 100% 0%, from(#f2f2f2), to(#bdbdbd) );
}

.WizardTextEntry:hover
{
	box-shadow: box_shadow_off_color -4.5px -4.5px 16px 9px;
}

.WizardTextEntry:disabled:hover
{
	box-shadow: box_shadow_off_color -4.5px -4.5px 16px 9px;
}

.WizardErrorLabel
{
	font-size: 24px;
	font-family: platformfont;
	color: error_color;
}

.WizardButton:disabled
{
	saturation: 1.0;
	blur: gaussian( 0.7 );
	opacity: 0.55;
	border-color: none;
	box-shadow: none;
	animation-name: none;
}

.WizardButton:disabled Label,.CheckBox:disabled .TickBox,.RadioButton:disabled Label
{
	color: tcstatictext;
}

.WizardButton.ButtonHidden
{
	visibility: collapse;
}

#ChildContainer
{
	width: 100%;
	height: 100%;
}

.WizardChild
{
	flow-children: down;
	
	opacity: 0.0;

	transition-property: opacity;
	transition-duration: shortduration;
	transition-timing-function: bigpicture-ease-in-out;
	width: 100%;
	height: 100%;
}

.WizardChild .WizardContent,
.WizardChild .SettingsBottomPanel
{
	padding: 20px 0px 0px 0px;
	margin-left: paddinghorz;
	margin-right: paddinghorz;
	margin-top: 50px;
	flow-children: down;
	width: 100%;
	height: 80%;
}

.FlowNone
{
	flow-children: none;
}

.FlowDown
{
	flow-children: down;
}

.WizardChild.ChildVisible
{
	opacity: 1.0;
}

.InputContainerDown
{
	flow-children: down;
}

.InputContainerDown.GapRight
{
	margin-right: controlgaphorz;
}

.InputContainerDown.GapDown
{
	margin-bottom: controlgapvert;
	width: 100%;
}

.InputContainerRight
{
	flow-children: right;
}

.InputContainerRight.GapRight
{
	margin-right: controlgaphorz;
}

.InputContainerRight.GapDown
{
	margin-bottom: controlgaphorz;
}

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

.Throbber
{
	opacity: 1.0;
	width: 130px;
	height: 130px;
	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%;
}

.WizardContent RadioButton
{
	width: longbuttonwidth;
}

#UseWired, #UseWirelessButton
{
	width: 80%;
	flow-children: none;
}

.DeviceName
{
	margin-left: 40px;
}