@define letterboxcolor: #000000ff;

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

#OverlayBasePanel
{
	position: 0px 0px 0%;
	width: 1920px;
	height: 1080px;

	font-family: platformfont;

	opacity: 1.0;

	transition-property: opacity, transform;
	transition-duration: 0.4s;
	transition-timing-function: linear;

	transform: translateX( 0px );
}

#OverlayBasePanel.SlideAwayToLeft
{
	opacity: 0.0;
	transform-origin: 0% 0% parent-relative;
	transform: translateX( 0px ) rotateX( 0deg ) translateZ( 0px );
}

#OverlayBasePanel.SlideAwayToRight
{
	opacity: 0.0;
	transform-origin: 0% 0% parent-relative;
	transform: translateX(  0px ) rotateX( 0deg ) translateZ( 0px );
}

#OverlayBasePanel.KillModalVisible
{
	opacity: 0.4;
	wash-color: #00000066;

	transition-property: opacity, wash-color; 
	transition-timing-function: bigpicture-ease-in-out;
	transition-duration: 0.5s;
}

.SteamPad #GuideIcon
{
	background-image: url( "file://{images}/settings/icon_middle.tga" );
	height: 58px;
	width:  69px;
	horizontal-align: right;
	margin-top: -16px;
}

.KillInProgress #OverlayDashboard
{
	opacity: 0.0;

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


}

#KillSpinner
{
	visibility: collapse;
}

.KillInProgress #KillSpinner
{
	width: 120px;
	height: 120px;
	position: 46% 46% 0%;
	wash-color: bgcolorwash;

	visibility: visible;
}

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

#OverlayDashboard
{
	transition-property: blur, saturation, opacity, wash-color, transform !immediate;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
	flow-children: down;
}

.FullScreenFadeOut #OverlayDashboard
{
	opacity: 0.2;
}

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

#OverlayDashboard.BehindScreenshotsSlideshow
{
	opacity: 0.0;
}

#DesktopPanels, #MinimalPanels
{
	width: 100%;
	height: 100%;
	flow-children: right;
	margin-top: 25px;
}

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

#HeaderLabels
{
	margin-left: 50px;
	flow-children: right;
	font-family: platformfont;
	margin-right: 50px;

	width: 100%;
}

#GameName
{
	margin-top: -9px;
	color: detailsdatalabelfocus;
	font-family: platformfont;
	font-size: 56px;
	font-weight: bold;
	width: 75%;
	height: 70px;
}

#NotificationArea
{
	flow-children: right;
	horizontal-align: right;
	height: 70px;
}

#Clock
{
	color: detailsdatalabelfocus;
	flow-children: right;
	horizontal-align: right;
	vertical-align: center;
	text-align: left;
	font-size: 36px;
	line-height: 36px;
}

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

#CommunityFriendsStrip
{
	opacity: 1.0;

	width: 100%;
	height: 800px;

	margin-top: 68px;
	margin-left: 0px;
}

#OverlayDashboard
{
	width: 1920px;
	height: 1080px;
}

#UpperRow
{
	margin-top: 40px;
	width: 100%;
}



.LinksAndActionsWrapper
{
    margin-top: 0px;
}

#ContentsRow
{
	width: 51.5%;
	height: 100%;

	flow-children: right-wrap;
	opacity: 1.0;

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

	padding-top: 10px;
	padding-bottom: 120px;
}

#ContentsRow:descendantfocus
{
	opacity: 1.0;
	saturation: 1.0;

	opacity-mask: url( "file://{images}/lower_row_mask.tga" ) 0.0;

	flow-children: right-wrap;
}

#BroadcastLabelText
{
	width: 100%;
	height: fill-parent-flow( 1.0 );
	font-size: 21px;
	line-height: 24px;
	margin-bottom: 2px;
	white-space: normal;
	font-weight: normal;
	font-family: platformfont;
}

#Notifications.Empty
{
	visibility: collapse;
}

#OverlayNotificationList
{
	margin: 0px;
	margin-top: 8px;
	width: 100%;
	height: 50%;
	
	flow-children: right;
}

#OverlayNotificationList AvatarImage
{
	margin-right: 4px;
	border-radius: 0px;
}

#BroadcastStopBotton
{
	width: 100%;
	margin: 0px 24px 24px 24px;
	padding: 8px 7px 8px 7px;
}

.OverlayNotificationWatchRequest
{
	margin: 0px;
	width: 100%;
	height: 120px;
	margin: 10px;
	flow-children: right;
}

.OverlayNotificationWatchRequestText
{
	font-size: deffontsize;
	font-family: platformfont;
	color: tcstatictext;
	height: 60px;
	width: 100%;
	overflow: squish scroll;
}

.OverlayNotificationWatchRequestFrame
{
	flow-children: down;
}

.OverlayNotificationWatchRequestCapsule
{
	flow-children: right;
	vertical-align: bottom;
	height: 60px;
}


.FirstTimeBroadcastPanel
{
	width: 880px;
	height: fit-children;

	vertical-align: center;
	horizontal-align: center;

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

	background-color: dialog_bg_color;
}

.FirstTimeBroadcastFrame
{
	margin: 40px;
	padding-left: 30px;
	padding-top: 30px;
	flow-children: down;
	overflow: squish scroll;
}

.FirstTimeBroadcastSpacer
{
	margin-top: 21px;
}


.FirstTimeBroadcastOptions
{
	margin-top: 24px;
	margin-bottom: 20px;
	horizontal-align: left;
}

.ButtonText
{	
	font-size: 24px;
	margin-left: 10px;
	margin-top: 3px;
	color: applabelsolid;
	text-transform: uppercase;
}

Button:focus .ButtonText,
Button:hover .ButtonText,
Button:focus:hover .ButtonText
{
	color: applabelselectedsolid;	
}

#FirstTimeBroadcastPanel Button
{
	width: 150px;
}

#FirstTimeBroadcastPanel .RadioButton Label
{
	margin-top: 0px;
	margin-left: 4px;
	font-size: 24px;
	transform: translateX( 0px );
}
	
#FirstTimeBroadcastPanel .RadioButton:hover Label,
#FirstTimeBroadcastPanel .RadioButton:focus Label, 
#FirstTimeBroadcastPanel .RadioButton:focus:hover Label 
{
	transform: translateX( 0px );
}

#FirstTimeBroadcastPanel .CheckBox Label
{
	padding-left: 0px;
	padding-top: 0px;
	padding-bottom: 5px;
	font-size: 28px;
}

#FirstTimeBroadcastPanel .CheckBox:hover Label
{
	color: #ffffffff;
}

#FirstTimeBroadcastPanel .CheckBox:focus Label
{
	color: #000000ff;
}

#FirstTimeBroadcastPanel .SettingsLeftContent Button, .CheckBox,RadioButton
{
	width: 620px;
}

.LibraryContent
{
	width: 100%;
	height: 100%;
}

#OverlayBasePanel .LibraryDetailsScrollableArea.Overlay
{
	max-width: 1300px;
}



.BroadcastOverlayPanel
{
	visibility: visible;
	height: 70px;
	padding-top: 5px;
	padding-left: 12px;
	padding-right: 8px;
	width: fit-children;
	flow-children: right;
	horizontal-align: center;

	background-color: gradient( linear, 0% 0%, 0% 100%, from( #12334c ), to( #14445e ) );

	border-radius: 3px;

	visibility: collapse;
}

.BroadcastOverlayPanel.Live,
.BroadcastOverlayPanel.RequestsPending
{
	visibility: visible;
}

.Button.TopRowButton.BroadcastOverlayPanel
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #12334c ), to( #14445e ) );
}

.BroadcastOverlayPanel:hover,
.BroadcastOverlayPanel:focus
{
	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;

	horizontal-align: center;
}

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

.BroadcastOverlayPanel:hover Label,
.BroadcastOverlayPanel:focus Label
{
	transform: none;
}


ContentFrame .BroadcastOverlayPanel
{
	background-color: transparent;
}

ContentFrame #PlaybackStatusLabel,
ContentFrame #SpectatorIcon
{
	visibility: collapse;
}

#MicStatusIcon,		
#RecordStatusIcon,
#SpectatorIcon,
#RequestsIcon
{
	width: 48px;
	height: 48px;
	margin-right: 6px;
	horizontal-align: center;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 48px 48px;		
	vertical-align: middle;
}

.BroadcastOverlayPanel Label,
#PlaybackStatusLabel
{	
	width: fit-children;
	margin-bottom: 6px;
	margin-right: 6px;
	font-size: 30px;
	font-weight: light;
	color: ui_primary_color;
	font-family: platformfont;
	vertical-align: middle;
}

.RequestsPending #PlaybackStatusLabel
{
	color: #14c6fc40;
}

.BroadcastOverlayPanel .RequestsOnly,
.BroadcastOverlayPanel .LiveOnly,
.BroadcastOverlayPanel.Live .RequestsOnly
{
	visibility: collapse;
}

.BroadcastOverlayPanel.RequestsPending .RequestsOnly,
.BroadcastOverlayPanel.Live .LiveOnly
{
	visibility: visible;
}

.BroadcastOverlayPanel:hover Label
{
	color: applabelsolid;
}

#MicStatusIcon	
{
	margin-right: 0px;
	wash-color: ui_primary_color;
	background-image: url( "file://{images}/systemmenu/microphone.png" );
	width: 54px;
	height: 54px;
	background-size: 54px 54px;		
	background-position: 0px -3px;
	margin-right: 0px;
}

.BroadcastOverlayPanel:hover #MicStatusIcon,
.BroadcastOverlayPanel:focus #MicStatusIcon
{
	wash-color: applabelsolid;
}

#RecordStatusIcon
{
	width: 38px;
	height: 38px;
	background-size: 38px 38px;	
	margin-bottom: 4px;
	background-color: red;
	border-radius: 50%;
}

.RequestsPending #RecordStatusIcon
{
	background-color: #ad454340;
}

#SpectatorIcon
{
	width: 54px;
	height: 54px;
	background-size: 54px 54px;	
	wash-color: ui_primary_color;
	background-image: url( "file://{images}/systemmenu/group.png" );
}

#RequestsIcon
{
	width: 54px;
	height: 54px;
	background-size: 54px 54px;	
	wash-color: ui_primary_color;
	background-image: url( "file://{images}/systemmenu/grouprequest.png" );
}

.BroadcastOverlayPanel:hover #SpectatorIcon,
.BroadcastOverlayPanel:focus #SpectatorIcon
{
	wash-color: applabelsolid;
}

OverlayBasePanel .BroadcastOverlayPanel
{
	margin-right: 10px;
}