@charset "utf-8";

/*****************clear float****************/
.clearfix { display: inline-block;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
/* Hides from IE-mac \*/
*html .clearfix { height: 1%;}
.clearfix{ display:block;}
/* End hide from IE-mac */ 
.clearfix{ *zoom:1}
.red { color:#ff000b;}

img { vertical-align:middle;}

#MotherFrame { margin:10px 0px;}

#chatroomFrame { width:960px; margin:0px auto;}
#chatroomFrame .chatroomTitle { position:relative; margin-bottom:5px;}
#chatroomFrame .chatroomHelp { position:absolute; top:15px; right:5px; height:1.2em;}
#chatroomFrame .chatroomLeftFrame { float:left; width:690px;}

#chatroomFrame .chatroomFriList { float:left; width:329px; background:url(http://img.ipimg.com/images2/chatroom/chtroomT1.gif) 0 0 no-repeat; height:532px;}
#chatroomFrame .chatroomFriListInfo { padding: 15px 20px 9px; line-height:1.5em;}
#chatroomFrame .chatroomFriListInfo .chatroomstatus { padding-right:20px;}
#chatroomFrame .chatroomFriListInfo i { font-style:normal;}
#chatroomFrame .chatroomFriListInfo a { margin-right:20px;}
#chatroomFrame .chatroomFri { width:324px; height:578px; overflow-y:scroll; overflow-x:hidden; margin-left:4px; position:relative;}
#chatroomFrame .morelistbtn { text-align:center; padding:5px 0px;}
#chatroomFrame .chatroomRoom { float:left; width:623px; background:url(http://img.ipimg.com/images2/chatroom/chtroomT2.gif?20131022) 0 0 no-repeat; height:532px;}
#chatroomFrame .chatroomRoomInfo { padding: 15px 20px 9px; line-height:1.5em; position:relative;}
#chatroomFrame .chatroomRoomInfo a { margin:0px 10px;}
#chatroomFrame .nowstatus { color:#F00; font-weight:bold;}
#chatroomFrame .chatroomedit { position:absolute; top:34px; right:10px; display:inline; vertical-align:middle; line-height:1.8em;}
#chatroomFrame .chatroomedit a { margin:0px 10px 0px 2px;}
#chatroomFrame .chatroomCon {width:614px; height:527px; overflow-y:scroll; overflow-x:hidden; margin-left:4px; position:relative;}
#chatroomFrame .chatroomloading { text-align:center; padding:20px;}
#chatroomFrame .sysmsg { text-align:center; font-weight:bold; padding:8px 0px;}

dl.chtOne { margin:0px; padding:10px; border-bottom:#CCC 1px dashed; position:relative; cursor:pointer;}
dl.over, dl.oneOn { background-color:#fff4d9;}

.chtOne .close { position:absolute; top:50%; right:8px;}
.chtOne dt { float:left; width:60px; position:relative}
.chtOne dt .notreadmsg { position:absolute; top:39px; right:-4px; text-align:center; background:url(http://img.ipimg.com/images2/chatroom/notread.gif) 0 0 no-repeat; color:#FFF; font-weight:bold; font-family:Verdana, Geneva, sans-serif; font-size:10px; line-height:19px; width:21px; height:21px; display:block; -moz-border-radius: 3px; -webkit-border-radius:3px; border-radius: 3px; z-index:20;}
.chtOne dt .notreadmsg a { color:#FFF; text-decoration:none;}
.chtOne dt .notreadmsg a:hover { text-decoration:underline;}
.chtOne dd { float:left; width:225px; margin:0px}
.chtOne p { padding:0px 0px 0px 20px; margin:0px;}
.chtOne .chtLT { width:235px;}
.chtOne .chtRB { font-size:12px;}
.chtOne .chtOneName { padding-left:12px; margin-bottom:2px; color:#666; font-weight:bold;}
.chtOne .chtOneName a { font-weight:normal;}
.chtOne .chtOneInfo { padding-left:12px; margin-bottom:5px;}
.chtOne .chtOneInfo img { margin-left:2px;}
.chtOne .chtOneNote { position:absolute; top:62px; left:17px;}

.chatroomCon dl { margin:0px; padding:10px 10px 0px 10px;}
.chatroomCon dt { float:left; width:60px; position:relative}
.chatroomCon dd { float:left; width:167px; margin:0px}
.chatroomCon p { padding:0px 0px 0px 20px; margin:0px;}
.chatroomCon .chtLT { width:450px;}
.chatroomCon .chtRB { font-size:12px; position:relative; padding-right:50px;}
.chatroomCon .chtTime { position:absolute; top:0px; right:18px; font-weight:normal;}
.chatroomCon .whitebob { color:#333; font-weight:bold;}
.chatroomCon dl.composer_TextArea {}
.chatroomCon dl.me {}
.chatroomCon dl.me dt { float:right; width:60px; position:relative}
.chatroomCon dl.me dd { float:left; width:167px; padding:0px 0px 0px 60px;}
.chatroomCon dl.me .chtRB { font-size:12px; position:relative; padding-right:60px !important;}
.chatroomCon dl.me .chtTime { position:absolute; top:0px; right:22px; font-weight:normal;}

.cSizeBg { background:url(http://img.ipimg.com/images2/chatroom/picBg.gif) 0px 0px no-repeat; padding:4px 0px 0px 4px; width:60px; height:60px;}
.cSizeBg .cSizeImg { height:50px;overflow:hidden;position:relative;text-align:center;vertical-align:middle;width:50px; }
.cSizeBg .cSizeImg a { height:70px;line-height:70px;position:absolute;vertical-align:middle;width:70px; display:table; top:-10px; left:-10px;}
.cSizeBg .cSizeImg a .piccenter { display: table-cell;text-align: center;vertical-align: middle; width: 70px; height: 70px;}
.cSizeImg a .piccenter * { vertical-align: middle;}
.cSizeImg a .piccenter span {display: inline-block; height: 100%;}

.redbob .chtLT, .redbob .chtLB { background:url(http://img.ipimg.com/images2/chatroom/chat.gif) 0px 0px no-repeat;}
.redbob .chtRT, .redbob .chtRB { background:url(http://img.ipimg.com/images2/chatroom/chat2.gif) 0px 0px no-repeat;}
.bluebob .chtLT, .bluebob .chtLB { background:url(http://img.ipimg.com/images2/chatroom/bchat.gif) 0px 0px no-repeat;}
.bluebob .chtRT, .bluebob .chtRB { background:url(http://img.ipimg.com/images2/chatroom/bchat2.gif) 0px 0px no-repeat;}
.whitebob .chtLT, .whitebob .chtLB { background:url(http://img.ipimg.com/images2/chatroom/wchat.gif) 0px 0px no-repeat;}
.whitebob .chtRT, .whitebob .chtRB { background:url(http://img.ipimg.com/images2/chatroom/wchat2.gif) 0px 0px no-repeat;}
.greenbob .chtLT, .greenbob .chtLB { background:url(http://img.ipimg.com/images2/chatroom/gchat.gif) 0px 0px no-repeat;}
.greenbob .chtRT, .greenbob .chtRB { background:url(http://img.ipimg.com/images2/chatroom/gchat2.gif) 0px 0px no-repeat;}
a.unknow { color:#ff000b !important; font-weight:bold; text-decoration:underline !important;}
.greenbob a.unknow { color:#41641c !important; font-weight:bold; text-decoration:underline !important;}
a.sysMsg { color:#000; font-weight:bold; text-decoration:underline !important;}
.whitebob .chtRB { font-weight:normal;}
.sysMsg { color:#000; font-weight:bold; }

dl.over .redbob .chtLT, dl.over .redbob .chtLB, dl.oneOn .redbob .chtLT, dl.oneOn .redbob .chtLB { background:url(http://img.ipimg.com/images2/chatroom/chat_y.gif) 0px 0px no-repeat;}
dl.over .redbob .chtRT, dl.over .redbob .chtRB, dl.oneOn .redbob .chtRT, dl.oneOn .redbob .chtRB { background:url(http://img.ipimg.com/images2/chatroom/chat2_y.gif) 0px 0px no-repeat;}
dl.over .bluebob .chtLT, dl.over  .bluebob .chtLB, dl.oneOn .bluebob .chtLT, dl.oneOn  .bluebob .chtLB { background:url(http://img.ipimg.com/images2/chatroom/bchat_y.gif) 0px 0px no-repeat;}
dl.over .bluebob .chtRT, dl.over  .bluebob .chtRB, dl.oneOn .bluebob .chtRT, dl.oneOn  .bluebob .chtRB { background:url(http://img.ipimg.com/images2/chatroom/bchat2_y.gif) 0px 0px no-repeat;}
dl.over .whitebob .chtLT, dl.over .whitebob .chtLB, dl.oneOn .whitebob .chtLT, dl.oneOn .whitebob .chtLB { background:url(http://img.ipimg.com/images2/chatroom/wchat_y.gif) 0px 0px no-repeat;}
dl.over .whitebob .chtRT, dl.over .whitebob .chtRB, dl.oneOn .whitebob .chtRT, dl.oneOn .whitebob .chtRB { background:url(http://img.ipimg.com/images2/chatroom/wchat2_y.gif) 0px 0px no-repeat;}
dl.over .greenbob .chtLT, dl.over .greenbob .chtLB, dl.oneOn .greenbob .chtLT, dl.oneOn .greenbob .chtLB { background:url(http://img.ipimg.com/images2/chatroom/gchat_y.gif) 0px 0px no-repeat;}
dl.over .greenbob .chtRT, dl.over .greenbob .chtRB, dl.oneOn .greenbob .chtRT, dl.oneOn .greenbob .chtRB { background:url(http://img.ipimg.com/images2/chatroom/gchat2_y.gif) 0px 0px no-repeat;}

.chtLT { background-position: top left !important; display:inline-block;}
.chtRT { background-position: top right !important; padding-top:5px; }
.chtLB { background-position: bottom left !important; padding:0px 0px 0px 20px;}
.chtRB { background-position: bottom right !important; padding:0px 20px 10px 0px; display:block; line-height:1.3em;}
.chtRB a { text-decoration:none; color:#444444;}
.chtTime { color:#999; padding-left:6px; font-style:normal; font-size:11px; display:inline-block; cursor:default;}

.chatroomCon dl.me .redbob .chtLT, .chatroomCon dl.me .redbob .chtLB { background:url(http://img.ipimg.com/images2/chatroom/chat2_me.gif) 0px 0px no-repeat;}
.chatroomCon dl.me .redbob .chtRT, .chatroomCon dl.me .redbob .chtRB { background:url(http://img.ipimg.com/images2/chatroom/chat_me.gif) 0px 0px no-repeat;}
.chatroomCon dl.me .bluebob .chtLT, .chatroomCon dl.me .bluebob .chtLB { background:url(http://img.ipimg.com/images2/chatroom/bchat2_me.gif) 0px 0px no-repeat;}
.chatroomCon dl.me .bluebob .chtRT, .chatroomCon dl.me .bluebob .chtRB { background:url(http://img.ipimg.com/images2/chatroom/bchat_me.gif) 0px 0px no-repeat;}
.chatroomCon dl.me .whitebob .chtLT, .chatroomCon dl.me .whitebob .chtLB { background:url(http://img.ipimg.com/images2/chatroom/wchat2_me.gif) 0px 0px no-repeat;}
.chatroomCon dl.me .whitebob .chtRT, .chatroomCon dl.me .whitebob .chtRB { background:url(http://img.ipimg.com/images2/chatroom/wchat_me.gif) 0px 0px no-repeat;}
.chatroomCon dl.me .greenbob .chtLT, .chatroomCon dl.me .greenbob .chtLB { background:url(http://img.ipimg.com/images2/chatroom/gchat2_me.gif) 0px 0px no-repeat;}
.chatroomCon dl.me .greenbob .chtRT, .chatroomCon dl.me .greenbob .chtRB { background:url(http://img.ipimg.com/images2/chatroom/gchat_me.gif) 0px 0px no-repeat;}
.chatroomCon dl.me .chtLT { background-position: top left !important; display:inline-block;}
.chatroomCon dl.me .chtRT { background-position: top right !important; padding-top:5px; }
.chatroomCon dl.me .chtLB { background-position: bottom left !important; padding:0px 0px 0px 20px;}
.chatroomCon dl.me .chtRB { background-position: bottom right !important; padding:0px 20px 10px 0px; display:block; line-height:1.3em;}

.chatMsgInputSec { position:relative;}
.chatMsgInputSec .feeliconBtn { position:absolute; top:10px; left:10px;}
.chatMsgInputSec .chatMsgInputText { position:absolute; top:10px; left:10px; border: 1px solid #CDCDCD; -moz-border-radius: 5px; -webkit-border-radius:5px; border-radius: 5px; padding:2px;margin-left:35px;}
.chatMsgInputSec .chatMsgInputText .composer_TextArea  { border: none; font-size: 13px; line-height: 21px; margin: 0; min-height: 40px; outline: none; overflow: hidden; padding: 2px 4px 3px; vertical-align: bottom; width: 460px;}
.chatMsgInputSec .chatMsgInputBtn { position:absolute; top:10px; right:16px;}
.chatMsgInputSec .chatMsgInputNote { position:absolute; top:64px; left:10px; color:#ff8cb2; font-size:11px;}

.chtPop, .sayHiPop { width:30px; z-index:99;}
.chtPop h3 { font-size:15px; font-weight:bold; margin-bottom:5px; border-bottom: inset 1px #CCCCCC; padding-bottom:5px; text-align:center; }
.sayHiPop h3 { font-size:15px; font-weight:bold; margin-bottom:5px; border-bottom: inset 1px #CCCCCC; padding-bottom:5px; text-align:center; }
.sayHiPop ul { margin-bottom:15px;}
.sayHiPop ul li { list-style:none; margin-bottom:5px; line-height:20px;}
.sayHiPop ul li label { margin-right:5px; width:60px; display:inline-block;}
.sayHiPop ul li input { vertical-align:inherit; margin-right:5px;}
.sayHiPop ul li .text { width:30px;}
.sayHiPop ul.useicon { border-top: 1px inset #CCCCCC; margin:0px; padding-top:5px;}
.sayHiPop ul.useicon li {list-style:none; margin-bottom:5px; line-height:15px;}
.chtPop input, .sayHiPop input { margin-right:5px;}
.chtPop .reportselect { text-align:center; padding:10px;}
.chtPop .reportselect select { width:200px}

#stampSet { position:fixed;width:315px;z-index:1;right: 10px;bottom: 10px;visibility: visible;}
#stampSet p { padding: 0 0 0 20px; margin:0px}

#chatroomFrame .chatroomRecord .chatroomFri { background:#fff;width:324px; height:633px; overflow-y:scroll; overflow-x:hidden; margin-left:4px; position:relative;}
#chatroomFrame .chatroomRecord .chatroomCon { background:#fff;width:614px; height:633px; overflow-y:scroll; overflow-x:hidden; margin-left:4px; position:relative;}
#chatroomFrame dl.chtOne { padding:5px 10px;}
.chatroomCon .chatroomUser { float:left; width:130px; height:20px; overflow:hidden; padding-right:20px;}
.chatroomCon .chatroomUserTalk { float:leftl; width:315px;}
.chatroomCon .chatroomTalkTime { float:right; width:105px; color:#999; font-size:11px;}

/*0829 add*/
.starmark { position:absolute; top:0px; left:0px;}
#chatroomFrame .chatroomFriListInfo { height:65px;}
#chatroomFrame .chatroomFriListInfo .chatroomFriListInfoBox1 { padding-top: 14px;}
.chatroomFriListNav { margin:0px 0px 5px; padding:0px;}
.chatroomFriListNav li { list-style:none; float:left; margin-right:8px;}
#chatroomFrame .chatroomFriListInfo .chatroomFriListNav li a { padding:4px 8px; background:#ffb6d0; color:#FFF; margin-right:0px; text-decoration:none;  -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
#chatroomFrame .chatroomFriListInfo .chatroomFriListNav li a:hover { background:#fa82ad;}
#chatroomFrame .chatroomFriListInfo .chatroomFriListNav li a.active { background:#fa82ad;}
#chatroomFrame .chatroomFriList { background:url(http://img.ipimg.com/images2/chatroom/chtroomT1_1.gif?20131022) 0 0 no-repeat; }
#chatroomFrame .chatroomFri { height:551px;}
.chatroomCon dl.me dd.postPic { float:right;}


/**表情符號視窗**/
.postPopWrapper { border:#666 1px solid; background:#FFF;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; padding-bottom:10px; width:350px; height:400px;}
.postInner {}
.postInner .postNav { padding:6px 6px 0px; background:#f3f3f3;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;-moz-border-radius:5px 5px 0px 0px;-webkit-border-radius:5px 5px 0px 0px; border-bottom:#999 1px solid; margin-bottom:5px;}
.postInner .postNav .close { float:right;}
.postInner .postNav ul { margin:0px; padding:0px;}
.postInner .postNav ul li { list-style:none; float:left; margin-right:3px; display:inline-block;}
.postInner .postNav ul li a { background:#f3f3f3; padding:3px 15px; display:block; color:#666; text-decoration:none; border-color: #bbb #bbb #999 #bbb ; border-width: 1px; border-style: solid; font-size:11px; margin-bottom:-1px;}
.postInner .postNav ul li a:hover { background:#FFF; border-color: #999 }
.postInner .postNav ul li a.active { background:#FFF; margin-bottom:-2px; font-weight:bold;border-color: #999 #999 #ffffff #999 ; border-width: 1px; border-style: solid;}
.postInner .morePostPic { padding:5px 0px;border-bottom:#999 1px solid; }
.postInner .morePostLeft { float:left; width:20px; margin-right:10px; margin-top:5px;}
.postInner .morePostLeft a { border-color:#ffffff #bbb #ffffff #ffffff; border-style:solid; border-width:7px; font-size:0px; margin:3px 5px; display:block; vertical-align:middle;}
.postInner .morePostLeft a:hover { border-color:#ffffff #999 #ffffff #ffffff;}
.postInner .morePostRight { float:right; width:20px; margin-right:10px; margin-top:5px;}
.postInner .morePostRight a { border-color:#ffffff #ffffff #ffffff #bbb; border-style:solid; border-width:7px; font-size:0px; margin:3px 5px; display:block; vertical-align:middle;}
.postInner .morePostRight a:hover { border-color:#ffffff #ffffff #ffffff #999;}
.postInner .morePostItemBox { float:left; width:290px; height:35px; overflow:hidden;}
.postInner .morePostItemBoxInner { display:inline;}
.postInner .morePostItem {float:left;}
.postInner .morePostItem a { border:#FFF 1px solid; padding:3px 5px; border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px; display:block; height:25px; text-align:center; }
.postInner .morePostItem a.active { border:#CCC 1px solid; background-color:#fbfbfb}
.postInner .morePostItem a:hover { border:#CCC 1px solid; }
.postInner .morePostItem a img { max-height: 25px; max-width: 25px;}
.postInner .postPic { overflow-y:scroll; overflow-x:hidden; padding:5px;}
.postInner .postPic.postfeeling a,
.postInner .postPic.postGrapic a,
.postInner .postPic.postText a { padding:5px; display:inline-block;border:#FFF 1px solid;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px; }
.postInner .postPic.postfeeling a:hover,
.postInner .postPic.postGrapic a:hover,
.postInner .postPic.postText a:hover {border:#bbb 1px solid;}
.postInner .postPic a img { max-height: 65px; max-width: 65px;}
.postInner .postfeeling { height:350px; }
.postInner .postGrapic { height:310px;}
.postInner .postText { height:350px; }
.postInner .postPic.postText a img { max-height:none; max-width: none;}
.postInner .postStore { height:350px; }
.postInner .postStore .postStoreNav { padding:5px 0px 10px; text-align:center;}
.postInner .postStore .postStoreNav a { padding:0px; border:none;}
.postInner .postStore .postStoreNav .active { font-weight:bold; text-decoration:none;}
.postInner .postStore .postStorList { margin:0px; padding:0px;}
.postInner .postStore .postStorList li { border-top:#CCC 1px dashed; position:relative; padding:5px;}
.postInner .postStore .postStorList li .thumbnail { float:left; margin-right:10px;}
.postInner .postStore .postStorList li .thumbnail img { width:60px;}
.postInner .postStore .postStorList li .new {  position:absolute; top:5px; left:5px;}
.postInner .postStore .postStorList li .name { float:left; width:110px; padding-top:18px;}
.postInner .postStore .postStorList li .price { float:left;color:#F78C00; font-weight:bold; width:70px; padding:10px 5px 0px 0px; text-align:right;}
.postInner .postStore .postStorList li .more { float:left; padding-top:16px;}
.postInner .postStoreInfo { padding:5px; border-bottom:#CCC 1px dashed; margin:0px; position:relative;}
.postInner .postStoreInfo .back { position:absolute; top:10px; right:5px; font-size:12px;}
.postInner .postStoreInfo dt { float:left; width:90px; margin:0px 5px 0px 0px;}
.postInner .postStoreInfo dt img { width:90px;}
.postInner .postStoreInfo dd { float:left; margin:0px; width:210px; padding-top:5px;}
.postInner .postStoreInfo .postStoreInfoName { font-size:15px; margin-bottom:5px;}
.postInner .postStoreInfo .postStoreInfoName span { font-size:12px; color:#999}
.postInner .postStoreInfo .postStoreInfoPrice { color:#F78C00; font-weight:bold; margin-bottom:5px;}
.postInner .postStoreInfo .postStoreInfoPrice a.btn { font-weight:normal;}
.postInner .postStoreInfo .postStoreInfodetail { font-size:12px; color:#666}
.postInner .postStore {}
.postInner .postStoreThumbnail img { padding:5px; max-height: 65px; max-width: 65px;}
.postInner .postStoreInfo .postStoreInfoPrice input { position:static; top:0px; vertical-align:middle; margin:0px}
.postInner .postStore .postStorList li .price .red { color:#FF0066;}
.postInner .postStoreInfo .postStoreInfoPrice .red { color:#FF0066;}

.chatroomCon dd.postPic i.chtTime { position:inherit; top:0px; display:inline-block;}

/*0928 add*/
.chatroomCon dd { width:inherit;}
.chatroomCon dd.chtTime { float:left; width:490px; position:static;}
.chatroomCon dl.me dd { padding:0px; float:right; width:inherit; display:block; max-width:450px; position: static; }
.chatroomCon dl.me dd.chtTime { float:right; position:static; width:490px; max-width:none; text-align:right; padding-right:10px;}
.chatroomCon .chtLT { width:inherit; max-width:450px}
.chatroomCon dl dd.postPic i.chtTime { position:static; top:0px; display:inline-block; width:151px; text-align:left;}
.chatroomCon dl dd.postPic { width:167px;}
.chatroomCon dl.me dd.postPic i.chtTime { position:static; top:0px; display:inline-block; width:151px; text-align:right;}
.chatroomCon .chtRB { padding-right:24px;}
.chatroomCon dl.me .chtRB  { padding-right:24px !important;}