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

#CommunityWrapper
{
	transition-property: transform, saturation, opacity, position, blur, opacity-mask;
	transition-duration: mediumduration;
	transition-delay: 0s;
	transition-timing-function: linear;

	height: 100%;

	vertical-align: bottom;
	
	opacity: 0.0;
}

#CommunityWrapper.CommunityVisible
{
	opacity: 1.0;
}


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

#CommunityWrapper CommunityPanel
{
	opacity: 0.0;
}

CommunityPanel
{
	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: bigpicture-ease-in-out;
}

CommunityHubContentPanel
{
	width: 100%;
	height: 100%;
}

#CommunityWrapper:descendantfocus .CommunityVisible
{
	opacity: 1.0;
}

#CommunityWrapper:descendantfocus #CommunityMenu.CommunityLoaded
{
	opacity: 1.0;
}

.CommunityInvisible,
#CommunityWrapper CommunityPanel.CommunityInvisible
{
	opacity: 0.0;
}

.ContentPanel .CommunityContent,
CommunityPanel #CommunityContent,
CommunityPanel #ContentRow
{
	width: 100%;
	height: 100%;

	opacity: 0.0;

	transform-origin: 0% 0% parent-relative;
	transition-property: transform, position, opacity, pre-transform-scale2d, opacity-mask;
	transition-duration: mediumduration;
	transition-delay: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;
}

.ContentPanel .CommunityContent,
.ContentPanel #CommunityContent
{
	opacity: 1.0;
	opacity-mask: none;
	transform: none;
	width: 100%;
	height: 100%;
}

CommunityHubContentPanel #CommunityContent,
CommunityHubContentPanel #ContentRow,
{
	width: 100%;
	height: 100%;
}

#CommunityMenu #CommunityContent
{
	opacity: 1.0;
}


CommunityPanel #CommunityContent,
CommunityPanel #ContentRow,
{
	opacity: 1.0;
}

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

	100%
	{
		opacity: 1.0;
	}
}

CommunityPanel .CommunityBackground
{
	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 .CommunityVisible .CommunityPanel .CommunityBackground,
.CommunityVisible .CommunityPanel .CommunityBackground,
{
	animation-name: background-visible;
	animation-duration: mediumduration;
	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: 1;
	animation-direction: normal;

	opacity: 1.0;
}

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

}

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

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

.CommunityLoading #Loading,
#Loading:focus
{
	opacity: 1.0;
}

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

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

CommunityHubContentPanel LoadingThrobber,
CommunityPanel LoadingThrobber
{
	horizontal-align: center;
	margin-top: 350px;

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

CommunityPanel#CommunityMarketItemPicker
{
	width: 100%;

	background-image: url( "file://{images}/profile/activity_bg_wash.png" );
	background-size: 100% 100%;
	box-shadow: #000000aa -4px -4px 8px 8px;

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

#CommunityMarketItemPicker
{
	transition-property: transform;
	transition-timing-function: ease-out;
	transition-duration: 0.23s;
}

#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;
}

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

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

#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;
}
	


CommunityPanel
{
	transform: translate3d( 0px, 1280px, 1000px );
}


#CommunityMenu
{
	transform: none;
}

.CommunityDepth1 CommunityPanel.CommunityVisible.VisibleDepth1,
.CommunityDepth2 CommunityPanel.CommunityVisible.VisibleDepth2,
.CommunityDepth3 CommunityPanel.CommunityVisible.VisibleDepth3,
.CommunityDepth4 CommunityPanel.CommunityVisible.VisibleDepth4,
.CommunityDepth5 CommunityPanel.CommunityVisible.VisibleDepth5
{
	transform: none;
}

.CommunityDepth3 CommunityPanel.CommunityVisible.VisibleDepth2,
.CommunityDepth4 CommunityPanel.CommunityVisible.VisibleDepth3,
.CommunityDepth5 CommunityPanel.CommunityVisible.VisibleDepth4
{
	transform: translate3d( 0px, -100px, -100px );
}

#OverlayBasePanel #CommunityGameHub #CommunityContent
{
	opacity: 1.0;
}

#OverlayBasePanel #CommunityGameHub.CommunityVisible
{
	opacity: 1.0;
}


#CommunityWrapper CommunityPanel
{
	width: 2120px;
	margin-left: -100px;
	margin-right: -100px;
	padding-left: 100px;
	padding-right: 100px;

	box-shadow: #000000aa -4px -4px 8px 8px;
}

#CommunityAppHubPopup
{
	height: 100%;
	width: 100%;
	z-index: 1000;

	transition-property: pre-transform-scale2d, transform;
	transition-duration: shortduration;
	transition-timing-function: bigpicture-ease-in-out;
}

#CommunityAppHubPopup LoadingThrobber
{
	horizontal-align: center;
	vertical-align: center;

	transition-property: opacity;
	transition-duration: shortduration;
}

#CommunityAppHubPopup LoadingThrobber.LoadComplete
{
	opacity: 0.0;
}


.TopBarButton
{
	height: 70px;
	width: 100%;
	background-color: transparent;
}

.CommunityDepth1 .TopBarButton,
.CommunityDepth1 .MidStackButton,
.CommunityDepth2 .MidStackButton
{
	visibility: collapse;
}

.CommunityDepth2 .TopBarButton
{
	height: 122px;
}

.MidStackButton
{
	height: 52px;
	width: 100%;
	background-color: transparent;
	y: 70px;
}


#WebFatalError
{
	height: 100%;
	width: 100%;
	padding-bottom: 50px;
}

#WebFatalError #ErrorMessage
{
	height: 100%;
	width: 100%;
}

#WebFatalError #ErrorMessage Label
{
	max-width: 75%;
	height: 20%;

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

	color: tcstatictext;
	text-align: center;

	font-size: largefontsize;
}

CommunityHubContentPanel #Loading
{
	transform: translatey( -14px );
	width: 1400px;
}