@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( #10101080 ), 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;

FriendsChatDialog
{
	width: 950px;
	padding-left: 35px;
	padding-right: 35px;
	height: 100%;
	opacity: 0.0;

	background-color: gradient( linear, 0% 100%, 100% 100%, from( #2976a344 ), to( #2976a300 ) );

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

FriendsChatDialog.FriendChatDisabled,
FriendsChatDialog.ClanChatDisabled
{
	opacity: 0.0;
}

FriendsChatDialog.ZeroFriends
{
	opacity: 0.0;
}

FriendsChatDialog AvatarImage
{
	margin-left: 0px;
	transition-duration: 0.28s;
	transition-property: opacity;
	opacity: 0.0;
}

FriendsChatDialog:descendantfocus
{
	opacity: 1.0;
	//height: 485px;
	transform: translateX( -985px );
	background-color: #00000099;
	box-shadow: module_shadow;
}

.BehindDaisyWheelTextInputHandler FriendsChatDialog
{
	transform: translateX( -480px );
}

#FriendsMainBodyContainer
{
	width: 1000px;
	height: fit-children;
	flow-children: down;
}

#FriendsMainBodyInputTextArea
{
	width: fill-parent-flow(1.0);
	height: 106px;
	overflow: squish scroll;
	white-space: normal;
	opacity: 0.85;

	padding-left: 8px;
	padding-right: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 28px;
	font-weight: normal;
	text-overflow: clip;
	color: friendsitemmainlistbkgnd_from;
	background-color: friendschatinputbkgnd_text;

	border-width: 5px;
	border-color: friendstab;
	border-style: solid;
	border-radius: 0px;

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

#FriendsMainBodyInputTextArea:hover
{
	opacity: 1.0;
}

#FriendsMainBodyInputTextArea:descendantfocus
{
	color: applabelselectedsolid;
	


	border-color: #cececeff;
	background-color: friendsitemmainlistbkgnd;
    opacity: 1.0;
	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.2s;
	transition-timing-function: bigpicture-ease-in-out;
}

#FriendsMainBodyInputTextArea:hover:disabled
{
	background-color: friendschatinputbkgnd_text;
}

#FriendsMainBodyInputEmoticonButton
{
	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;
	visibility: collapse;

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

.CursorVisible #FriendsMainBodyInputEmoticonButton
{
	visibility: visible;
}

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

#EmoticonSelector
{
	width: 460px;
	max-height: 400px;
	overflow: clip scroll;
	height: fit-children;
	flow-children: right-wrap;
	background-color: #0d273aff;
	horizontal-align: right;
	vertical-align: bottom;
    margin-top: 4px;
	margin-bottom: 115px;
	padding: 4px;
	height: 0px;

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

.CursorVisible .ShowEmoticonPanel #EmoticonSelector
{
	opacity: 1.0;
	height: fit-children;
}

#EmoticonSelector Button
{
	margin: 2px;
	width: 40px;
	height: 40px;
	padding: 6px;
}

#EmoticonSelector Image
{
	width: 100%;
	height: 100%;
}

#EmoticonSelector Button:hover
{
	background-color: friendstab;
}


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

#FriendsMainBodyInputEmoticonButton Label
{
	vertical-align: center;
	horizontal-align: center;
	font-size: 48px;
	color: tclegendlabel;
}

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

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

// Header
#FriendsMainBodyRightHeader
{
	height: 94px;
	margin-bottom: 8px;
	margin-top: 26px;
	width: 92%;
	opacity: 0.0;
}

.SteamIDValid #FriendsMainBodyRightHeader
{
	opacity: 1.0;
}

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

.VoiceHeader
{
	width: fit-children;
	height: 54px;
	padding-right: 0px;
	horizontal-align: right;
	margin-right: -70px;
	background-color: #124a6a;
	padding: 3px;
	padding-top: 0px;
	//border-style: none;
	visibility: collapse;
}

.VoiceHeaderButton
{
	visibility: collapse;

}

FriendsChatDialog:descendantfocus .VoiceHeaderButton
{
	visibility: visible;
	padding: 3px;
	vertical-align: center;
}

.CursorVisible .VoiceHeaderButton
{
	//border: 1px solid white;
}

FriendsChatDialog:descendantfocus .VoiceHeader:hover
{
	background-color: friendstabcurrentselection;
}

FriendsChatDialog:descendantfocus .VoiceHeader:selected
{
	background-color: applabelsolid;
}


.CursorVisible .VoiceHeaderButtonHintImage
{
	visibility: collapse;
}

#FriendsMainBodyVoiceHeader_NotConnected
{
	visibility: visible;
}

// hide the button to start voice chat if the user is offline
.Offline #FriendsMainBodyVoiceHeader_NotConnected
{
	visibility: collapse;
}

.VoiceChatActive #FriendsMainBodyVoiceHeader_NotConnected
{
	visibility: collapse;
}

.GroupChat #FriendsMainBodyVoiceHeader_NotConnected
{
	visibility: collapse;
}

#FriendsMainBodyVoiceHeader_Connected
{
	visibility: collapse;
}

.VoiceChatConnected #FriendsMainBodyVoiceHeader_Connected
{
	visibility: visible;
}

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

#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;
	vertical-align: bottom;
	text-align: right;
	transform: translateY( 0px );
	visibility: collapse;
	height: 30px;
}

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

#ChatWithXLabel
{
	margin-left: 120px;
	width: 50%;
	background-color: none;
}

#FriendStatusContainer
{
	margin-left: 110px;
	width: 60%;
	flow-children: down;
}

.GroupChat #FriendStatusContainer
{
	width: 100%;
}

#FriendName
{
	font-size: 30px;
	max-height: 40px;
	color: white;
	margin-top: 0px;
	margin-bottom: 0px;
	white-space: nowrap;
}

#FriendPersona
{
	font-size: 24px;
	color: ui_primary_color;
}

.Offline #FriendPersona
{
	color: #888888;
}

.InGame #FriendPersona
{	
	color: friendsingame_darkbg;
}

.GroupChat #FriendName, .GroupChat #FriendPersona, .GroupChat #FriendPersonaDetail, .InGame.GroupChat #FriendPersonaDetail
{
	visibility: collapse;
}

#FriendPersonaDetail
{
	font-size: 24px;
	visibility: collapse;
	color: ui_primary_color;
}

.InGame #FriendPersonaDetail
{
	visibility: visible;
}

#GroupName
{
	visibility: collapse;	
	color: white;
	font-size: 30px;
}

.GroupChat #GroupName
{
	visibility: visible;
}

AvatarImage
{
	width: 94px;
	height: 94px;
	transition-duration: 0.28s;
	transition-property: opacity;
	opacity: 0.0;
	border-radius: 4px;
}

AvatarImage.AvatarVisible
{
	opacity: 1.0;
}

.InGame AvatarImage
{
	border: 2px solid friendsingame_darkbg;
}

.Online AvatarImage
{
	border: 2px solid friendsonline_darkbg;
}

.Offline AvatarImage
{
	border: 2px solid friendsoffline_darkbg;
}

#FriendsVoiceChatControls
{
	height: fit-children;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	flow-children: down;
	visibility: collapse;
	horizontal-align: right;
}

.VoiceBarIcon
{
	height: 40px;
	width: 40px;
}

.VoiceBarContainer
{
	background-color: #44444420;
	height: 70px;
	width: 208px;
	border-radius: 8px;
	flow-children: right;
	border: 5px solid #1c333dff;
	padding-left: 6px;
	padding-right: 4px;
	padding-bottom: 5px;
	padding-top: 5px;
	margin: 4px;
	transition-property: transform, pre-transform-scale2d;
	transition-duration: 0.20s;
	border-color: none;
	border-style: solid;
	border-width: 5px;

}

.VoiceChatActive.VoiceChatConnected #FriendsVoiceChatControls
{
	visibility: visible;
}

#FriendsVoiceChatControls Image
{
	vertical-align: center;
}

#FriendsVoiceChatControls Label
{
	color: white;
	width: 100%;
}

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

	line-height: 33px;

	width: 880px;
	height: fill-parent-flow( 1.0 );
	flow-children: down;
	overflow: squish scroll;
	padding-right: 16px;
	margin-right: 2px;
	padding-top: 4px;
	margin-left: 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" );
}

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

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

	background-color: #00000000;

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

FriendsChatDialog:descendantfocus #FriendsMainBodyChatContainer
{
	height: 310px;
	opacity: 1.0; 
}


FriendsChatDialog:descendantfocus #FriendsMainBodyInputGroup
{
		opacity: 0.8; 
}



FriendsChatDialog.Layout_Keyboard:descendantfocus #FriendsMainBodyChatContainer
{
	height: 800px;
}

.BehindDaisyWheelTextInputHandler FriendsChatDialog:descendantfocus #FriendsMainBodyChatContainer
{
	height: 800px;
}

#FriendsMainBodyInputGroup
{
	height: 106px;
	width: 100%;
	flow-children: right;
	vertical-align: bottom;
	opacity: 0.0;    
	transition-property: opacity, transform;
	transition-duration: 4.0s;
	transition-timing-function: bigpicture-ease-in-out;
}

#FriendsMainBodyGameInviteButton
{
	flow-children: down;
	width: 100%;
	height: fit-children;
	background-color: #124b6b;

	margin-left: 10px;
	margin-right: 10px;
	padding: 10px;

	visibility: collapse;
}

#FriendsMainBodyGameInviteButton:hover
{
	background-color: #196e9e;
	//border: 2px solid white;
}

.HasGameInvite #FriendsMainBodyGameInviteButton
{
	visibility: visible;
}

#FriendsGameInviteHint
{
	vertical-align: center;
	text-transform: uppercase;
}


#FriendsGameInviteHint, #FriendsGameInviteDetails
{
	font-size: 24px;
	color: white;	
}

.Button_Y
{
	//color: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #072e47ff ), color-stop( 1.0, #000000ff ) );
	color: black;
	font-size: 28px;
	background-color: legendbuttonyellow;
	border-radius: 50%;
	border: 2px solid #00000000;
	width: 38px;
	height: 38px;
	text-align: center;
	margin: 0px;
	margin-left: 4px;
	margin-right: 4px;
	margin-top: 3px;
	box-shadow: #00000022 -3px -3px 4px 6px;
	margin-bottom: 4px;
}

.Button_Start
{
	border-radius: 44%;
	border: 2px solid #00000000;
	width: 50px;
	height: 32px;
	text-align: center;
	wash-color: #878c8eff;
	margin: 6px;
	margin-left: 16px;
	margin-right: 2px;
	box-shadow: #EEEEEE60 -5px -5px 6px 10px;

	background-repeat: no-repeat;
	background-position: 50% 50%;
	padding: 0px;
	background-position: 16px 50%;
	background-image: url( "file://{images}/footer/start.png" );
}

#FriendsGameInviteButtonHintImage Label
{
	color: black;
}

.CursorVisible #FriendsGameInviteButtonHintImage
{
	visibility: collapse;
}

@keyframes 'voice_chat_icon_pulse'
{
	0%
	{
		opacity: 0.3;
	}

	50%
	{
		opacity: 1.0;
	}

	100%
	{
		opacity: 0.3;
	}
}

.VoiceChatIcon
{
	visibility: collapse;
	margin-top: 6px;
	margin-left: 4px;
	width: 32px;
	height: 32px;
	//wash-color: #d0fc34ff;
	
	background-image: url( "file://{images}/voice_mic.png" );
	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position: center;
}

.VoiceChatActive .VoiceChatIcon
{
	visibility: visible;
}

.VoiceChatOnHold .VoiceChatIcon
{
	background-image: url( "file://{images}/pause.png" );
}

.VoiceChatActive.VoiceChatRinging .VoiceChatIcon,
.VoiceChatActive.VoiceChatDialing .VoiceChatIcon
{
	animation-name: voice_chat_icon_pulse;
	animation-duration: 1.5s;
	animation-delay: 0.0s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

#FriendsMainBodyAcceptVoiceChatButton
{
	flow-children: down;
	width: 100%;
	height: fit-children;
	background-color: #124b6b;

	margin-left: 10px;
	margin-right: 10px;
	padding: 10px;

	visibility: collapse;
}

#FriendsMainBodyAcceptVoiceChatButton:hover
{
	background-color: friendstabcurrenselection;
}
#FriendsMainBodyAcceptVoiceChatButton:selected
{
	background-color: applabelsolid;
}


.VoiceChatRinging #FriendsMainBodyAcceptVoiceChatButton
{
	visibility: visible;
}

.Button_X
{
	//color: gradient( linear, 0% 0%, 0% 100%, color-stop( 0.0, #072e47ff ), color-stop( 1.0, #000000ff ) );
	color: black;
	font-size: 28px;
	background-color: legendbuttonblue;
	border-radius: 50%;
	border: 2px solid #00000000;
	width: 38px;
	height: 38px;
	text-align: center;
	margin: 0px;
	margin-left: 4px;
	margin-right: 4px;
	margin-top: 3px;
	box-shadow: #00000022 -3px -3px 4px 6px;
	margin-bottom: 4px;
}

#FriendsAcceptVoiceChatButtonHintImage Label
{
	color: black;
}

.CursorVisible #FriendsAcceptVoiceChatButtonHintImage
{
	visibility: collapse;
}

#FriendsAcceptVoiceChatHint
{
	vertical-align: center;
}

#FriendsAcceptVoiceChatHint, #FriendsAcceptVoiceChatDetails
{
	font-size: 24px;
	color: white;	
}

#FriendsMainBodyPendingVoiceCallButton
{
	visibility: collapse;
	width: 60%;
	height: fit-children;
	background-color: #124b6b;
	flow-children: right;
	horizontal-align:right;

	margin-left: 10px;
	margin-right: 10px;
	padding: 10px;

	visibility: collapse;
}

#FriendsMainBodyPendingVoiceCallButton Label,
#FriendsMainBodyPendingVoiceCallButton Panel
{
	vertical-align: center;
	margin-left: 8px;
}

.VoiceChatDialing #FriendsMainBodyPendingVoiceCallButton
{
	visibility: visible;
}

.VoiceChatDialing #FriendsMainBodyPendingVoiceCallButton:hover
{
	background-color: friendstabcurrentselection;
}

#VoiceChatPutOnHoldButton
{
	visibility: collapse;
}

.VoiceChatConnected #VoiceChatPutOnHoldButton
{
	visibility: visible;
}

.VoiceChatConnected.VoiceChatOnHold #VoiceChatPutOnHoldButton
{
	visibility: collapse;
}

#VoiceChatResumeButton
{
	visibility: collapse;
}

.VoiceChatConnected.VoiceChatOnHoldByLocalPlayer #VoiceChatResumeButton
{
	visibility: visible;
}

.ChatMsgOnline
{
	color: friendsonline_darkbg;
}

.ChatMsgInGame
{
	color: friendsingame_darkbg;
}

.ChatMsgHistorical
{
	color: #666666ff;
}

.ChatMsgMessageBody, .ChatMsgMessageBodyMyOwn
{
	color: #ddddddff;
}

.ChatMsgSystem
{
	color: #ddddddff;
}

// Emoticons, mainly
.InlineImage
{
	width: 30px;
	height: 30px;
	margin-left: -6px;
}

#FriendsChatDialog.InFriendsUI #FriendsMainBodyChatMessages
{
    opacity: 0.0;
}

#FriendsChatDialog.InFriendsUI #FriendsMainBodyChatContainer {
    max-height: 300px;
    height: 300px;
}

#FriendsChatDialog.InFriendsUI .VoiceHeader,
#FriendsChatDialog.InFriendsUI #FriendsMainBodyChatMessages,
#FriendsChatDialog.InFriendsUI #FriendsMainBodyInputGroup {
    visibility: collapse;
}

.HasGameInvite #FriendsChatDialog.InFriendsUI #FriendsMainBodyChatContainer,
.HasGameInvite #FriendsChatDialog.InFriendsUI #FriendsMainBodyInputGroup {
    visibility: visible;
}

#FriendsMainBodyFriendsUIMessage {
    width: 100%;
    height: 100%;
    visibility: collapse;
}

#FriendsChatDialog.InFriendsUI #FriendsMainBodyFriendsUIMessage
{
	visibility: visible;
}

#FriendsMainBodyFriendsUIMessage Label
{
	width: 100%;
	height: 100%;
	margin-top: 40px;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 32px;
	color: tclegendlabel;
}