/*	friends screen css style */

@define friendsitemmainlistbkgnd_from: #f2f2f2ff;
@define friendsitemmainlistbkgnd: gradient( linear, 0% 0%, 100% 100%, from( friendsitemmainlistbkgnd_from ), to( #cbcbcbde ) );
@define friendschatmsgsbkgnd: gradient( linear, 10% 0%, 0% 100%, from( #10101040 ), to( #10101090 ) );
@define friendsverticalscrollpad: 18px;
@define friendsitemsecondaryfocus: gradient( linear, 0% 0%, 100% 100%, from( #caccccff  ), to( #aaacacce ) );
@define ui_common_control3: gradient( linear, 0% 0%, 0% 100%, from( #4b7696aa ), to( #365b7866 ) );
@define friendschatbackground: #0f283dCC;
/* below this number suppress the search box on friends */
@define friendslisthidesearch: 1;

Friends
{
	perspective: 1000;
	perspective-origin: 50% 50%;
	position: 0px 40px 0%;
	width: 1920px;
	height: 1000px;
	visibility: visible;

	font-family: platformfont;
background-color: gradient( linear, 0% 100%, 100% 100%, from( #0b2236ff ), color-stop( 0.5, #143451ff ), to( #0b2236ff ) );
	animation-duration: 1.6s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-direction: normal;

	transition-property: opacity, transform !immediate;
	transition-duration: 0.4s;
	transition-timing-function: linear;

	opacity: 1.0;
	transform: translateX( 0px );
}

Friends.BehindMessageBox.FriendsInputTextEntry
{
	opacity: 1.0;
	blur: none;
}

Friends.SlideAwayToLeft
{
	opacity: 0.0;
	transform-origin: 0% 0% parent-relative;
	transform: translateX( -1920px ) rotateX( 0deg ) translateZ( 0px );
}

Friends.SlideAwayToRight
{
	opacity: 0.0;
	transform-origin: 0% 0% parent-relative;
	transform: translateX(  1920px ) rotateX( 0deg ) translateZ( 0px );
}

Friends.FriendsProfileDetailsVisible #BodyWrapper
{
	opacity: 0.25;
	blur: gaussian( 2, 2, 1 );
	
	transition-property: opacity, blur;
	transition-duration: 0.3s !immediate;
	transition-timing-function: linear;
}

#FriendsMainBodyColumnsContainer
{
	padding-left: 85px;
	padding-right: 85px;
	width: 100%;
	height: 932px;

	transform: translatey( 41px );
	flow-children: none;
}

#FriendsMainBodyColumnLeft
{
	width: 865px;
	margin-right: 0px;
	margin-left: 13px;
	height: 899px;
	flow-children: down;
}

Friends.BehindMessageBox.FriendsInputTextEntry #FriendsMainBodyColumnLeft
{
	transition-property: opacity;
	transition-duration: 0.5s !immediate;
	transition-timing-function: bigpicture-ease-in-out;
}

#FriendsChatDialogContainer
{
	width: 829px;
	height: fit-children;
	flow-children: none;
	horizontal-align: right;

	transform: translateX( 0px );

	transition-property: transform;
	transition-duration: 0.5s;
	transition-timing-function: bigpicture-ease-in-out;
}

// when text input is active
//.BehindTextInputHandler #FriendsChatDialogContainer
//{
//	transform: translateX( -460px );
//	background-color: friendschatbackground;
//}

// while text input is active
//.BehindTextInputHandler #FriendsMainBodyChatContainer
//{
//	height: 285px;
//}


#FriendsChatDialogContainer:descendantfocus
{
	transform: translateX( -460px );
	background-color: friendschatbackground;
}

FriendsChatDialog
{
	width: 829px;
	margin-left: 5px;
	height: fit-children;
	flow-children: down;
	transition-duration: 0.28s;
	transition-property: opacity;
	opacity: 1.0;
}

FriendsChatDialog.ZeroFriends
{
	opacity: 0.0;
}

FriendsChatDialog AvatarImage
{
	transition-duration: 0.28s;
	transition-property: opacity;
	opacity: 0.0;
}

FriendsChatDialog AvatarImage.AvatarVisible
{
	opacity: 1.0;
}


FriendsChatDialog.ClanChatDisabledX
{
	visibility: collapse;
	opacity: 0.0;
}

#FriendsMainBodyLeftHeader
{
	height: 118px;
	width: 100%;
	flow-children: right;
	margin-right: friendsverticalscrollpad;
}

#FriendsMainBodyRightHeader
{
	height: 94px;
	margin-bottom: 8px;
	margin-top: 12px;
	width: 92%;
	flow-children: right;
}

#ChatWithXLabel
{
	width: 350px;
}

#StartVoiceChatBtn
{
	vertical-align: bottom;
	horizontal-align: right;
	flow-children: right;
}

.FriendsMainBodyRightHeaderText
{
	vertical-align: bottom;
	white-space: nowrap;
	font-weight: bold;
	font-size: 27px;
	margin-left: 8px;
	margin-bottom: 1px;
	color: #d8d8d8ff;
	text-overflow: ellipsis;
}

#StartVoiceChatBtn Label
{
	font-weight: light;
	font-size: 24px;
	margin-top: 4px;
	color: friendsonline_lightbg_to;
}

#StartVoiceChatBtnBegin
{
	visibility: visible;
}

#StartVoiceChatBtnEnd
{
	visibility: collapse;
}

.VoiceChatActive #StartVoiceChatBtnBegin
{
	visibility: collapse;
}

.VoiceChatActive #StartVoiceChatBtnEnd
{
	visibility: visible;
}

#StartVoiceChatBtn Image
{
	vertical-align: center;
	width: 50px;
	height: 36px;
	margin-left: 10px;
}

#FriendsMainBodyChatContainer
{
	width: 100%;
	height: 674px;
	flow-children: down;
	margin-top: 4px;
	margin-bottom: 9px;
	border-radius: 0px;
	padding-bottom: 0px;

	background-color: #1a578023;

	transition-property: height;
	transition-duration: 0.5s;
	transition-timing-function: bigpicture-ease-in-out;
}

#FriendsMainBodyChatMessages
{
	width: 100%;
	height: fill-parent-flow( 1.0 );
	flow-children: down;
	overflow: squish scroll;
	padding-right: 16px;
	margin-right: 2px;
	padding-top: 4px;
	margin-left: 8px;

	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" );
}

#FriendsMainBodyChatMessages Label
{
	margin-top: 2px;
	font-weight: medium;
	font-size: 27px;
	color: #ffffff33;
	width: 100%;
}

#FriendsVoiceChatControls
{
	height: 78px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	flow-children: right;
	visibility: collapse;
}

.VoiceChatActive #FriendsVoiceChatControls
{
	visibility: visible;
}

#FriendsVoiceChatControls Image
{
	vertical-align: center;
}

.VoiceChatOnHold .VoiceBar
{
	background-color: #44444420;
}

#OthersVoice
{
	vertical-align: center;
	margin-left: 15px;
	color: ui_common_control_border;
	font-size: 20px;
}

#FriendsMainBodyInputGroup
{
	height: 106px;
	width: 100%;
	flow-children: right;
	vertical-align: bottom;
}

#FriendsMainBodyInputSendButton
{
	vertical-align: center;
	horizontal-align: right;
	height: 106px;
	min-width: 106px;
	font-weight: light;
	font-size: 24px;
	color: tclegendlabel;
	white-space: nowrap;
	padding: 8px;
	margin-left: 8px;
	background-color: friendstab;
	// friendsonline_lightbg;
	color: friendsitemmainlistbkgnd_from;

	border-radius: 0px;

	transition-property: background-color;
	transition-duration: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;

	visibility: collapse;
}

.CursorVisible #FriendsMainBodyInputSendButton
{
	visibility: visible;
}

#FriendsMainBodyInputSendButton:hover
{
	background-color: friendstabcurrentselection;
}

.FriendChatDisabled #FriendsMainBodyInputSendButton:hover
{
	background-color: friendschatinputbkgnd;
}


#FriendsMainBodyStatusGroup
{
	margin-top: 18px;
	margin-bottom: -2px;
	height: 18px;
	font-weight: light;
	font-size: 21px;
	font-family: platformfont;
	height: 60px;
	transform: translateY( 00px );
	color: tclegendlabel;
	white-space: nowrap;
	flow-children: down;
	vertical-align: bottom;

}

#FriendsMainBodyStatusGroupLeft
{
	color: friendsitemmainlistbkgnd_from;
	width: 70%;
	horizontal-align: right;
	text-align: right;
	transform: translateY( 0px );
	visibility: collapse;
}

#FriendsMainBodyStatusGroupRight
{
	text-align: right;
	horizontal-align: right;
	width: 100%;
	visibility: collapse;
	transform: translateY( 0px );
}

#FriendsMainBodyInputSendButton Label
{
	vertical-align: center;
	horizontal-align: center;
}


.FriendsMyAvatar
{
	margin-left: 20px;
	margin-bottom: 6px;
	margin-top: 6px;
	height: 90px;
	width: 90px;
	border-width: 4px;
	border-style: solid;
	border-radius: 0px;
	box-shadow: fill #eeeeee00 -4.5px -4.5px 6px 9px;

	transition-property: box-shadow;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
}

#FriendsMyItem
{
	transform: translateX( 0px );
	transition-property: transform;
	transition-duration: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;
}

#FriendsMyItem:hover
{
	transform: translateX( 10px );
}

.FriendsListItemAvatar,
.RollupPendingInvites .LeftMainListItem.PendingInviteRollup #MyAvatar
{
	margin-left: 2px;
	margin-top: 3px;
	height: 90px;
	width: 90px;
	border-width: 4px;
	border-style: solid;
	border-radius: 0px;
	box-shadow: inset #00000099 0px 0px 12px 0px;
}

.ChatItemAvatar
{
	margin-left: 5px;
	margin-top: 0px;
	margin-bottom: 2px;
	height: 90px;
	width: 90px;
	border-width: 4px;
	border-style: solid;
	border-radius: 0px;
	box-shadow: inset #00000099 0px 0px 12px 0px;
}


#FriendsMyNameAndStateContainer
{
	margin-left: 14px;
	margin-right: 14px;
	margin-bottom: 4px;
	width: 270px;
	opacity-mask: url( "file://{images}/friends/friends_list_item_panel_labels_mask.tga" );
	vertical-align: bottom;
	flow-children: down;
}

#FriendsMyNameAndStateContainer Label
{
	text-overflow: clip;
}

.FriendsListItemPanelLabels
{
	margin-left: 14px;
	margin-right: 14px;
	width: fill-parent-flow( 1.0 );
	opacity-mask: url( "file://{images}/friends/friends_list_item_panel_labels_mask.tga" );
	vertical-align: bottom;
	flow-children: down;
}

.RollupPendingInvites .LeftMainListItem.PendingInvite
{
	visibility: collapse;
	opacity: 0.0;
}

.RollupPendingInvites .LeftMainListItem.PendingInviteRollup
{
	visibility: visible;
	opacity: 1.0;
}

.RollupPendingInvites .LeftMainListItem.PendingInviteRollup #FriendPanelImage,
.RollupPendingInvites .LeftMainListItem.PendingInviteRollup #FriendPanelLabels,
.LeftMainListItem.SearchEntry #FriendPanelLabels,
.LeftMainListItem.SearchEntry #Indicator,
.LeftMainListItem.CommunitySearchEntry #FriendStatus,
.LeftMainListItem.CommunitySearchEntry #FriendStatusDetail,
{
	visibility: collapse;
	opacity: 0.0;
}

.RollupPendingInvites .LeftMainListItem.PendingInviteRollup #PendingInvitesDesc
{
	transition-property: transform, color;
	transition-duration: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;

	margin-left: 10px;
	transform: translatex(  0px );

	width: 500px;
	font-weight: normal;
	font-size: 24px;
	vertical-align: center;
	color: friendsoffline_darkbg;
}

.RollupPendingInvites .LeftMainListItem.PendingInviteRollup:focus #PendingInvitesDesc
{
	transform: translatex( 11px );
	color: friendsoffline_lightbg;
}

.RollupPendingInvites .LeftMainListItem.PendingInviteRollup #MyAvatar
{
	visibility: collapse;
	border-color: friendsoffline_solid;
}


.LeftMainListItem AvatarImage, .LeftMainListItem #FriendPanelLabels
{
	transform: translatex( -7px );

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


.LeftMainListItem:focus AvatarImage,
.LeftMainListItem:focus #FriendPanelLabels
{
	transform: translatex( 5px );
}

.FriendsListItemPanelLabels Label
{
	text-overflow: clip;
}

.FriendsMyName
{
	width: 100%;
	font-weight: bold;
	font-size: 27px;
	margin-top: 2px;
	margin-bottom: 2px;
	white-space: nowrap;
}

.FriendsMyState
{
	width: 100%;
	font-weight: normal;
	font-size: 24px;
	margin-bottom: 2px;
	white-space: nowrap;
}

.FriendsListItemPersonaName
{
	width: 100%;
	font-weight: bold;
	font-size: 27px;
	height: 35px;
	margin-top: 1px;
	margin-bottom: 0px;
	white-space: nowrap;
	transition-property: pre-transform-scale2d, transform;
	transition-duration: 0.2s !immediate;
	transition-timing-function: bigpicture-ease-in-out;
}

.FriendsListItemStatus
{
	width: 100%;
	opacity: 0.85;
	font-weight: normal;
	font-size: 24px;
	margin-bottom: 1px;
	white-space: nowrap;

	transition-property: pre-transform-scale2d, transform;
	transition-duration: 0.2s !immediate;
	transition-timing-function: bigpicture-ease-in-out;
}

.FriendsListItemStatusDetail
{
	width: 100%;
	opacity: 0.85;
	font-weight: normal;
	font-size: 24px;
	margin-bottom: 1px;
	white-space: nowrap;
	transition-property: pre-transform-scale2d, transform;
	transition-duration: 0.2s !immediate;
	transition-timing-function: bigpicture-ease-in-out;
}

.LeftMainListItem
{
	flow-children: right;
	width: 100%;
	padding-top: 1px;
	padding-bottom: 1px;
	margin-right: friendsverticalscrollpad;
	border-color: #00000000;
	padding-top: 4px;
	padding-bottom: 5px;
	padding-left: -2px;
	border-style: solid;
	border-width: 5px;
	padding-left: 0px;
	margin-left: 10px;
	transform: translateX( 10px );
	height: 114px;

	transition-property: background-color, border, box-shadow, pre-transform-scale2d, transform, height;	//opacity, 
	transition-duration: 0.2s !immediate;
	transition-timing-function: bigpicture-ease-in-out;
}

.LeftMainListItem:hover
{
 	pre-transform-scale2d: 1.0;	
 	transform: translatex( 17px );
}

.LeftMainListItem:focus
{
	background-color: friendsitemmainlistbkgnd;
	border-color: red;
	transform: translateX( 0px );
}

.LeftMainListItem:focus:hover 
{
 	pre-transform-scale2d: 1.0;	
 	transform: translatex( 0px );
}

.LeftMainListItem:hover 
{
 	pre-transform-scale2d: 1.0;	
 	transform: translatex( 10px );
}

.LeftMainListItem:focus:hover .FriendsListItemPersonaName, .LeftMainListItem:focus:hover .FriendsListItemStatus, .LeftMainListItem:focus:hover .FriendsListItemStatusDetail
{
	pre-transform-scale2d: 1.0;	
 	transform: translatex( 0px );
}

.LeftMainListItem:hover .FriendsListItemAvatar
{
	box-shadow: inset #00000099 0px 0px 12px 0px;
}

.LeftMainListItem:descendantfocus:hover .FriendsListItemAvatar
{
	box-shadow: inset #00000099 0px 0px 12px 0px;
}

#FriendsMainBodyListContainer:descendantfocus .LeftMainListItem:focus
{
	transition-duration: 0.4s !immediate;

	border-color: #cececeff;
	background-color: friendsitemmainlistbkgnd;
	transform: translateX( 0px );

	animation-name: main-button-glow-movement-no-fill;
	//animation-name: links-and-more-button-focus;
	animation-duration: 1.7s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;

	transition-property: background-color, transform, border;
	transition-duration: 0.3s !immediate;
	transition-timing-function: bigpicture-ease-in-out;
}

.LeftMainListItem:descendantfocus
{
	animation-name: links-and-more-button-focus;
}

//secondary focus in the list
.LeftMainListItem:focus
{
	transition-duration: 0.2s;

	background-color: simplebutton;
	border-color: #ffffff00;
	transform: translateX( 0px );
	transition-property: background-color, transform, border;
	transition-duration: 0.3s !immediate;
	transition-timing-function: bigpicture-ease-in-out;
}

.LeftMainListItem.Offline Label
{
	color: friendsoffline_darkbg;
}


.LeftMainListItem.Online Label
{
	color: friendsonline_solid;
}

.LeftMainListItem.Online:descendantfocus Label
{
	color: friendsonline_lightbg;
}

.LeftMainListItem.InGame Label
{
	color: friendsingame_darkbg;
}

.LeftMainListItem.Golden Label
{
	color: friendsgolden_darkbg;
}

.LeftMainListItem.Online:focus Label
{
	color: friendsonline_darkbg;
}

.LeftMainListItem.Online:descendantfocus Label
{
	color: friendsonline_lightbg;
}

.LeftMainListItem.InGame:descendantfocus Label
{
	color: friendsingame_lightbg;
}

.LeftMainListItem.InGame:focus Label
{
	color: friendsingame_darkbg;
}

.LeftMainListItem.InGame:descendantfocus Label
{
	color: friendsingame_lightbg;
}

.LeftMainListItem.Golden:focus Label
{
	color: friendsgolden_darkbg;
}

.LeftMainListItem.Offline:focus Label
{
	color: #99999999;
}

.LeftMainListItem.Offline:descendantfocus Label
{
	color: applabelselectedsolid;
}

#FriendsMainBodyLeftHeaderButtons
{
	vertical-align: bottom;
	horizontal-align: right;
	margin-right: 15px;
	flow-children: right;
}

#FriendsMainBodyLeftHeaderButtons:focus
{
	transition-duration: 0.23s !immediate;
		
	color: #000000ff;
	
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #ffffffff ), to( #bdbfbfff ) ); 
	
	box-shadow: box_shadow_off_color -4.5px -4.5px 16px 9px;
	
	transition-duration: 0.23s;
	transition-timing-function: linear;
	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;
	animation-direction: normal;
}

#FriendsMainBodyLeftHeaderButtons:descendantfocus .FriendsMainBodyHeaderButton
{
	border-color: #ffffff00;
	
	transition-duration: 0.23s;
	transition-timing-function: linear;

	animation-name: main-button-glow-movement;
	animation-duration: 1.7s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

.FriendsMainBodyHeaderButton
{
	font-weight: normal;
	font-size: 24px;
	color: #000000ff;
	white-space: nowrap;
	padding-top: 12px;
	background-color: friendstab;
	margin-left: 15px;

	transition-property: background-color, color;
	transition-timing-function: ease-out;
	transition-duration: 0.23s;
}

.FriendsMainBodyHeaderButton:focus, 
{
	color: #f2f2f2ff;
	background-color: friendstabcurrentselection;
}

.FriendsMainBodyHeaderButton:hover
{
	color: #f2f2f2ff;
	background-color: friendstabcurrenthover;	
}

.FriendsMainBodyHeaderButton:selected
{
	color: #f2f2f2ff;
	background-color: friendstabcurrenthover;	
}

.FriendsMainBodyHeaderButton Label
{
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 5px;
	margin-bottom: 10px;
}

.FriendsMainBodyHeaderButton Label.InviteCount
{
	color: white;
	margin-left: 15px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 10px;
	vertical-align: top;
	horizontal-align: right;
}

#FriendsMainBodyLeftHeaderUnderline
{
	width: 100%;
	height: 5px;
	margin-right: friendsverticalscrollpad;
	margin-left: 10px;
	margin-bottom: 0px;
	background-color: friendstabdivider;
}

#FriendsMainBodyListContainer
{
	width: 100%;
	height: 100%;
	flow-children: none;
}

#FriendsMainBodyFriendsList,#FriendsMainBodyInviteList,#FriendsMainBodyGroupsList
{
	width: 100%;
	height: 100%;
	flow-children: down;
	overflow: squish scroll;

	padding-top: 0px;
	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" );
}

#GroupsSearchButton
{
	height: 70px;
	width: 100%;
	flow-children: right;
	margin-left: 10px;

	background-image: url( "file://{images}/friends/friends_search.png" );
	background-repeat: no-repeat;
	background-position: left 10px top 15px;
}

#GroupsSearchButton Label
{
	font-size: 30px;
	color: white;
	vertical-align: center;
	margin-left: 70px;
}

#GroupsSearchButton:focus
{
	background-color: white;
}

#GroupsSearchButton:focus Label
{
	color: black;
}

.MainBodyLeftList
{
	opacity: 0.0;
	
	transition-property: opacity;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
}

.MainBodyLeftList.CurrentSelection
{
	opacity: 1.0;
}

#FriendsMainBodyChatMessages
{
	font-size: 26px;
	font-weight: normal;
	color: #d0d0d0ff;

	line-height: 33px;
}

.ChatMsgMyOwn
{
	font-weight: bold;
	color: friendsonline_solid;
}

.ChatMsgOffline
{
	font-weight: bold;
	color: friendsoffline_solid;
}

.ChatMsgOnline
{
	font-weight: bold;
	color: friendsonline_solid;
}

.ChatMsgInGame
{
	font-weight: bold;
	color: friendsingame_darkbg;
}

.ChatMsgGolden
{
	font-weight: bold;
	color: friendsgolden_darkbg;
}

.ChatMsgHistorical
{
	font-weight: normal;
	color: #7c7c7cff;
}

.ChatMsgMessageBody
{
	font-weight: normal;
	color: #f0f0f0ff;
}

.ChatMsgMessageBodyMyOwn
{
	font-weight: normal;
	color: #a0a0a0ff;
}

.ChatMsgFailureExplanation
{
	color: #ffffff66;
}

a.ChatMsgMessageBodyMyOwn
{
	color: link;
}

a.ChatMsgMessageBodyMyOwn:hover
{
	color: link;
	text-decoration: underline;
}

a.ChatMsgMessageBody
{
	color: linkbright;
}

a.ChatMsgMessageBody:hover
{
	color: linkbright;
	text-decoration: underline;
}

#FriendIndicatorContainedImageChat
{
	opacity-mask: url( "file://{images}/friends/friends_indicator_chat.png" );
}
#FriendIndicatorContainedImageVoiceChat,
#FriendIndicatorContainedImageVoiceChatDialing,
#FriendIndicatorContainedImageVoiceChatRinging
{
	opacity-mask: url( "file://{images}/friends/friends_indicator_voicechat.png" );
}
#FriendIndicatorContainedImageVoiceChatOnHold
{
	opacity-mask: url( "file://{images}/friends/friends_indicator_voicehold.tga" );
}
#FriendIndicatorContainedImageGameInvite
{
	opacity-mask: url( "file://{images}/friends/friends_indicator_gameinvite.png" );
}
#FriendIndicatorContainedImageFriendRequest
{
	opacity-mask: url( "file://{images}/friends/friends_indicator_friendrequest.png" );
}

.AddFriendMsgBox #MsgBoxDescriptionArea
{
	flow-children: down;
}

.AddFriendMsgBox TextEntry
{
	width: 100%;
	margin-top: 30px;
	padding-top: 10px;
	height: 60px;
}

.AddFriendMsgBox TextEntry:focus,
.BehindTextInputHandler TextEntry
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #dbdcdd ), to( #fdfdfd ) );

	color: applabelselectedsolid;
}

.AddFriendMsgBox #MsgBoxButtons
{
	margin-top: 20px;
}

.AddFriendMsgBox #MsgBoxBodyRegion
{
	width: 860px;
	z-index: 10000;

	transition-property: transform;
	transition-duration: 0.25s;
	transition-timing-function: bigpicture-ease-in-out;
	box-shadow: fill #00000044 -4px -4px 8px 8px;
}

.AddFriendMsgBox.BehindTextInputHandler #MsgBoxBodyRegion
{
	transform: translatex( 480px );
}

.ScreenSaverMode #Friends
{
	opacity: 0.0;

	transition-property: opacity, transform;
	transition-duration: 1.4s, 0.3s !immediate;
	transition-timing-function: linear;
}

#FriendsMainBodyStatusGroupLeft
{
	height: 30px;
	vertical-align: bottom;
}

#FriendsMainBodyStatusGroupRight
{
	height: 30px;
	vertical-align: bottom;
}

.FriendsActionsMsgBox .MsgBoxDescriptionArea
{
	flow-children: down;
}

.FriendsActionsMsgBox .MsgBoxDescriptionArea .FriendsOptionWrapper, 
.FriendsActionsMsgBox .MsgBoxDescriptionArea .MsgBoxButton
{
	margin-bottom: 10px;
}

.FriendsActionsMsgBox .FriendsOptionWrapper
{
	width: 100%;
	flow-children: right;
}

.FriendsOptionWrapper DropDown
{
	width: 328px;
	height: 54px;
	transition-property: pre-transform-scale2d;
	transition-duration: 0.2s;
	border-width: 5px;

}

.FriendsOptionWrapper Label
{
	margin-left: 10px;
	color: detailsdatalabelfocus;
}

.FriendsOptionWrapper .FriendsOptionLabel
{
	width: 252px;
	font-size: 28px;
	margin-top: 8px;
	margin-left: -10px;
}

#MsgBoxButtonArea DropDown Label
{
	margin-left: 0px;
	margin-right: 30px;
	margin-top: 0px;
}




DropDownMenu.DropDownMenuVisible
{
	z-index: msgbox_contextmenu_zindex;
	width: 328px;
}

.FriendsActionsMsgBox #MsgBoxButtons
{
	flow-children: down;
	horizontal-align: left;
	width: 100%;
	margin-top: 0px;
}

.FriendsActionsMsgBox #MsgBoxButtons Button
{
	padding-left: 10px;
	text-align: left;
}


.FriendsActionsMsgBox #ButtonClose
{
	margin-top: 6px;
	margin-bottom: 0px;
	horizontal-align: left;
	min-width: 100px;
}

.FriendsActionsMsgBox .MsgBoxDescriptionArea
{
	padding-top: 20px;
}

#MsgBoxBodyRegion
{
	width: 700px;
}

DropDownMenu
{
	height: 200px;
	overflow: squish scroll;
	border-width: 5px;

}

#ButtonEditProfile, #ButtonAddAFriend
{
	width: 610px;
	text-align: left;
}

#MsgBoxButtons Button Label
{
	horizontal-align: left;
	text-transform: none;
}


.FriendsOptionWrapper DropDown:hover
{
	pre-transform-scale2d: 1.05;
}

#RightStickHint
{
	opacity: 0.0;

	horizontal-align: right;

	color: #ffffff33;
	font-size: 22px;

	margin-top: 3px;
	margin-right: 3px;
	height: 30px;

	transition-property: opacity; 
	transition-duration: 0.25s;
	transition-timing-function: bigpicture-ease-in-out;

}

.URLsInChatBody #RightStickHint
{
	opacity: 1.0;
}

#FriendsInviteToLobbyDialog .MsgBoxBodyRegion
{
	width: 800px;
}

.InviteFriendsDialog #FriendsList
{
	height: 560px;
	width: 100%;
	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" );
}

.InviteFriendsDialog #FriendsList AvatarImage
{
	width: 90px;
	height: 90px;
	border-width: 4px;
	border-style: solid;
	border-radius: 6px;
	box-shadow: inset #00000099 0px 0px 12px 0px;
}

.InviteFriendsDialog FriendInvitePanel
{
	margin-top: 8px;
	margin-bottom: 4px;
	margin-right: 26px;
	flow-children: right;
	padding-top: 8px;
	padding-left: 4px;
	border-width: 0px;
	height: 105px;
}

.InviteFriendsDialog #ButtonWrapper
{
	height: 100%;
	width: 30%;
	horizontal-align: right;
}

.InviteFriendsDialog FriendInvitePanel #Avatar
{
	margin-left: 10px;
}

FriendInvitePanel #FriendPanelLabels
{
	flow-children: down;
	height: 100%;
	width: 40%;
	margin-left: 8px;
}

FriendInvitePanel:descendantfocus,
FriendInvitePanel:descendantfocus:hover,
.LeftMainListItem:descendantfocus:hover
{
	transform: translateX( 0px );
	background-color: action_module;

	animation-name: main-button-glow-movement-no-fill;
	//animation-name: links-and-more-button-focus;
	animation-duration: 1.7s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;

	transition-property: background-color, border;
	transition-duration: 0.3s !immediate;
	transition-timing-function: bigpicture-ease-in-out;
}

FriendInvitePanel:hover
{
	background-color: action_module;
}

FriendInvitePanel Button
{
	border-style: solid;
	border-width: 4px;
	border-color: #00000000;
	font-size: 28px;
	margin: 4px;
	padding-left: 4px;
	padding-right: 4px;

	transition-property: pre-transform-scale2d;
	transition-duration: 0.23s;
	transition-timing-function: bigpicture-ease-in-out;
	background-color: simplebuttonsolid_vertical;
}

FriendInvitePanel Button:hover
{
	pre-transform-scale2d: 1.03;
}

FriendInvitePanel Button:focus
{
	border-style: solid;
	border-width: 4px;
	border-color: #cececeff;
	background-color: friendsitemmainlistbkgnd;

	transition-property: background-color, border;
	transition-duration: 0.3s !immediate;
	transition-timing-function: bigpicture-ease-in-out;
}

FriendInvitePanel.Disabled Button
{
	opacity: 0.0;
}

FriendInvitePanel #InviteSent
{
	opacity: 0.0;
	font-size: 28px;
	vertical-align: center;
}

FriendInvitePanel #InviteButton
{
	padding-top: 4px;
	height: fit-children;
}

FriendInvitePanel #InviteButton Label
{
	horizontal-align: center;
}

FriendInvitePanel.Disabled #InviteSent
{
	opacity: 1.0;
	horizontal-align: center;
}

FriendInvitePanel #FriendPanelLabels Button #InviteLabel
{
	color: applabelsolid;
	font-size: 20px;
	vertical-align: center;
}

FriendInvitePanel #FriendPanelLabels #InviteSent
{
	color: friendsoffline_solid;
}

FriendInvitePanel #FriendPanelLabels Button:focus #InviteLabel
{
	color: friendsoffline_lightbg;
}

FriendInvitePanel #FriendPanelLabels #FriendPersonaName
{
	width: 100%;
	max-height: 40px;
	font-size: 28px;	
}

FriendInvitePanel #FriendPanelLabels #FriendGameName
{
	width: 100%;
	max-height: 40px;
	font-size: 24px;	
}

/* the search text entry in the friends ui */
.LeftMainListItem.SearchEntry #SearchEntry
{
	vertical-align: center;
	margin-left: 30px;
	width: 500px;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 27px;
	text-overflow: clip;

}

.LeftMainListItem.Header
{
	vertical-align: center;
	width: 500px;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 27px;
	text-overflow: clip;
	height: 50px;
}

.LeftMainListItem.Header:hover
{
 	pre-transform-scale2d: 1.0;	
 	transform: translatex( 0px );
}

.LeftMainListItem.Header:focus
{
	background-color: friendsitemmainlistbkgnd;
	border-color: #ffffffff;
	transform: translateX( 0px );
}


.LeftMainListItem.Header #FriendPanelImage,
.LeftMainListItem.Header #FriendPanelLabels,
.LeftMainListItem.Header #AvatarImage
{
	visibility: collapse;
}

.LeftMainListItem.Header #CategoryLabel
{
	color: white;

}

.LeftMainListItem.Header_RecentChat
{
	background-color: red;
}

#FriendsMainBodyListContainer:descendantfocus .LeftMainListItem.SearchEntry:focus
{
	transform: translateX( 10px );
}

.LeftMainListItem.SearchEntry #FriendPanelLabels
{
	transform: translateX( 0px );
}


/* friend entries hidden by a search */
.LeftMainListItem.FilterInvisible
{
	visibility: collapse;
}

/* the help text inside the search entry */
#SearchEntry {
	border-width: 0px;
}

#SearchEntry Label
{
	width: 500px;
	font-style: italic;
	font-weight: normal;
	color: friendsoffline_darkbg;
	transition-property: opacity;
	transition-duration: 0.1s;
	transition-timing-function: bigpicture-ease-in-out;

}

#SearchEntry:descendantfocus Label
{
	opacity: 0.0;

}

.LeftMainListItem.SearchEntry:descendantfocus Label,
.LeftMainListItem.SearchEntry:descendantfocus:hover Label
{
	color: white;
}

.LeftMainListItem.SearchEntry:focus #SearchEntry Label
{
	color: black;
}

#SearchEntry.HasInput Label
{
	opacity: 0.0;
}

.LeftMainListItem.SearchEntry
{
	height: 75px;
	margin-top: 5px;

	//background-color: #1a5e8022;
	background-color: #1b405933;
	opacity: 1.0;
	margin-right: 28px;
	margin-left: 0px;
}

.LeftMainListItem.SearchEntry:descendantfocus,
.LeftMainListItem.SearchEntry:hover,
.LeftMainListItem.SearchEntry:focus,
{
	transform: translateX( 10px );
}

TextEntry:focus
{
	animation-name: none;
	color: white;
}

.LeftMainListItem.SearchEntry.descendantfocus, .LeftMainListItem.SearchEntry:hover, 
.LeftMainListItem.SearchEntry.descendantfocus, .LeftMainListItem.SearchEntry:focus
{
	background-color: friendsitemmainlistbkgnd;
}

.LeftMainListItem.SearchEntry AvatarImage, 
.LeftMainListItem.SearchEntry #FriendPanelLabels
{
	transform: translateX( 5px );
	}

.LeftMainListItem.SearchEntry #FriendPanelImage
{
	background-image: url( "file://{images}/friends/friends_search.png" );
	background-repeat: no-repeat;
	width: 40px;
	height: 40px;
	margin-left: 24px;
	margin-top: 8px;
	border-width: 0px;
	box-shadow: none;
	wash-color: none;
}

.LeftMainListItem.CommunitySearchEntry #FriendPanelImage
{
	background-image: url( "file://{images}/friends/friends_search.png" );
	background-repeat: no-repeat;
	background-position: left 25px top 25px;
	height: 90px;
	width: 90px;
	border-width: 4px;
	border-style: solid;
	border-radius: 0px;
	box-shadow: fill #eeeeee00 -4.5px -4.5px 6px 9px;
	background-color: #111111ff;

	transition-property: box-shadow;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
}

.LeftMainListItem.SearchEntry:descendantfocus,
.LeftMainListItem.SearchEntry:descendantfocus:hover
{
	background-color: none;
	animation-name: none;
	transform: translateX( 0px );
	}

.LeftMainListItem.SearchEntry:descendantfocus #FriendPanelImage
.LeftMainListItem.SearchEntry:descendantfocus:hover #FriendPanelImage
{
	wash-color: black;
	}

.LeftMainListItem.SearchEntry #SearchEntry
{
	transform: translateX( 8px );
	transition-duration: 0.2s;
	transition-property: transform;
	transition-timing-function: bigpicture-ease-in-out;
}


.LeftMainListItem.SearchEntry:descendantfocus #SearchEntry
{
	transform: translateX( 10px );
}


.LeftMainListItem.SearchEntry #SearchEntry
{
	background-color: none;
}

.LeftMainListItem.SearchEntry:focus #SearchEntry
{
	color: black;
}

.LeftMainListItem.CommunitySearchEntry.SearchEmpty
{
	opacity: 0.0;
}

.LeftMainListItem.CommunitySearchEntry #FriendPanelLabels
{
	height: 100%;
	opacity-mask: none;
}

.LeftMainListItem.CommunitySearchEntry
{
	height: 114px;
}

.LeftMainListItem.CommunitySearchEntry.SearchEmpty
{
	height: 0px;
}

.LeftMainListItem.CommunitySearchEntry #FriendPersonaName
{
	margin-top: 30px;
	margin-left: 0px;
	vertical-align: center;
	color: friendsoffline_solid;
	text-overflow: ellipsis;
	white-space: normal;
	height: 100%;
}

.LeftMainListItem.CommunitySearchEntry:descendantfocus #FriendPersonaName
{	
	color: friendsoffline_lightbg;
}

.FriendsContent
{
	width: 100%;
	height: 100%;
}

#Loading
{
	width: 100%;
	height: 100%;
	opacity: 1.0;
	transition-property: opacity;
	transition-duration: 0.25s;
	transition-delay: 1.0s;
}

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

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

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

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


Friends #Offline,
Friends #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;
}

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

Friends .Offline #Offline,
Friends .LoadError #Error,
Friends .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;
}

#FriendsContent
{
	width: 100%;
	height: 100%;
}

#FriendsMainBodyInviteList
{
	padding-top: 10px;
}

.FriendsListHeader
{
	color: white;
	font-size: 30px;

	margin-top: 4px;
	margin-left: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
}

.FriendsListHeader.EmptyList
{
	visibility: collapse;
}

.FriendCategory
{
	height: fit-children;
	width: 100%;
	flow-children: down;
}

.GroupsCategory
{
	height: fit-children;
	width: 100%;
	flow-children: down;
}

#FriendsSearchCommunityButton
{
	visibility: visible;
	flow-children: right;
	background-color: red;
	padding: 5px;
	width: 100%;
}

#FriendsSearchCommunityButton.SearchEmpty
{
	visibility: collapse;
}

#FriendsSearchCommunityButton Label
{
	color: white;
	margin-left: 20px;
	vertical-align: center;
	font-size: 30px;
}

.SearchCommunityIcon
{
	background-image: url( "file://{images}/friends/friends_search.png" );
	background-repeat: no-repeat;
	background-position: left 25px top 25px;
	height: 90px;
	width: 90px;
	border-width: 4px;
	border-style: solid;
	border-radius: 0px;
	box-shadow: fill #eeeeee00 -4.5px -4.5px 6px 9px;
	background-color: #111111ff;
}

.FriendsSearchIcon
{
	background-image: url( "file://{images}/friends/friends_search.png" );
	background-repeat: no-repeat;
	background-position: left 10px top 5px;
	height: 70px;
	width: 70px;
}

#FriendsSearchTextEntry
{
	width: 100%;
	margin-right: 30px;
}

#FriendsSearchTextEntry.HasInput Label
{
	opacity: 0.0;
}

#FriendsSearchTextEntry:descendantfocus Label
{
	opacity: 0.0;
}