@charset "utf-8";
@font-face {
    font-family:'NanumGothicBold';
    src: url('/fonts/NanumGothicBold.eot');
    src: url('/fonts/NanumGothicBold.eot?#iefix') format('embedded-opentype'),
         url('/fonts/NanumGothicBold.woff') format('woff'),
         url('/fonts/NanumGothicBold.ttf') format('truetype');
    src:local(※), url('/fonts/NanumGothicBold.woff') format('woff');
    font-weight: normal;
    font-style: normal; 
}
* {
	margin:0;
	padding:0;
	font-family:'NanumGothicBold',"굴림","돋움", Dotum, Arial, Helvetica, sans-serif;
	LINE-HEIGHT: 1.5;
	font-size:12px;
	color:#4d4d4d;
	outline-style:none;
	resize:none;
}
html,body,#wrap{width:100%;height:100%;}
#chatting_container{width: 100%;height:100%;}
#chatting_container .chatlist_container {}
.chatlist_container .chatlist_title{
    height: 30px;
    background-color: #6DA4BD;
    text-align: center;
    color: #FFFFFF;
    font-weight: bold;
     z-index: 10;
     position: relative;
}
.chatlist_container .chatlist_title ul{clear:both;}
.chatlist_container .chatlist_title li{
    float: left;
    width: 50%;
    list-style: none;
    background: #7B7B7B;
    margin: 0;
    height: 30px;
    padding: 0;
    line-height: 30px;
    color: #FFFFFF;
    cursor: pointer;
}
.chatlist_container .chatlist_title li.active{
    background: #6DA4BD;
}
.chatlist_container .changeTitleDiv{    
	z-index: 5;
    position: absolute;
    background: #FFFFFF;
    padding: 13px;
    left: 30px;
    border: 1px solid #CCCCCC;
    display: none;
}
.chatlist_container .changeTitleDiv button{    
	font-size: 11px;
    border: 1px #CCCCCC solid;
    background: #6B6B6B;
    padding: 3px;
    cursor: pointer;
    color: #FFFFFF;
}
.chatlist_container .chatlist_content{
	height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    width: 100%;
    z-index: 1;
    margin: 30px 0 53px 0;
	background: #FFFFFF;  
}
.chatlist_content .notlist {
    margin: 80px;
    display: block;
}
.chatlist_content .chatlist_row{
	position: relative;
    background: #F5F5F5;
    margin: 1px;
    padding: 10px 7px;
    border-bottom: 1px solid #CCCCCC;
    cursor: pointer;
}
.chatlist_content .chatlist_row:hover{
    background: #DEF1FF;
}
.chatlist_row .imgfile {width:40px;height:40px}
.chatlist_row .chatfile {width:45px;height:40px}
.chatlist_row .namestyle{
	float: left;    
	font-weight: bold;
    color: #23A0D2;
    font-size: 14px;
    margin-right: 5px;
}
.chatlist_row .ipstyle{
	float: left;    
    color: #7a7a7a;
    font-size: 12px;
}
.chatlist_row .titlestyle {    
    margin-left: 3px;
}
.chatlist_row .titlestyle button{    
	font-size: 11px;
    border: 1px #CCCCCC solid;
    padding: 1px;
    background: #FFFFFF;
    cursor: pointer;
}
.chatlist_row .denystyle {    
    margin-left: 3px;
}
.chatlist_row .denystyle button{    
	font-size: 11px;
    border: 1px #CCCCCC solid;
    padding: 1px;
    background: #FFFFFF;
    cursor: pointer;
}
.chatlist_row .timestyle{
	float: right;
    font-size: 12px;
}
.chatlist_row .chatlistinfo2{clear: both;font-size: 13px;padding-top: 5px;}


.chatlist_container .chatlistmore_content {
position: absolute;
    bottom: 42px;
    left: 0;
    right: 0;
    text-align: center;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    height: 14px;
    background: #4E4E4E;
    cursor: pointer;
    line-height: 16px;
}
.chatlistmore_content span{color: #FF8F00;font-size: 10px;display: block;width: 100%;line-height: 20px;height: 14px;}
.chatlistmore_content span:hover{color: #4ad926; }
.chatlist_container .chatnickname_content {    
	position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-left: 20px;
    background: #F3F3F3;
    height: 42px;
    line-height: 42px;}
.chatlist_container .chatnickname_content span{}
.chatlist_container .chatnickname_content input{	
	width:160px;
	height: 30px;
    border: 1px solid #ccc;
    padding: 0 5px;
}
.chatlist_container .chatnickname_content button{height: 32px;
    border: 1px solid #ccc;
    width: 50px;
    background-color: #859db1;
    color: #fff
}
#chatting_container .chatarea_container {}
#chatting_container .chatarea_content {
    height: auto;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}
.chatarea_title {
    padding: 5px 35px;;
    background: #134B92;
    position: relative;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    height:20px;
	line-height: 20px;
}
.chatarea_title .chattitle{
    color: #FFB300;
}
.chatarea_title .chatclose {
	top: 7px;
    right: 10px;
    position: absolute;
    font-size: 11px;
    font-weight: bold;
    background: #134B92;
    padding: 1px 4px;
    color: #FFFFFF;
    border: 0;
    height : 16px;
    cursor: pointer;
    border-radius: .4em;
    z-index: 10;
}
.chatarea_title button:hover {background:#1A7FCA;}  
    
.chatmessage_content {    
    height: auto;
    background-color: #D0E3F9;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-3dLight-Color: #efefef;
    scrollbar-arrow-color: #919191;
    scrollbar-base-color: #efefef;
    scrollbar-Face-Color: #6d6d6d;
    scrollbar-Track-Color: #efefef;
    scrollbar-DarkShadow-Color: #efefef;
    scrollbar-Highlight-Color: #efefef;
    scrollbar-Shadow-Color: #efefef;
    bottom: 0;
    top: 0;
    position: absolute;
    left: 0;
    right: 0;
    margin: 30px 0 80px 0;
}
.chatmessage_content::-webkit-scrollbar {width: 10px; height: 8px; border: 3px solid #fff; }
.chatmessage_content::-webkit-scrollbar-button:start:decrement, .chatmessage_content::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: #efefef}
.chatmessage_content::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
.chatmessage_content::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}
.clear {clear: both}

.chatmessage_content .imgfile {width:80px;height:80px}
.chatmessage_content .chatfile {width:45px;height:40px}
.recvNum{
    position: absolute;
    right: 10px;
    padding: 3px;
    border: 1px solid #CCCCCC;
    border-radius: .8em;
    background: #FF3D00;
    color: #FFFFFF;
    width: 18px;
    text-align: center;
    height: 12px;
    top: 35px;
    line-height: 13px;
    font-size: 11px;
    font-weight: bold;
}

.chatmessage_content .time {
	position: absolute;
    bottom: 0px;
    font-size: 11px;
    letter-spacing: -1px;
}
.chatmessage_content .left .time {right: -47px;}
.chatmessage_content .right .time {left: -50px;}

.chatmessage_content .name {
	position: absolute;
    top: -15px;
    left: 5px;
    font-size: 11px;
    letter-spacing: -1px;
}
.chatarea_content .chatsend_content{    
	bottom: 0px;
    position: absolute;
    padding: 5px 20px;
    right: 0;
    left: 0;
}
.chaticon_content{position: absolute; bottom: 40px;left: 15px;}
.chaticon_content ul{list-style: none;}
.chaticon_content li{float: left;margin-right: 10px;cursor: pointer;}
.chaticon_content .addfilediv {background: url('/images/icon/clip.png') 2px 2px no-repeat; width: 24px;height: 24px;cursor: pointer;overflow: hidden;border: 1px solid #FFFFFF;}
.chaticon_content .addfilediv:hover {border: 1px solid #FF8989;}
.chaticon_content .addfilediv input[type=file] {opacity: 0;filter: alpha(opacity=0);  width: 34px;height: 24px; cursor: pointer;left:-10px; position: relative;}
.chaticon_content .addfilediv input[type=file]::-webkit-file-upload-button { cursor: pointer;}
.chaticon_content .imgfilediv {background: url('/images/icon/imgfile.png') 2px 2px no-repeat; width: 24px;height: 24px;cursor: pointer;overflow: hidden;border: 1px solid #FFFFFF;}
.chaticon_content .imgfilediv:hover {border: 1px solid #FF8989;}
.chaticon_content .imgfilediv input[type=file] {opacity: 0;filter: alpha(opacity=0);  width: 34px;height: 24px; cursor: pointer; left:-10px; position: relative;}
.chaticon_content .imgfilediv input[type=file]::-webkit-file-upload-button { cursor: pointer;}
.chaticon_content .denybtndiv{background: url('/images/icon/deny.png') 2px 2px no-repeat; width: 24px;height: 24px;cursor: pointer;overflow: hidden;border: 1px solid #FFFFFF;}
.chaticon_content .denybtndiv:hover {border: 1px solid #FF8989;}
.chaticon_content .changebtndiv{background: url('/images/icon/change.png') 2px 2px no-repeat; width: 24px;height: 24px;cursor: pointer;overflow: hidden;border: 1px solid #FFFFFF;}
.chaticon_content .changebtndiv:hover {border: 1px solid #FF8989;}
.chatsend_content ul{list-style: none;}
.chatsend_content li{list-style: none;float: right;}
.chatsend_content .messagebox{}
.chatsend_content input{
	height: 30px;
    border: 1px solid #ccc;
    padding: 0 5px;
    width:100%;
}
.chatsend_content button {}
#chatmember_container{display: none;
    width: 350px;
    position: absolute;
    top: -240px;
    background: #FFFFFF;
    padding: 10px;
    border: solid 1px #CCCCCC;
    height: 200px;}
        
#chatmember_container ul{clear: both;}
#chatmember_container li:FIRST-CHILD{width:240px}
#chatmember_container li{float: left; height: 25px}
#chatmember_container li button{}

#chatmember_container .chatmember_title {height: 30px}
#chatmember_container .chatmember_title button{cursor: pointer;border: 1px solid #CCCCCC;background: #f3f3f3;padding: 1px 8px;}
#chatmember_container .chatmember_title button:hover{color:orange}
#chatmember_container .chatmember_title li:FIRST-CHILD{font-size: 14px;color: orange;}
#chatmember_container .chatmember_content{height: 180px; overflow: auto; width: 100%;}
#chatmember_container .chatmember_content button{border: 1px solid #CCCCCC;background: #FFFFFF;padding: 1px 8px;cursor: pointer;}
#chatmember_container .chatmember_content button:hover{color:orange}

.systembubble {
	left: 5%;
    width: 90%;
    border: 1px solid #EEEEEE;
    border-radius: .4em;
    padding: 3px;
    text-align: center;
    background-color: #FFFFFF;
    margin: 5px;
    position: relative;
    word-break: break-all;
}

.chatbubble {
  position:relative;
  padding:10px;
  margin:2em 0 1em;
  color:#000;
  background:#f3961c; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
  background:-moz-linear-gradient(#f9d835, #f3961c);
  background:-o-linear-gradient(#f9d835, #f3961c);
  background:linear-gradient(#f9d835, #f3961c);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

.chatbubble.left {
    max-width: 250px;
    min-width: 85px;
  margin-left:20px;
  background:#9CECFF;
  float: left;
  word-break: break-all;
}

.chatbubble.right {
    max-width: 250px;
    min-width: 85px;
  margin-right:20px;
  background:#F5F39D;
  float: right;
  word-break: break-all;
}

.chatbubble:after {
  content:"";
  position:absolute;
  bottom:-15px; /* value = - border-top-width - border-bottom-width */
  left:50px; /* controls horizontal position */
  border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#f3961c transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}
.chatbubble.left:after {
    top: 16px;
    left: -20px;
    bottom: auto;
    border-width: 0px 20px 10px 0;
    border-color: transparent #9CECFF;
}

.chatbubble.right:after {
    top: 16px;
    right: -20px;
    bottom: auto;
    left: auto;
    border-width: 0px 0 10px 20px;
    border-color: transparent #F5F39D;
}