Wise Chat Theme

gistfile1.css

/**
WISE CHAT THEME
Depends on the Body font color for now and also the input style
**/
.wcContainer .wcMessages{
	margin: 0;
	border-radius: 3px;
	padding: 10px;
	font-size: 14px;
}
.wcContainer .wcMessages .wcMessage{
	position: relative;
}
.wcContainer .wcMessages .wcMessage:nth-child(odd){
	text-align: right;
}
.wcContainer .wcMessage .wcMessageUser{
	display: inline-block;
	margin-bottom: 14px;
	width: 100%;
}
.wcContainer .wcMessages .wcMessage:nth-child(odd) .wcMessageTime{left: inherit; right: 0;}
.wcContainer .wcMessage .wcMessageTime{
	position: absolute;
	left: 0;
	top: 14px;
	font-size: 11px;
	font-style: italic;
}
.wcContainer .wcMessages .wcMessage:nth-child(odd) .wcMessageContent{color: #FFF;background: #82b440;}
.wcContainer .wcMessages .wcMessage .wcMessageContent{
	border-bottom: 0;
	border-radius: 20px;
	padding: 5px 10px;
	margin-bottom: 10px;
	position: relative;
	display: inline-block;
	background: #e8e8e8;
}
/*ARROW NEEDS FONT AWESOME -> http://fortawesome.github.io/Font-Awesome/*/
.wcContainer .wcMessage .wcMessageContent:before{
	font-family: "FontAwesome";
	content: "\f0d8";
	font-size: 18px;
	position: absolute;
	left: 18px;
	top: -15px;
	color: #e8e8e8;
}
.wcContainer .wcMessage:nth-child(odd) .wcMessageContent:before{
	left: inherit;
	right: 18px;
	color: #82b440;
}