FriendsContent_FriendItem
{
	margin: 4px;
	width: 300px;
	height: 110px;
	flow-children: none;
	background-color: gradient(linear, 0.0% 0.0%, 100.0% 100.0%, color-stop(0.0, #2E6480FF), color-stop(1.0,#154066FF));
	box-shadow: module_shadow;
	opacity: 1.0;
	border: 3px;
	border-radius: 3px;
}

FriendsContent_FriendItem.HiddenByFilter
{
	visibility: collapse;
}

FriendsContent_FriendItem:focus,
FriendsContent_FriendItem:hover
{
	border: 3px solid #b6e1fa;
	//padding: 3px;
	//pre-transform-scale2d: 1.1;
	//z-index: 10;

	box-shadow: box_shadow_on_color -4px -4px 12px 8px;

	background-image: url( "file://{images}/systemmenu/capsule_01_over.jpg" );
	background-position: 0px bottom;
	background-repeat: no-repeat;
	background-size: cover;

	animation-name: main-button-glow-movement-no-fill;
	animation-duration: longduration;
	animation-delay: mediumduration;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

FriendsContent_FriendItem.ConnectedToChat
{
	background-color: #14C6FC66;
}

FriendsContent_FriendItem.ConnectedToChat:focus
{
	border: 3px solid white;
}

FriendsContent_FriendItem.InGame
{
	//border: 2px solid friendsingame_darkbg;
}

FriendsContent_FriendItem.Online
{
	//border: 2px solid #53A4C4;
}

FriendsContent_FriendItem.Offline
{
	//border: 2px solid #6F6F6F;
}

AvatarImage
{
	margin: 5px;
	width: 95px;
	height: 95px;
	border-radius: 4px;
	border: 2px;
}

.InGame AvatarImage
{
	border: 2px solid friendsingame_darkbg;
}

.Online AvatarImage
{
	border: 2px solid friendsonline_darkbg;
}

.Offline AvatarImage
{
	border: 2px solid friendsoffline_darkbg;
}

Label
{
	margin-left: 4px;
	color: ui_primary_color;
	font-size: 22px;
}


.FriendItemLabelContainer
{
	flow-children: down;
	margin-left: 110px;
}

.FriendName
{
	height: 30px;
	width: 176px;
	margin-left: 4px;
	margin-top: 12px;
	color: white;
	font-size: 24px;
	text-overflow: ellipsis;
}

.Offline .FriendName
{
	color: friendsoffline_solid;
}
FriendsContent_FriendItem.Offline:focus .FriendName,
FriendsContent_FriendItem.Offline:focus .FriendPersonaStatus
{
	color: #c6d4df;
}

.Online .FriendName
{
	color: friendsonline_solid;
}

@define FriendNameInGame: #b3d92bff;

.InGame .FriendName
{
	color: FriendNameInGame;
}

.FriendPersonaStatus
{
	max-height: 24px;
	width: 100%;
}

.Offline .FriendPersonaStatus
{
	color: #888888;
}

.InGame .FriendPersonaStatus
{	
	font-size: 20px;
	color: FriendNameInGame;
}

.FriendPersonaStatusDetail
{
	font-size: 20px;
	margin-top: 2px;
}

.InGame .FriendPersonaStatusDetail
{
	color: FriendNameInGame;
}

.FriendUnreadMessages
{
	visibility: collapse;

	horizontal-align: right;
	color: white;
	font-size: 16px;
	width: 28px;
	height: 28px;
	background-color: red;
	border-radius: 4px;

	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;

	padding: 3px;
	text-align: center;
}

.HasUnreadChats .FriendUnreadMessages
{
	visibility: visible;
}

.FriendHasLobbyInvite
{
	visibility: collapse;
}

.HasLobbyInvite .FriendHasLobbyInvite
{
	visibility: visible;
}

@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;
}
