
#chat-room{height:600px;width:800px;}
#chat-area{height:556px;width:640px;}
.chat-input{height:43px;width:640px;}
#chat-input-mask{height:44px;width:640px;}
#chat-text{width:438px;}
#chat-user-list{height:100%;width:153px;}

#chat-room{border:1px solid #888;background-color:#fff;margin:10px auto 0;overflow:hidden;position:relative;}
#chat-area{overflow-y:auto;}

#chat-room.dropping{box-shadow:0 0 10px #06c;}

.chat-input{border-top:1px solid #9a9691;bottom:0;left:0;position:absolute;}
#chat-input-mask{background-color:rgba(255,255,255,0.2);bottom:0;left:0;position:absolute;}

.chat-input{
	background:linear-gradient(top, #6f6d68, #3a3c3b);
	background:-webkit-linear-gradient(top, #6f6d68, #3a3c3b);
	background:-moz-linear-gradient(top, #6f6d68, #3a3c3b);
	background:-ms-linear-gradient(top, #6f6d68, #3a3c3b);
	background:-o-linear-gradient(top, #6f6d68, #3a3c3b);
}
input.chat-btn{
	background:linear-gradient(top, #f2f1ef, #8b8883);
	background:-webkit-linear-gradient(top, #f2f1ef, #8b8883);
	background:-moz-linear-gradient(top, #f2f1ef, #8b8883);
	background:-ms-linear-gradient(top, #f2f1ef, #8b8883);
	background:-o-linear-gradient(top, #f2f1ef, #8b8883);
}
input.chat-btn:hover{
	background:linear-gradient(top, #fff, #aaa);
	background:-webkit-linear-gradient(top, #fff, #aaa);
	background:-moz-linear-gradient(top, #fff, #aaa);
	background:-ms-linear-gradient(top, #fff, #aaa);
	background:-o-linear-gradient(top, #fff, #aaa);
}
input.chat-btn:active{
	transform:translate3d(0,1px,0);
	-webkit-transform:translate3d(0,1px,0);
	-moz-transform:translate3d(0,1px,0);
	-ms-transform:translate3d(0,1px,0);
	-o-transform:translate3d(0,1px,0);
}

.chat-text,.chat-btn{border:1px solid #53534f;border-radius:5px;
	box-shadow:0 2px 3px rgba(0,0,0,0.3);font-size:14px;margin:8px 0 0 8px;line-height:17px;padding:3px 4px;}
.chat-btn{color:#444;cursor:pointer;font-weight:700;width:50px;}

.chat-file-box{display:inline-block;margin:8px 0 0 8px;position:relative;}
.chat-file-box input[type=button]{margin:0;}
#chat-file{background:transparent;cursor:pointer;height:25px;left:0;opacity:0;position:absolute;top:0;width:50px;}

/*bfee66 7cc131*/
.chat-others .chat-body{
	background:linear-gradient(top, #d8f891, #b6f057 8%, #9bcf47 92%, #7eac2d);
	background:-webkit-linear-gradient(top, #d8f891, #b6f057 8%, #9bcf47 92%, #7eac2d);
	background:-moz-linear-gradient(top, #d8f891, #b6f057 8%, #9bcf47 92%, #7eac2d);
	background:-ms-linear-gradient(top, #d8f891, #b6f057 8%, #9bcf47 92%, #7eac2d);
	background:-o-linear-gradient(top, #d8f891, #b6f057 8%, #9bcf47 92%, #7eac2d);
}
.chat-myself .chat-body{
	background:linear-gradient(top, #fefefe, #e9e8e5 8%, #d2cfca 92%, #9e9c95);
	background:-webkit-linear-gradient(top, #fefefe, #e9e8e5 8%, #d2cfca 92%, #9e9c95);
	background:-moz-linear-gradient(top, #fefefe, #e9e8e5 8%, #d2cfca 92%, #9e9c95);
	background:-ms-linear-gradient(top, #fefefe, #e9e8e5 8%, #d2cfca 92%, #9e9c95);
	background:-o-linear-gradient(top, #fefefe, #e9e8e5 8%, #d2cfca 92%, #9e9c95);
}

.chat-others,.chat-myself{position:relative;}
.chat-others,.chat-myself,.chat-head{height:auto;overflow:hidden;}
.chat-others .chat-head,.chat-others .chat-body{float:left;}
.chat-myself .chat-head,.chat-myself .chat-body{float:right;}
.chat-head,.chat-body{clear:both;}

.chat-head{font-size:12px;height:17px;margin:5px 0 3px;width:90%;}
.chat-others .chat-head{margin-left:10px;}
.chat-myself .chat-head{margin-right:10px;}

.chat-name{color:#666;}
.chat-time{color:#888;font-family:Consolas;}

.chat-others .chat-name,.chat-others .chat-time{float:left;margin-right:18px;}
.chat-myself .chat-name,.chat-myself .chat-time{float:right;margin-left:18px;}

.chat-body{border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,0.2);color:#333;
	font-family:"Segoe UI","microsoft yahei";font-weight:600;line-height:18px;margin-bottom:10px;
	padding:8px;position:relative;word-break:break-all;}
.chat-others .chat-body{border:1px solid #93d265;margin-left:65px;}
.chat-myself .chat-body{border:1px solid #c9c5c0;margin-right:65px;}
.chat-body,.chat-body img{max-width:480px;}

.chat-join,.chat-leave{margin:5px 0;text-align:center;word-break:break-all;}
.chat-join div,.chat-leave div{background-color:rgba(0,0,0,0.4);border-radius:5px;color:#fff;display:inline-block;font-size:12px;padding:2px 5px;width:auto;}

.chat-others .chat-corner{background:transparent url(../images/corner.png) no-repeat 0 0;
	background-size:100% 100%;height:13px;left:-11px;position:absolute;top:10px;width:11px;}
.chat-myself .chat-corner{background:transparent url(../images/corner-r.png) no-repeat 0 0;
	background-size:100% 100%;height:13px;right:-11px;position:absolute;top:10px;width:11px;}

.chat-prof{box-shadow:0 1px 5px rgba(0,0,0,0.8);height:36px;position:absolute;top:25px;width:36px;}
.chat-others .chat-prof{left:10px;}
.chat-myself .chat-prof{right:10px;}

#chat-mask{background:rgba(0,0,0,0.5);display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:100;}

#chat-sign-box{display:none;height:0;left:50%;overflow:visible;position:fixed;top:50%;width:0;z-index:110;}
.chat-sign-con{background-color:#fff;border:2px solid #999;border-radius:6px;height:auto;padding:20px;width:250px;}
.chat-sign-con{
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
}
.chat-avatars{clear:both;height:auto;margin:0 auto;overflow:hidden;width:240px;}
.chat-avatars a{border:2px solid transparent;float:left;margin:5px;position:relative;}
.chat-avatars img{border:1px solid #ccc;padding:2px;}
.chat-avatars span{background:url(../images/checkbox.gif) no-repeat 0 -12px;bottom:0;display:block;
	height:12px;width:12px;overflow:hidden;position:absolute;right:0;}
.chat-avatars a.checked{border-color:#a8de86;}
.chat-avatars a.checked span{background-position:0 0;}
#chat-sign-name{border-color:#999;width:180px;}
#chat-sign-btn{border-color:#999;margin-left:0;width:90px;}

.btn-close{background:transparent url(../images/close.png) no-repeat 0 0;display:block;height:18px;
	position:absolute;right:10px;top:10px;width:18px;}
.btn-close:hover{background-color:#a5a5a5;background-position:0 -18px;}

#chat-sign-in{border-bottom:1px solid #ccc;padding:10px 0 12px;margin-bottom:8px;text-align:center;}
#chat-sign-in-btn,#chat-sign-out-btn{border-color:#999;margin:0;width:90px;}
#chat-sign-out-btn{display:none;}

#chat-user-list{border-left:1px solid #ccc;overflow-y:auto;padding:3px;position:absolute;right:0;top:0;}
#chat-user-list div.list-user{line-height:34px;overflow:hidden;padding:2px;text-overflow:ellipsis;white-space:nowrap;}
#chat-user-list img{border:1px solid #ccc;margin-right:5px;padding:1px;}
#chat-user-list em{color:#999;font-size:12px;font-style:normal;}
