/* @group outgoing */

.outgoing {
	float: left;
	margin: 8px 38px 0px 0px;
	position: relative;
}

.outgoing .sender {
	position: absolute;
	left: 0px;
	bottom: 11px;
	width: 32px;
	height: 32px;
}
.outgoing .icon {
	
}
.outgoing .name {
	font-size: 9px;
	position: absolute;
	left: 0px;
	bottom: -14px;
	min-width: 32px;
	text-align: center;
	visibility: hidden;
	white-space: nowrap;
	color: #6e6e6e;
}
.outgoing .sender:hover .name {
	visibility: visible;
}
.outgoing .service {
	font-size: 9px;
	position: absolute;
	left: 0px;
	bottom: 34px;
	min-width: 32px;
	text-align: center;
	visibility: hidden;
	white-space: nowrap;
	color: #c7c7c7;
}
.outgoing .sender:hover .service {
	visibility: visible;
}
.outgoing .message {
	margin-left: 38px;
}
.outgoing .message .bottomleft {
	background-image: url("/images/modern/bottomleft-arrow.png");
}
.outgoing .compact .ctime {
	right: -58px;
	text-align: left;
}

/* @end */



/* @group incoming */

.incoming {
	float: right;
	margin: 8px 0px 0px 38px;
	position: relative;
}

.incoming .sender {
	position: absolute;
	right: 0px;
	bottom: 11px;
	width: 32px;
	height: 32px;
}
.incoming .icon {
	
}
.incoming .name {
	font-size: 9px;
	position: absolute;
	right: 0px;
	bottom: -14px;
	min-width: 32px;
	text-align: center;
	visibility: hidden;
	white-space: nowrap;
	color: #6e6e6e;
}
.incoming .sender:hover .name {
	visibility: visible;
}
.incoming .service {
	font-size: 9px;
	position: absolute;
	right: 0px;
	bottom: 34px;
	min-width: 32px;
	text-align: center;
	visibility: hidden;
	white-space: nowrap;
	color: #c7c7c7;
}
.incoming .sender:hover .service {
	visibility: visible;
}
.incoming .message {
	margin-right: 38px;
}
.incoming .message .bottomright {
	background-image: url("/images/modern/bottomright-arrow.png");
}
.incoming .compact .ctime {
	left: -58px;
	text-align: right;
}

/* @end */