/* Styles for community background on main menu */

/*@define bgcolor: #00000000;
@define bgcolorwash: white;
@define bgcolorwashmedium: white;
@define bgcolorwashlight: white;*/


#CommunityFriendsStrip, #CommunityFeedStrip
{
	width: 1920px;
	height: 1080px;

	perspective-origin: 62% 5% invert;
}

#CommunityFeedStrip
{
	height: 610px;
	vertical-align: bottom;
}

OverlayBasePanel #CommunityFriendsStrip
{
	height: 800px;
	margin-top: -175px;
}

#OverlayDashboard:descendantfocus #CommunityFriendsStrip
{
	transform: translateY( -5px );
	
	transition-property: transform;
	transition-duration: 0.25s;
	transition-timing-function: bigpicture-ease-in-out;
}

#OverlayDashboard:descendantfocus #CommunityFriendsStrip:descendantfocus
{
	transform: translateY( 40px );
}

#CommunityFeedStrip
{
	opacity: 0.0;
}

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

#CommunityFriendsStripWrapper, #CommunityFeedStripWrapper
{
	perspective: 1000;
	z-index: -1000;
	
	width: 1920px;
	height: 1080px;
	
	perspective-origin: 62% 5% invert;
}

#CommunityFeedStripWrapper
{
	height: 480px;
}

#CommunityFriendsStripWrapperBackground, #CommunityFeedStripWrapperBackground, #ProfileFriendsStripWrapperBackground
{
	width: 1920px;
	height: 1080px;

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

#CommunityFeedStripWrapperBackground
{
	height: 480px;
}



.CommunityFriendsCarousel
{
	animation-name: communityfriends-perspective;
	animation-duration: 20s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal; 
	
	pre-transform-scale2d: 1.0;
	
	transition-property: transform, pre-transform-scale2d, blur, opacity, saturation;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;

}

.CommunityFriendsCarousel, .CommunityFeedCarousel
{
	perspective: 1000;
	width: 2220px;
	height: 100%;
	margin-top: 0px;
	overflow: noclip clip;
	opacity: 0.8;
	saturation: 0.7;
	transition-property: saturation, opacity, position, blur, transform, opacity-mask, pre-transform-scale2d;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
	opacity-mask: url( "file://{images}/background_alpha_mask.png" ) 1.0;

	pre-transform-scale2d: 1.0;

	transition-delay: 0s;

}

.CommunityFeedCarousel
{
	height: 350px;
	width: 2620px;
	margin-top: 0px;
	flow-children: right;
	opacity: 0.0;

	transform: translatez( -600px );
}

.CommunityVisible:descendantfocus .CommunityFriendsCarousel
{
	position: -150px -380px 0px;
	animation-name: none;
	perspective-origin: 50% 50%;
}


.CommunityVisible:descendantfocus .CommunityFeedCarousel
{
	position: -350px 170px 0px;
	animation-name: none;
	perspective-origin: 50% 50%;
}


.CommunityFriendsStripWrapperBackgroundBaseVisible,
.ProfileVisible #CommunityFriendsStripWrapper
{
	visibility: visible;
	transform-origin: 0% 0% parent-relative;
	transform: rotateZ( -32deg ) rotateX( 30deg ) translate3d( 0px, 580px, 230px ) ;
	opacity: 1.0;	
}

.ProfileVisible #CommunityFriendsStripWrapper
{
	transition-property: transform, opacity;
	transition-duration: 0.4s;
}

ProfileWrapper #CommunityFriendsStripWrapper
{
	transition-property: opacity, transform;
	transition-duration: 0.4s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.CommunityVisible:descendantfocus .CommunityFriendsStripWrapperBackgroundBaseVisible
{
	transform-origin: 0% 0% parent-relative;
	transform: rotateZ( 0deg ) translate3d( 0px, 200px, 0px );
	opacity: 1.0;
}
OverlayBasePanel .CommunityVisible:descendantfocus .CommunityFriendsStripWrapperBackgroundBaseVisible
{
	padding-top: 200px;
	transform-origin: 0% 0% parent-relative;
	transform: rotateZ( 0deg ) translate3d( 0px, 0px, 0px );
	opacity: 1.0;	
}


.CommunityFriendsStripWrapperBackgroundBaseInvisible
{
	opacity: 0.0;
}

CommunityMainPanel.CommunityFriendsTransitionDownAndOff
{
	transform-origin: 0% 0% parent-relative;
	transform: translateY( 800px ) translateZ( 0px ) rotateZ( -32deg ) rotateX( 30deg ) translate3d( 0px, 580px, 230px ) ;
	saturation: 0.7;
	opacity: 0.0;
}

CommunityMainPanel.CommunityFriendsTransitionLeftAndOff
{
	transform-origin: 0% 0% parent-relative;
	transform: translateX( -1000px ) translateY( 200px ) translateZ( 0px ) rotateZ( -32deg ) rotateX( 30deg ) translate3d( 0px, 580px, 230px ) ;
	saturation: 0.7;
	opacity: 0.0;
}

CommunityMainPanel.CommunityFriendsTransitionRightAndOff,
.ProfileTransitionRightAndOff #CommunityFriendsStripWrapper 
{
	transform-origin: 0% 0% parent-relative;
	transform: translateX( 1000px ) translateY( -200px ) translateZ( 0px ) rotateZ( -32deg ) rotateX( 30deg ) translate3d( 0px, 580px, 230px ) ;
	saturation: 0.7;
	opacity: 0.0;
}

@keyframes 'communityfriends-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;
	}
}



.CommunityVisible:descendantfocus .CommunityFriendStripItem
{
	border-radius: 0px;
	padding-top: 50px;
	opacity: 1.0;
	saturation: 1.0;
	margin-left: 0px;
	margin-right: 0px;
	box-shadow: #00000000 0px 0px 0px 0px;
}

.CommunityFriendStripItem
{
	transform: translate3d( 646px, 368px, -490px );
	blur: gaussian( 1.4 );
	opacity: 0.8;
	box-shadow: #00000000 0px 0px 0px 0px;

	transition-property: opacity, box-shadow, transform, opacity-mask, background-color, position, border, opacity, blur, pre-transform-scale2d;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}


.CommunityVisible:descendantfocus .CommunityFriendStripItem
{
	transform: translatez(-500px);
	opacity: 1.0;
	blur: none;
	saturation: 1.0;
	pre-transform-scale2d: 1.0;
}

.CommunityVisible:descendantfocus .CommunityFriendStripItem
{
	max-width: 330px;
	margin-left: 20px;
	margin-right: 20px;
}

.CommunityVisible:descendantfocus .CommunityFriendStripItem:descendantfocus
{
	transform: translatez(0px);
}