/*
 * default style for pusher chat 
 * Pusher chat
 * facebook like chat jQuery plugin using Pusher API 
 * version: 1.0   
 * Author & support : zied.hosni.mail@gmail.com 
 * © 2012 html5-ninja.com
 * for more info please visit http://html5-ninja.com
 *
*/

#pusherChat{position: fixed; right:50; bottom: 0;font-family:Arial,Helvetica,Garuda,sans-serif;font-size: 12px;color:#515151 ;width: 100%}
#pusherChat #membersContent{
    position:absolute;right: 10px; bottom:-2px ; width: 200px; border:#ccc 1px solid ;background: #eee;
    padding: 2px;box-shadow: 0px -1px 3px #ccc
}
#pusherChat #membersContent a{
    position: relative; background: #fff;color:#515151;padding: 2px 0px ;display: block;border-top:1px solid #eee;width: available;
    text-decoration: none;padding: 2px 4px;height: 28px; line-height: 28px;text-indent: 10px
}
#pusherChat #membersContent a.off{opacity: 0.5; background/*\**/: #eee\9;}
#pusherChat #membersContent a:hover{background: #00B4FF;color :#fff}
#pusherChat #membersContent h2{font-size: 12px;line-height: 0;text-indent: 10px; }
#pusherChat #membersContent .scroll{overflow-y :auto }
#pusherChat #expand, #pusherChat .expand{ font-size: 15px; font-weight: bold;position: absolute; right: 10px; top: 0px;cursor: pointer;}
#pusherChat #expand .open,#pusherChat .pusherChatBox .expand .open{display: none; }
#pusherChat .pusherChatBox .expand {right: 20px}
#pusherChat #membersContent a img{width: 25px;height: 25px; right:56; margin: 2px 0 0 0; outline: 1px solid #eee;border:none}
#pusherChat .pusherChatBox{width: 200px;padding: 2px 4px; background: #eee;position: relative;bottom: -2px ;border:#ccc 1px solid;box-shadow: 0px -1px 3px #ccc }
#pusherChat .pusherChatBox textarea{overflow: auto;resize: none; width: 194px;margin: 4px auto;font-size: 11px;font-family:Arial,Helvetica,Garuda,sans-serif;border:1px solid #ccc}
#pusherChat .pusherChatBox .logMsg{word-break: break-all;padding-top: 11px;width: 198px; background: #fff; height: 200px;margin: 0 auto;border:1px solid #ccc;overflow: hidden;position: relaive; overflow-y: auto;}
#pusherChat .pusherChatBox h2{margin: 0;padding: 0;display: block;font-size: 12px;padding-top: 1px;padding-bottom: 2px}
#pusherChat .pusherChatBox h2 img{z-index: 100;position: relative ;border: 1px solid #ccc;margin-right: 4px;margin-bottom: -16px;margin-left: 1px;}
#pusherChat .pusherChatBox .closeBox{font-size: 16px; font-weight: bold;position: absolute; right: 5px; top: 0px;cursor: pointer;}
#pusherChat .pusherChatBox h2  a{text-decoration: none; color:inherit}
#pusherChat .pusherChatBox .state{position: absolute; left: 26px ; top :3px;z-index: 101}
#pusherChat .pusherChatBox .state .quote,#pusherChat .pusherChatBox .state .pencil{display: none}
#pusherChat .pusherChatBox .msgTxt{padding: 0 1px;font-size: 11px;line-height: normal}
#pusherChat .pusherChatBox .msgTxt p{padding: 0;margin: 0;border-bottom: 1px solid #eee}
#pusherChat .pusherChatBox .msgTxt p.you b{ color:#00B4FF}
#pusherChat .pusherChatBox .msgTxt p.friend b{ color:#000}
#pusherChat .pusherChatBox.off{background-color: #ccc;}
#pusherChat .pusherChatBox.off h2 img{opacity: 0.6}
#pusherChat .pusherChatBox.writing .state .pencil{display: block}
#pusherChat .pusherChatBox.recive .state .quote{
    display: block;
    -webkit-animation: pulsate 0.5s ease-out;
    -webkit-animation-iteration-count: infinite; 
    animation: pulsateFF 1s ease-out;
    animation-iteration-count: infinite; 
    opacity: 1;
}

@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

@keyframes pulsateFF {
    0% {transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {transform: scale(1.2, 1.2); opacity: 0.0;}
}
#pusherChat .chatBoxWrap{float: left;  position: relative }
#pusherChat .chatBoxWrap .pusherChatBox{ margin-right: 10px;position: absolute}
#templateChatBox{display: none}
.chatBoxslide{float: right;position: relative;}
.overFlow{top: 9000px !important}
#pusherChat .chatBoxWrap #slideLeft,#pusherChat .chatBoxWrap #slideRight{display: none;position: absolute;font-size: 18px; top:-24px;cursor: pointer;color :#00B4FF }
#pusherChat .chatBoxWrap #slideLeft img,#pusherChat .chatBoxWrap #slideRight img{display: none}
#pusherChat .chatBoxWrap #slideLeft.on img,#pusherChat .chatBoxWrap #slideRight.on img{display: block}
#pusherChat .chatBoxWrap #slideLeft {left: 10px;}
#pusherChat .chatBoxWrap #slideRight{right: -5px}
#pusherChat .chatBoxWrap  .overFlowHide{display: none}