.chatHeader .chatHeaderWrapper:after { content:"НЕ ТВОЙ УРОВЕНЬ"; font-family: a_AlgeriusBlw; font-size: 11px; color:#FF6600; letter-spacing: 2px; position: absolute; top:80%; left:0px; bottom:0; right:0px; z-index: 1; -webkit-animation: l1_animation 40s linear infinite; -moz-animation: l1_animation 40s linear infinite; } 
@-webkit-keyframes l1_animation { 0%{left:100%;} 100%{left:-100%;} } 
@-moz-keyframes l1_animation { 0%{left:100%;} 100%{left:-100%;} } 

/*шапка*/ 
.chatHeader { 
color: transparent; 
text-shadow: 0px 0px 0 transparent; 
} 
.chatHeader .chatTitle { 
text-shadow: 0px 0px 0 transparent; 
} 

.chatHeader{ 
height:45px; 
width:100%; 
position: relative; 
background-image: url("http://imgs.su/users/70140/1488824861.gif "), url("http://x-lines.ru/glitter/g/032/062/40/0/kpzsg4mbpoogh3mwq7z.. "), url("http://imgs.su/users/70140/1489680601.png"); 
background-position: bottom 1px left 0, bottom left 50%, left 0px bottom; 
background-repeat: no-repeat, no-repeat, repeat-x ; 
background-size: auto 100%,auto 100%,102% 100%; 

border-image-width: 2px; 
border-image-source: url(http://imgs.su/users/70140/1488826733.gif); 
border-image-slice: 30; 
border-image-repeat: stretch; 


} 

/*Размер общей комнаты*/ 

chatMain .chatMessages, .chatMain .chatPrivateMessages { 
width:100%; 
} 

/*Текст в чате*/ 
.chatMain .chatMessages, .chatMain .chatPrivateMessages { 
font-family: Arial; 
font-weight: bold; 
font-size:20px; 
text-shadow: 1px 1px 0 #000; 

} 

/*Общий фон чата*/ 

.chatMain{ 
background-image: url("http://imgs.su/users/70140/1489680268.jpg"); 
background-position: left top; 
background-repeat:no-repeat; 
background-size: 100% 100%; 

border-image-width: 3px; 
border-image-source: url(http://imgs.su/users/70140/1488814776.gif); 
border-image-slice: 30; 
border-image-repeat: stretch; 
box-shadow: 0 0 1px #B1F4F8, 0 0 2px #B1F4F8, 0 0 3px #fff, 0 0 4px #fff, 0 0 8px #fff inset; 

} 

/*Фон в привате*/ 

.chatMain .chatPrivateMessages { 
background-image: url("https://3.bp.blogspot.com/-9wg77iZYABI/Vw4v1ygQPFI/AAAAAAACPJ.."); 
background-position: left top; 
background-repeat:no-repeat; 
background-size: 100% 100%; 

border-image-width: 3px; 
border-image-source: url(http://imgs.su/users/70140/1488814776.gif); 
border-image-slice: 30; 
border-image-repeat: stretch; 
box-shadow: -6px 6px 7px -4px #333; 
} 

/*Фон правой колонки*/ 
chatPeople { 
background-image: url("http://imgs.su/users/70140/1489680758.jpg "); 
background-position: center center; 
background-repeat: no-repeat; 
background-size: 150% 110%; 

border-image-width: 5px; 
border-image-source: url(http://imgs.su/users/70140/1488815108.gif); 
border-image-slice: 30; 
border-image-repeat: stretch; 

box-shadow: -6px 6px 7px -4px #333; 
} 

/*Выдвигающаяся правая колонка*/ 

chatMain .chatPeople{ 
width:172px; 
height:39px; 

background-color: transparent; 
transition:height 0.6s; 
transition-timing-function:linear; 
/* Firefox 4 */ 
-moz-transition:height 0.6s; 
-moz-transition-timing-function:linear; 
/* Safari and Chrome */ 
-webkit-transition:height 0.6s; 
-webkit-transition-timing-function:linear; 
/* Opera */ 
-o-transition:height 0.6s; 
-o-transition-timing-function:linear; 
} 

.chatMain .chatPeople:hover 
{ 
height:98%; 
} 


/*Фон футера*/ 

.chatFooter .chatFooterWrapper{ 
background-image: url("http://imgs.su/users/70140/1489681231.png "); 
background-position: center center; 
background-repeat: repeat-x; 
background-size: 100% 100%; 

border-image-width: 3px; 
border-image-source: url(http://imgs.su/users/70140/1488815108.gif); 
border-image-slice: 30; 
border-image-repeat: stretch; 
box-shadow: -2px -2px -2px #B1F4F8, -4px -4px -4px #B1F4F8, -8px -8px -8px #B1F4F8, -16 -16 -16px #2F2BAD, -32 -32 -32px #2F2BAD; 
} 

/*Кнопки меню справа в верху*/ 

.chatTopLine{ 
background-image:url("http://imgs.su/users/70140/1489680601.png "); 
background-position: center center; 
background-repeat: no-repeat; 
background-size:
100% 100%; 
border-image-width: 5px; 
border-image-source: url(http://imgs.su/users/70140/1488815108.gif); 
border-image-slice: 30; 
border-image-repeat: stretch; 
border-radius: 5px; 
} 

.chatTopLineWrapper > ul > li > a:hover { 
background-image: url("http://www.hiperinfo.ru/2background1/blue073-2-.jpg "); 
background-position: center center; 
background-repeat: no-repeat; 
background-size: 100% 100%; 
color: #fff; 
border-image-width: 5px; 
border-image-source: url(http://imgs.su/users/70140/1488815108.gif); 
border-image-slice: 30; 
border-image-repeat: stretch; 
border-image-radius: 15px; 
box-shadow: 0 0 2px #B1F4F8, 0 0 4px #B1F4F8, 0 0 6px #fff, 0 0 8px #fff, 0 0 10px #fff; 

} 

/*Лист анкета в верхнем правом углу*/ 

.chatTopLineWrapper ul li ul { 
display: block; 
left: -150px; 
top: 40px; 
visibility: visible; 
width: 197px; 
margin: 15px 0 0 0; 

} 

.chatTopLineWrapper ul li ul { 
background-image: url("https://img-fotki.yandex.ru/get/6202/52732579.af/0_976e9_6c97.. "); 
background-position: center center; 
background-repeat: no-repeat; 
background-size: 105% 112%; 
border-image-width: 10px; 
border-image-source: url(http://imgs.su/users/70140/1488815108.gif); 
border-image-slice: 30; 
border-image-repeat: stretch; 
border-radius: 5px; 
padding: 10px 10px 10px 10px; 

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), -23px 0 20px -23px rgba(0, 0, 0, 0.8), 23px 0 20px -23px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.1) inset; 

} 

.chatTopLineWrapper ul li ul:hover { 
border-image-width: 10px; 
border-image-source: url(http://imgs.su/users/70140/1488815108.gif); 
border-image-slice: 30; 
border-image-repeat: stretch; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), -23px 0 20px -23px rgba(255, 0, 0, 0.8), 23px 0 20px -23px rgba(255, 255, 0, 0.8), 0 0 40px rgba(255, 255, 255, 0.1) inset; 
-webkit-transform: scale(1.1); 
-ms-transform: scale(1.1); 
transform: scale(1.1); 
} 

.chatTopLineWrapper > ul > li > ul > li > a:hover { 
background-color: #FFFCB9; 
opacity: 1; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), -23px 0 20px -23px rgba(255, 0, 0, 0.8), 23px 0 20px -23px rgba(255, 255, 0, 0.8), 0 0 40px rgba(255, 255, 255, 0.1) inset; 
} 

.chatTopLineWrapper > ul > li > ul > li > a{ 
font-family:Lobster; 
font-size: 16px; 

color:#ff0000; 
} 


/*текст на кнопках в общей комнате*/ 
.chatTabs > ul > li.chatTab > a { 
font-weight: bold; 
color: #fff; 
} 

.chatTabs > ul > li.chatTab.chatTabActive > a, .chatTabs > ul > li.chatTab > a:hover, .chatTabs > ul > li.chatTab > a.active { 
font-weight: bold; 
color: #FFF; 
} 

/*Кнопки общей и приват комнате*/ 

.chatTabs > ul > li.chatTab.chatTabActive > a, .chatTabs > ul > li.chatTab > a:hover, 
.chatTabs > ul > li.chatTab > a.active { 
background-image: url("http://imgs.su/users/70140/1489680601.png "); 
background-position: center center; 
background-repeat: no-repeat; 
background-size: 100% 100%; 
border-image-width: 5px; 
border-image-source: url(http://imgs.su/users/70140/1488815108.gif); 
border-image-slice: 30; 
border-image-repeat: stretch; 
border-radius: 5px; 

} 

.chatTabs > ul > li.chatTab > a { 
background-image: url("http://www.hiperinfo.ru/2background1/blue073-2-.jpg "); 
background-position: center center; 
background-repeat: no-repeat; 
background-size: 100% 100%; 

border-image-width: 5px; 
border-image-source: url(http://imgs.su/users/70140/1488815108.gif); 
border-image-slice: 30; 
border-image-repeat: stretch; 
border-radius: 5px; 
} 

/* Панель вкладок приложений*/ 

.chatTabs { 
height: 37px; 
left: 0; 
position: absolute; 
right: 171px; 
top: 0; 
} 

.chatTabs { 
background-image: url("http://imgs.su/users/70140/1489680601.png "); 
background-position: center center; 
background-repeat: no-repeat; 
background-size: 100% 100%; 
border-image-width: 3px; 
border-image-source: url(http://imgs.su/users/70140/1489680601.png); 
border-image-slice: 30; 
border-image-repeat: stretch; 

border-radius: 5px; 

} 


/*Сколько человек в чате*/ 

.chatPeople .chatPeopleTitle{ 
margin: 0 0 0
0;} 

.chatPeople .chatPeopleTitle{ 
height:26px; 
width:179px; 
} 

.chatPeople .chatPeopleTitle { 
background-image: url("http://imgs.su/users/70140/1489680601.png "); 
background-position: center center; 
background-repeat: no-repeat; 
background-size: 105% 100%; 
padding: 13px 0 0 15px; 
box-shadow: 0 1px 4px rgba(255, 255, 255, 0.8) inset; 
border-image-width: 5px; 
border-image-source: url(http://imgs.su/users/70140/1488818600.gif); 
border-image-slice: 30; 
border-image-repeat: stretch; 
border-radius: 5px; 

} 

/*выделение ников справа посетителей*/ 

.chatPeople ul.chatPeopleList li { 
background-image: url("https://img-fotki.yandex.ru/get/6202/52732579.af/0_976e9_6c97.. "); 
background-position: center center; 
background-repeat: no-repeat; 
background-size: 105% 112%; 
border-image-width: 1px; 
border-image-source: url(http://imgs.su/users/70140/1488818792.gif); 
border-image-slice: 30; 
border-image-repeat: stretch; 
padding: 10px 10px 10px 10px; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), -23px 0 20px -23px rgba(0, 0, 0, 0.8), 23px 0 20px -23px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.1) inset; 

} 

.chatPeople ul.chatPeopleList li.hover { 
background-image: url("https://img-fotki.yandex.ru/get/6202/52732579.af/0_976e9_6c97.. "); 
background-position: center center; 
background-repeat: no-repeat; 
background-size: 105% 112%; 
border-image-width: 1px; 
border-image-source: url(http://imgs.su/users/70140/1488826733.gif); 
border-image-slice: 30; 
border-image-repeat: stretch; 
padding: 10px 10px 10px 10px; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), -23px 0 20px -23px rgba(0, 0, 0, 0.8), 23px 0 20px -23px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
} 

/*ники в общей*/ 



div.chatMessage span.chatUserFrom { 
font-size: 14px; 
font-weight: bold; 
text-shadow: 1px 1px 1px #000; 
font-family: serif; 
padding: 0px 10px 0px 10px; 
} 

/*Мигание ников*/ 

.chatMessageToMe .chatToUser { 

padding: 0px 10px 0px 10px; 
background: Violet; 
position: relative; 
/* Chrome, Safari, Opera */ 
-webkit-animation-name: myfirst; 
-webkit-animation-duration: 5s; 
-webkit-animation-timing-function: linear; 
-webkit-animation-delay: 4s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 
-webkit-animation-play-state: running; 
/* Standard syntax */ 
animation-name: myfirst; 
animation-duration: 5s; 
animation-timing-function: linear; 
animation-delay: 4s; 
animation-iteration-count: infinite; 
animation-direction: alternate; 
animation-play-state: running; 
border-radius:3px; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes myfirst { 
0% {background:DeepSkyBlue ;} 
25% {background:lightblue;} 
50% {background:DarkViolet ;} 
75% {background:DeepSkyBlue ;} 
100% {background:Red;} 
} 

/* Standard syntax */ 
@keyframes myfirst { 
0% {background:DeepSkyBlue ;} 
25% {background:Violet;} 
50% {background:DarkViolet ;} 
75% {background:DeepSkyBlue ;} 
100% {background:Red;} 
} 


/*Выделение пунктов меню, в меню справа в верху*/ 

.chatTopLineWrapper > ul > li > ul > li > a:hover { 
background-color: #65E5E6; 
opacity: 1; 
} 

/*Иконки у ников справа*/ 

.chatUserVip { 
background: transparent url("http://imgs.su/users/70140/1489682312.gif") no-repeat scroll 0 0; 
} 
.chatUserSex1, .chatUserSex2, .chatUserSex0 { 
float: left; 
} 
.chatUserSex1 b, .chatUserSex2 b, .chatUserSex0 b { 
float: left; 
height: 16px; 
width: 16px; 
} 
.chatPeople ul.chatPeopleList li a.chatUser { 
color: #fff; 
font-family: Arial; 
font-weight: bold; 

word-wrap: break-word; 
} 

/*Бегущая строка в футере чата*/ 

.chatFooter .chatFooterWrapper:after { content:"СОЗДАТЕЛЬ ЧАТА НЕЖНАЯ"; font-family:arial; font-size: 11px; color:#FF0099; letter-spacing: 2px; position: absolute; top:80%; left:0px; bottom:0; right:0px; z-index: 1; -webkit-animation: l1_animation 40s linear infinite; -moz-animation: l1_animation 40s linear
infinite; } 
@-webkit-keyframes l1_animation { 0%{left:100%;} 100%{left:-100%;} } 
@-moz-keyframes l1_animation { 0%{left:100%;} 100%{left:-100%;} } 

/*Новость при входе в чат*/ 

.chatMessage.type-news{ 
width: 50%; 
height: auto; 
background: #b1f4f8; 
position: relative; 
right: -20%; 

border-radius: 5px; 
box-shadow: 2px 2px 2px 2px #006E86; 
/* Chrome, Safari, Opera */ 
-webkit-animation-name: myfirst; 
-webkit-animation-duration: 5s; 
-webkit-animation-timing-function: linear; 
-webkit-animation-delay: 2s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 
-webkit-animation-play-state: running; 
/* Standard syntax */ 
animation-name: myfirst; 
animation-duration: 5s; 
animation-timing-function: linear; 
animation-delay: 2s; 
animation-iteration-count: infinite; 
animation-direction: alternate; 
animation-play-state: running; 
} 

/*Кнопка отправки сообщений*/ 

.chatFooter .chatFooterWrapper .chatPanel .chatSendButtonPanel .chatSendButton { 
background-image: url("https://forumupload.ru/uploads/2015/01/31/11875746.gif "); 
background-position: center center; 
background-repeat: no-repeat; 
background-size: 100% 100%; 
border: 1px solid blue; 
color: #fff; 
font-weight: bold; 
border-radius: 5px; 


box-shadow: 0 0 2px #B1F4F8, 0 0 4px #B1F4F8, 0 0 8px #B1F4F8, 0 0 16px #2F2BAD, 0 0 32px #2F2BAD; 

} 

/*Сверкающий фон или текст*/ 

.chatFooter:after, .chatFooter:before { 
content: ""; 
position: absolute; top: 0; left: 0; 
display: block; width: 50%; height: 50%; 
background-image: 
radial-gradient(rgba(255,255,255,1), rgba(255,255,255,0) 30%), 
linear-gradient(45deg, rgba(0,0,0,0) 49%, rgba(255,255,255,.4) 50%, rgba(0,0,0,0) 51%), 
linear-gradient(135deg, rgba(0,0,0,0) 49%, rgba(255,255,255,.4) 50%, rgba(0,0,0,0) 51%); 
-webkit-animation: blink6 10s linear infinite; animation: blink6 10s linear infinite; 
transform: scale(0, 0) rotate(0deg); 
} 

.chatFooter:before { 
top: -200px; 
right: 0; left: auto; 
-webkit-animation-delay: 5s; animation-delay: 5s; } 

/*Окно смайлов*/ 

.chatEventDiv, .chatPopupMenuDiv1, .chatPopupMenuDiv2, .smilesBox.hover { 
background: transparent url(http://mirgif.com/priroda/peyzazh25.gif); 
background-position: center center; 
background-repeat:no-repeat; 
background-size: 100% 100%; 
padding:5px 0px 0px 10px; 
border: 1px solid #FED629; 
border-radius:5px 5px 5px 5px; 
box-shadow:2px 2px 1px #555; 
} 

.chatEventDiv, .chatPopupMenuDiv1, .chatPopupMenuDiv2.hover{ 
background: transparent url(http://mirgif.com/priroda/peyzazh25.gif); 
background-position: center center; 
background-repeat:no-repeat; 
background-size: 100% 100%; 

border: 1px solid #FED629; 
border-radius:5px 5px 5px 5px; 
box-shadow:2px 2px 1px #555; 
} 

.smilesBox{ 
background: transparent url(http://mirgif.com/priroda/peyzazh25.gif); 
background-position: center center; 
background-repeat:no-repeat; 
background-size: 100% 100%; 
border: 1px solid #FED629; 
border-radius:5px 5px 5px 5px; 
box-shadow:2px 2px 1px #555; 
} 

.smilesBox { 
position: absolute; 
left: 0px; 
top: 0px; 
width: 98%; 
height: 250px; 
overflow: auto; 
z-index: 98; 
} 

/*блок входа в чат*/ 
/*кнопка входа в чат*/ 

#join-chat-button, #join-chat-button2 { 
background: transparent url("http://imgs.su/users/70140/1488885778.gif ") no-repeat scroll 0 0; 
background-position: center center; 
background-repeat: no-repeat; 
background-size: 100% 190%; 
font-size:12px; 
width: 100px; 
height: 28px; 
border: 2px solid #fff; 
border-radius: 5px; 
color: #fff; 
padding: 0 10px 0 10px; 

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; 
} 

/*Страница входа*/ 

.chatFull .transparent { 
background: url(http://imgs.su/users/70140/1489682821.jpg); 
background-position: right bottom; 
background-repeat: repeat-x; 
background-size: 100% 100%; 
color: #fff; 
font-weight: bold; 
border-image-width: 10px; 
border-image-source:
url(http://imgs.su/users/70140/1488832306.gif); 
border-image-slice: 30; 
border-image-repeat: stretch; 
} 

/*Время*/ 

.chatTime { 
position: absolute; 
right: 5px; 
visibility: hidden; 
padding:2px 10px 2px 10px; 
color: #F0294C; 
float: right; 
font-size: 8pt; 
font-style: normal; 
} 


/*Гугле*/ 

@-webkit-keyframes blink6 { 
10% { transform: scale(1, 1) rotate(80deg); } 
20% { transform: scale(0, 0) rotate(160deg); } 
100% { transform: scale(0, 0) rotate(0deg); } 
} 

@keyframes blink6 { 
10% { transform: scale(1, 1) rotate(80deg); } 
20% { transform: scale(0, 0) rotate(160deg); } 
100% { transform: scale(0, 0) rotate(0deg); } 
} 

@-webkit-keyframes l3_animation { 
0% {color: rgb(0,0,255); } 
20% {color: rgb(0,255,255); } 
40% {color: rgb(255,0,0); } 
60% {color: rgb(255,255,0); } 
80% {color: rgb(255,255,255); } 
100% {color: rgb(0,0,255); } 
} 

@-moz-keyframes l3_animation { 
0% {color: rgb(0,0,255); } 
20% {color: rgb(0,255,255); } 
40% {color: rgb(255,0,0); } 
60% {color: rgb(255,255,0); } 
80% {color: rgb(255,255,255); } 
100% {color: rgb(0,0,255); } 
} 

@-webkit-keyframes l1_animation { 
0%{left:100%;} 
100%{left:-100%;} 
} 
@-moz-keyframes l1_animation { 
0%{left:100%;} 
100%{left:-100%;} 
}

.chat {
text-shadow: 0px 0px 0 #000;
background-color: transparent;
background-image: url("http://storage.ruelsoft.org/storage/file/get/1428829230044 ");/*Картинку анимации можно свою ставить */
background-position: right 0 bottom 0;
background-repeat: no-repeat;
background-size: 150% auto;

border: 5px solid #fff;
border-radius: 60px 60px 60px 60px;/*настройка скругления*/

 box-shadow:1px 1px 6px #000,-1px -1px 1px #fff;