.sectionChat {
	position: absolute;
	bottom: 5px;
	margin: 5px;
	width: 250px;
	max-height:350px;
	border: 1px solid #333;
	background-color: #DDD;
}

.sectionChat .headerChat {
	background-color: #333;
	color: #fff;
	position: relative;
	width: 100%;
	height: 25px;
	padding: 0px;
}

.sectionChat .ulChat {
	margin: 0px;
	padding: 0px;
	position: relative;
	width: 100%;
	max-height:275px;
	list-style: none;
	overflow: auto;
}

.sectionChat .ulChat .lichat {
	padding: 3px;
	position: relative;
}

.sectionChat .ulChat .lichat div{
	box-shadow: 2px 2px 2px #888;
	margin: 5px;
	padding: 3px;
}

.sectionChat .ulChat .elChat {
	vertical-align: top;
	text-align: left;
}

.sectionChat .ulChat .elChat div{
	background-color: #01ABEE;
}

.sectionChat .ulChat .yoChat {
	text-align: right;
}

.sectionChat .ulChat .yoChat div{
	background-color: #E08C06;
}

.sectionChat .footerChat {
	width: 100%;
	position: relative;
	bottom: 0px;
}

.sectionChat .footerChat .textareaChat{
	resize:vertical;
	min-height:30px; 
	max-height:50px;
	width: 100%;
	height: 100%;
	border: none;
}

/*	<div class="sectionChat">
		<header class="headerChat">
			<span>Hablando con Italo Navarrete</span>
		</header>
		<ul class="ulChat">
			<li class="lichat yoChat">
				<div>
					hola
					<img src="../iSystemAlpha/template/img/usuario/italo.jpg" alt="..." class="img-circle" width="30px">
				</div>
			</li>
			<li class="lichat elChat">
				<div>
					<img src="../iSystemAlpha/template/img/usuario/italo.jpg" alt="..." class="img-circle" width="30px">
					que tal?
				</div>
			</li>
			<li class="lichat yoChat">
				<div>
					aca estamos
					<img src="../iSystemAlpha/template/img/usuario/italo.jpg" alt="..." class="img-circle" width="30px">
				</div>
			</li>
			<li class="lichat elChat">
				<div>
					<img src="../iSystemAlpha/template/img/usuario/italo.jpg" alt="..." class="img-circle" width="30px">
					aa que bien
				</div>
			</li>
			<li class="lichat yoChat">
				<div>
					tu que haces
					<img src="../iSystemAlpha/template/img/usuario/italo.jpg" alt="..." class="img-circle" width="30px">
				</div>
			</li>
			<li class="lichat elChat">
				<div>
					<img src="../iSystemAlpha/template/img/usuario/italo.jpg" alt="..." class="img-circle" width="30px">
					hola dsgasg sdfg sdzfhjtw sertyh asdfhw erutsdzfg asdfgsad g asdg sdfsdfasdf
				</div>
			</li>
		</ul>
		<footer class='footerChat'>
			<textarea class='textareaChat' rows="2"></textarea>
		</footer>
	</div>*/