#FriendsUI
{
	transition-property: transform, opacity, height;
	transition-duration: 0.3s, 0.1s, 0.25s;
	transition-delay: 0.0s, 1.0s, 0.0s;
	transition-timing-function: ease-in-out, ease-in-out, ease-out;

	width: 100%;
	height: 100%;

	opacity: 1.0;
	background-image: url( "file://{images}/panel_background.png" );
}

#FriendsUI.SlideAwayToRight
{
	opacity: 0.0;
	transition-delay: 0.0s, 0.0s;
	transform-origin: 0% 0% parent-relative;
	transform: translateX(	1920px ) rotateX( 0deg ) translateZ( 0px );
}

#FriendsUI.HideKeyboard
{
	height: 100%;
}

#FriendsUI.ShowKeyboard
{
	height: 75%;
}

ContentFrame #FriendsUI.Visible
{
	visibility: visible;
	opacity: 1.0;
}

.Deleting
{
	opacity: 0.0;
}

#Container
{
	width: 100%;
	height: 95%;
	flow-children: down;

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

.LoadingPage #Container
{
	opacity: 0.0;
}

.ShowKeyboard #Container
{
	height: 100%;
}

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

Button Label
{
	opacity: 1.0;
	color: #A0A0A0ff;
	margin-left: 4px;
	vertical-align: center;
	text-align: center;
	font-size: 30px;
	line-height: 38px;
	font-family: platformfont;
	width: 100%;
	height: 100%;

	white-space: nowrap;
	text-overflow: clip;
	transition-property: opacity;
	transition-duration: 0.15s;
	transition-timing-function: bigpicture-ease-in-out;
}

Button:focus Label
{
	color: black;
}

Button:hover Label
{
	color: tcexitrowhover;
}

Button
{
	padding: 8px 8px;
	box-shadow: #eeeeee00 -5px -5px 6px 10px;
	border: 5px solid #0d1c2200;
	color: tcexitrow;
	background-color: #0d192100;

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

	flow-children: right;
	horizontal-align: right;

}

Button:hover
{
	transition-duration: 0.3s !immediate;

	color: tcexitrowhover;
	box-shadow: #A0A0A060 -5px -5px 6px 20px;
}

Button:focus
{
	transition-duration: 0.3s !immediate;

	border-width: 5px;
	border-style: solid;
	border-color: #fdfefef0;

	background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdff ), to( #bdbfbfff ) );

	// Remove border, so we dont transition border out on focus lost, that looks weird.
	transition-property: blur, background-color, color, transform;

	transform: translatez( 0px );
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;

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

HTML #MousePanningImage
{
	visibility: collapse;
}

#Throbber
{
	vertical-align: center; 
	horizontal-align: center;
	width: 54px;
	height: 54px;
	opacity: 0.0;
	//background-color: #000000aa;

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


.LoadingPage #Throbber
{
	opacity: 1.0;
}

HTML MouseScrollRegion
{
	visibility: collapse;
}

HTML.HasVerticalScrollbar .TopMouseScrollRegion,
HTML.HasVerticalScrollbar .BottomMouseScrollRegion
{
	visibility: visible;
}

HTML .BottomMouseScrollRegion
{
	transform: translatex( 0px );
}

HTML.HasHorizontalScrollbar .LeftMouseScrollRegion,
HTML.HasHorizontalScrollbar .RightMouseScrollRegion
{
	visibility: visible;
}

#ShowKeyboardButton
{
	width: 100%;
	height: 5%;
	vertical-align: bottom;
	opacity: 1.0;
}

.VR #ShowKeyboardButton
{
	width: 94%;
	horizontal-align: right;
}

.VR #BackButton
{
	width: 6%;
	height: 5%;
	horizontal-align: left;
	vertical-align: bottom;
	opacity: 1.0;
}

.LoadingPage #ShowKeyboardButton,
.LoadingPage #BackButton
{
	opacity: 0.0;

	transition-property: opacity;
	transition-duration: 3s;
	transition-delay: 0.0s;
	transition-timing-function: ease-in;
}

.ShowKeyboard #ShowKeyboardButton,
.ShowKeyboard #BackButton
{
	height: 0%;
}

#ShowKeyboardLabel,
.VR #BackButtonLabel
{
	horizontal-align: center;
	width: 13%;
	margin-top: -10px;
	opacity: 1.0;
}

.VR #BackButtonLabel
{
	width: 100%;
}

.ShowKeyboard #ShowKeyboardLabel,
.ShowKeyboard #BackButtonLabel
{
	opacity: 0.0;
}