/*	main menu screen css style */
@define topmostzindex: 1000;

@define mediumduration: 0.4s;

@define MainMenuZIndex: 200;
@define MainContentsZIndex: 300;
@define MainContentsBGZIndex: 198;

MainMenu
{
	perspective: 1000;
	perspective-origin: 50% 50%;
	position: 0px 0px 0%;
	width: 1920px;
	height: 1080px;
	visibility: visible;
	font-family: platformfont;
	opacity: 0.0;

	transition-property: opacity, transform, pre-transform-scale2d, saturation, wash-color, blur;
	transition-duration: 0.4s;
	transition-timing-function: ease-in;
	transform: translateX( 0px );
}

.MainMenuVisible
{
	opacity: 1.0;

	animation-name: fade-in;
	animation-duration: 1.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: 1;
	animation-direction: normal;
}

.MainMenuVisibleFast
{
	animation-duration: 0.2s;
}

.BehindScreenshotsSlideshow 
{
	opacity: 0.0;
}

MainMenu.SlideAwayToLeft
{
	opacity: 0.0;

	transform-origin: 0% 0% parent-relative;
	transform: translateX( 0px ) rotateX( 0deg ) translateZ( 0px );
}

MainMenu.SlideAwayToRight
{
	opacity: 0.0;

	transform-origin: 0% 0% parent-relative;
	transform: translateX(  0px ) rotateX( 0deg ) translateZ( 0px );
}

.BehindMessageBox #BodyWrapper
{
	saturation: 0.8;
	blur: gaussian( 1.5 );
	wash-color: #00000066;
}

.BehindMessageBox.SearchWheel #BodyWrapper
{
  saturation: 1.0;
	blur: none;
	wash-color: none;
}


.BehindMessageBox SettingsPanel
{
	saturation: 0.6;
	opacity: 1.0;
	blur: gaussian( 1.5 );
	wash-color: #00000066;

	transition-property: blur, saturation, opacity, wash-color, transform;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}

.BehindTextInputHandler #BodyWrapper
{
	saturation: 1.0;
	opacity: 1.0;
	blur: none;
	wash-color: #ffffffff;
}

.FriendsInputTextEntry.BehindMessageBox #BodyWrapper
{
	saturation: 1.0;
	opacity: 1.0;
	blur: none;
	wash-color: #ffffffff;
}

.FriendsInputTextEntry.BehindMessageBox #FriendsMainBodyColumnLeft
{
	saturation: 0.6;
	opacity: 0.85;
	blur: gaussian( 1.5 );
	wash-color: #00000066;
}

.FriendsInputTextEntry.BehindTextInputHandler #BodyWrapper
{
	saturation: 1.0;
	opacity: 1.0;
	blur: none;
	wash-color: #ffffffff;
}
	
MainMenu.BehindMessageBox.FriendsFeedItemMenuDetails,
MainMenu.BehindMessageBox.CheckoutFormTextEntry,
MainMenu.BehindMessageBox.CheckoutFormTextEntryLeft
{
	saturation: 1.0;
	opacity: 1.0;
	blur: none;
}

#BodyWrapper
{
	width: 100%;
	height: 100%;
	opacity-mask: none;
  background-color: #1c486955;
	

	transition-property: blur, saturation, opacity, transform, wash-color;
	transition-duration: PageTransitionTimeOff;
	transition-timing-function: bigpicture-ease-in-out;
}

MainMenu #BodyWrapper
{
	z-index: -1;
	transform: translatey( -300px );
}


MainMenu #BodyWrapper:descendantfocus,
{
	z-index: 100;
	transform: translatey( 0px );
}

MainMenu.BelowTheFoldOpen #BodyWrapper:descendantfocus
{
	transform: none;
	height: fit-children;
}

MainMenu #BodyWrapper:descendantfocus #GameRowContents
{
	opacity: 0.5;
}

MainMenu #BodyWrapper #GameRowContents:descendantfocus,
MainMenu #BodyWrapper #GameRowContents:hover
{
	opacity: 1.0;
}



MainMenu #BodyWrapper #GameRowContents
{
	opacity: 0.0;
}

.PlayActionModal #BodyWrapper
{
	opacity-mask: url( "file://{images}/library/play_action_modal_mask.png" );

	transition-property: opacity-mask !immediate;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
}

#BodyHittestBlocker
{
	visibility: collapse;
	width: 100%;
	height: 100%;
	z-index: top_non_popup_zindex;
	opacity: 1.0;
}

.PlayActionModal #BodyHittestBlocker
{
	visibility: visible;
}

@keyframes 'fade-in'
{
	/* 0->10 here is basically just to give us a small delay on startup, */
	/* so everything starts loading and we don't end up with a stutter or  */
	/* nothing loaded while doing the actual zoom. */
	0%
	{
		opacity: 0.0;
		saturation: 0.0;
		pre-transform-scale2d: 1.0;
		blur: gaussian( 7, 7, 2 );
	}

	67%
	{
		opacity: 0.0;
		saturation: 0.0;
		pre-transform-scale2d: 1.0;
		blur: gaussian( 7, 7, 2 );
	}

	100%
	{
		opacity: 1.0;
		saturation: 1.0;
		pre-transform-scale2d: 1.0;
		blur: none;
	}
}

#TopRow
{
  margin-top: 44px;
	vertical-align: top;
	opacity:1;
	width: 1920px;
	horizontal-align: right;
	z-index: MainMenuZIndex;
	flow-children: right;
	transition-property: blur, saturation, opacity, transform;
	transition-duration: PageTransitionTimeOff;
	transition-timing-function: bigpicture-ease-in-out;


 }
 
#TopRowRight
{
 	horizontal-align: right;
 	flow-children: right;
 	padding-left: 64px;
	margin-top: 30px;
 	margin-right: 74px;
 	
}

#TopRowLeft
{
 	flow-children: right;
 	horizontal-align: left;
 	margin-left: 290px;
}


.TopRowBlurry
{
	blur: gaussian( 2.5 );
	saturation: 0.85;
	opacity: 0.70;

	transform: translateZ( -100px ) translateY( -4% );
}

.TopRowBase Label
{
	//white-space: nowrap;
	//margin-top: 3px;
	//text-overflow: clip;
	color: messagecolorwash;
}

.TopRowFocused Label
{
	color: messagecolorwash;
}

#BroadcastLive
{
	horizontal-align: center;
	margin-top: 80px;
	opacity: 0.0;
}

.Broadcasting #BroadcastLive
{
	opacity: 1.0;
}

#BroadcastLive Button
{
	border: 1px solid white;
	padding: 5px;
}

#BroadcastLive Button Label
{
	font-size: 24px;
}

.HR
{
	width: 1900px;
	height: 2px;
	horizontal-align: center;
	margin-top: 200px;
	opacity: 1.0;
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #1c486900 ), color-stop( 0.5, #1c4869ff ), to( #1c486900 ) );
	z-index: MainMenuZIndex;
	
	transition-property: opacity, position, transform;
	transition-duration: supershortduration;
	transition-timing-function: bigpicture-ease-in-out;
}

#HR2
{
	width: 1900px;
	height: 2px;
	margin-top: 588px;
}

#HR3
{
	width: 1200px;
	horizontal-align: left;
	margin-top: 8px;
	margin-bottom: 8px;
}

#HR4
{
	margin-top: 0px;
	width: 1200px;
	horizontal-align: center;
}


.SteamUpdated .InboxButtonImage
{
	background-image: url( "file://{images}/icon_steam_update.png" );
	wash-color: #1c2c5cff;

	animation-name: image-wash-pulse;
	animation-duration: 3.4s;
	animation-delay: 0.08s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}


.TopRowBase Button.SystemIMButtonFocusDisabled
{
	border-width: 5px;
	border-style: solid;
	border-color: #fdfefef0;
	color: tcexitrowfocus;
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #fdfdfdff ), to( #bdbfbfff ) );
	box-shadow: box_shadow_on_color -1px -1px 8px 2px;

	transform: translatez( 0px );
}

.TopRowBlurry Button:Focus Image
{
	animation-name: none;
}

.TopRowBlurry Button:Focus
{
	animation-name: none;
}

.HiddenButton
{
	//visibility: collapse;
}

.VisibleButton
{
	visibility: visible;
	opacity: 1.0;

	animation-name: button-fade-in; 
	animation-duration: .23s;
	animation-delay: 0.0s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-direction: normal;
}

.VR #Exit
{
	visibility: collapse;
}

@keyframes 'button-fade-in'
{
	0%
	{
		opacity: 0.1;
	}

	100%
	{
		opacity: 1.0;
	}

}

@keyframes 'image-wash-pulse'
{
	0%
	{
		wash-color: animated_icon_wash_color;
		blur: gaussian( 0.5 );
	}
	
	48%
	{
		wash-color: #142766ff;
		blur: none;
	}
	
	52%
	{
		wash-color: #142766ff;
		blur: none;
	}
	
	100%
	{
		wash-color: animated_icon_wash_color;
		blur: gaussian( 0.5 );
	}
}

@keyframes 'unlocked-image-wash-pulse'
{
	0%
	{
		wash-color: red;
		blur: gaussian( 0.5 );
	}

	
	48%
	{
		wash-color: darkred;
		blur: none;
	}

	
	52%
	{
		wash-color: darkred;
		blur: none;
	}

	
	100%
	{
		wash-color: red;
		blur: gaussian( 0.5 );
	}

}

@keyframes 'beta-image-wash-pulse'
{
	0%
	{
		wash-color: animated_icon_wash_color;
		blur: gaussian( 0.5 );
	}

	48%
	{
		wash-color: #383838ff;
		blur: none;
	}

	52%
	{
		wash-color: #383838ff;
		blur: none;
	}

	100%
	{
		wash-color: animated_icon_wash_color;
		blur: gaussian( 0.5 );
	}

}


.SupportMessage #Inbox #InboxImage
{
	wash-color: #A94847;
}

.SupportMessage #Inbox:focus #InboxImage
{
	wash-color: white;
}


#NewSupportMessagesButton
{
	wash-color: accountwarning;
}


.MiddleTopWrapper
{
}

.MiddleTopWrapper Image
{
		wash-color: #1b81a9;
			transform: translatex(0px) translatey(31px);
		height: 96px;
		width: 96px;
}

#Clock
{
	vertical-align: center;
	horizontal-align: center;
	font-size: 40px;
	flow-children: right;
	width: 215px;
	padding-left: 10px;
	opacity: 0.5;
}

#Clock #Time
{
	color: ui_primary_color;
	margin-right: 8px;	
	horizontal-align: right;
}

#Clock #Suffix
{
	color: ui_primary_color;
	horizontal-align: left;
	margin-right: 0px;
}


#BetaButton
{
	opacity: 0.0;
	visibility: collapse;
}

/*.SteamOS.Linux #BetaButton
{
	flow-children: right;
	opacity: 1.0;
	visibility: visible;
}*/

#SelfAvatar
{
	border-style: solid;
	border-width: 4px;
	border-radius: 4px;
	height: 128px;
	width: 128px;
	box-shadow: fill #eeeeee00 -4.5px -4.5px 6px 9px;

	
	transition-property: pre-transform-scale2d;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}
#Avatar.TopRowButton:focus #SelfAvatar
{
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	animation-name: main-button-glow-movement-no-fill;
	animation-duration: 1.7s;
	animation-delay: 0.0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

#SelfAvatar:hover
{
	//pre-transform-scale2d: 1.05;

	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}


.MusicGuideButton
{
	//visibility: collapse;
}

.MusicGuideVisible .MusicGuideButton
{
	visibility: visible;
}


#BatteryPanel
{
	flow-children: right;
	vertical-align: center;
	padding: 6px;
	
	//visibility: collapse;
}

.BatteryVisible #BatteryPanel
{
	visibility: visible;
}

/*
// this hides the steam controller battery status UI when in VR mode*/ 
.VR #BatteryPanel
{
	visibility: collapse;
}

#MenuRow
{
	horizontal-align: center;
	//vertical-align: center;
	margin-top: 200px;
	font-size: 33;
	background-color: #00000000;
	height: 388px;
	width: 2048px;
	z-index: MainMenuZIndex;
  overflow:noclip noclip;
	transform-origin: 0% 0% parent-relative;
	transform: translateY( -8px ) rotateX( 0deg ) translateZ( -64px );
  opacity-mask: url( "file://{images}/systemmenu/menu_mask.png" );
	transition-property: blur, saturation, opacity, transform, opacity-mask;
	transition-duration: supershortduration;
	transition-timing-function: bigpicture-ease-in-out;
}

#TopRowContents:descendantfocus
{
	z-index: topmostzindex;
	width: 100%; 
	height: 100%;
}


#TopRow:descendantfocus
{
	opacity:1.0;
}


#MainRowContents
{
	z-index: MainContentsBGZIndex;
}

#MainRowContents:descendantfocus
{
	z-index: topmostzindex;
	width: 100%;
	height: 100%;
}


#MenuRowButtons
{	
	flow-children: right;
	horizontal-align: center;
	vertical-align: center;
	opacity:0.7;
	transition-property: opacity, transform, pre-transform-scale2d, saturation, wash-color, blur;
	transition-duration: 0.3s !immediate;
	transition-timing-function: linear;
}

#MenuRowButtons:descendantfocus
{
	opacity:1.0;
	transition-property: opacity, transform, pre-transform-scale2d, saturation, wash-color, blur;
	transition-duration: 0.5s !immediate;
	transition-timing-function: linear;
}


#MenuRowLeftButton
{
	horizontal-align: left;
	vertical-align: center;
}

#MenuRowRightButton
{
	horizontal-align: right;
	vertical-align: center;
}

.Button
{
	horizontal-align: center;
	vertical-align: center;
	width: 360px;
	height: 160px;
	margin: 10px 10px;
	background-color: #1c4869;

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

.Button.TopRowButton
{
	background-color: #1c486900;
	box-shadow: none;
}


.Button.TopRowButton .background_box
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #12334c ), to( #14445e ) );
	height: 70px;
	width: 70px;
	border-radius: 3px;
}
.Button.TopRowButton:focus,
.Button.TopRowButton:hover
{
	border-style: none;
	border-width: 0px;
}



.Button:focus,
.Button:hover
{
	border-style: solid;
	border-width: 5px;

	border-color: #b6e1faff;
	background-color: #2A5D7C00 ;
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	animation-name: main-button-glow-movement-no-fill;
	animation-duration: 1.7s;
	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
	transition-duration: 0.0s;
}

.Button.TopRowButton:focus .background_box,
.Button.TopRowButton:hover .background_box
{

	background-color: action_module ;
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	animation-name: main-button-glow-movement-no-fill;
	animation-duration: 1.7s;
	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}


.MainMenuButton
{
	opacity: 1.0;
	width: 460px;
	height: 215px;
	padding: 0px;
	border-radius: 8px;
	
}

.MainMenuButton .MainMenuCapsuleOver
{
	background-image: url( "file://{images}/systemmenu/capsule_glow.png" );
	opacity: 0.0;
	width: 460px;
	height: 215px;
	z-index: -1;
	}

.EdgeButtonLeft .MainMenuCapsuleOver
{
	background-image: url( "file://{images}/systemmenu/capsule_glow.png" );
	opacity: 0.0;
	width: 460px;
	height: 215px;
	padding: 0px;
	margin: 0px;
	margin-top: -4px;
	}

.EdgeButtonLeft .MainMenuCapsuleOver
{
		opacity-mask: url( "file://{images}/systemmenu/capsule_mask.png" );
		opacity: 0.0;
}

.EdgeButtonLeft:focus .MainMenuCapsuleOver,
.EdgeButtonLeft:hover .MainMenuCapsuleOver
{
	transform: translatey(0px);

		opacity: 1.0;
}

.EdgeButtonRight .MainMenuCapsuleOver
{
	background-image: url( "file://{images}/systemmenu/capsule_glow.png" );
	opacity: 0.0;
	width: 460px;
	height: 215px;
	padding: 0px;
	margin: 0px;
	margin-top: -4px;
	}

.EdgeButtonRight .MainMenuCapsuleOver
{
		opacity-mask: url( "file://{images}/systemmenu/capsule_mask.png" );
		opacity: 0.0;
}

.EdgeButtonRight:focus .MainMenuCapsuleOver
{
	transform: translatey(0px);

		opacity: 1.0;
}


.MainMenuButton:focus,
.MainMenuButton:hover
{
	border-radius: 8px;
}


#LibraryButton
{
		background-image: url( "file://{images}/systemmenu/capsule_01.jpg" );

}


.MainMenuButton .MainMenuCapsuleOver
{
		opacity-mask: url( "file://{images}/systemmenu/capsule_mask.png" );
		opacity: 0.0;
		transform: translatey(0px);
}

.MainMenuButton:focus .MainMenuCapsuleOver,
.MainMenuButton:hover .MainMenuCapsuleOver
{
	transform: translatey(0px);
//margin-bottom:-25px;
		opacity: 1.0;
}

#CommunityButton
{
	background-image: url( "file://{images}/systemmenu/capsule_02.jpg" );
}

#StoreButton
{
	background-image: url( "file://{images}/systemmenu/capsule_04.jpg" );
}

#WebButton
{
	background-image: url( "file://{images}/systemmenu/capsule_02.jpg" );
}

#FriendsButton
{
	background-image: url( "file://{images}/systemmenu/capsule_01.jpg" );
}


.TopRowButton
{
	flow-children: none;
	width: fit-children;
	height: 70px;
	margin: 0px;
	margin-left: 4px;
	margin-right: 4px;
	vertical-align: center;
	horizontal-align: left;
	padding: 0px;
	
	//transform:translatez(-96px);
    //pre-transform-scale2d: 0.8;
	transition-property: color, opacity, transform, pre-transform-scale2d, saturation, wash-color, blur;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}
#Avatar.TopRowButton
{
	height: 128px;
}

.TopRowButton Image
{
	width: 64px;
	height: 64px;
	pre-transform-scale2d: 0.8;
	horizontal-align: center;
	vertical-align: center;
	wash-color: ui_primary_color;
}


#TopRowRight:descendantfocus .TopRowButton
{
	//pre-transform-scale2d: 1.0;
}

.TopRowElement
{
	width: fit-children;
	background-color: #00000000;
	//color:#FFFFFF;
	margin-top: 38px;
	//width: 412px;
//	padding-left: 0px;
	horizontal-align: center;
	transition-duration: 0.0s;
}


.TopRowButton:focus Label,
.TopRowButton:hover Label
{
	color: #ffffff;
	//pre-transform-scale2d: 1.0;
	animation-name: none;
	transform: none;
}

.TopRowButton:focus,
.TopRowButton:hover
{

	//pre-transform-scale2d: 0.8;
	animation-name: none;
	box-shadow: none;
	border-width: 0px;
}

Label.TopRowCounter
{
	width: fit-children;
	min-width: 36px;
	background-color: #00000000;
	color:#96d4f8ff;
	text-align: center;
	padding-left: 4px;
	padding-right: 2px;
	margin-top: -1px;
	transition-duration: 0.0s;
}

Label.TopRowCounterBackground
{

	background-color: gradient( linear, 0% 0%, 0% 100%, from( #133e57 ), to( #14445f ) );

	width: fit-children;
		min-width: 36px;
	color:#00000000;
    margin-left: 0px;
    padding-left: 4px;
	padding-right: 6px;
	opacity-mask: url( "file://{images}/horizontal_gradient_mask.png" );
	horizontal-align: center;
	transition-duration: 0.0s;
	z-index: -10;
}



.TopRowButton:focus Label.TopRowCounter 
{
//pre-transform-scale2d: 0.8;
transform: none;

}

.TopRowButton:focus Label.TopRowCounterBackground,
.TopRowButton:hover Label.TopRowCounterBackground
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #215c7e ), to( #1a567a ) );

	width: fit-children;
	color:#00000000;
    margin-left: 0px;
    padding-left: 4px;
	padding-right: 6px;
	opacity-mask: url( "file://{images}/horizontal_gradient_mask.png" );
	horizontal-align: center;


}

.TopRowButton AvatarImage
{
	horizontal-align: center;
	vertical-align: center;
}

.TopRowButton AvatarImage Image, .TopRowButton:focus AvatarImage Image
{
	wash-color: none;
		width: 128px;
	height: 128px;
	pre-transform-scale2d: 1;
}

.TopRowButton:focus Image,
.TopRowButton:hover Image
{
	wash-color: #ffffff;
	color: white;
}
.TopRowButton.Locked:focus Image,
.TopRowButton.Locked:hover Image
{
	wash-color: #000000;
}

.TopRowButton Label
{
	font-size: 30px;
	
}




.EdgeButton
{
	width: 460px;	
	opacity: 0.9;
	height: 215px;
	padding: 0px;
	margin: 0px;

	border-radius: 12px;
	padding-top: 4px;
	vertical-align: bottom;

	box-shadow: none;

	transition-property: color, opacity, transform, pre-transform-scale2d, saturation, wash-color, blur;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

.EdgeButton:focus,
.EdgeButton:hover
{
	height: 225px;
	background-position: 0px 5px;
}


.Button.EdgeButton Label
{
	//background-color: #0C203766;
	height: 52px;
	margin-bottom: 8px;
	padding: -2px;
	font-size: 48px;
	text-overflow: ellipsis;
	
	transition-property: opacity, transform;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

.EdgeButton Image
{
	width: 200px;
	height: 200px;
	horizontal-align: center;
	vertical-align: center;
	margin: 0px;
	wash-color: ui_primary_color;
	color: #8bcdf2;
	opacity: 1.0;
	transform: translatey(-10px);

	transition-property: color, opacity, transform, pre-transform-scale2d, saturation, wash-color, blur;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}

.EdgeButtonLeft
{
	margin-left: -164px;
}

.EdgeButtonRight
{
	margin-right: -164px;
}


.EdgeButtonLeft Image
{
	margin-left: 230px;
}

.EdgeButtonRight Image
{
	margin-right: 230px;
}

.EdgeButtonLeft Label
{
	margin-left: 230px;
}

.EdgeButtonRight Label
{
	margin-right: 230px;
}


.EdgeButtonRight:focus,
.EdgeButtonLeft:focus
{
	transform: translatex( 0px );
}

.EdgeButtonRight:focus Image,
.EdgeButtonLeft:focus Image
{
		wash-color: #8bcdf2;
	//	transform: translatex(0px) translatey(0px);
}


.MainMenuButton .EdgeButtonLeft Image
{
		wash-color: #8bcdf2;
		//transform: translatex(32px) translatey(-10px);
}

.MainMenuButton .EdgeButtonRight Image

{
		wash-color: #8bcdf2;
		transform: translatex(32px) translatey(-10px);
}


// make sure the random username fits in this label and is uppercase
#ProfileLabel
{
	text-transform: uppercase;
	padding-left: 10px;
	padding-right: 10px;
	text-overflow: clip;
}

.GameRowContents
{
	width: 100%;
	height: 512px;
	flow-children: down;
	overflow: clip scroll;

  transform-origin: 0% 0% parent-relative;
	transform: translateY( 620px ) translateZ( -64px );

	transition-property: opacity, transform, pre-transform-scale2d, saturation, wash-color, blur;
	transition-duration: supershortduration;
	transition-timing-function: linear;
}

.WelcomeNewAccount .GameRowContents
{
	visibility:collapse;
}

.GameRowContents:descendantfocus
{
	wash-color: #ffffff;
	saturation: 1.0;
	transform-origin: 0% 0% parent-relative;

	transform: translatex(0px) translatey(598px);
 	opacity:1.0;
	transition-property: opacity, transform, pre-transform-scale2d, saturation, wash-color, blur;
	transition-duration: 0.2s, 0.2s !immediate;
	transition-timing-function: linear;
}

.GameItem
{
	horizontal-align: center;
	flow-children: down;
	width: 470px;
	padding-top: 10px;
}
.GameItem:descendantfocus .GameItemHeader Label
{
	color: white;
}
.GameItem.game_1,
.GameItem.game_2
{
	margin-right: 10px;
}

.GameRowContentsWrapper
{
	horizontal-align: center;
	flow-children: right;
}

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

.GameItemHeader Image
{
	width: 40px;
	height: 40px;
	wash-color: #13C5FB;
}

.GameItemHeader .FriendsPlayingImage 
{
	width: 32px;
	height: 32px;
}

.GameRowHeaderLabel
{
	horizontal-align: left;
	vertical-align: bottom;
	color: #15a4d5;
	font-size: 26;
	font-weight: light;
	height: 50px;
	text-align: center;
	text-overflow: clip;
	font-family: platformfont;
	margin-left: 00px;
	padding-top: 10px;
}

.GameButton
{
	horizontal-align: left;
	width: 460px;
	height: 215px;
	margin: 0px;
	padding: 0px;
	margin-top:5px;
	margin-left:5px;
	border-radius: 3px;
	box-shadow: fill #00000033 -3px -3px 6px 6px;
}

.GameButton:focus,
.GameButton:hover
{
	horizontal-align: left;
	width: 470px;
	height: 225px;
	padding: 5px;
	margin: 0px;
	box-shadow: none;
	background-color: #b6e1faff;

	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	animation-name: main-button-glow-movement-no-fill;
	animation-duration: 1.7s;
	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

.GameButton Image
{
	horizontal-align: center;
	width: 470px;
	height: 100%;
	border-radius: 3px;
}

.GameButton #SuggestedStatus
{
	margin-right: 0px;
	margin-bottom: 0px;
}


.Button .MainMenuRowLabel
{
	horizontal-align: center;
	vertical-align: bottom;
	height: 64px;
	width: 100%;
	
	color: ui_primary_color;
	font-size: 50;
	font-weight: light;
	font-family: platformfont;
	text-align: center;
	text-overflow: clip;
	
	background-color: #0C203700;
	transform: translatey(-5px);

	transition-property: color, opacity, pre-transform-scale2d, saturation, wash-color, blur;
	transition-duration: 0.1s;
	transition-timing-function: linear;

}



.Button:focus .MainMenuRowLabel,
.Button:hover .MainMenuRowLabel
{
	color: #d6f5ffff;
	opacity: 1.0;
	transform: translatey(0px);
	
}



#MenuRow .TriggerRowLeft
{
	width: 100px;
	height: 48px;
	background-color: #14c4f933;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
	
	padding-top: 5px;
	padding-right: 8px;
	color: #00000099;
    margin: 0px;
    text-align: right;
    z-index: 4;

	transform: translatey(155px) translatex(18px);
	transition-property: opacity;
	transition-duration: 0.1s, 0.1s !immediate;
	transition-timing-function: linear;
	
	opacity: 0.0;
}

#MenuRow .TriggerRowRight
{
	width: 100px;
	height: 48px;
	background-color: #14c4f933;
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
	
	padding-top: 5px;
	padding-left: 8px;
	color: #00000099;
    margin: 0px;
    text-align: left;
    z-index: 4;
	horizontal-align: right;
	transform: translatey(155px) translatex(-18px);
	transition-property: opacity;
	transition-duration: 0.1s, 0.1s !immediate;
	transition-timing-function: linear;
	
	opacity: 0.0;
}



#MenuRow:descendantfocus .TriggerRowLeft
{
	Opacity: 1.0;
}

#MenuRow:descendantfocus .TriggerRowRight
{
	Opacity: 1.0;
}

.MainMenuRowLabel .TriggerRowLeft:focus
{
	Opacity: 1.0;
}

#MenuRow:descendantfocus .EdgeButtonRight:focus  .MainMenuRowLabel,
#MenuRow .EdgeButtonRight:hover  .MainMenuRowLabel
{
	transform: translatey(-5px) translatex(0px);
}


#MenuRow:descendantfocus .EdgeButtonLeft:focus  .MainMenuRowLabel,
#MenuRow .EdgeButtonLeft:hover  .MainMenuRowLabel
{
	transform: translatey(-5px) translatex(0px);
}




.Button .TriggerRowName
{
	background-color: none;
}

.EdgeButtonRight.Button:focus .TriggerRow, 
.EdgeButtonLeft.Button:focus .TriggerRow

{

	opacity:1.0;
	  //transform: translatey(-8px) translatex(0px);

}


.EdgeButtonRight.Button:focus .TriggerRowName
{
		transform: translatey(-1px) translatex(-2px);
}

.EdgeButtonLeft.Button:focus .TriggerRowName
{
		transform: translatey(-1px) translatex(2px);
}

.MainMenuButton Image
{
	width: 200px;
	height: 200px;
	horizontal-align: center;
	vertical-align: center;
	margin: 0px;
    transform: translatey(-18px);
	wash-color: ui_primary_color;
	
	transition-property: opacity, transform, pre-transform-scale2d, saturation, wash-color, blur;
	transition-duration: 0.3s, 0.3s !immediate;
	transition-timing-function: linear;
}

.MainMenuButton:focus Image,
.MainMenuButton:hover Image
{
	wash-color: #b6e1fa;	
	transform: translatey(-18px);
	opacity: 1.0;
	transition-property: opacity, transform, pre-transform-scale2d, saturation, wash-color, blur;
	transition-duration: 0.2s, 0.2s !immediate;
	transition-timing-function: linear;
}

#StoreHidden,
.StoreHidden #StoreButton
{
    visibility: collapse;
}

.StoreHidden #StoreHidden
{
    visibility: visible;
}


.ScreenSaverMode MainMenu, .GamesRunning MainMenu
{
	opacity: 0.0;

	transition-property: opacity, transform, pre-transform-scale2d, saturation, wash-color, blur;
	transition-duration: 1.4s, 0.3s !immediate;
	transition-timing-function: linear;
}

.GamesRunning MainMenu
{
	transition-duration: 0.3s, 0.3s !immediate;
}

InboxMenu
{
	width: 100%;
	height: 100%;
	transition-property: opacity;
	transition-duration: 0.2s;
}

InboxMenu #Wrapper .Button
{
	height: 80px;
	margin-top: 0px;
	horizontal-align: center;
	flow-children: right;
	border-style: none;
	border-width: 0px;

	background-color: simplebuttonsolid_vertical;

	box-shadow: module_shadow;
}
InboxMenu #Wrapper .Button:focus
{
	height: 80px;
	margin-top: 0px;
	horizontal-align: center;
	flow-children: right;
	border-style: none;
	border-width: 0px;

	background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );

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

InboxMenu #Wrapper .Button Label
{
	font-size: 30px;
	margin-left: 10px;
	margin-right: 6px;
	vertical-align: center;

	transition-property: transform;
	transition-timing-function: ease-out;
	transition-duration: supershortduration;

	transform: translateX( 0px ) translateY( -4px );
}

InboxMenu #Wrapper .Button:focus Label
{
	transform: translateX( 7px ) translateY( -4px );
	color: #161718f5;
	
}

InboxMenu #Wrapper .Button Image
{
	width: 46px;
	height: 46px;
	transform: translateX( 0px ) translateY( 8px );
	color: #ffffff;
	wash-color: #8bcdf2;

	transition-property: transform;
	transition-timing-function: ease-out;
	transition-duration: supershortduration;
}

InboxMenu #Wrapper .Button:focus Image
{
	transform: translateX( 3px ) translateY( 8px );
	color: #ffffff;
	wash-color: #ffffff;	
}

InboxMenu #Wrapper .Button #ParentalLockImageUnlocked
{
	wash-color: red;	
}

InboxMenu #Wrapper, 
InboxMenu #InboxItems,
InboxMenu #OfflineItems,
InboxMenu #FamilyModeItems,
{
	flow-children: down;
	padding: 16px;
	horizontal-align: center;
	vertical-align: center;
	width: 100%;

	margin-bottom: 16px;
	
	visibility: collapse;
}

InboxMenu #ControllerBatteryButton,
InboxMenu #SystemIMSButton
{
	visibility: collapse;
}

InboxMenu.BatteryVisible #ControllerBatteryButton,
InboxMenu.SystemIMs #SystemIMSButton

{
	visibility: visible;
}

// make the appropriate sections visible based on your state
.Offline #OfflineItems,
.FamilyModeEnabled #FamilyModeItems,
InboxMenu #InboxItems
{
	visibility: visible;
}

InboxMenu #Wrapper
{
	visibility: visible;
	
	background-color: message_box_bg;
	transform: none;
	max-height: 860px;
	width: 600px;
	min-height: 260px;
	overflow: clip scroll;

	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
}

InboxMenu Label
{
	font-family: platformfont;
}

InboxMenu.Destructing
{
	opacity: 0.0;
}

InboxMenu .Button
{
	width: 500px;
}

.InboxLabelTitle
{
	horizontal-align: left;
	vertical-align: bottom;
	color: #fefefe;
	font-size: 38px;
	font-weight: light;
	height: 50px;
	text-align: center;
	text-overflow: clip;
	font-family: platformfont;
	margin-left: 16px;
	padding-top: 0px;
}

/*
.InboxEmpty .AlertsMainTitle,
.AlertsEmpty,
{
	visibility: collapse;
}
*/

#InboxItems .AlertsEmpty,
{
	visibility: collapse;
}


ParentalButton.Locked
{
	wash-color: parental_locked_wash;
	transition-property: wash-color, border, blur, background-color, color, transform, box-shadow;
}


#GoOnlineButton,
#FamilyModeLock,
#ControllerBatteryButton,
#SystemIMSButton,
#PendingChats,
#Inbox,
#MusicGuideButton
{
	visibility: collapse;
}

#GoOnlineButton Image
{
	wash-color: red;
}

.BatteryVisible #ControllerBatteryButton,
.SteamUpdated #NewClientUpdateButton,
.PendingChats #PendingChats,
.Offline #GoOnlineButton,
.FamilyModeEnabled #FamilyModeLock,
.SystemIMs #SystemIMSButton,
.IncomingInboxItems #Inbox,
.MusicGuideVisible #MusicGuideButton
{
	visibility: visible;
}


#NavigationBar
{
	position: 0px 1136px 0px;
	height: 75px;
	width: 100%;
	z-index: MainContentsZIndex;
	flow-children: right;

	background-color: #12243Cff;
	opacity: 1.0;

	transition-property: opacity, position;
	transition-duration: PageTransitionTimeOn;
	transition-timing-function: bigpicture-ease-in-out;
}

.LocationWrapper
{
	margin-left: 80px;
	horizontal-align: left;
}

.StatusWrapper, .IconWrapper
{
	horizontal-align: right;
	flow-children: right;
	vertical-align: center;
}

.LocationWrapper
{
	flow-children: right;
}

.NavigationBar Label
{
	vertical-align: center;
	color: #E8FBFF;
	font-size: 50;
	font-weight: light;
	text-align: center;
	text-overflow: clip;
	font-family: platformfont;
}

.LocationWrapper Label
{
	margin-left: 20px;
}

.StatusWrapper Label
{
	font-size: 20;
	margin-left: 5px;
}

Label.LocationStarter
{
	color: #5E7587;
}

.StatusWrapper Image
{
	width: 32px;
	height: 32px;
	vertical-align: center;
}

.StatusHome
{
	width: 48px;
	height: 48px;
	vertical-align: center;
}

.StatusBack
{
	background-color: gradient( linear, 0% 0%, 0% 60%, from( #EEEEEE30 ), to( #00000000 ) );
	
	border-radius: 50%;
	box-shadow: fill #00000055 -3px -3px 4.5px 6px;
	width: 32px;
	height: 32px;
	vertical-align: center;
	margin-right: 20px;
}

.IconWrapper
{
	margin-right: 20px;
}

.StatusWrapper .ClockWrapperText
{
	margin-right: 20px;
	vertical-align: center;
}

#StatusBattery,
#StatusFamilyMode,
#StatusMusic,
#StatusInbox,
#StatusDownloads
{
	//visibility: collapse;
}

#InboxItems #NoAlertsButton
{
	margin-top: 10px;
	visibility: collapse;
}

.InboxEmpty #InboxItems #NoAlertsButton
{
	visibility: visible;
}


.IncomingInboxItems #StatusInbox,
.DownloadsActive #StatusDownloads,
.FamilyModeEnabled #StatusFamilyMode,
.MusicPlaying #StatusMusic,
.BatteryVisible #StatusBattery,
{
	visibility: visible;
}

.FamilyModeLocked #StatusFamilyMode
{
	wash-color: #6fd025aa;
}

#StatusFamilyMode
{
	wash-color: red;
}

#TopRowContents
{

	opacity: 0.7;
}

.HiddenTopButton
{
	visibility: collapse;
}
.MissingAppImage #MissingImageLabel
{
	opacity: 0.8;
}

Button:focus #MissingImageLabel
{
	transform: translatex(0px);
}

.TopButtonContentWrapper,
#InboxImageWrapper,
#ParentalLockImages,
#BatteryImages
{
	width: 70px;
	height: 100%;
	flow-children: none;
}

InboxMenu #BatteryImages,
InboxMenu #ParentalLockImages
{
	width: 64px;
	height: 64px;
}

.BatteryLevelWired,
.BatteryLevelEmpty,
.BatteryLevelLow,
.BatteryLevelHalf,
.BatteryLevelFull
{
	visibility: collapse;
}

.BatteryLevel0 .BatteryLevelWired,
.BatteryLevel1 .BatteryLevelEmpty,
.BatteryLevel2 .BatteryLevelLow,
.BatteryLevel3 .BatteryLevelHalf,
.BatteryLevel4 .BatteryLevelFull,
{
	visibility: visible;
}

.InboxImage
{
	opacity: 1.0;

	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

.FamilyModeEnabled.FamilyModeLocked #ParentalLockImageLocked,
.FamilyModeEnabled #ParentalLockImageUnlocked
{
	opacity: 1.0;
	visibility: visible;
}

.FamilyModeEnabled.FamilyModeLocked #ParentalLockImageUnlocked,
.FamilyModeEnabled #ParentalLockImageLocked
{
	opacity: 0.0;
	visibility: collapse;
}



#ParentalLockImageUnlocked
{
	wash-color: red;
}

Button:focus #ParentalLockImageUnlocked
{
	transition-duration: 0.0s;

	animation-name: unlocked-image-wash-pulse;
	animation-duration: 0.0s;
	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

Button.Locked #ParentalLockImageLocked
{
	wash-color: ui_primary_color;
	opacity: 1.0;

	transition-duration: 0.3s;
	transition-delay: 0.08s;
}

#WelcomePanel
{
	width: 1920px;
	height: 1080px;				// allow offscreel scroll, but not infinite
	pre-transform-scale2d: 0.87;
	visibility: collapse;
	z-index: MainContentsZIndex;

	flow-children: down;
	opacity: 0.7;
	border-style: solid;	
	border-width: 5px;
	border-color: #b6e1fa00;

	transition-property: opacity, transform, box-shadow, background-color, pre-transform-scale2d;

	transition-duration: PageTransitionTimeOff;
	transition-timing-function: bigpicture-ease-in-out;
	
}

.WelcomeNewAccount #WelcomePanel
{
	visibility: visible;
}

MainMenu.DeletingWelcome #WelcomePanel
{
	transform: translatey( 590px );
	visibility: visible;
	opacity: 0.0;
}

MainMenu.BelowTheFoldClosed #WelcomePanel:hover
{
	box-shadow: box_shadow_mid_color -4px -4px 8px 8px;
}

MainMenu.BelowTheFoldClosed #WelcomePanel
{
	horizontal-align: center;
	border-radius: 8px;
	box-shadow: none; 

	transform: translateY( 590px );
}

MainMenu.BelowTheFoldClosed #WelcomePanel:descendantfocus
{
	border-width: 5px;
	border-color: #b6e1faff;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #1e486a00 ), color-stop( 0.5, #2a5d7c00 ),to( #1e486a00 ) );
	
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
	animation-name: main-button-glow-movement-no-fill;
	animation-duration: 1.7s;
	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;

	pre-transform-scale2d: 0.88;
	
	opacity: 1.0;
	transform: translateY( 590px );
}

MainMenu.BelowTheFoldOpen #WelcomePanel
{
	transform: translateY( 0px );
	horizontal-align: center;
	opacity: 1.0;
	padding-bottom: 256px;
	pre-transform-scale2d: 1.0;
	
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #0e2036ff ), color-stop( 0.5, #0C3251ff ),to( #0e2036ff ) );	
	overflow: clip scroll;
	height: fit-children;
}

#ProfileNameWrapper
{
	flow-children: down;
	vertical-align: center;
	margin-left: 10px;
}

Label.ProfileLabel
{
	font-size: 26px;
	margin-bottom: 0px;
	color: #36ceff;
}

Label.ProfileNameLabel
{
	font-size: 42px;
	margin-top: -4px;
	color: #36ceff;
}
#TopRowLeft:descendantfocus Label.ProfileNameLabel,
#TopRowLeft:descendantfocus Label.ProfileLabel
{
	color: #ffffff;
}

#MenuRow:descendantfocus 
{
	opacity-mask: none;
	transform-origin: 0% 0% parent-relative;
	transform: translateX( 0px ) rotateX( 0deg ) translateZ( 0px );
	opacity: 1.0;
}

#MainMenuSuggestions
{
	height: fit-children;
	width: 80%;
	margin-left: 10%;
	flow-children: down;
	visibility: collapse;
}

#MainMenuSuggestions.SuggestionsLoaded
{
	visibility: visible;
}


.WebSuggestions.GameRowFocus .GameRowContents
{
	z-index: MainContentsZIndex;
	transform: translatey( 500px );
	height: 712px;
	//margin-top: 200px;

}

.WebSuggestions.GameSuggestionsFocus .GameRowContents
{
	transform: translatey( 300px );
}

.WebSuggestions.GameRowFocus #MenuRow
{
	transform: translatey( -80px );
}

.WebSuggestions.GameRowFocus #HR
{
	transform: translatey( -20px );
}

.WebSuggestions.GameRowFocus #HR2
{
	transform: translatey( -120px );
}

.WebSuggestions.GameSuggestionsFocus #MenuRow
{
	transform: translatey( -330px );
	z-index: 1;
	saturation: 0.7;
	blur: gaussian( 2.0 );
	wash-color: #000000a4;
}

.WebSuggestions.GameSuggestionsFocus #HR2
{
	opacity: 0.0;
}


#MainMenuSuggestions .AppHubPagePanel
{
	height: 300px;
	width: 1400px;
	margin: 0px;
	padding: 0px;
	flow-children: down;
}

#MainMenuSuggestions .AppHubPagePanel.empty
{
	height: 0px;
}


#MainMenuSuggestions .AppHubItemRow
{
	height: 248px;
	width: 1400px;
}