* { margin: 0; padding: 0; font-family: 'Verdana', sans-serif; color: #C2C2DA; }
body { background-color: #0e242d; font-size: 14px; overflow:hidden; }
*::-webkit-scrollbar { width: 2px; }
*::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); }
*::-webkit-scrollbar-thumb { background-color: #008888; outline: 1px solid slategrey; }
*::-webkit-scrollbar-thumb:hover { background-color: #00B7B7; cursor: pointer; }
a { text-decoration: none; }
.container { background-image: url("../images/cafe.png"); background-repeat: no-repeat; height: 377px; }
.container .cafe { padding-top: 40px; }
/* Left */
.container .cafe .left { float: left; padding-left: 20px; width: 310px; height: 285px; overflow-x: hidden; overflow-y: scroll; }
.container .cafe .left .topic { background-color: #22464D; max-width: 310px; width: 310px; height: 54px; display: block; margin-bottom: 5px; }
.container .cafe .left .topic.active { background-color: #1B373D; }
.container .cafe .left .topic:hover { background-color: #2C5A63; cursor: pointer; }
.container .cafe .left .topic img { width: 50px; height: 50px; float: left; border: 2px solid black; }
.container .cafe .left .topic .info { padding-left: 60px; border-top: 1px solid rgba(255,255,255, 0.1); }
.container .cafe .left .topic .info #postName { margin-bottom: 3px; }
.container .cafe .left .topic .info .postInfo.new { color: #FFD991; }
.container .cafe .left .topic .info .postInfo span { color: #6C77C1; }
.container .cafe .left .topic:hover .info #postName { color: #FBFBFF; }
.container .cafe .left .topic:hover .info .postInfo span { color: #8C9AFA; }
.container .cafe .left .topic:hover .info .postInfo.new { color: #FFFFBC; }
.container .cafe .left a.button {
	position: fixed;
	z-index: 3000; /* trash */
	top: 330px;
	width: 300px;
	margin-left: 3px;
}
/* #Left */
/* Right */
.container .cafe .right { background-color: #122529; float: left; margin-left: 5px; height: 255px; overflow-x: hidden; overflow-y: scroll;}
.container .cafe .right .comment { background-color: #22464D; max-width: 440px; width: 440px; min-height: 54px; word-wrap: break-word; display: block; margin-bottom: 5px; }
.container .cafe .right .comment.pb-10 {padding-bottom: 10px; }
.container .cafe .right .comment img { width: 50px; height: 50px; float: left; border: 2px solid black; }
.container .cafe .right .comment .info .header { padding-left: 60px; color: #91D1F2; }
.container .cafe .right .comment .info .header.male { color: #91D1F2; }
.container .cafe .right .comment .info .header.female { color: #F291E9; }
.container .cafe .right .comment .info .header span { float: right; padding-right: 5px; color: #60608F; font-size: 12px; }
.container .cafe .right .comment p { margin-left: 60px;  }
::-webkit-input-placeholder { color: #6670B6; }
:-moz-placeholder { /* Firefox 18- */ color: #6670B6;   }
::-moz-placeholder {  /* Firefox 19+ */ color: #6670B6;   }
:-ms-input-placeholder { color: #6670B6; }
.container .cafe .right input {
	position: fixed;
	z-index: 3000; /* trash */
	top: 300px;
	width: 420px;
	margin-left: 3px;
	color: #C2C2DA;
	background-color: #121212;
	border: none;
	outline: none;
	border-bottom: 1px solid #616161;
	border-right: 1px solid #616161;
	border-top: 1px solid #040404;
	border-left: 1px solid #040404;
	padding: 2px 0 4px 6px;
}
.container .cafe .right button {
	position: fixed;
	top: 330px;
	width: 430px;
	margin-left: 3px;
	outline: none;
}
/* #Right */
.container .cafe .button {
	padding: 5px 0;
	border-radius: 5px;
	background-color: #35555F;
	text-align: center;
	border: 1px solid #6B7E84;
	border-bottom: 1px solid #0E181B;
	font-size: 12px;
}
.container .cafe .button:hover { cursor: pointer; color: #FFE8A1; background-color: #32515A; }