section.chatBox
{
	padding: 5px 20px 20px 20px;
}
section.chatBox div.from-me, section.chatBox div.from-them
{
	max-width: 90%;
	word-wrap: break-word;
	line-height: 20px;
}
section.chatBox div.from-me:after, section.chatBox div.from-them:after
{
	content: "";
	display: table;
	clear: both;
}


.clear
{
	clear: both;
}


.from-me, .from-them
{
	position: relative;
	padding: 5px 15px;
	border-radius: 10px;
}
.from-me
{
	color: white;
	background: #0B93F6;
	float: right;
}
.from-them
{
	color: black;
	background: #E5E5EA;
	float: left;
}


.from-me:before, .from-them:before
{
	content: "";
	position: absolute;
	bottom: -2px;
	height: 20px;
	-webkit-transform: translate(0, -2px)
}
.from-me:before
{
	z-index: 1;
	right: -7px;
	border-right: 20px solid #0B93F6;
	border-bottom-left-radius: 16px 14px;
}
.from-them:before
{
	z-index: 2;
	left: -7px;
	border-left: 20px solid #E5E5EA;
	border-bottom-right-radius: 16px 14px;
}


.from-me:after, .from-them:after
{
	content: "";
	position: absolute;
	bottom: -2px;
	width: 26px;
	height: 20px;
	background: white;
	-webkit-transform: translate(-30px, -2px);
}
.from-me:after
{
	z-index: 1;
	right: -56px;
	border-bottom-left-radius: 10px;
}
.from-them:after
{
	z-index: 3;
	left: 4px;
	border-bottom-right-radius: 10px;
}