/*	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;
*/
@define friendschatmsgsbkgnd: gradient( linear, 10% 0%, 0% 100%, from( #10101040 ), to( #10101090 ) );

@define shortduration: 0.25s;
@define shortmedduration: 0.3s;
@define mediumduration: 0.4s;
@define longduration: 1.7s;

@keyframes 'nx-button-focus'
{
	from
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );
	}

	50%
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #1483baff ) );
	}

	to
	{
		background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );
	}
}

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

	font-family: platformfont;

	animation-duration: 1.6s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-direction: normal;

	transition-property: transform, opacity;
	transition-duration: 0.3s, 0.1s;
	transition-delay: 0.0s, 1.0s;
	transition-timing-function: ease-in;

	opacity: 1.0;
	transform: translateX( 0px );
	//background-color: #031a3d;
	background-image: url( "file://{images}/panel_background.png" );
	//transform: translateY( 100% );		background-color: #000000ff;
}

Friends.ChatFocus #ContentTitles
{
	visibility: collapse;
}

Friends.ChatFocus #ContentFrameHeader
{
	background-image: none;
	z-index: 100;
	width: fit-children;
}

.ContentMouseBackButton Panel
{
	width: 100%;
	height: 100%;
}

#ContentMouseBackButton,
.ChatFocus #ContentMouseBackButtonChat
{
	visibility: visible;
}

.ChatFocus #ContentMouseBackButton,
#ContentMouseBackButtonChat
{
	visibility: collapse;
}
	

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

Friends.SlideAwayToRight
{
	opacity: 0.0;
	transition-delay: 0.0s, 0.0s;
	transform-origin: 0% 0% parent-relative;
	transform: translateX(  1920px );	// rotateX( 45deg ) translateZ( -1000px );
}

.AllContent
{
	width: 100%;
	height: 100%;
	overflow: clip;
	margin-top: 104px;
	transition-delay: 0.4s;
	flow-children: right;	//temp

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

.ChatFocus .AllContent
{
	height: 1180px;
	transform: translateY( -105px );
		//transition-delay: 1.2s;
		transition-duration: 0.0s;
}


.ButtonColumn
{
	margin-top: 0px;
	margin-left: 70px;
	width: 400px;
	height: 100%;
	flow-children: down;
	overflow: clip scroll;

	transform: translateX( -35px ) translateY( -8px );

	opacity: 0.5;
	transition-delay: 0.08s;
	transition-duration: 0.3s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-property: transform, pre-transform-scale2d, opacity, opacity-mask;
	pre-transform-scale2d: 1;

	opacity-mask: url( "file://{images}/library/NxGridButtonRow_right.tga" ) 1.0;
}



.ChatFocus .ButtonColumn
{
	opacity:0.0;
}

.MenuHover .ButtonColumn,
.MenuAreaFocus .ButtonColumn
{
	transform: translateX( 0px ) translateY( -8px );
	opacity: 1.0;
	pre-transform-scale2d: 1;
	opacity-mask: none;
}

.MenuAreaFocus .ContentHover .ButtonColumn
{
	transform: translateX( -35px ) translateY( -8px );
	opacity: 0.5;
	opacity-mask: url( "file://{images}/library/NxGridButtonRow_right.tga" ) 1.0;
}


.GamesHorizRule
{
	width: 100%;
	height: 20px;
}

Label.Header
{
	font-size: 18px;	
	color: #2F89BDff;
	margin-bottom: 5px;
	margin-left: 10px;
}

.NxLeftNavButton
{
	width: 100%;
	margin: 2px 10px 2px 10px;
	padding: 10px 0px 0px 20px;
	height: 48px;
	flow-children: right;
	box-shadow: none;
	color: #67c1f5FF;
	background-color: gradient( linear, 85% 85%, 100% 100%, from( #09334dFF ), to( #09334d00 ) );
}

.NxLeftNavButton:selected {
	background-color: #1579a0;
}
.NxLeftNavButton:selected Label {
	color: #ffffff;
}
.NxLeftNavButton:selected Label .NumberElement {
	color: #ffffff;
}
.NxLeftNavButton:selected Image {
	wash-color: #ffffffff;
}

.NxLeftNavButtonAction
{
	width: 100%;
	margin: 2px 10px 2px 10px;
	padding: 10px 0px 0px 20px;
	height: 48px;
	flow-children: right;
	box-shadow: none;
	color: #67c1f5FF;
	background-color: #09334dFF;

	border-left-width: 5px;
	border-left-style: solid;
	border-left-color: #67c1f5FF;
}

.NxLeftNavButtonAction:focus {
	border-left-width: 5px;
	border-left-style: solid;
	border-left-color: #ffffffFF;
}

.NxLeftNavButton Label,
.NxLeftNavButtonAction Label
{
	width: 100%;
	font-family: platformfont;
	font-size: 26px;
	font-weight: normal;
	color: #67c1f5ff;

	transition-property: transform;
	transition-timing-function: ease-out;
	transition-duration: 0.3s;
}

.NxLeftNavButton AvatarImage
{
	transition-property: transform;
	transition-timing-function: ease-out;
	transition-duration: 0.3s;
}

.NxLeftNavButton Label .NumberElement,
.NxLeftNavButtonAction Label .NumberElement
{
	color: #2976a3ff;
}

.NxLeftNavButton:focus Label,
.NxLeftNavButtonAction:focus Label
{
	color: #072e47;
	transform: translateX( 7px );

}

.NxLeftNavButton:focus Label .NumberElement,
.NxLeftNavButtonAction:focus Label .NumberElement
{
	color: #072e47;
}

.NxLeftNavButton.Locked
{
	wash-color: parental_locked_wash;
}

.NxLeftNavButton.Locked:focus
{
	wash-color: none;
}

.NxLeftNavButton.Locked Label
{
	width: fill-parent-flow(1.0);
}

.NxLeftNavButton Image,
.NxLeftNavButtonAction Image
{
	vertical-align: center;
	margin-right: 8px;
	margin-bottom: 8px;
	margin-left: -4px;
	height: 32px;
	width: 32px;
	wash-color: #2976a3ff;
	opacity: 1.0;

	transition-property: transform;
	transition-timing-function: ease-out;
	transition-duration: 0.3s;
}

.NxLeftNavButton:focus Image,
.NxLeftNavButtonAction:focus Image
{
	wash-color: #ffffffff;
	transform: translateX( 4px );
}

.NxLeftNavButton.Locked Image
{
	opacity: 1.0;
	wash-color: none;
	
	transition-property: wash-color;
	transition-duration: 0.08s;
	transition-timing-function: bigpicture-ease-in-out;
}

.NxLeftNavButton.Locked:descendantfocus Image
{
	wash-color: #2f2f2fff;
}

.NxLeftNavButton:hover,
.NxLeftNavButtonAction:hover
{
	transition-duration: 0.23s !immediate;
	box-shadow: none;
}

.NxLeftNavButton:focus,
.NxLeftNavButtonAction:focus
{
	color: #082846FF;
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );

	animation-name: nx-button-focus;
	animation-duration: longduration;
	animation-delay: shortduration;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

.ContentContainer
{
	width: 900px;
	height: 1120px;
	flow-children: none;
}

.FriendsContentContainer
{
	padding: 20px;
	padding-top: 0px;

	width: 100%;
	height: 1000px;

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

	transform: translateX( 0px );
	transition-delay: 0s;
	transition-duration: mediumduration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-property: transform, width;

	opacity: 0.0;
}

.FriendsContentContainer.Visible
{
	opacity: 1.0;
}


.ContentContainer
{
	width: 1000px;
	transition-delay: 0s;
	transition-duration: mediumduration;
	transition-timing-function: bigpicture-ease-in-out;
	transition-property: transform, width, opacity, opacity-mask;
}

/* Transitions when grid is in focus */
.ContentHover .ContentContainer,
.ContentAreaFocus .ContentContainer,
{
	transform: translateX( -200px );
	width: 1000px;
}

.ContentAreaFocus .MenuHover .ContentContainer,
{
	transform: none;
}


.ContentAreaFocus.FriendsContent FriendsChatDialog,
.ContentAreaFocus.GroupsContent FriendsChatDialog,
.GroupsContent .ContentHover FriendsChatDialog,
.FriendsContent .ContentHover FriendsChatDialog
{
	transform: translateX( -200px );
	opacity:0.5;
}

.GroupsContent.ChatFocus .ContentHover FriendsChatDialog,
.FriendsContent.ChatFocus .ContentHover FriendsChatDialog
{
	transform: translateX( -950px );
	opacity: 1.0;
}

.ContentAreaFocus.FriendsContent .MenuHover FriendsChatDialog,
.ContentAreaFocus.GroupsContent .MenuHover FriendsChatDialog
{
	transform: none;
	opacity: 1.0;
}



.ContentAreaFocus FriendsChatDialog,
.ContentHover FriendsChatDialog,
{
	opacity: 0.0;
}


/* Transitions when chat is in focus */
.ChatFocus .ContentContainer
{
	transform: translateX( -900px );
	opacity: 0.0;
	opacity-mask: url( "file://{images}/library/horizontal_mask.tga" ) 1.0;
}

FriendsInvitePage.FriendsContentContainer
{
	padding: 0px;
}

#AddFriendContent
{
	padding: 16px;
	flow-children: down;
}

#AddFriendContent Label
{
	color: white;
	font-size: 30px;
}

#AddFriendInputTextArea
{
	width: 400px;
	height: 60px;
	margin-top: 20px;
}

#LocalProfile
{
	height: fit-children;
	padding: 4px;
}

#LocalAvatar
{
	width: 100px;
	height: 100px;
	border: 3px solid friendsonline_darkbg;
	border-radius: 4px;
	margin: 8px;
}

.Offline #LocalAvatar
{
	border: 2px solid friendsoffline_darkbg;
}

.InGame #LocalAvatar
{	
	border: 2px solid friendsingame_darkbg;
}

#LocalAvatar Image
{
	// undo a bunch of NxLeftNavButton Image 
	wash-color: none;
	margin: 0px;
	height: 100%;
	width: 100%;
	transform: translateX( 0px );
}

Friends .LocalPersonaName
{
	color: green;
	font-size: 40px;
}

.LocalPersonaLabelContainer
{
	flow-children: down;
	width: 100%;
	height: 100%;
	margin: 8px;
	margin-left: 4px;
	margin-top: 16px;
}

.LocalPersonaLabelContainer Label
{
	white-space: nowrap;
}

Friends.PersonaOnline .LocalPersonaName
{
	color: friendsonline_solid;
}

Friends.PersonaOffline .LocalPersonaName
{
	// intentionally not offline coloured
	color: friendsonline_solid;
}

.NxLeftNavButton:focus .LocalPersonaName
{
	color: #072e47;
}

.NxLeftNavButton:focus AvatarImage
{
	transform: translateX( 7px );
}

#FriendsChatProfileBackground
{
	opacity: 0.0;
	transition-property: opacity;
	transition-duration: mediumduration;
	transition-delay: 0s;
	transition-timing-function: ease-in-out;
}

.ChatIndividual.ChatFocus #FriendsChatProfileBackground
{
	opacity: 1.0;
}

Friends.OfflineMode .AllContent
{
	opacity: 0.0;
}

Friends.OfflineMode #Offline
{
	opacity: 1.0;
}

Friends #Offline
{
	width: 100%;
	height: 100%;
	padding-bottom: 50px;
	opacity: 0.0;
	
	transition-property: opacity;
	transition-duration: 0.23s;
	transition-delay: 1.25s;	
}

Friends #OfflineMessage
{
	flow-children: down;
	width: 100%;
	vertical-align: center;
}

Friends #OfflineStatus1,
Friends #OfflineStatus2,
{
	color: tcstatictext;
	horizontal-align: center;
	font-size: medfontsize;

	max-width: 75%;
	margin-bottom: 20px;
	text-align: center;
}

Friends #OfflineStatus1
{
	font-size: largefontsize;
}

Friends #OfflineStatus2
{
	font-size: medfontsize;
	height: 200px;
}

.EmptyContent Label
{
	position: 0px -100px 0px;

	visibility: visible;

	font-size: 34px;
	height: 64px;
	horizontal-align: center;
	vertical-align: center;
	color: #67c1f5ff;
	white-space: nowrap;
	text-overflow: clip;
}