@define FriendsProfileDetailsMenuFadoutTime: 0.4s; // code uses this define name, so don't rename it

//
// Styles for friends profile details
//

AvatarImage
{
		pre-transform-scale2d: 1.2;
}

#OverlayDashboard AvatarImage
{
	width: 95px;
	height: 95px;
}

FriendsProfileDetails, ProfileOptions
{
       width: 100%;
       height: 100%;

       animation-name: friends-profile-details-appear;
       animation-duration: FriendsProfileDetailsMenuFadoutTime;
       animation-timing-function: bigpicture-ease-in-out;
       animation-iteration-count: 1;
       
       opacity: 1.0;
       transition-property: opacity, pre-transform-scale2d, transform;
       transition-duration: 0.4s;
}


FriendsProfileDetails.ScreenSaverMode,
ProfileOptions.ScreenSaverMode 
{
       opacity: 0.0;
}


FriendsProfileDetails.Destructing,
ProfileOptions.Destructing
{
	opacity: 0.0;

	animation-name: friends-profile-details-disappear;
	animation-duration: FriendsProfileDetailsMenuFadoutTime;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: 1;

}

@keyframes 'friends-profile-details-appear'
{
	from
	{
		opacity: 0.0;
		pre-transform-scale2d: 0.03;
		transform: translatez( 5px ) translatex( -400px ) translatey( 0px );
	}
	to
	{
		opacity: 1.0;
		transform: translatez( 0px );
	}
}

@keyframes 'friends-profile-details-disappear'
{
	from
	{
		opacity: 1.0;
		pre-transform-scale2d: 1.0;
		transform: translatez( 0px );

	}
	to
	{
		opacity: 0.0;
		pre-transform-scale2d: 0.25;
		transform: translatez( 5px ) translatex( -400px ) translatey( 0px );

	}
}

#FriendsProfileDetailsBodyRegion
{
	width: 380px;

	vertical-align: bottom;
	horizontal-align: left;

	margin-bottom: 140px;

	flow-children: down;


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

	background-color: dialog_bg_color;

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

//
// Main friends section overrides
//

FriendsProfileDetails #FriendsProfileDetailsBodyRegion,
ProfileOptions #FriendsProfileDetailsBodyRegion
{
	horizontal-align: center;
}

//
// Community friends strip overrides
//

FriendsProfileDetails#FriendsProfileDetailsInCommunityFriendsStrip,
ProfileOptions#FriendsProfileDetailsInCommunityFriendsStrip
{
	animation-name: friends-profile-details-appear-incommunityfriendsstrip;
}

FriendsProfileDetails#FriendsProfileDetailsInCommunityFriendsStrip.Destructing,
ProfileOptions#FriendsProfileDetailsInCommunityFriendsStrip.Destructing
{
	animation-name: friends-profile-details-appear-incommunityfriendsstrip;
}

FriendsProfileDetails#FriendsProfileDetailsInCommunityFriendsStrip #FriendsProfileDetailsBodyRegion,
ProfileOptions#FriendsProfileDetailsInCommunityFriendsStrip #FriendsProfileDetailsBodyRegion
{
	horizontal-align: center;
}

@keyframes 'friends-profile-details-appear-incommunityfriendsstrip'
{
	from
	{
		opacity: 0.0;
		pre-transform-scale2d: 0.5;
		transform: translatez( 5px ) translatex( 0px ) translatey( -85px );
	}

	to
	{
		opacity: 1.0;
		transform: translatez( 0px );
	}
}


//
// Library friends who play overrides
//

FriendsProfileDetails#FriendsProfileDetailsInLibraryFriendsWhoPlay,
ProfileOptions#FriendsProfileDetailsInLibraryFriendsWhoPlay
{
	animation-name: friends-profile-details-appear-inlibraryfriendswhoplay;
}

FriendsProfileDetails#FriendsProfileDetailsInLibraryFriendsWhoPlay.Destructing,
ProfileOptions#FriendsProfileDetailsInLibraryFriendsWhoPlay.Destructing
{
	animation-name: friends-profile-details-appear-inlibraryfriendswhoplay;
}

FriendsProfileDetails#FriendsProfileDetailsInLibraryFriendsWhoPlay #FriendsProfileDetailsBodyRegion,
ProfileOptions#FriendsProfileDetailsInLibraryFriendsWhoPlay #FriendsProfileDetailsBodyRegion
{
	horizontal-align: center;
}

@keyframes 'friends-profile-details-appear-inlibraryfriendswhoplay'
{
	from
	{
		opacity: 0.0;
		pre-transform-scale2d: 0.5;
		transform: translatez( 5px ) translatex( 0px ) translatey( 150px );
	}

	to
	{
		opacity: 1.0;
		transform: translatez( 0px );
	}
}



//
// Actual layout of friends details
//

#FriendsProfileDetailsCompositeHeader
{
	width: 100%;
	flow-children: down;
	margin-bottom: 10px;
}

#FriendsProfileDetailsCompositeHeader.Offline Label
{
	color: friendsoffline_darkbg;
}

#FriendsProfileDetailsCompositeHeader.Online Label
{
	color: friendsonline_darkbg;
}

#FriendsProfileDetailsCompositeHeader.InGame Label
{
	color: friendsingame_darkbg;
}

#FriendsProfileDetailsCompositeHeader.Golden Label
{
	color: friendsgolden_darkbg;
}

.FriendsProfileDetailsCompositeHeaderAvatar
{
	margin-top: 94px;
	margin-right: 94px;
	margin-left: 94px;
	margin-bottom: 62px;
	height: 182px;
	width: 182px;
	pre-transform-scale2d: 1.54;
	horizontal-align: center;
	border-width: 5px;
	border-style: solid;
	border-radius: 0px;
	transform: translatez( 50px );
	box-shadow: fill #00000060 0px 0px 12px 0px;
}

.Online .FriendsProfileDetailsCompositeHeaderAvatar
{
	border-color: friendsonline_solid;
}

.Offline .FriendsProfileDetailsCompositeHeaderAvatar
{
	border-color: friendsoffline_solid;
}

.InGame .FriendsProfileDetailsCompositeHeaderAvatar
{
	border-color: friendsingame_solid;
}

.Golden .FriendsProfileDetailsCompositeHeaderAvatar
{
	border-color: friendsgolden_solid;
}


#FriendsProfileDetailsCompositeHeader Label
{
	margin-left: 40px;
	margin-right: 28px;
	margin-top: 0px;
	margin-bottom: 4px;
	width: 100%;
	opacity-mask: url( "file://{images}/friends/friends_list_item_panel_labels_mask.tga" );
	vertical-align: center;
	white-space: nowrap;
	text-overflow: clip;
}

#FriendsProfileDetailsCompositeHeader Label.FriendsProfileDetailsCompositeHeaderName
{
	color: #d0d0d0ff;
	font-weight: bold;
	font-family: platformfont;
	font-size: 32px;
}

#FriendsProfileDetailsCompositeHeader .FriendsProfileDetailsCompositeHeaderState
{
	font-weight: normal;
	font-size: 24px;
	line-height: 27px;
	font-family: platformfont;
}

#FriendsProfileDetailsCompositeHeader .FriendsProfileDetailsCompositeHeaderStatusDetail
{
	font-weight: normal;
	font-size: 24px;
	line-height: 27px;
	font-family: platformfont;
}

#FriendsProfileDetailsActionsList
{
	width: 370px;
	height: 380px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	flow-children: down;
	overflow: squish scroll;

	opacity-mask-scroll-up: url( "file://{images}/friends/friends_list_mask_fade_top.png" );
	opacity-mask-scroll-down: url( "file://{images}/friends/friends_list_mask_fade_bottom.png" );
	opacity-mask-scroll-up-down: url( "file://{images}/friends/friends_list_mask_fade_both.png" );
}

FriendsProfileDetailsActionButton,
.FriendsProfileDetailsActionButton
{
	flow-children: right;
	margin-left: 20px;
	margin-right: 20px;
	padding-right: 12px;
	width: 100%;
	white-space: nowrap;
	box-shadow: none;

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

	font-size: 22px;
	font-family: platformfont;
	color: #d0d0d0ff;

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

FriendsProfileDetailsActionButton Label,
.FriendsProfileDetailsActionButton Label
{
	horizontal-align: left;
	width: 100%;
	color: applabel;
	transform: translatex(0px);
	padding: 7px;
	transition-property: color, position, transform;
	transition-duration: 0.25s;
	transition-timing-function: bigpicture-ease-in-out;
	text-overflow: clip;
	white-space: nowrap;
}
FriendsProfileDetailsActionButton:focus Label,
.FriendsProfileDetailsActionButton:focus Label
{
	horizontal-align: left;
	color: applabelselected;
	transform: translatex(7px);
	padding: 7px;
}

FriendsProfileDetailsActionButton:hover,
.FriendsProfileDetailsActionButton:hover
{
	background-color: #00000020;
	//pre-transform-scale2d: 1.05;
	box-shadow: box_shadow_on_color -5px -5px 6px 10px;
	margin-left: 16px;
	margin-right: 16px;
	padding-right: 12px;
}

FriendsProfileDetailsActionButton:focus,
.FriendsProfileDetailsActionButton:focus
{
	background-color: #00000020;

	color: #161718f5;
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #fdfdfdee ), to( #adafafe0 ) );
	border-color: #fdfefef0;
	margin-left: 20px;
	margin-right: 20px;
	padding-right: 12px;

	animation-name: friends-profile-details-button-focus;
	animation-duration: 1.7s;
	animation-delay: 0.4s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;

}


VerticalScrollBar
{

	height: 95%;
}


@keyframes 'friends-profile-details-button-focus'
{
	from
	{
		background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdee ), to( #adafafe0 ) ); 
	}

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

	to
	{
		background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdee ), to( #adafafe0 ) ); 
	}
}