.messageUserInfo
{
	@property "messageUserInfo";
	float: left;
	width: 124px;
	@property "/messageUserInfo";
}

	.messageUserBlock
	{
		@property "messageUserBlock";
		background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-x bottom;
		border: 1px solid @primaryLighterStill;
		border-radius: 5px;
		@property "/messageUserBlock";
		
		position: relative;
	}
		
		.messageUserBlock div.avatarHolder
		{
			@property "messageAvatarHolder";
			background-color: @primaryLightest;
			padding: 10px;
			border-radius: 4px;
			@property "/messageAvatarHolder";
			
			position: relative;	
		}
		
			.messageUserBlock div.avatarHolder .avatar
			{
				display: block;
				font-size: 0;
			}
			
			.messageUserBlock div.avatarHolder .onlineMarker
			{
				position: absolute;
				top: {xen:calc 'intval(@messageAvatarHolder.padding-top) - 1'}px;
				left: {xen:calc 'intval(@messageAvatarHolder.padding-right) - 1'}px;
				
				@property "messageOnlineMarker";
				border: 7px solid transparent;
				border-top-color: rgb(127, 185, 0);
				border-left-color: rgb(127, 185, 0);
				border-top-left-radius: 5px;
				border-top-right-radius: 3px;
				border-bottom-left-radius: 3px;
				@property "/messageOnlineMarker";
			}
			
		.messageUserBlock h3.userText
		{
			@property "messageUserText";
			padding: 6px;
			@property "/messageUserText";
		}
		
		.messageUserBlock .userBanner
		{
			display: block;
			margin-bottom: 5px;
			margin-left: -{xen:calc 'intval(@messageUserText.padding-left) + 6'}px;
			margin-right: -{xen:calc 'intval(@messageUserText.padding-right) + 6'}px;
		}
		
		.messageUserBlock .userBanner:last-child
		{
			margin-bottom: 0;
		}
	
		.messageUserBlock a.username
		{
			@property "messageUsername";
			font-weight: bold;
			display: block;
			overflow: hidden;
			line-height: 16px;
			@property "/messageUsername";
			
		}
		
		.messageUserBlock .userTitle
		{
			@property "messageUserTitle";
			font-size: 11px;
			display: block;
			@property "/messageUserTitle";
		}
		
		.messageUserBlock .extraUserInfo
		{
			@property "messageExtraUserInfo";
			font-size: 10px;
			background-color: @primaryLightest;
			padding: 4px 6px;
			border-radius: 4px;
			@property "/messageExtraUserInfo";
		}
		
			.messageUserBlock .extraUserInfo dl
			{
				margin: 2px 0 0;
			}
							
			.messageUserBlock .extraUserInfo img
			{
				max-width: 100%;
			}
		
		.messageUserBlock .arrow
		{
			position: absolute;
			top: 10px;
			right: -10px;
			
			display: block;
			width: 0px;
			height: 0px;
			line-height: 0px;
			
			border: 10px solid transparent;
			border-left-color: @messageUserBlock.border-color;
			-moz-border-left-colors: @messageUserBlock.border-color;
			border-right: none;
			
			/* Hide from IE6 */
			_display: none;
		}
		
			.messageUserBlock .arrow span
			{
				position: absolute;
				top: -10px;
				left: -11px;
				
				display: block;
				width: 0px;
				height: 0px;
				line-height: 0px;
				
				border: 10px solid transparent;
				border-left-color: @messageAvatarHolder.background-color;
				-moz-border-left-colors: @messageAvatarHolder.background-color;
				border-right: none;
			}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
	.Responsive .messageUserInfo
	{
		float: none;
		width: auto; 
	}

	.Responsive .messageUserBlock
	{
		overflow: hidden;
		margin-bottom: 5px;
		position: relative;
	}

	.Responsive .messageUserBlock div.avatarHolder
	{
		float: left;
		padding: 5px;
	}

		.Responsive .messageUserBlock div.avatarHolder .avatar img
		{
			width: 48px;
			height: 48px;
		}
		
		.Responsive .messageUserBlock div.avatarHolder .onlineMarker
		{
			top: 4px;
			left: 4px;
			border-width: 6px;
		}

	.Responsive .messageUserBlock h3.userText
	{
		margin-left: 64px;
	}
	
	.Responsive .messageUserBlock .userBanner
	{
		max-width: 150px;
		margin-left: 0;
		margin-right: 0;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		position: static;
		display: inline-block;
	}
	
		.Responsive .messageUserBlock .userBanner span
		{
			display: none;
		}

	.Responsive .messageUserBlock .extraUserInfo
	{
		display: none;
	}

	.Responsive .messageUserBlock .arrow
	{
		display: none;
	}
}
</xen:if>