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

@keyframes 'profilecontent-perspective'
{
	from
	{
		perspective-origin: 60% 50% invert;
	}

	10%
	{
		perspective-origin: 64% 52% invert;
	}

	15%
	{
		perspective-origin: 64% 52% invert;
	}
	
	25%
	{
		perspective-origin: 66% 55% invert;
	}

	50%
	{
		perspective-origin: 68% 60% invert;
	}

	75%
	{
		perspective-origin: 63% 52% invert;
	}

	80%
	{
		perspective-origin: 63% 52% invert;
	}

	to	
	{
		perspective-origin: 60% 50% invert;
	}
}

#ProfileWrapper
{
	height: 100%;
	width: 100%;
	
	opacity: 0.0;
	transition-property: transform, position, opacity;
	transition-duration: mediumduration;
	transition-delay: 0s;
	transition-timing-function: linear;
}

#ProfileWrapper.ProfileVisible
{
	transform: translatey( 0px );
	opacity: 1.0;
}

#ProfileWrapper ProfilePanel
{
	opacity: 0.0;
}

#ProfileWrapper .ProfileInvisible
{
	opacity: 0.0;
	transform: translate3d( 0px, 1280px, 1000px );
}

#ProfileWrapper:descendantfocus .ProfileVisible
{
	 opacity: 1.0;
}


#ProfileWrapper.ActivityFocused ProfilePanel#Profile,
#ProfileWrapper.InventoryFocused ProfilePanel#Profile
{
	transform: translate3d( 0px, 1280px, 1000px );
	opacity: 0.0;
}

#SpoofNotice
{
	font-size: 32px;
	horizontal-align: right;
	padding-right: 80px;
	padding-top: 150px;
	color: #fe4a0bff;
}

#ProfileNavBar
{
	width: 100%;
	height: 80px;
	margin-top: 115px;
	padding-left: 95px;
	padding-right: 100px;
	opacity: 0.0;

	flow-children: right;

	transition-property: transform, position, opacity;
	transition-duration: mediumduration;
	transition-delay: 1.5s;
	transition-timing-function: linear;

}

.ProfileVisible #ProfileNavBar,
{
	opacity: 1.0;
	transition-duration: 0.0s;
}

#ProfileNavBar Label
{
	font-size: 36px;
	font-weight: light;

	color: tcexitrow;
	opacity: 0.7;

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

}

#ProfileNavBar Button Label
{
	pre-transform-scale2d: 1.0;
	
	transition-property: opacity, color, pre-transform-scale2d;
	transition-duration: 0.3s;
	transition-delay: 0s;
	transition-timing-function: bigpicture-ease-in-out;
}

#ProfileNavBar Button:Focus Label
{
	color: applabelselectedsolid;
	opacity: 1.0;
}

#ProfileNavBar .Selected Label
{
	opacity: 1.0;
	color: applabelsolid;
	pre-transform-scale2d: 1.0;
	
	transition-property: opacity, color, pre-transform-scale2d;
	transition-duration: 0.3s;
	transition-delay: 0s;
	transition-timing-function: bigpicture-ease-in-out;
}

#ProfileNavBar Button:hover Label
{
	opacity: 1.0;
	pre-transform-scale2d: 1.04;
}

#ProfileNavBar Button.Selected:hover Label
{
	opacity: 1.0;
	pre-transform-scale2d: 1.04;
}

#ProfileNavBar Button
{

	box-shadow: box_shadow_off_color -4.5px -4.5px 16px 10px;
	border: 5px solid #fdfefe00;
	color: carousel_title;
	background-color: #0d192100;

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

	padding-left: 12px;
	padding-right: 12px;
	padding-top: 10px;
	padding-bottom: 10px;

	margin: 5px;
	margin-right: 30px;
}	

#ProfileNavBar Button:focus
{
	opacity: 1.0;
	color: black;
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #fdfdfdff ), to( #bdbfbfff ) );

	border: 5px solid #fdfefef0;

	// Remove border, so we dont transition border out on focus lost, that looks weird.
	transition-property: blur, background-color, color, max-width, 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.3s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

#OverlayBasePanel ProfilePanel #ProfileContent.ProfileLoading,
ProfilePanel #ProfileContent.ProfileLoading,
{
	transition-duration: 0.3s;
	opacity: 0.0;
	transform: translate3d( 0px, 1280px, 1000px );
}

#OverlayBasePanel ProfilePanel #ProfileContent.ProfileLoading.LoadingVisible,
ProfilePanel #ProfileContent.ProfileLoading.LoadingVisible,
{
	opacity: 1.0;
	transform: translate3d( 0px, 0px, 0px );
}



ProfilePanel
{
	width: 100%;
	height: 948px;
	vertical-align: bottom;

	opacity: 0.0;

	perspective-origin: 62% 5% invert;

	transition-property: transform, position, opacity;
	transition-duration: mediumduration;
	transition-delay: 0s;
	transition-timing-function: linear;
}

.ProfileVisible ProfilePanel
{
	opacity: 1.0;

}

.ProfileInvisible ProfilePanel
{
	opacity: 0.0;
}

ProfilePanel #ProfileContent,
ProfilePanel #ContentRow
{
	width: 100%;
	height: 100%;

	perspective: 1000;
	animation-name: profilecontent-perspective;
	animation-duration: 20s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;

	opacity: 0.0;
	opacity-mask: url( "file://{images}/background_alpha_mask.png" ) 1.0;

	transform-origin: 0% 0% parent-relative;
	transform: translate3d( 0px, 1280px, 1000px );

	transition-property: transform, position;
	transition-duration: mediumduration;
	transition-timing-function: bigpicture-ease-in-out;

}

#OverlayBasePanel ProfilePanel #ProfileContent,
ProfilePanel #ProfileContent,
ProfilePanel #ContentRow
{
	opacity: 1.0;
	animation-name: none;
	animation-duration: 0s;
	box-shadow: #000000aa -2px -2px 4px 4px;
	margin-top: 4px;

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

	transform: translateX( 0px );
}

@keyframes 'background-visible'
{
	0%
	{
		opacity: 0.0;
	}

	100%
	{
		opacity: 1.0;
	}
}

ProfilePanel #ProfileContent
{
	opacity-mask: url( "file://{images}/background_alpha_mask.png" ) 0.0;
	transform: translatex( 0px );
	animation-name: none;
}


ProfilePanel .ProfileBackground
{
	width: 75%;
	height: 75%;
	
	position: 12.5% 12.5% 0%;

	pre-transform-scale2d: 1.33333;

	opacity: 0.0;

	transition-property: opacity;
	transition-duration: mediumduration;
	transition-delay: 0s;
	transition-timing-function: linear;
}

#OverlayBasePanel .ProfileVisible .ProfilePanel .ProfileBackground,
.ProfileVisible .ProfilePanel .ProfileBackground
{
	animation-duration: mediumduration;
	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: 1;
	animation-direction: normal;

	opacity: 1.0;
}

.ProfileVisible .ProfilePanel #UpperRow
{
	width: 100%;
	height: 122px;
	margin-top: 20px;
	margin-left: 100px;
	margin-right: 100px;

}

ProfilePanel #Loading
{
	width: 100%;
	height: 100%;

	background-image: url( "file://{images}/profile/activity_bg_wash.png" );
	background-size: 100% 100%;
}

#Loading
{
	opacity: 0.0;
	transition-property: opacity;
	transition-duration: 0.25s;
	transition-delay: 1.0s;
}

#Loading:focus
{
	opacity: 1.0;
}

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

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


ProfilePanel LoadingThrobber
{
	horizontal-align: center;
	margin-top: 350px;

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

}

#Offline,
#Error
{
	opacity: 0.0;
	width: 100%;
	height: 100%;
	transition-property: opacity;
	transition-duration: 0.23s;
	transition-delay: 1.25s;

	padding-bottom: 50px;
}

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

#Loading,
#OverlayBasePanel.Offline #Loading,
.LoadError #Loading
{
	opacity: 0.0;
}

#OverlayBasePanel.Offline #Offline,
.Offline #Offline,
.LoadError #Error
{
	opacity: 1.0;
	transition-delay: 0.0s;
}

#OfflineStatus1,
#OfflineStatus2,
#ErrorStatus1,
#ErrorStatus2
{
	color: tcstatictext;
	horizontal-align: center;

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

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

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

.Offline #ProfileNavBar
{
	visibility: collapse;
	opacity: 0.0;
	height: 0px;
}

.Offline #ProfileWrapper.ActivityFocused #FriendActivity
{
	transform: translatey( 122px );
	height: 958px;
}

ProfilePanel.ProfileLoaded, 
ProfilePanel.ProfileVisible,
ProfilePanel #ProfileBackground.ProfileBackground,
ProfilePanel #FriendActivity,
ProfilePanel #Inventory,
{
	opacity: 1.0;
}