[VNXF] - Đặt dọc thông tin người dùng với phương nằm ngang

[FONT=Consolas].messageUserInfo[/FONT][/FONT][/COLOR]
{
	@property "messageUserInfo";
	margin-bottom: 20px;
	@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;
		height: 122px;
		@property "/messageUserBlock";
 
		position: relative;
	}
 
		.messageUserBlock div.avatarHolder
		{
			@property "messageAvatarHolder";
			background-color: @primaryLightest;
			padding: 10px;
			margin-right: 15px;
			border-radius: 4px;
			float: left;
			@property "/messageAvatarHolder";
	 
			position: relative;
		}
 
			.messageUserBlock div.avatarHolder .avatar
			{
				display: block;
				font-size: 0;
			}
	 
			.messageUserBlock div.avatarHolder .onlineMarker
			{
				position: absolute;
				top: {xen:calc '@messageAvatarHolder.padding-top - 1'}px;
				left: {xen:calc '@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:last-child
		{
			margin-bottom: 0;
		}
		.messageUserBlock a.username
		{
			@property "messageUsername";
			font-weight: bold;
			display: inline;
			overflow: hidden;
			line-height: 16px;
			@property "/messageUsername";
	 
		}
 
		.messageUserBlock .userTitle
		{
			@property "messageUserTitle";
			font-size: 11px;
			margin-bottom: 16px;
			display: block;
			@property "/messageUserTitle";
		}
 
		.messageUserBlock .extraUserInfo
		{
			@property "messageExtraUserInfo";
			font-size: 10px;
			background-color: @primaryLightest;
			padding: 10px 10px 7px;
			margin: -58px 0;
			border-radius: 4px;
			float: right;
			height: 105px;
			@property "/messageExtraUserInfo";
		}
					 
			.messageUserBlock .extraUserInfo img
			{
				max-width: 100%;
			}
 
		.messageUserBlock .arrow
		{
			position: absolute;
			top: 123px;
			left: 10px;
	 
			display: block;
			width: 0px;
			height: 0px;
			line-height: 0px;
	 
			border: 10px solid transparent;
			border-top-color: @messageUserBlock.border-color;
			-moz-border-top-colors: @messageUserBlock.border-color;
	 
			/* Hide from IE6 */
			_display: none;
		}
 
			.messageUserBlock .arrow span
			{
				position: absolute;
				top: -11px;
				left: -10px;
		 
				display: block;
				width: 0px;
				height: 0px;
				line-height: 0px;
		 
				border: 10px solid transparent;
				border-top-color: @messageAvatarHolder.background-color;
				-moz-border-top-colors: @messageAvatarHolder.background-color;
			}
 
 
 
 
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
	.Responsive .messageUserInfo
	{
		float: none;
		width: auto;
	}
 
 
 
 
	.Responsive .messageUserBlock
	{
		margin-bottom: 5px;
		position: relative;
		height: 64px;
	}
 
 
 
 
	.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-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
	{
		top: 65px;
	}
} [COLOR=#032A46][FONT=Times New Roman][FONT=Consolas]</xen:if>[/FONT]

[FONT=Consolas].messageUserBlock .pairsJustified[/FONT][/FONT][/COLOR]
{
	line-height: inherit;
	margin-top: -5px;
	padding-bottom: 7px;
}
 
 
 
 
.message .messageInfo
{
	margin: 0 !important;
}
 
 
 
 
.quickReply .messageUserBlock .arrow
{
	top: 10px;
	left: 123px;
	border: 10px solid transparent;
	border-left-color: @messageUserBlock.border-color;
	-moz-border-left-colors: @messageUserBlock.border-color;
	border-right: none;
}
 
.quickReply .messageUserBlock .arrow span
{
	top: -10px;
	left: -11px; 
	border: 10px solid transparent;
	border-left-color: @messageAvatarHolder.background-color;
	-moz-border-left-colors: @messageAvatarHolder.background-color;
	border-right: none;
}
 
 
 
 
.quickReply .messageUserInfo
{
	float: left !important;
}
 
 
 
 
.quickReply .messageUserBlock div.avatarHolder
{
	margin-right: 0 !important;
}
 
 
 
 
.messageUserBlock .userBanner
{
	position: absolute !important;
	top: 40px;
}
 
 
 
 
.messageUserBlock .userBanner.wrapped span
{
	display: none;
}
 
 
 
 
.messageUserBlock .userBanner.wrapped
{
	border-radius: 3px !important;
	margin-left: 80px;
}
 
 
 
 
.messageUserBlock .userBanner.bannerStaff
{
	margin-left: 0 !important; [COLOR=#032A46][FONT=Times New Roman][FONT=Consolas]}[/FONT]