/* Styles for ContentFrame */

ContentFrame
{
	width: 100%;
	height: 100%;
	background-color: #031a3d;
	background-image: url( "file://{images}/panel_background.png" );
	transform: translateY( 100% );	

	transition-property: transform, opacity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-duration: 0.3s;
}

.ScreenSaverMode ContentFrame.NotMainMenuContentFrame
{
	opacity: 0.0;
}

ContentFrame:descendantfocus
{
	transform: none;
}

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

#ContentFrameHeader
{
	width: 100%;
	height: 128px;
	padding: 5px 58px 28px 16px;
	flow-children: right;
	background-image: url( "file://{images}/panel_header_background.png" );

	color: white;
	font-size: 48px;
}

#ContentTitles
{
	width: fill-parent-flow( 1.0 );
	vertical-align: center;
}

.ContentTitle
{
	opacity: 0.0;
	margin-left: 20px;

	transition-property: opacity;
	transition-duration: 0.15s;
	transition-timing-function: bigpicture-ease-in-out;
}

.ContentTitle.Show
{
	opacity: 1.0;
}

.ContentTitle.Hide
{
	opacity: 0.0;
}

#ContentStatus
{
	vertical-align: center;
	flow-children: right;
	horizontal-align: right;
}

.StatusIcon
{
	vertical-align: center;
	flow-children: right;
	background-color: none;
	padding: 0px;
	margin: 0px;
	margin-right: 20px;
	
	visibility: collapse;
}

.StatusIcon Label
{
	vertical-align: center;
	margin-left: 4px;
	font-size: 28px;
	color: ui_primary_color;
	opacity: 0.6;
}


.StatusIcon Image
{
	opacity: 0.6;
	wash-color: ui_primary_color;
	width: 48px;
	height: 48px;
}

Button.StatusIcon:hover Image
{
	background-color: #15a4d5;
	box-shadow: fill box_shadow_mid_color -4px -4px 8px 8px;
}

#FriendsStatus Image,
#CommunityStatus Image,
{
	width: 42px;
	height: 42px;
}

.DownloadsActive #DownloadsStatus,
.PendingChats #PendingChatStatus,
.IncomingInboxItems #InboxStatus,
.SystemIMs #SystemStatus,
.Offline #OfflineStatus,
.FamilyModeEnabled #ParentalStatus,
.BatteryVisible #ControllerStatus,
{
	visibility: visible;
}

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

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

#ParentalLockImageUnlocked, #OfflineStatus Image
{
	wash-color: red;	
}


#Clock
{
	font-size: 30px;
	vertical-align: center;
	flow-children: right;
}

#Clock #Time
{
	margin-right: 8px;	
}

// Remote Content
/////////////////

RemoteContent .LoadingPanel
{
	width: 100%;
	height: 100%;
}

RemoteContent .LoadingPanel #Loading
{
	width: 100%;
	height: 100%;
	opacity: 0.0;
}

RemoteContent.RemoteContentLoading .LoadingPanel #Loading
{
	opacity: 1.0;
}

RemoteContent .LoadingPanel #Loading #LoadingStatus
{
	align: center top;
	margin-top: 300px;
	width: 80%;
	text-align: center;

	color: detailsdatalabel;
	font-size: 32px;
}

RemoteContent .LoadingPanel LoadingThrobber
{
	horizontal-align: center;
	margin-top: 350px;

	opacity: 1.0;
	pre-transform-scale2d: 0.85;
}

RemoteContent .LoadingPanel #Offline,
RemoteContent .LoadingPanel #Error
{
	width: 100%;
	height: 100%;
	padding-bottom: 50px;
	opacity: 0.0;
	
	transition-property: opacity;
	transition-duration: 0.23s;
	transition-delay: 1.25s;	
}

.Offline .LoadingPanel #Offline,
RemoteContent.LoadError .LoadingPanel #Error
{
	opacity: 1.0;
}

RemoteContent .LoadingPanel #OfflineMessage,
RemoteContent .LoadingPanel #ErrorMessage
{
	flow-children: down;
	width: 100%;
	vertical-align: center;
}

RemoteContent .LoadingPanel #OfflineStatus1,
RemoteContent .LoadingPanel #OfflineStatus2,
RemoteContent .LoadingPanel #ErrorMessage > Label,
{
	color: tcstatictext;
	horizontal-align: center;
	font-size: medfontsize;

	max-width: 75%;
	margin-bottom: 20px;
	text-align: center;
}

RemoteContent .LoadingPanel #OfflineStatus1,
RemoteContent .LoadingPanel #ErrorStatus1
{
	font-size: largefontsize;
}

RemoteContent .LoadingPanel #OfflineStatus2,
RemoteContent .LoadingPanel #ErrorStatus2
{
	font-size: medfontsize;
	height: 200px;
}


// Content Panels
/////////////////

#ContentPanels
{
	width: 100%;
	height: 980px;
	vertical-align: bottom;
	overflow: clip;
}

.ContentPanel
{
	width: 100%;
	height: 100%;
	background-image: url( "file://{images}/panel_background.png" );
	background-position: 0px -100px;
	overflow: clip;

	opacity: 1.0;
	transform: translateY( 100% );

	transition-property: transform, opacity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-duration: 0.3s;

	box-shadow: #00000055 0px 0px 30px 0px;
}

.ContentPanel.TopOfStack
{
	transform: none;
}

.ContentPanel.MiddleOfStack
{
	transform: translateY( -33% );
	opacity: 0;
}

.ContentPanel.ResetStackStateForwardNav
{
	// slam panel to default state skipping transition
	transform: translateY( 100% );
	transition-duration: 0s !immediate;
}

.ContentPanel.ResetStackStateBackwardNav
{
	// slam panel to default state skipping transition
	transform: translateY( -50% );
	transition-duration: 0s !immediate;
}


#SystemIMBackground
{
	width: 100%;
	overflow: clip clip;
	flow-children: right;
	margin-top: 10px;
	margin-bottom: 100px;
}


//
// Home & Exit Button styles
//
.ContentHomeButton,
.ContentMouseBackButton
{
	vertical-align: center;
	opacity: 1.0;

	background-image: url( "file://{images}/steam_home_os.png" );
	background-repeat: no-repeat;
	background-position: 0px 0px;

	box-shadow: fill #00000055 -3px -3px 4.5px 6px;
	border-radius: 50%;
	width: 67px;
	height: 67px;

	transition-property: opacity, box-shadow, background-color, pre-transform-scale2d, wash-color, transform;
	transition-timing-function: bigpicture-ease-in-out;
	transition-duration: 0.23s;
}

.VR .ContentHomeButton,
.VR .ContentMouseBackButton
{
	background-image: url( "file://{images}/steam_home_vr.png" );
	
	width: 87px;
	height: 87px;
	margin-top: 11px;
}

.TwoFootSettings .ContentMouseBackButton
{
    visibility: collapse;
}

.ContentMouseBackButton
{
	opacity: 0.0;

	background-image: url( "file://{images}/mouse/arrowLdefault.png" );
	background-position: -10px -10px;
	width: 47px;
	height: 47px;
	margin-right: 17px;
}

.VR .ContentMouseBackButton
{
	background-image: url( "file://{images}/mouse/arrowLdefaultVR.png" );
	background-position: 0px 0px;
	width: 87px;
	height: 87px;
	margin-top: 11px;
	opacity: 1.0;
}

.CursorVisible .ContentMouseBackButton
{
	opacity: 1.0;
}



.ContentHomeButton:hover,
.ContentMouseBackButton:hover
{
	opacity: 1.0;
	pre-transform-scale2d: 1.04;
	box-shadow: fill box_shadow_on_color -3px -3px 4.5px 6px;
	wash-color: #FFFFFFFF;
}

.ContentDebuggerButton
{
	visibility: collapse;

	vertical-align: center;
	border-radius: 20%;
	border: 4px solid brightblue;
	margin-left: 10px;
	padding: 3px;
	color: brightblue;

	transition-property: opacity, box-shadow, background-color, pre-transform-scale2d, wash-color, transform;
	transition-timing-function: bigpicture-ease-in-out;
	transition-duration: 0.23s;
}

.DebugButton .ContentDebuggerButton
{
	visibility: visible;
}

.ContentDebuggerButton:hover
{
	pre-transform-scale2d: 1.04;
	box-shadow: box_shadow_on_color -3px -3px 4.5px 6px;
}

.OOBE Clock,
.OOBE .ContentMouseBackButton
.FullScreenChild .ContentHomeButton,
.FullScreenChild .ContentMouseBackButton,
.VR .FullScreenChild .ContentHomeButton,
.VR .FullScreenChild .ContentMouseBackButton

{
	opacity: 0.0;
}

#ContentFrame.FullScreenChild
{
	background-image: none;
	background-color: #00000000;
}

.FullScreenChild #ContentFrameHeader
{
	visibility: collapse;
}

.FullScreenChild #ContentPanels
{
	height: 100%;
}

#BatteryImages
{
	width: 70px;
	height: 48px;
}

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

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

.ScreenshotSlideshowVisible ContentFrame
{
	transform: none;
}