@define transition_duration_FriendsFriendListItemCommunity: 0.3s;
@define community_feed_strip_reset_delay: 5.0s;
@define FeedDetailsMenuFadoutTime: 0.2s; // code uses this define name, so don't rename it
/*@define bgcolor: #00000000;
@define bgcolorwash: white;
@define bgcolorwashmedium: white;
@define bgcolorwashlight: white;*/

//
// Styles for friends profile details
//

CommunityMainPanel
{
	transition-property: transform, position, opacity;
	transition-duration: 0.3s;
	transition-delay: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;

	opacity: 0.0;
	width: 100%;
	vertical-align: bottom;
}

.CommunityInvisible
{
	
	opacity: 0.0;
}

.CommunityVisible
{
	opacity: 1.0;
}

.CommunityVisible.ScreenSaverMode
{
	opacity: 0.0;
}

.LeftMouseScrollRegion, .RightMouseScrollRegion
{
	opacity: 0.0;
	width: 80px;
	height: 100%;

	transition-property: background-color, opacity, transform;
	transition-duration: 0.3s, 0.3s, transition_duration_FriendsFriendListItemCommunity;
	transition-delay: 0.3s, 0.3s, 0.0s;
	transition-timing-function: bigpicture-ease-in-out;
	background-color: #ff0000ff;

	background-position: center center;
	background-repeat: no-repeat;
	background-size: 80px 80px;
}

.CommunityFriendsCarousel .LeftMouseScrollRegion
{
	margin-top: -35px;
	transform: translatex( 0px );
}

.CommunityFriendsCarousel .RightMouseScrollRegion
{
	margin-top: -35px;
	transform: translatex( -0px );
}

.CommunityFriendsCarousel:hover .LeftMouseScrollRegion
{
	transform: translatex( 27px );
}

.CommunityFriendsCarousel:hover .RightMouseScrollRegion
{
	transform: translatex( -27px );
}


.CommunityFriendsCarousel:descendantfocus .LeftMouseScrollRegion
{
	transform: translatex( 150px );
}

.CommunityFriendsCarousel:descendantfocus .RightMouseScrollRegion
{
	transform: translatex( -150px );
}

.CommunityFeedCarousel .LeftMouseScrollRegion
{
	margin-top: -15px;
	transform: translatex( 0px );
}

.CommunityFeedCarousel .RightMouseScrollRegion
{
	margin-top: -15px;
	transform: translatex( -0px );
}

.CommunityFeedCarousel:hover .LeftMouseScrollRegion
{
	transform: translatex( 32px );
}

.CommunityFeedCarousel:hover .RightMouseScrollRegion
{
	transform: translatex( -32px );
}


.CommunityFeedCarousel:descendantfocus .LeftMouseScrollRegion
{
	transform: translatex( 480px );
}

.CommunityFeedCarousel:descendantfocus .RightMouseScrollRegion
{
	transform: translatex( -220px );
}


.LeftMouseScrollRegion
{
	align: left center;
	background-image: url( "file://{images}/mouse/arrowLdefault.tga" );	
	background-color: mouse_hover_bg_left;
}

.RightMouseScrollRegion
{
	align: right center;
	background-image: url( "file://{images}/mouse/arrowRdefault.tga" );
	background-color: mouse_hover_bg_right;
}

Carousel:hover .LeftMouseScrollRegion
{
	opacity: 1.0;
	background-color: mouse_hover_bg_left;
}

Carousel:hover .RightMouseScrollRegion
{
	opacity: 1.0;
	background-color: mouse_hover_bg_right;
}

Carousel:hover .LeftMouseScrollRegion:hover
{
	background-color: mouse_active_bg_left;
}

Carousel:hover .RightMouseScrollRegion:hover
{
	background-color: mouse_active_bg_right;
}

#CommunityFriendsStrip:descendantfocus:hover .CursorVisible:descendantfocus .RightMouseScrollRegion:hover
{
	background-color: mouse_active_bg_right;
}

#CommunityFriendsStrip:descendantfocus .CursorVisible:descendantfocus .LeftMouseScrollRegion
{
	width: 80px;
	height: 100%;
	position: 0px -25px 0px;
}

#CommunityFriendsStrip:descendantfocus .CursorVisible:descendantfocus .RightMouseScrollRegion
{
	width: 80px;
	height: 100%;
	align: right center;
	position: -0px -25px 0px;
}

#CommunityFeedStrip:descendantfocus .CursorVisible:descendantfocus .LeftMouseScrollRegion
{
	width: 80px;
	height: 100%;
	position: 480px -10px 0px;
}

#CommunityFeedStrip:descendantfocus .CursorVisible:descendantfocus .RightMouseScrollRegion
{
	width: 80px;
	height: 100%;
	align: right center;
	position: -220px -10px 0px;
}

#CommunityFeedStrip:descendantfocus FriendsFeedListItemCommunity:hover
{

	pre-transform-scale2d: 1.03;
}

#CommunityFeedStrip:descendantfocus FriendsFeedListItemCommunity:hover AvatarImage
{
	box-shadow: box_shadow_on_color -5px -5px 6px 10px;
}

#CommunityFeedStrip:descendantfocus FriendsFeedListItemCommunity:focus AvatarImage
{
	box-shadow: inset #00000088 0px 0px 12px 0px;
}

#CommunityFeedStrip:descendantfocus FriendsFeedListItemCommunity:focus
{
	pre-transform-scale2d: 1.0;
	transform: translateX( 130px );
	opacity: 1.0;
	saturation: 1.0;
}

#CommunityFeedStrip:descendantfocus FriendsFeedListItemCommunity:descendantfocus:hover
{
	pre-transform-scale2d: 1.025;
}

#CommunityFriendsStripWrapper
{
	transition-property: transform, pre-transform-scale2d, position, opacity !immediate; 
	transition-duration: transition_duration_FriendsFriendListItemCommunity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
	
	pre-transform-scale2d: 1.0;
	height: 100%;
	width: 100%;
}

.CommunityVisible:descendantfocus .CommunityFriendsCarousel, .CommunityVisible:descendantfocus .CommunityFeedCarousel
{
	flow-children: right;
	perspective-origin: 50% 50%;
	opacity-mask: url( "file://{images}/background_alpha_mask.png" ) 0.0;
	opacity: 1.0;
	saturation: 0.8;
	blur: gaussian(0.2);
	pre-transform-scale2d: 1.0;

	transition-property: pre-transform-scale2d, blur, opacity, saturation, opacity-mask;
	transition-duration: transition_duration_FriendsFriendListItemCommunity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}


.CommunityVisible:descendantfocus .CommunityFriendsCarousel:descendantfocus, .CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus
{
	flow-children: right;
	perspective-origin: 50% 50%;
	opacity-mask: url( "file://{images}/background_alpha_mask.png" ) 0.0;
	opacity: 1.0;
	saturation: 1.0;
	blur: gaussian(0.0);
	pre-transform-scale2d: 1.0;

	transition-property: pre-transform-scale2d, opacity-mask, blur, opacity, saturation;
	transition-duration: transition_duration_FriendsFriendListItemCommunity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;

}

.CommunityVisible:descendantfocus .CommunityFeedCarousel
{
 opacity-mask: url( "file://{images}/lower_row_mask.tga" );
}

OverlayBasePanel .CommunityVisible:descendantfocus .CommunityFriendsCarousel, OverlayBasePanel .CommunityVisible:descendantfocus .CommunityFeedCarousel
{
	opacity: 1.0;
	saturation: 0.8;
	blur: none;
	transform: translateY( 350px ) translateX( -330px );
}

OverlayBasePanel .CommunityVisible:descendantfocus .CommunityFriendsCarousel
{
	opacity: 1.0;
	saturation: 0.8;
	blur: none;
	transform: translateY( 320px ) translateX( 0px ) translateZ( -150px );
}


.CommunityVisible:descendantfocus .CommunityFriendsCarousel
{

	transition-property: transform, pre-transform-scale2d, blur, opacity;
	transition-duration: transition_duration_FriendsFriendListItemCommunity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
	transform: translateY( 260px ) translateZ( -150px );
	opacity: 1.0;
	wash-color: bgcolorwashlight;
	height: 600px;
	pre-transform-scale2d: 1.0;
}

.CommunityVisible:descendantfocus .CommunityFriendsCarousel:descendantfocus
{


	transition-property: transform, pre-transform-scale2d;
	transition-duration: transition_duration_FriendsFriendListItemCommunity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
	transform: translatey( 350px ) translateZ( 0px );
	height: 600px;
	background-size: 100% 100%;
	wash-color: white;


	background-image: url( "file://{images}/carousel_bg.png");
	background-size: 1920px 400px;
	background-repeat: no-repeat;
	background-position: 100% 25%;
}



.CommunityVisible:descendantfocus .CommunityFeedCarousel
{
	transform: translatez( -400px ) translatey(30px );

	transition-property: transform, pre-transform-scale2d, blur, opacity;
	transition-duration: transition_duration_FriendsFriendListItemCommunity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
	opacity: 0.9;
	saturation: 0.8;
	blur: gaussian(0.5);
	transform: translateY( 00px ) translateZ( -360px );
	opacity-mask: url( "file://{images}/lower_row_mask.tga" ) 0.9;
	wash-color: bgcolorwashlight;

	background-image: url( "file://{images}/carousel_bg.png") ;
	background-size: 1920px 400px;
	background-repeat: no-repeat;
	background-position: center;
}

.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus
{
	transform: translatey( -130px );
	transition-delay: 0s;
	opacity: 1.0;
	saturation: 1.0;
	blur: gaussian(0.0);
	transform: translateX(-130px ) translateY( -170px ) translateZ( 0px );
	wash-color: white;
	opacity-mask: url( "file://{images}/lower_row_mask.tga" ) 0.0;
}

//when hovering over the friends carousel while it's not in focus

.CommunityVisible:descendantfocus .CommunityFriendsCarousel:hover
{
	pre-transform-scale2d: 1.025;
	opacity: 1.0;
	saturation: 1.0;
	blur: gaussian(0.0);

	transition-property: pre-transform-scale2d, blur, opacity, saturation;
	transition-duration: transition_duration_FriendsFriendListItemCommunity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.CommunityVisible:descendantfocus .CommunityFriendsCarousel:descendantfocus:hover

{
	pre-transform-scale2d: 1.0;
	opacity: 1.0;
	saturation: 1.0;
	blur: gaussian(0.0);
}


//when hovering over the feed carousel while it's not in focus

.CommunityFeedCarousel.CommunityFeedCarousel:hover

{
	pre-transform-scale2d: 1.025;
	opacity: 0.85;
	saturation: 0.5;
	blur: gaussian(0.0);
}

.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus .CommunityFeedCarousel:hover

{
	pre-transform-scale2d: 1.0;
	opacity: 1.0;
	saturation: 1.0;
	blur: gaussian(0.0);
}



.CommunityVisible:descendantfocus .CommunityFriendStripItem
{
	opacity: 0.0;
	opacity-mask: url( "file://{images}/upper_row_mask.tga" ) 1.0;

	pre-transform-scale2d: 1.0;
}

.CommunityVisible:descendantfocus .CommunityFriendsCarousel:descendantfocus .CommunityFriendStripItem
{
	opacity-mask: url( "file://{images}/upper_row_mask.tga" ) 0.0;
}

.CommunityVisible:descendantfocus .CommunityFriendsCarousel .CommunityFriendStripItem.Focused
{
	opacity-mask: url( "file://{images}/upper_row_mask.tga" ) 1.0;
}

.CommunityVisible:descendantfocus .CommunityFriendsCarousel:descendantfocus .CommunityFriendStripItem.Focused
{
	opacity-mask: url( "file://{images}/upper_row_mask.tga" ) 0.0;
}

.CommunityVisible:descendantfocus .CommunityFriendStripItem.LeftOfFocus1,
.CommunityVisible:descendantfocus .CommunityFriendStripItem.LeftOfFocus2,
.CommunityVisible:descendantfocus .CommunityFriendStripItem.LeftOfFocus3,
.CommunityVisible:descendantfocus .CommunityFriendStripItem.LeftOfFocus4,
.CommunityVisible:descendantfocus .CommunityFriendStripItem.LeftOfFocus5,
.CommunityVisible:descendantfocus .CommunityFriendStripItem.LeftOfFocus6,
.CommunityVisible:descendantfocus .CommunityFriendStripItem.RightOfFocus1,
.CommunityVisible:descendantfocus .CommunityFriendStripItem.RightOfFocus2,
.CommunityVisible:descendantfocus .CommunityFriendStripItem.RightOfFocus3,
.CommunityVisible:descendantfocus .CommunityFriendStripItem.RightOfFocus4,
.CommunityVisible:descendantfocus .CommunityFriendStripItem.RightOfFocus5,
.CommunityVisible:descendantfocus .CommunityFriendStripItem.RightOfFocus6,
.CommunityVisible:descendantfocus .CommunityFriendStripItem.RightOfFocus7,
{
	opacity: 1.0;
	saturation: 0.9;

}

.CommunityVisible:descendantfocus .CommunityFriendStripItem.Focused
{
	opacity: 1.0;
	saturation: 1.0;
	opacity-mask: url( "file://{images}/upper_row_mask.tga" ) 0.0;
}

.CommunityVisible:descendantfocus FriendsFeedListItemCommunity
{
	opacity: 0.0;
	saturation: 0.9;
	pre-transform-scale2d: 1.0;

}

.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.Focused
{
	opacity: 1.0;
}

.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.RightOfFocus1,
.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.RightOfFocus2,
.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.RightOfFocus3,
.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.RightOfFocus4,
.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.RightOfFocus5,
.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.RightOfFocus6,
.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.RightOfFocus7
{
	opacity: 1.0;
}

.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus FriendsFeedListItemCommunity.RightOfFocus1,
.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus FriendsFeedListItemCommunity.RightOfFocus2,
.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus FriendsFeedListItemCommunity.RightOfFocus3,
.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus FriendsFeedListItemCommunity.RightOfFocus4,
.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus FriendsFeedListItemCommunity.RightOfFocus5,
.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus FriendsFeedListItemCommunity.RightOfFocus6,
.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus FriendsFeedListItemCommunity.RightOfFocus7
{
	transform: translatex( 410px ) translatez( -386px );
}

.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.LeftOfFocus1,
.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.LeftOfFocus2,
.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.LeftOfFocus3,
.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.LeftOfFocus4,
.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.LeftOfFocus5,
.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.LeftOfFocus6,
.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.LeftOfFocus7,
{
	opacity: 1.0;
}

.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus .LeftOfFocus1,
.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus FriendsFeedListItemCommunity.LeftOfFocus1,
.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus FriendsFeedListItemCommunity.LeftOfFocus2,
.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus FriendsFeedListItemCommunity.LeftOfFocus3,
.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus FriendsFeedListItemCommunity.LeftOfFocus4,
.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus FriendsFeedListItemCommunity.LeftOfFocus5,
.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus FriendsFeedListItemCommunity.LeftOfFocus6,
.CommunityVisible:descendantfocus .CommunityFeedCarousel:descendantfocus FriendsFeedListItemCommunity.LeftOfFocus7,
{
	transform: translatex( 310px ) translatez( -386px );
}

#CarouselTitleContainer Label
{
	opacity: 0.0;

	transition-property: opacity;
	transition-duration: transition_duration_FriendsFriendListItemCommunity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.CommunityFeedCarousel #CarouselTitleContainer Label
{
	opacity: 1.0;
}

.CommunityFriendsCarousel #CarouselTitleContainer
{
	margin-right: 20px;
}

.CommunityFriendsCarousel:descendantfocus #CarouselTitleContainer
{
	margin-right: 50px;
}


OverlayBasePanel .CommunityFriendsCarousel #CarouselTitleContainer
{
	margin-right: 50px;
	transform: translatez(-650px ) translatex(-70px ) translateY( -50px );
}

OverlayBasePanel .CommunityFriendsCarousel:descendantfocus #CarouselTitleContainer
{
	margin-right: 50px;
	transform: translatez(-500px ) translatex(-20px ) translateY( -50px );
}

.CommunityFriendsCarousel:descendantfocus, #CommunityFeedCarousel
{
	flow-children: right;
	perspective-origin: 50% 50%;	
	opacity-mask: none;

}

#CarouselTitleContainer #CarouselTitleSmall, .CommunityFriendsCarousel #CarouselTitleContainer #CarouselTitleLarge
{
	flow-children: none;
	horizontal-align: right;
}

#CarouselTitleContainer #CarouselTitleLarge Label
{
	color: carousel_title;
	font-size: 96;
	line-height: 96;
	horizontal-align: right;
	text-transform: uppercase;
}

#CarouselTitleContainer #CarouselTitleLarge #CarouselTitleInGame
{
	color: carousel_title;

}

#CarouselTitleContainer #CarouselTitleSmall Label
{
	color: carousel_title;
	font-size: 48;
	height: 48px;
	margin-top: 8px;
	horizontal-align: right;
	text-transform: uppercase;
}

#CarouselTitleContainer #CarouselTitleLarge Label#CarouselTitleOffline
{

	color: carousel_title;
}

.CommunityFriendsCarousel.HasInGameFriends #CarouselTitleContainer #CarouselTitleInGame
{	// in-game friends always shown
	opacity: 1.0;
}
.CommunityFriendsCarousel.HasNoInGameFriends.HasOnlineFriends #CarouselTitleContainer #CarouselTitleJustOnline
{	// when we have online friends, but no in-game
	opacity: 1.0;
}
.CommunityFriendsCarousel.HasInGameFriends.HasOnlineFriends #CarouselTitleContainer #CarouselTitleMoreOnline
{	// in-game and online friends show "more online"
	opacity: 1.0;
}
.CommunityFriendsCarousel.HasNoInGameFriends.HasNoOnlineFriends #CarouselTitleContainer #CarouselTitleOffline
{	// no in-game or online friends show just total count
	opacity: 1.0;
}

#CarouselTitleContainer
{
	flow-children: down;

	opacity: 0.0;
	font-family: platformfont;
	font-weight: light;
	blur: gaussian ( 3, 3, 1 );

	max-width: 1250px;
	padding-top: 24px;
	padding-bottom: 10px;

	transition-property: transform, position, blur, opacity !immediate;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
	margin-top: 280px;
	height: 200px;


	opacity: 0.0;
	padding-left: 0px;
	margin-right: 30px;
	margin-top: 100px;
	vertical-align: top;

	transform: translatex( -200px ) translatez( -200px );
}

.CommunityFriendsCarousel #CarouselTitleContainer
{
	margin-top: 200px;
}

OverlayBasePanel #CarouselTitleContainer
{
	margin-top: 200px;
}

#CommunityFeedStrip.CommunityFeedStrip.NoContent
{
	opacity: 0.0;

	transition-property: opacity;
	transition-duration: 0.0s !immediate;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.CommunityVisible:descendantfocus #CommunityFeedStrip.CommunityFeedStrip.NoContent
{
	transition-duration: 0.3s !immediate;
}

.CommunityVisible:descendantfocus .CommunityFeedStrip #CarouselTitleContainer
{
	margin-top: 100px;
	transform: translatez( -200px ) translatex( -210px );
}

.CommunityVisible:descendantfocus .CommunityFeedStrip:descendantfocus #CarouselTitleContainer
{
	margin-top: 100px;
	transform: translatez( -200px ) translatex( -70px );
}


.CommunityVisible:descendantfocus #CarouselTitleContainer
{
	blur: none;
	opacity: 1.0;
	transform: translatez( -600px ) translatex( -80px ) translateY(-50px );
}


// Each friend panel

FriendsFriendListItemCommunity
{
	transition-property: transform, opacity-mask, background-color, position, border, opacity, blur, pre-transform-scale2d;
	transition-duration: transition_duration_FriendsFriendListItemCommunity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;

	flow-children: none;

	width: 100%;
	max-width: 500px;
	max-height: 545px;

	margin: 4px;
	vertical-align: center;

	border-width: 3px;
	border-style: solid;
	border-color: #00000000;
	background-color: #e5e5e500;
}



.CommunityVisible:descendantfocus FriendsFriendListItemCommunity
{
	transition-duration: transition_duration_FriendsFriendListItemCommunity;
	transition-delay: 0s;
	transition-timing-function: bigpicture-ease-in-out;

	pre-transform-scale2d: 1.0;
}

.CommunityVisible:descendantfocus FriendsFriendListItemCommunity.PendingInvite
{
	visibility: collapse;
}


//
// Friends item presentation
//

FriendsFriendListItemCommunity .FriendsFriendListItemCommunityContainer
{
	width: 100%;
	flow-children: right;

	transition-property: pre-transform-scale2d, transform;
	transition-duration: transition_duration_FriendsFriendListItemCommunity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.CommunityVisible:descendantfocus FriendsFriendListItemCommunity .FriendsFriendListItemCommunityStripTileBkgnd
{
	margin: 14px;

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

	transform: translatey( 20px );

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

}

.CommunityVisible:descendantfocus FriendsFriendListItemCommunity:descendantfocus .FriendsFriendListItemCommunityStripTileBkgnd
{
	pre-transform-scale2d: 1.0;

	transition-property: pre-transform-scale2d;
	//transition-duration: transition_duration_FriendsFriendListItemCommunity !immediate;

	animation-name: main-button-glow-movement-no-fill;
	animation-duration: 1.2s;
	animation-delay: transition_duration_FriendsFriendListItemCommunity;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;

}

.CommunityVisible:descendantfocus FriendsFriendListItemCommunity:descendantfocus:hover
{
	pre-transform-scale2d: 1.04;
}

.CommunityFriendsStrip #CarouselTitleContainer
{
	transform: translatez( -500px ) translatex( -50px );
}

.CommunityVisible:descendantfocus FriendsFriendListItemCommunity
{
	max-width: 255px;
	max-height: 570px;
	pre-transform-scale2d: 1.0;
	transition-duration: transition_duration_FriendsFriendListItemCommunity;
	transition-timing-function: bigpicture-ease-in-out;

}

.CommunityVisible:descendantfocus FriendsFriendListItemCommunity .FriendsFriendListItemCommunityContainer
{
	flow-children: down;
	vertical-align: top;
	height: 545px;
	transform: translateY( -6px );
}

FriendsFriendListItemCommunity.Offline Label
{
	color: friendsoffline_darkbg;
}

FriendsFriendListItemCommunity.Online Label
{
	color: friendsonline_darkbg;
}

FriendsFriendListItemCommunity.InGame Label
{
	color: friendsingame_darkbg;
}

FriendsFriendListItemCommunity.Golden Label
{
	color: friendsgolden_darkbg;
}

FriendsFriendListItemCommunity.Offline:descendantfocus Label
{
	color: friendsoffline_darkbg;
}

FriendsFriendListItemCommunity.Online:descendantfocus  Label
{
	color: friendsonline_darkbg;
}

FriendsFriendListItemCommunity.InGame:descendantfocus  Label
{
	color: friendsingame_darkbg;
}

FriendsFriendListItemCommunity.Golden:descendantfocus  Label
{
	color: friendsgolden_darkbg;
}

.FriendsFriendListItemCommunityAvatar
{
	margin: 2px;
	height: 124px;
	width: 124px;
	horizontal-align: center;
	border-width: 6px;
	border-style: solid;
	border-radius: 0px;
	opacity: 0.85;
	box-shadow: fill #00000000 0px 0px 0px 0px;

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

}

.CommunityVisible:descendantfocus FriendsFriendListItemCommunity .FriendsFriendListItemCommunityAvatar
{
	margin-top: 99px;
	margin-bottom: 18px;

	height: 184px;
	width: 184px;
	pre-transform-scale2d: 1.10;
	opacity: 0.85;
	saturation: 0.8;
	box-shadow: fill #00000022 -4px -4px 4px 8px;
}

.CommunityVisible:descendantfocus FriendsFriendListItemCommunity:focus .FriendsFriendListItemCommunityAvatar
{
	opacity: 1.0;
	saturation: 1.0;
	transform: translatez(60px);
	box-shadow: box_shadow_off_color -3px -3px 6px 6px;

}

//hover treatment for a friend
.CommunityFriendsCarousel:descendantfocus FriendsFriendListItemCommunity:hover .FriendsFriendListItemCommunityAvatar
{
	opacity: 1.0;
	z-index: 90;
	transition-duration: 0.25s !immediate;
	//box-shadow: box_shadow_on_color -3px -3px 6px 6px;
	pre-transform-scale2d: 1.15;
}

.CommunityVisible:descendantfocus .CommunityFriendsCarousel:descendantfocus .FriendsFriendListItemCommunityAvatar
{
	opacity: 1.0;
}

.CommunityFriendsCarousel:descendantfocus FriendsFriendListItemCommunity:hover .FriendsFriendListItemCommunityContainer
{

	pre-transform-scale2d: 1.04;
}

//selected treatment for a friend
.CommunityFriendsCarousel:descendantfocus FriendsFriendListItemCommunity:focus .FriendsFriendListItemCommunityAvatar
{
	z-index: 90;
	transition-duration: 0.25s !immediate;

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

	pre-transform-scale2d: 1.1;
}

.CommunityFriendsCarousel:descendantfocus FriendsFriendListItemCommunity:focus #FriendPanel:descendantfocus .FriendsFriendListItemCommunityAvatar 
{
	pre-transform-scale2d: 1.5;
}

.CommunityFriendsCarousel:descendantfocus FriendsFriendListItemCommunity:focus .FriendsFriendListItemCommunityContainer
{
	pre-transform-scale2d: 1.15;
	transform: translateY( 0px );
}

.FriendsFeedItemCommunityAvatar
{
	margin-left: 4px;
	margin-right: 44px;
	margin-top: 68px;
	box-shadow: #00000022 -5px -5px 6px 10px;

	height: 184px;
	width: 184px;

	horizontal-align: left;
	pre-transform-scale2d: 1.0;
	border-width: 6px;
	border-style: solid;
	border-radius: 6px;
	opacity: 0.85;
	saturation: 1.0;

	transform: translatex( 74px );

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

FriendsFeedListItemCommunity:descendantfocus .FriendsFeedItemCommunityAvatar
{
	box-shadow: fill #00000060 0px 0px 12px 0px;
	opacity: 1.0;
	transform: translatez( 0px ) translatex( 65px );
	pre-transform-scale2d: 1.1;
}


FriendsFeedListItemCommunity.SteamidGroupIsOGG .FriendsFeedItemCommunityAvatar
{
	width: 355px;
}

#FriendsFeedItemIcon
{
	height: 64px;
	width: 64px;

	transform: translatey( 204px ) translatez( 42px ) translatex( 232px );
	pre-transform-scale2d: 1.0;

	box-shadow: fill #00000000 0px 0px 6px 0px;
	border-radius: 50%;
	z-index: 20;
	opacity: 1.0;

	transition-property: opacity, transform, position, box-shadow, pre-transform-scale2d, box-shadow;
	transition-duration: 0.1s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

FriendsFeedListItemCommunity.SteamidGroupIsOGG #FriendsFeedItemIcon
{
	margin-left: 171px;
	box-shadow: fill #00000000 0px 0px 6px 0px;
}


.CommunityVisible:descendantfocus FriendsFriendListItemCommunity:focus .FriendsFriendListItemCommunityLabels
{
	opacity: 1.0;
	transform: translatex( 26px ) translatey( 12px );
}

FriendsFeedListItemCommunity:descendantfocus #FriendsFeedItemIcon
{
	transform: translatey( 210px ) translatez( 41px ) translatex( 232px );
	pre-transform-scale2d: 1.25;
	box-shadow: fill #00000060 0px 0px 6px 0px;
	border-radius: 50%;
}


.FriendsFriendListItemCommunityLabels
{
	width: 300px;
	height: 200px;
	opacity-mask: url( "file://{images}/friends/friends_list_item_panel_labels_mask.tga" );
	vertical-align: top;
	flow-children: down;
	background-color: #00000000;

	padding-left: 22px;
	padding-right: 22px;

	opacity: 0.85;

	transform: translatex( -24px ) translatey( 3px );

	transition-property: opacity, transform, position, box-shadow, pre-transform-scale2d;
	transition-duration: 0.2s;
	//transition_duration_FriendsFriendListItemCommunity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

CommunityMainPanel:descendantfocus .FriendsFriendListItemCommunityLabels, OverlayBasePanel:descendantfocus .FriendsFriendListItemCommunityLabels
{
	transform: translatex( 34px ) translatey( -3px );
}

FriendsFriendListItemCommunity Label
{
	margin-left: 4px;
	width: 100%;
	vertical-align: top;
	white-space: normal;
	text-overflow: clip;
	background-color: #00000000;
	font-family: platformfont;
}



.CommunityVisible:descendantfocus FriendsFriendListItemCommunity Label
{
	margin-bottom: 0px;
	margin-top: 0px;

	opacity: 0.0;

	transition-property: opacity;
	transition-duration: transition_duration_FriendsFriendListItemCommunity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.CommunityVisible:descendantfocus FriendsFriendListItemCommunity:descendantfocus Label
{
	opacity: 1.0;

	transition-property: opacity;
	transition-duration: transition_duration_FriendsFriendListItemCommunity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

FriendsFriendListItemCommunity Label.FriendsFriendListItemCommunityPersonaName
{
	font-weight: bold;
	font-size: 32px;
	line-height: 30px;
	margin-top: 10px;

}

.CommunityVisible:descendantfocus FriendsFriendListItemCommunity Label.FriendsFriendListItemCommunityPersonaName
{
	opacity: 1.0;
	max-height: 70px;
	font-size: 32px;
	line-height: 34px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-top: 4px;
	white-space: nowrap;
	text-overflow: ellipsis;

	transition-property: transform;
	transition-duration: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

.CommunityVisible:descendantfocus FriendsFriendListItemCommunity:descendantfocus Label.FriendsFriendListItemCommunityPersonaName
{
	opacity: 1.0;
}

FriendsFriendListItemCommunity .FriendsFriendListItemCommunityStatus
{
	font-weight: medium;
	font-size: 24px;
	line-height: 28px;
	font-weight: normal;
}

FriendsFriendListItemCommunity .FriendsFriendListItemCommunityStatusDetail
{
	font-weight: medium;
	font-size: 24px;
	line-height: 30px;
	height: 60px;
	font-weight: normal;
}

FriendsFeedListItemCommunity
{
	flow-children: none;
	opacity: 0.85;
	saturation: 0.5;
	width: 720px;
	height: 320px;
	margin-left: 10px;
	margin-right: 10px;
	transform: translatez( -386px ) translatey( 0px ) translatex( 185px );
	pre-transform-scale2d: 1.0;

	transition-property: opacity, saturation, transform, position, pre-transform-scale2d;
	//transition-duration: transition_duration_FriendsFriendListItemCommunity;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

FriendsFeedListItemCommunity.SteamidGroupIsOGG
{
	width: 891px;
}

MainMenu.BehindMessageBox.FriendsFeedItemMenuDetails FriendsFeedListItemCommunity
{
	saturation: 0.5;
	opacity: 0.7;
	
	transition-property: opacity, saturation; 
	transition-timing-function: bigpicture-ease-in-out;
	transition-duration: 0.5s;
}

FriendsFeedListItemCommunity:descendantfocus
{
	transform: translatez( 0px ) translatey( 0px );
	opacity: 1.0;
	saturation: 1.0;
	pre-transform-scale2d: 1.0;
}

//selected feed item when its menu is up
MainMenu.BehindMessageBox.FriendsFeedItemMenuDetails FriendsFeedListItemCommunity:descendantfocus
{
	transform: translatez( 50px ) translatey( 0px );
	saturation: 1.0;
	opacity: 1.0;
	
	transition-property: opacity, saturation, transform; 
	transition-timing-function: bigpicture-ease-in-out;
	transition-duration: 0.3s;
}

// friends row when the feed item menu is up
MainMenu.BehindMessageBox.FriendsFeedItemMenuDetails #CommunityFriendsStrip
{
	saturation: 0.6;
	opacity: 0.7;
	
	transition-property: opacity, saturation; 
	transition-timing-function: bigpicture-ease-in-out;
	transition-duration: 0.5s;
} 

FriendsFeedListItemCommunity .FriendsFriendListItemCommunityLabels
{
	visibility: collapse;
}

FriendsFeedListItemCommunity Label.FeedItemDescription
{
	margin-bottom: 84px;
	margin-right: 54px;

	font-weight: medium;
	font-size: 24px;
	line-height: 28px;
	width: 370px;
	max-height: 116px;
	vertical-align: middle;
	horizontal-align: right;

	color: #333333ff;

	transform: translatex( -120px );
	opacity: 0.0;

	transition-property: opacity, transform, position, pre-transform-scale2d;
	transition-duration: 0.1s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

FriendsFeedListItemCommunity:descendantfocus Label.FeedItemDescription
{
	pre-transform-scale2d: 1.0;
	transform: translatex( 0px );
	opacity: 1.0;
}

FriendsFeedListItemCommunity Label.FeedItemTimestring
{
	margin-top: 30px;
	margin-right: 52px;

	font-weight: normal;
	font-size: 21px;
	line-height: 30px;
	vertical-align: top;
	horizontal-align: right;

	color: #888888ff;

	opacity: 0.0;

	transition-property: opacity;
	transition-duration: 0.0s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}

FriendsFeedListItemCommunity:descendantfocus Label.FeedItemTimestring
{
	pre-transform-scale2d: 1.0;
	opacity: 1.0;
}

FriendsFeedListItemCommunity .SecondaryItemFrame
{
	margin-right: 46px;
	margin-bottom: 46px;
	width: 36px;
	height: 36px;

	vertical-align: bottom;
	horizontal-align: right;


	opacity: 0.0;

	transition-property: opacity;
	transition-timing-function: bigpicture-ease-in-out;
	transition-duration: 0.1s;
	transition-delay: 0.0s;
}

FriendsFeedListItemCommunity #SecondaryItemFrame_app.SecondaryItemFrame
{
	// app logo is 184x69 (display at 1:1 res)
	width: 218px;
	height: 100px;
}

FriendsFeedListItemCommunity #SecondaryItemFrame_group_ogg.SecondaryItemFrame
{
	// ogg logo is 444x208 (display scaled down by one-third)
	width: 181px;
	height: 100px;
}

FriendsFeedListItemCommunity #SecondaryItemFrame_profile.SecondaryItemFrame, FriendsFeedListItemCommunity #SecondaryItemFrame_group.SecondaryItemFrame
{
	// profiles are 184x184
	width: 100px;
	height: 100px;
}

FriendsFeedListItemCommunity .SecondaryItemFrame #SecondaryItemIcon
{
	width: 100%;
	height: 100%;
	transform: translatez( 20px );
	box-shadow: fill #00000060 0px 0px 12px 0px;
	margin: 10px;
}

FriendsFeedListItemCommunity:descendantfocus .SecondaryItemFrame.Visible
{
	opacity: 1.0;

	transition-duration: 0.1s;
	transition-delay: 0s;
}


.CommunityVisible:descendantfocus FriendsFeedListItemCommunity .FriendsFriendListItemCommunityStripTileBkgnd
{
	width: 100%;
	height: 100%;

	background-color: #e5e5e500;
	border-width: 5px;
	border-style: solid;
	border-color: #fdfefe00;
	box-shadow: box_shadow_off_color -4.5px -4.5px 16px 9px;

	margin: 20px;

	pre-transform-scale2d: 1.0, 1.0;
	transform: translatex( 0px );

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

.CommunityVisible:descendantfocus FriendsFeedListItemCommunity:descendantfocus .FriendsFriendListItemCommunityStripTileBkgnd
{
	transition-duration: 0.0s;
}


.CommunityVisible:descendantfocus FriendsFeedListItemCommunity.SteamidGroupIsOGG .FriendsFriendListItemCommunityStripTileBkgnd
{
	pre-transform-scale2d: 0.43, 1.0;
	transform: translatex( -6px );
}

.CommunityVisible:descendantfocus FriendsFeedListItemCommunity:descendantfocus .FriendsFriendListItemCommunityStripTileBkgnd
{
	background-color: gradient( linear, -15% 0%, 100% 0%, from( #e5e5e5ff ), to( #bdbfbfff ) );
	border-color: #fdfefef0;
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;

	pre-transform-scale2d: 1.0, 1.0;
	transform: translatex( 0px );
	transition-property: opacity, transform, position, opacity, blur, pre-transform-scale2d;
	transition-delay: 0.0s;

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


FriendsFeedItemMenuDetails
{
	width: 100%;
	height: 100%;
	
	animation-name: friends-feeditemmenu-details-appear;
	animation-duration: FeedDetailsMenuFadoutTime;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: 1;
}

FriendsFeedItemMenuDetails.Destructing
{
	opacity: 0.0;

	animation-name: friends-feeditemmenu-details-appear;
	animation-duration: FeedDetailsMenuFadoutTime;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: 1;
	animation-direction: reverse;
}

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

FriendsFeedItemMenuDetails #FriendsFeedItemMenuDetailsActionsList
{

	vertical-align: top;
	horizontal-align: left;

	width: 400px;
	margin-left: 760px;
	margin-top: 755px;

	flow-children: down;

	padding: 20px 7px;

	border-width: 5px;
	border-style: solid;
	border-color: ui_common_control_border;
	box-shadow: fill #00000099 0px 0px 16px 0px;

	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; */
}

FriendsFeedItemMenuDetails.ScreenSaverMode
{
	opacity: 0.0;
}

FriendsFeedItemMenuActionButton
{
	text-overflow: ellipsis;
	flow-children: right;
	margin-left: 10px;
	margin-right: 8px;
	margin-top: -2px;
	margin-bottom: -2px;
	width: 100%;
	white-space: nowrap;
	border-style: solid;
	border-width: 3px;
	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;
}

FriendsFeedItemMenuActionButton Label
{
	horizontal-align: left;
	color: white;
	transform: translatex(0px);
	padding: 7px;
	transition-property: color, position, transform;
	transition-duration: 0.25s;
	transition-timing-function: bigpicture-ease-in-out;
	opacity-mask: url( "file://{images}/friends/friends_list_item_panel_labels_mask.tga" );
	width: 100%;
	white-space: nowrap;
	margin-right: 8px;
	text-overflow: clip;

}
FriendsFeedItemMenuActionButton:focus Label
{
	horizontal-align: left;
	color: #161718f5;
	transform: translatex(7px);
	padding: 7px;
}



FriendsFeedItemMenuActionButton:hover
{
	background-color: #00000020;

	box-shadow: #eeeeee60 -5px -5px 6px 10px;
}

FriendsFeedItemMenuActionButton:focus
{
	background-color: #00000020;

	color: #161718f5;
	background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdee ), to( #adafafe0 ) );
	border-color: #fdfefef0;

	animation-name: friends-feeditemmenu-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;

}

.CommunityVisible:descendantfocus FriendsFeedListItemCommunity:descendantfocus:hover
{
	pre-transform-scale2d: 1.04;
}

@keyframes 'friends-feeditemmenu-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( #f2f2f2ff ), to( #bdbfbfff ) ); 
	}

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


#OverlayBasePanel:descendantfocus .CommunityFriendsCarousel:descendantfocus
{
	transform: translateY( 400px );
}

#OverlayBasePanel:descendantfocus .CommunityFriendsCarousel
{
	transform: translateY( 400px );
}

#CommunityFriendsStrip.Locked
{
	visibility: collapse;
}

#CommunityFriendsStrip.Locked #CommunityFriendsStripWrapper
{
	visibility: collapse;
}