@charset 'UTF-8';
@import url(http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica);

.is-hide {
	display: none;
}

html, body {
	height: 100%;
	background: #333;
}
.wrapper {
	width: 520px;
	margin: 0 auto;
	padding: 20px;
	background: #fff;
	min-height: 100%;
}

.input {
	padding: 0 5px;
	margin-right: 5px;
	width: 430px;
	border: 1px solid #ddd;
	border-top: 2px solid #ddd;
	background: #f6f6f6;
}
.submit {
	background: #333;
	color: #fff;
	padding: 0 10px;
	border: 0;
}

.chatArea {
	margin-top: 50px;
	width: 500px;
	padding: 10px;
}
.chat {
	margin-bottom: 10px;
}
.chat span {
	border: 2px solid #ccc;
	display: inline-block;
	padding: 10px 15px;
	border-radius: 6px;
}
.chat--self {
	text-align: left;
	margin-bottom: 20px;
	margin-right: 20px;
}
.chat--self span {
	background: #8AD8E0;
	border-color: #71C0C7;
	border-bottom-left-radius: 0;
}
.chat--response {
	text-align: right;
	margin-left: 20px;
}
.chat--response span {
	background: #F3E2A5;
	border-color: #ECD890;
	border-bottom-right-radius: 0;
}