.chatSystemMessage {
    background-color: #ADF2FB !important;
    font-size: 14px;
    font-style: italic;
    font-family: century gothic !important;
    font-weight: bold;
}
.chatSendExitPanel {
    width: 104px !important;
}
.chatSendExitPanel select {
    border: 1px solid #c5c5c5;
    background: #fff;
    border-radius: 4px;
    outline: none;
}
.chatPopupMenuContent input[type="submit"] {
    padding: 5px 10px;
}
@import url('//madeas.ru/ChaTemplate/Bootstrap.css');
.chatSendExitPanel select { background: transparent url("http://www.lovethisgif.com/uploaded_images/114351-Underfell-Sans-The-Skeleton.gif") no-repeat scroll 0 0; font-style: normal; font-size: 10pt; font-weight: bold; font-family: Comic Sans MS, monospace;; box-sizing: border-box; height: 22px; width: 100%; padding: 0 10px 0 10px; box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.8) ;; color: #000000; background-color: #CCFFFF; transform-style: preserve-3d; transform: rotateX(360deg) rotateY(0deg); transition: transform 1s; } .chatSendExitPanel select:hover{ transform:rotateX(0deg) rotateY(-10deg); }
/* Список пользователей слева */
.chatMain .chatPeople {
    left: 0 !important;
}
.chatMain .chatMessages, .chatMain .chatPrivateMessages {
    right: 0 !important;
    left: 170px !important;
}
.chatTabs {
    left: 171px !important;
    right: 0 !important;
}
/* Цвет поля ввода текста */
.chatSendText.chatInputText {
    background-color: #000000;
    color: #ffffff;
}
chat_main.chatTab.chatTabActive a {
/* Общий активный */
border-radius: 10px;
}
chat_main.chatTab a {
/* Общий неактивный */
border-radius: 10px;
}
chat_0.chatTab.chatTabActive a {
/* Приват активный */
border-radius: 10px;
}
chat_0.chatTab.chatTab a {
/* Приват неактивный */
border-radius: 10px;
}
.chatTabs > ul > li > a {
padding: 0px 14px 0px 10px;
height: 100%;
text-decoration: none;
border-top: 0px none !important;
border-right: 0px none !important;
vertical-align: middle;
display: inline-block;
line-height: 24px;
}
.chatMain .chatMessages, .chatMain .chatPrivateMessages {
line-height: 2.2em;
}
join-chat-button, join-chat-button2, chat_main a, .chatTopLineWrapper > ul > li > ul > li > a, .chatTopLineWrapper ul li.chatMenuItemWithSeparator a, .justify, div.chatMessage span.chatUserFrom, .chatTabs ul, .chatTabs ul li.appTab a, .chatTopLineWrapper > ul > li > a, .chatTabs > ul > li.chatTab > a, .chatSendLinksPanel a.chatLinkSmiles, .chatSendLinksPanel .chatLinkImage, .has-user-id .chatLinkProfile, .chatSendLinksPanel a, .chatLinkGold, .chatLinkVip, .chatLinkModerate, .chatLinkMore, .chatSoundPanel a, .chatFooter .chatFooterWrapper .chatPanel .chatSendButtonPanel .chatSendButton, .chatMessage a {
cursor: url(«www.cursor.cc/cursor/192/10/cursor.png»), default;
}
.chat {
cursor: url(«upload.wikimedia.org/wikipedia/commons/4/4c/Cursor.png»), default;
}
.adm-icon {
background-image: url(«png-4.findicons.com/files/icons/460/medical/16/health_care_shield.png»);
}
.mod-icon {
background-image: url(«png-4.findicons.com/files/icons/460/medical/16/health_care_shield.png»);
}
#chat_main.chatTab.chatTabActive a {
/* Общий активный */
    border-radius: 10px;
}
#chat_main.chatTab a {
/* Общий неактивный */
    border-radius: 10px;
}
#chat_0.chatTab.chatTabActive a {
/* Приват активный */
    border-radius: 10px;
}
#chat_0.chatTab.chatTab a {
/* Приват неактивный */
    border-radius: 10px;
}
.chatTabs > ul > li > a {
padding: 0px 14px 0px 10px;
height: 100%;
text-decoration: none;
border-top: 0px none !important;
border-right: 0px none !important;
vertical-align: middle;
display: inline-block;
line-height: 24px;
}
.chatMessageToMe .chatToUser {
        background-color: #216477;
    border: 1px solid #e1e5e6;
    border-radius: 2px;
    padding: 2px;
}
.chatHeader {
border-bottom: 1px solid #D4D2CB;
}
.chatMain .chatMessages, .chatMain .chatPrivateMessages {
    line-height: 2.2em;
}
.chatHeader .chatTitle {
   font-style:italic;
}
.chatLinkMore {
    padding-left: 21px;
    background: transparent url("еще...") no-repeat 0 0;
}
#join-chat-button {
     border-radius: 25px; 
     background-color:#afefbf;
}
#join-chat-button:hover {
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
#join-chat-button, #join-chat-button2, #chat_main a, .chatTopLineWrapper > ul > li > ul > li > a, .chatTopLineWrapper ul li.chatMenuItemWithSeparator a, .justify, div.chatMessage span.chatUserFrom, .chatTabs ul, .chatTabs ul li.appTab a, .chatTopLineWrapper > ul > li > a, .chatTabs > ul > li.chatTab > a, .chatSendLinksPanel a.chatLinkSmiles, .chatSendLinksPanel .chatLinkImage, .has-user-id .chatLinkProfile, .chatSendLinksPanel a, .chatLinkGold, .chatLinkVip, .chatLinkModerate, .chatLinkMore, .chatSoundPanel a, .chatFooter .chatFooterWrapper .chatPanel .chatSendButtonPanel .chatSendButton, .chatPeople ul.chatPeopleList li, .chatPeople ul.chatPeopleList li a.chatUser {
    cursor: url(""), 
default;
}
#join-chat-button {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#join-chat-button, #join-chat-button2 {
    background: transparent url("http://www.playcast.ru/uploads/2015/01/31/11875746.gif") no-repeat scroll 0 0;
    background-position: center left;
    background-repeat: no-repeat;
    background-size: 100% 110%;
    border-radius: 25px 25px 25px 25px;
    box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #00FF00, 0 0 5px #F5DA81, 0 0 6px #F5DA81, 0 0 7px #F5DA81, 0 0 10px #F5DA81;
}
.chatHeader {
   background-image: url();
   background-position: center center;
   background-repeat:no-repeat;
}
.mod-icon {
    background-image: url("https://vk.com/images/emoji/24C2_2x.png");
}
/* Кнопка отправки сообщения */
.chatSendButton {
    background-color: #a36209; /* Цвет фона */
    border-radius: 25px; /* Закругление */
    border: 2px solid rgba(255, 255, 255, 0.4); /* Граница (кайма) */
}
/* Кнопка отправки сообщения при наведении */
.chatSendButton:hover {
    background-color: #81c784; /* Цвет фона */
    transition: .3s; /* Плавность смени цвета фона */
}
/* Кнопка отправки сообщения при нажатии */
.chatSendButton:active {
    background-color: #43a047; /* Цвет фона */
}
/* Иконка нет пола */
.chatPeople ul.chatPeopleList li a.chatUserSex0 b {
    background-image: url(http://savepic.ru/10377357m.png);
}

/* Иконка мужской пол */
.chatPeople ul.chatPeopleList li a.chatUserSex1 b {
    background-image: url(http://savepic.ru/10401930m.png);
}

/* Иконка женский пол */
.chatPeople ul.chatPeopleList li a.chatUserSex2 b {
    background-image: url(http://savepic.ru/10372234m.png);
}
.chatMessage {
       font-family: курсив;
}
.chatSendExitPanel select {
    background-color: yellow;
}
.chatPeople.vscrollable {
background-image:url(http://liubavyshka.ru/_ph/118/1/288337541.jpg);
background-position: bottom;
background-repeat:no-repeat;
}
/*Объявление чата в шапке чата*/
.chatHeader:before {
content: "Приятного общения!
           ВНИМАНИЕ! 

        Требуются модераторы!";
font-size: 13px; 
color: #ff0000;
font-weight: bold;
display: inline-block;
margin: 0 0 1em; /* Отступы */
    white-space: pre-wrap;

display: block;
background: transparent url("https://im0-tub-ru.yandex.net/i?id=6ce04dc1dccdd705369a9aa6c24e75ac-l&n=13") no-repeat scroll 0 0;
background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 5px;
    box-shadow: 0 0 0 1px #60B88D, 0 0 0 2px #ff0000, 0 0 0 4px #BFE3D1; 
   width: 267px;
    height: 200px;
    line-height: 18px;
    opacity: 0;
padding: 10px 10px;
     position: absolute;
    right: 240px;
    top: -500px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
  }
.chatHeader:hover:before {
display: block;
background: linear-gradient(#0BB3CF,#D7DFED, #F5FCFD, #0BB3CF)
  width: 267px;
    height: 200px;
    border-radius: 10px;
   box-shadow: 0 0 0 1px #60B88D, 0 0 0 2px #90CDAF, 0 0 0 4px #BFE3D1;    
right: 250px;
top: 200%;
    opacity: 1;
    
  }
.chatPeopleTitle {
    color: rgba(0,0,0,0);
}
.chatUsersCount, .chatUsersCount::before, .chatUsersCount::after {
    color: green
;
    position: relative;
    right: 5px;
}
.chatUsersCount::before {
    content: "Здесь ";
}
.chatUsersCount::after {
    content: " человек";
    right: 0px;
}
.chatFull .transparent:after {
  content:"Приятного общения!";
  font-family:arial;
  font-size: 16px;
  text-align:justify;
  text-shadow:3px 3px 10px green,-3px -3px 10px blue;color: #FFFFF0;
  position: absolute;
  top:5%; left:100px; bottom:0; right:100px;
  z-index: 1;
  opacity: 1;
}
.chatTopLine {
    border-radius:10px;
}
.chatSendButton {
    border-radius:10px;
}
.chatUserAway[title="Не беспокоить"] .chatUserWrapper {
opacity: 2;position: absolute;
-moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.chatUserAway[title="Отошел"], .chatPeople ul.chatPeopleList li[title="Отошел"].hover {
display: none;.chatUserAway[title="Отошел"] .chatUserWrapper
display: none;}
#join-chat-button2a:hover {
    background-color: #00ffff;
    border-radius: 20px 10px 20px 0;
    transition: .3s;
    background-image: url(http://s018.radikal.ru/i524/1708/5c/dcffeb0df2ae.jpg);
}#join-chat-button2 {
    border: 1px solid #ff5722;font-family: Monotype Corsiva;
font-style: normal;
font-size: 14pt;
    border-radius: 20px 10px 20px 0;
     background-image: url(http://www.100hdwallpapers.com/wallpapers/1920x1080/amazing_red_flower-hd_wallpapers.jpg);
}
.mod-icon {
    background-image: url("http://savepic.net/8248311m.png") !important;
}
.smilesBox {
    background-color: rgba(70, 212, 224, 0.93);
    position: absolute;
    left: 0;
    top: 0;
    width: 900px;
    height: 250px;
    overflow: auto;
    z-index: 100;
}
.chatPeople ul.chatPeopleList li.user-5 a.chatUser {
   color:#aa0000;
}
.chatTabs ul {
   height: 25px;
}
.chatHeader {
border-bottom: 1px solid #D4D2CB;
}
#chat_main.chatTab.chatTabActive a {
/* Общий активный */
    border-radius: 10px;
}
#chat_main.chatTab a {
/* Общий неактивный */
    border-radius: 10px;
}
#chat_0.chatTab.chatTabActive a {
/* Приват активный */
    border-radius: 10px;
}
#chat_0.chatTab.chatTab a {
/* Приват неактивный */
    border-radius: 10px;
}
.chatHeader::before {
    content: "Чат для общения и чтобы в нем ролить";
}
/* Кнопка отправки сообщения */
.chatSendButton {
    background-color: #777171; /* Цвет фона */
    border-radius: 25px; /* Закругление */
    border: 2px solid rgba(255, 255, 255, 0.4); /* Граница (кайма) */
}
/* Кнопка отправки сообщения при наведении */
.chatSendButton:hover {
    background-color: #81c784; /* Цвет фона */
    transition: .3s; /* Плавность смени цвета фона */
}
/* Кнопка отправки сообщения при нажатии */
.chatSendButton:active {
    background-color: #43a047; /* Цвет фона */
}
.chatPeople ul.chatPeopleList li a.chatUser {
    background: transparent url("http://smayli.ru/data/smiles/jivotnie-123.gif") no-repeat 0px 0px / 15px 15px;
    padding-left: 20px;
    padding-bottom: 0px;
    height: 50px;
}

.chatPeople ul.chatPeopleList li.user-5 a.chatUser {
   color:#aa0000;
}
.chatMain .chatMessages, .chatMain .chatPrivateMessages {
    line-height: 2.2em;
}
.chatHeader {
border-bottom: 1px solid #D4D2CB;
}
.chatMessageToMe .chatToUser {
        background-color: #216477;
    border: 1px solid #e1e5e6;
    border-radius: 2px;
    padding: 2px;
}
.chatTopLineWrapper > ul > li > a:hover {
    background-color: #4CAF50;
    border-radius: 15px;
    transition: .3s;
    color: #fff;
}
#join-chat-button{
     -webkit-animation-name: spin;
    -webkit-animation-duration: 8000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 8000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 8000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 8000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
    }
.chatUsersCount, .chatUsersCount::before, .chatUsersCount::after {
    color: red;
    position: relative;
    right: 5px;
}
#join-chat-button {
     border-radius: 25px; 
     background-color:#afefbf;
}
#join-chat-button:hover {
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
#join-chat-button, #join-chat-button2, #chat_main a, .chatTopLineWrapper > ul > li > ul > li > a, .chatTopLineWrapper ul li.chatMenuItemWithSeparator a, .justify, div.chatMessage span.chatUserFrom, .chatTabs ul, .chatTabs ul li.appTab a, .chatTopLineWrapper > ul > li > a, .chatTabs > ul > li.chatTab > a, .chatSendLinksPanel a.chatLinkSmiles, .chatSendLinksPanel .chatLinkImage, .has-user-id .chatLinkProfile, .chatSendLinksPanel a, .chatLinkGold, .chatLinkVip, .chatLinkModerate, .chatLinkMore, .chatSoundPanel a, .chatFooter .chatFooterWrapper .chatPanel .chatSendButtonPanel .chatSendButton, .chatPeople ul.chatPeopleList li, .chatPeople ul.chatPeopleList li a.chatUser {
    cursor: url(""), 
default;
}
#join-chat-button {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#join-chat-button, #join-chat-button2 {
    background: transparent url("http://www.playcast.ru/uploads/2015/01/31/11875746.gif") no-repeat scroll 0 0;
    background-position: center left;
    background-repeat: no-repeat;
    background-size: 100% 110%;
    border-radius: 25px 25px 25px 25px;
    box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #00FF00, 0 0 5px #F5DA81, 0 0 6px #F5DA81, 0 0 7px #F5DA81, 0 0 10px #F5DA81;
}
/* Кнопка входа */
#join-chat-button {
    background-color: #4caf50; /* Цвет фона */
    border: 5px solid rgba(255, 255, 255, 0.4); /* Граница (кайма) */
    color: #fff; /* Цвет текста */
    border-radius: 25px; /* Закругление */
    text-shadow: -1px 0 1px rgba(0, 0, 0, 0.25); /* Тень текста */
    font-size: 1em; /* Размер текста */
    transition: .3s; /* Плавность анимации */
    padding: 8px 14px;
    font-weight: normal;
    box-sizing: inherit;
    outline: none;
    cursor: pointer;
}

/* Кнопка входа при наведении */
#join-chat-button:hover {
    background-color: #81c784;
}
.chatSendExitPanel select {
    background-color: green;
}
.chatFooter .chatFooterWrapper .chatPanel .chatSendButtonPanel .chatSendButton {
    background-color: #aa0000;
}
.chatTopLine {
    border-radius:10px;
}
.chatSendButton {
    border-radius:10px;
}
.chatHeader {
   background-image: url(http://klumbik.net/uploads/images/b/a/e/3/2957/d4c9308c0d.png);
   background-position: center center;
   background-repeat:no-repeat;
}
/* Название чата по середине */
.chatHeaderWrapper .chatTitle {
    text-align: center;
    width: 100%;
}
/* Кнопка входа в чат */
#join-chat-button, #join-chat-button2 {
        font-weight: bold;
        padding: 4px 6px;

    
    font-family: Comic Sans MS, monospace;
    font-weight: bold;
    text-shadow: 1px 1px 1px #ffffff;
    
    background: green;
    border-radius: 40px 40px;
}

#join-chat-button:enabled { 
    -webkit-animation: keyEnterAnimBack 3s ease 1;
    animation: keyEnterAnimBack 1s ease 1;
}

#join-chat-button:hover {
    cursor: pointer;
    
    -webkit-animation: keyEnterAnim 3s ease 1;
    animation: keyEnterAnim 1s ease 1;
}