@charset "utf-8";
/* CSS Document */

/*********************单图文消息**************************/
.chatItem {padding: 4px 0px 10px 0px;_background: none;_border: none;}
.media {border: 1px solid #AEB4B9;box-shadow: 0px 1px 1px #D7D7D7;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
  width: 365px;background-color: #FAFAFA; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#fafafa));background-image: -moz-linear-gradient(top, #fefefe 0%, #fafafa 100%);
  margin: 0px auto;}
.title {line-height: 1.2em;margin-top: 22px;display:block;max-width:312px;text-align: left;}
.time1{margin:0px;margin-top: 21px;color: #82888C;background: none;width: auto;font-size:14px}
.mediaFooter a {color: #792F2E;font-size: 14px;}
.clr {clear: both;height: 1px;overflow: hidden;display: block;}
.mediaFooter {  background-color: #F0F4F8;-webkit-border-radius: 0px 0px 5px 5px;-moz-border-radius: 0px 0px 5px 5px;border-radius: 0px 0px 5px 5px;}
.mesgIcon {display: inline-block;height: 13px;width: 13px;margin: 8px 0px -2px 4px;background: url(../../images/button_chat1ffa40.png) no-repeat -174px -987px;}


/*********************多图文消息**************************/
.mediaImg {margin: 16px 0px -10px;}
.mediaImgFooter {position: relative;top: -29px;height: 29px;background-color: #000;background-color: rgba(0, 0, 0, 0.4);text-shadow: none;color: #FFF;text-align: left;
  padding: 0px 11px;line-height: 29px;font-size:14px;}
.mediaMesg {border-top: 1px solid #D7D7D7;padding: 0px 10px;}
.mediaImgPanel {position: relative;padding: 0px;margin: 0px;height: 164px;width: 100%;overflow: hidden;}
.mediaMesgDot {display: block;position:relative;top:-3px;left:20px;height:6px;width:6px;-moz-border-radius:3px;-webkit-border-radius:3px; border-radius:3px;}
.mediaMesgTitle p {line-height: 1.5em;max-height: 45px;max-width: 286px;min-width: 176px;margin-top: 2px;color: #5D6265;font-size:14px;
  -o-text-overflow: ellipsis;overflow: hidden;text-align: left;text-overflow: ellipsis;}
  
/*********************表情样式**************************/
.emojiPanel {
  position: absolute;
  zoom: 1;
  z-index: 120;
}
.bottle_mail .fast_rly .faceWrap {
  bottom: 94px;
  left: 15px;
}
.replyContainer .faceWrap,
.replyContainer .touchWrap,
.replyContainer .sendImgWrap,
.replyContainer .trueBottleWrap,
.penfriendWrap,
.close_interact_wrap {
  top: 14px;
  bottom: auto;
  left: 68px;
}
.bottle_send .sendImgWrap {
  bottom: -2px;
  left: 20px;
  width: 406px;
}
.uploaded .selectPicPanel {
  display: none;
}
.faceBox {
  position: relative;
  clear: both;
  width: 435px;
  overflow: hidden;
  background: url(../images/qqSmilies17ced3.png) no-repeat;
  cursor: pointer;
}
.faceBox a {
  display: block;
  float: left;
  width: 28px;
  height: 28px;
  border-right: 1px solid #DFE6F6;
  border-bottom: 1px solid #dfe6f6;
}
.facePreview {
  clear: both;
  position: absolute;
  top: 0;
  right: 1px;
  width: 53px;
  height: 53px;
  padding: 1px;
  text-align: center;
  border: 1px solid #DFE6F6;
  background: #008AFF;
}
.facePreview div {
  padding-top: 6px;
  border: 1px solid #E5F3FF;
  background: #fff;
}
.facePreview p {
  display: block!important;
  height: 28px;
  overflow: hidden;
}
.facePreview .faceName {
  height: 17px;
  color: #999;
  line-height: 19px;
  background: #F1F1F1;
}
.facePreviewLeft {
  left: 0;
}
.cmtTip,
.goTopBox,
.D,
.delChose,
.faceWrap,
.vloadWrap,
.mloadWrap,
.badgeTips,
.atWrap {
  -webkit-animation-name: opacity;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in-out;
}
.faceWrap,
.touchWrap,
.sendImgWrap,
.trueBottleWrap,
.penfriendWrap {
  border: 1px solid #cac8c8\9;
  position: absolute;
  z-index: 20;
  background-color: #fff;
  -moz-box-shadow: 1px 1px 2px #CAC8C8;
  -o-box-shadow: 1px 1px 2px #CAC8C8;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  outline: none;
}
.faceWrap {
  position: absolute;
  z-index: 0;
  background-color: #FFF;
  width: 434px;
  border: 1px solid #9FA0A0;
  padding: 46px 20px 20px;
  bottom: 4px;
  margin-bottom: 88px;
  _height: 172px;
  overflow-y: hidden;
  left: 5px;
  /*position:absolute;*/
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
  -o-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
  -webkit-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
  -ms-box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
  box-shadow: 0px 0px 6px rgba(94, 89, 89, 0.57);
}
.faceWrap .tips_arrow {
  left: 33px;
}
/*rabbit*/
.faceWrap .rabbitContent {
  height: 203px;
  margin-right: -20px;
  margin-left: -5px;
  overflow-y: auto;
  /*margin-bottom:13px;*/
  margin-bottom: -1px;
}
.faceWrap .rabbitPanel {
  background: url(../images/tusiji_expression17ced3.png) no-repeat;
  height: 352px;
  padding-left: 2px;
}
.faceWrap .rabbitBox a {
  display: block;
  width: 75px;
  height: 78px;
  float: left;
  border-right: none;
  border-bottom: none;
  margin-bottom: 13px;
  margin-right: 16px;
}
.faceWrap .rabbitBox a:hover {
  background: url(../images/46017ced3.gif) no-repeat;
  -moz-background-size: 75px 77px;
  -webkit-background-size: 75px 77px;
  background-size: 75px 77px;
}
.emojiPanel a.faceCloseIcon {
  position: absolute;
  z-index: 10;
  left: 445x;
  top: -304px;
  width: 28px;
  height: 27px;
  background: url(../images/button_chat1ffa40.png) no-repeat -3px -846px;
}
.emojiPanel a.faceCloseIcon:hover {
  background: url(../images/button_chat1ffa40.png) no-repeat -37px -846px;
}
.emojiPanel a.faceCloseIcon:active {
  background: url(../images/button_chat1ffa40.png) no-repeat -71px -846px;
}
.emojiPanel a:hover {
  cursor: pointer;
}
.emojiPanel .faceTriangle {
  position: absolute;
  z-index: 10;
  height: 20px;
  width: 20px;
  left: 14x;
  margin-left: 14px;
  top: -67px;
  display: none;
}
.emojiPanel .faceTrianglePanel {
  padding: 0px;
  margin: 0px;
  position: relative;
}
.emojiPanel .faceTriangle .faceTriangle1 {
  position: absolute;
  top: 1px;
  left: 0px;
  border-style: solid;
  border-width: 8px;
  border-color: #D3D0D0 transparent transparent;
}
.emojiPanel .faceTriangle .faceTriangle2 {
  position: absolute;
  top: 0px;
  left: 0px;
  border-style: solid;
  border-width: 8px;
  border-color: #F6F8FB transparent transparent;
}
/*emoji*/
.faceWrap .emojiBox {
  height: 195px;
}
.faceWrap .emojiBox .emojiContent {
  height: 203px;
  overflow-y: auto;
  margin: 7px -20px 12px -12px;
  margin-left: 0;
  position: relative;
  top: -7px;
}
.emojiBox .emojiContent .emojiFacePanel {
  /*width: 450px;*/
  height: 368px;
  background: url(../images/emojiPanel17ced3.png) no-repeat;
}
.faceWrap .emojiBox a {
  display: block;
  float: left;
  width: 28px;
  height: 28px;
  border-right: 1px solid #DFE6F6;
  border-bottom: 1px solid #dfe6f6;
}
.faceWrap a.borderRightNone {
  border-right: none;
  margin-right: 0px;
}
.faceWrap a.borderBottomNone {
  border-bottom: none;
}
/*faceWrap footer*/
.faceWrap .faceWrapFooter {
  margin: 0px;
  margin-top: 10px;
  position: relative;
}
/*face expression tab*/
ul.faceTab {
  position: relative;
  bottom: 331px;
  z-index: 50;
  width: 457px;
  height: 6px;
  list-style-type: none;
  margin: 0px;
  margin-left: 6px;
  padding-left: 5px;
  padding-left: 17px;
  padding-bottom: 23px;
  border-bottom: 1px solid #D5D5D5;
  border-left: 1px solid #CAC8C8\9;
  font: bold 12px verdana, arial;
  background-color: #F6F6F6;
  -moz-border-radius: 3px 3px 0px 0px;
  -webkit-border-radius: 3px 3px 0px 0px;
  border-radius: 3px 3px 0px 0px;
  margin-left: 5px\9;
}
ul.faceTab li {
  float: left;
  height: 29px;
  background-color: #F6F8FB;
  margin: 0px;
}
ul.faceTab a:link,
ul.faceTab a:visited {
  display: block;
  /* ��Ԫ�� */
  color: #6B6B6B;
  line-height: 21px;
  font-family: Helvetica, Arial, '����', sans-serif;
  font-size: 12px;
  font-weight: normal;
  text-decoration: none;
  padding: 5px 10px 3px 10px;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
/*rabbit hover*/
.rabbitBox a.r11:hover {
  background: url(../images/emoji/rabbit/icon_00217ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
.rabbitBox a.r12:hover {
  background: url(../images/emoji/rabbit/icon_00717ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
.rabbitBox a.r13:hover {
  background: url(../images/emoji/rabbit/icon_01017ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
.rabbitBox a.r14:hover {
  background: url(../images/emoji/rabbit/icon_01217ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
.rabbitBox a.r15:hover {
  background: url(../images/emoji/rabbit/icon_01317ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
.rabbitBox a.r21:hover {
  background: url(../images/emoji/rabbit/icon_01817ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
.rabbitBox a.r22:hover {
  background: url(../images/emoji/rabbit/icon_01917ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
.rabbitBox a.r23:hover {
  background: url(../images/emoji/rabbit/icon_02117ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
.rabbitBox a.r24:hover {
  background: url(../images/emoji/rabbit/icon_02217ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
.rabbitBox a.r25:hover {
  background: url(../images/emoji/rabbit/icon_02417ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
.rabbitBox a.r31:hover {
  background: url(../images/emoji/rabbit/icon_02717ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
.rabbitBox a.r32:hover {
  background: url(../images/emoji/rabbit/icon_02917ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
.rabbitBox a.r33:hover {
  background: url(../images/emoji/rabbit/icon_03017ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
.rabbitBox a.r34:hover {
  background: url(../images/emoji/rabbit/icon_03517ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
.rabbitBox a.r35:hover {
  background: url(../images/emoji/rabbit/icon_04017ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
.rabbitBox a.r41:hover {
  background: url(../images/emoji/rabbit/icon_02017ced3.gif) no-repeat #e9ecef;
  background-position: 5px 10px;
}
ul.faceTab a.chooseFaceTab {
  /*background:url(../images/button_chat1ffa40.png) no-repeat -109px -1046px;*/
  background-color: #FFF;
  border: 1px solid #D5D5D5;
  border-bottom: 1px solid #FFF;
  border-top: none;
}
/*face expression*/
.faceWrap .faceBox .borderRight {
  border-right: none;
}
.faceWrap .faceBox .borderBottom {
  border-bottom: none;
}
.faceWrap .faceWrapFooter .changePointPannel {
  width: 36px;
  height: 12px;
  margin: 20px auto 0px;
}
.faceWrap .point1 a,
.faceWrap .point2 a,
.faceWrap .point3 a {
  cursor: pointer;
  display: block;
  float: left;
  height: 10px;
  width: 10px;
  background: url(../images/button_chat1ffa40.png) no-repeat -13px -1108px;
}
.faceWrap .point1 a:hover,
.faceWrap .point2 a:hover,
.faceWrap .point3 a:hover {
  background-position: -1px -1108px;
}
/*post local face*/
.faceWrap .postLocalFace {
  float: right;
  margin: 4px 0px -7px;
  height: 24px;
}
.faceWrap .postLocalFace .postLocalFaceMiddle {
  height: 20px;
  width: 120px;
  background-color: #E9EDF2;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  border-top: 1px solid #DAE0E5;
  border-bottom: 1px solid #fff;
}
.faceWrap .postLocalFace .postLocalFaceMiddle a {
  height: 20px;
  line-height: 20px;
  text-shadow: none;
  overflow: hidden;
}
.faceWrap .postLocalFace a {
  color: #8F969E;
  width: 120px;
  float: left;
}
.faceWrap .postLocalFace a:hover {
  background: none;
  text-decoration: underline;
}
.faceWrap .postLocalFace .postLocalFaceMiddle .faceHook {
  height: 0px;
  width: 0px;
  border-style: solid;
  border-width: 5px;
  border-color: #E9EDF2 #E9EDF2 #8B9096;
  float: left;
  margin: 3px 9px 0px;
}

.mediaMesgIcon img {
  height: 45px;
  width: 45px;
}

.mediaHead {
  /* height: 48px; */
  padding: 0px 8px 4px;
  border-bottom: 1px solid #D3D8DC;
  color: #A51000;
  font-size: 16px;
}
.fr {
	float:right;
}
.fl {
	float:left;
}
.time {
  font-size:12px;
  margin: 0px;
  margin-top: 21px;
  color: #82888C;
  background: none;
  width: auto;
}
.mediaFooter a {
  color: #792F2E;
  font-size: 14px;
  padding: 0px 7px;
}

.mesgIcon {
  display: inline-block;
  height: 13px;
  width: 13px;
  margin: 12px 3px 0px 0px;
  background: url(../images/button_chat1ffa40.png) no-repeat -174px -987px;
}
.media a {
  display: block;
}