/*
Theme Name: Dawn
Theme URI: https://madeas.ru/product/dawn/
Author: Andrej Sharapov 
Author URI: https://madeas.ru/ 
Description: Dawn ChaTemplate is an evolving project where you can find an interesting template to improve your favorite chatovod chat service, and also join a huge community of users who want to transform their chat. 
Version: 1.0.0

License: GNU General Public License v2 or later 
License URI: http://www.gnu.org/licenses/gpl-2.0.html 
Text Domain: dawn
Tags: madeas, chatemplate, design, template, chatovod, dawn, chat-colors, chat, full-width-template, new-web-design, madeas.ru, andrej-sharapov

This theme, like Chatovod, is licensed under the GPL. 
Use it to make something cool, have fun, and share what you've learned with others. 
*/

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,600,700,700italic,600italic,400italic&subset=latin,cyrillic,latin-ext,cyrillic-ext);
 body:not(.has-nick) .chatTopLine,
 body:not(.has-nick) .chatTabs {
    display: none;
}
.chat,
.chatMain,
#scrollBottomBox,
.smoke,
.dialog-buttons button,
.dialog-prompt input,
 input[type="button"],
 input[type="submit"] {
    font-family: 'Open Sans', Lucida Grande, sans-serif;
}
 input[type="button"],
 input[type="submit"],
.chatSendExitPanel select {
    outline: none;
}
 a,
 a:hover,
.smilesBox p,
.chatPopupMenuDiv2 .chatPopupMenuContent p,
.chatFooter .chatFooterWrapper .chatPanel div a span {
   text-decoration: none!important;
}
.chat { 
    border:0;
}
.chatFooter .chatFooterWrapper .chatPanel div a span {
  border-bottom: none!important;
}
.chatMain {
    background: transparent url(https://hieventsgroup.com/images/sport-sport-mecanique-formule-1-grand-prix-de-spa-francorchamps-belgique-02.jpg) 0 0 no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom:-63px;
    margin-top: -46px;
}
.chatFull .transparent {
    background: transparent url(https://million-wallpapers.ru/wallpapers/6/64/318284564844345/spa-cepi.jpg) 0 0 no-repeat;
    background-size: cover;
    margin-top:-24px;
    opacity:1;
}
 input[type="button"],
 input[type="submit"] {
   border:2px solid #fde910;
   background-color: #fde910;
   font-weight: 400!important;
   padding: .75em 1.25em!important;
}
 input[type="button"]:hover,
 input[type="submit"]:hover {
    border-color: #ffd700;
}
 input[type="button"]:active,
 input[type="submit"]:active {
    background-color: #ffd700;
    border-color: #ffd700;
}
.chatHeader:hover .chatTitle,
.chatFooter .chatFooterWrapper .chatPanel div a span,
.justify a,
.chatLinkVip::after,
.chatLinkModerate::before,
.chatPopupMenuDiv2 .chatPopupMenuContent p,
.chatPopupMenuDiv2 .chatPopupMenuContent a,
#account-info a,
.chatPeople ul.chatPeopleList li .chatUserMenu .chatUserMenuItems ul li a {
    color:#fff;
}
.justify a {
    padding: .55em 1.25em!important;
    border:1px solid #ddd;
    text-decoration: none;
}
.justify a:hover {
    border-color: #fff;
}
.content form {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -150px;
  width: 300px;
  height: 310px;
  color: rgba(255, 255, 255, 0.85);
  display: inline-block;
  font-size: 16px;
  padding: 8px 12px;
  text-decoration: none;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.3)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
  -webkit-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 1px 0px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 1px 0px rgba(255, 255, 255, 0.3);
  box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 1px 0px rgba(255, 255, 255, 0.3);
  border: 1px solid #555;
}
 input[type="text"] {
    font-size: 120%;
    color: #fff;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 45px;
    padding: .3em 20px .3em 40px!important;
    width: 270px;
    background: rgba(0, 0, 0, 0.4);
    border: 0;
    box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.8) inset;
}
 input[type="text"]:focus {
    outline-color: #ffd700;
}
#account-info {
    margin: .5em;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-weight: 900;
}
#account-info a {
    -webkit-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 0 0px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 0 0px rgba(255, 255, 255, 0.3);
    box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 0 0px rgba(255, 255, 255, 0.3);
    border-top: 1px solid #000;
    word-spacing: -1;
}
#account-info a {
  position: absolute;
  display: inherit;
  text-transform: uppercase;
  text-align: center;
  padding: .75em 1.25em!important;
  -webkit-animation: slideOut 0.6s ease-in-out 0.9s backwards;
  -webkit-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 0 0px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 0 0px rgba(255, 255, 255, 0.3);
  box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 0 0px rgba(255, 255, 255, 0.3);
  border-top: 1px solid #000;
  word-spacing: -1;
  width: 284px;
  margin-left:-20px;
  bottom:20px;
}
@-webkit-keyframes slideOut {
	0% {bottom:-30px; opacity: 0;}
	100% {bottom:0px; opacity: 1;}
}
#nick {
    background: transparent url(http://madeas.usite.pro/ChaTemplate/icon/log_user_icon.png) 10px center no-repeat /25px 25px;
}
#captcha-input {
    background: transparent url(http://madeas.usite.pro/ChaTemplate/icon/log_closed_icon.png) 10px center no-repeat /22px 22px;
}
#sign-in-label a {
    display: inherit;
    width: 100%;
    padding: 0.75em 0;
    font-weight: normal;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
    background-color: #fde910;
    color: #000!important;
    -webkit-transition: 0.1s all linear;
    -moz-transition: 0.1s all linear;
    -ms-transition: 0.1s all linear;
    -o-transition: 0.1s all linear;
    transition: 0.1s all linear;
}
.chatHeader {
  background-color: #fde910;
}
.chatHeader:hover {
  background-color: #ffd700;
}
.chatHeader .chatTitle,
.chatTopLineWrapper ul li.chatMenuItemWithSeparator a {
    text-shadow: none;
}
.chatHeader .chatTopLine {
    background-color: #fde910;
    border-color:#ffd700;
}
.chatHeader .chatTopLine:hover {
    background-color: #fde910;
    border-color: #fde910;
}
.chatTopLineWrapper ul li.chatMenuItemWithSeparator a:hover {
    background-image: url(http://st1.chatovod.ru/i/widget/vborder.png);
    background-repeat: repeat-y;
    background-position: right top;
    color:#fff;
    text-shadow: none;
}
.chatTopLineWrapper > ul > li > a:hover {
    background-color: #ffd700;
}
.chatTabs {
    right: 170px;
}
.chatMain::after {
    position:absolute;
    bottom:60px;
    right:20px;
    content:'ChaTemplate';
    color: rgba(255,255,255,.2);
    font-size:9px;
}
.chatMessages.vscrollable,
.chatPrivateMessages.vscrollable {
  margin-bottom:90px;
}
.chatMessages.vscrollable,
.chatPrivateMessages.vscrollable,
.chatTabs {
  margin-top: 44px;
}
.chatMain .chatMessages, 
.chatMain .chatPrivateMessages {
  position: absolute;
  left: 15px;
  right: 15px;
  padding:5px;
  border: 1px solid #555;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.3)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));  
  -webkit-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 1px 0px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 1px 0px rgba(255, 255, 255, 0.3);
  box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 1px 0px rgba(255, 255, 255, 0.3);
}
.chatMain .chatPeople {
  top:47px;
  height:35px;
  transition:.7s;
  border: 0;
  overflow-y: hidden;
}
.chatMain .chatPeople:hover {
  height: auto;
  border:0;
  background-color: rgba(0, 0, 0, 0.3);
}
.chatPeople.vscrollable {
    border-left:0;
}
.chatPeople .chatPeopleTitle {
    width:100%;
    text-align: center;
    margin-top: 10px;
    line-height:2.4em;
}
.chatFooter {
    background-image: none!important;
    background: none!important;
    border-top:0;
    bottom: 20px;
}
.chatFooter .chatFooterWrapper .chatPanel .chatSendTextPanel {
    right:117px !important;
    left: 104px !important;
}
.chatFooter .chatFooterWrapper .chatPanel .chatSendButtonPanel {
    left: 16px!important;
    right: 100%!important;
}
.chatFooter .chatFooterWrapper .chatPanel .chatSendButtonPanel .chatSendButton {
    height: 45px;
    line-height: 25px;
    padding:0!important;
}
.chatSendExitPanel select {
    position: absolute;
    top:22px!important;
    background-color: transparent;
    border-color:#f4f4f4;
    color:#fff;
}
.chatSendExitPanel select:hover {
    border-color:#fff;
}
.chatSendExitPanel select option {
    color:#ccc;
}
.chatFooter .chatFooterWrapper .chatPanel div.chatSoundPanel {
    top: 30px;
}
.chatFooter .chatFooterWrapper .chatPanel .chatSendLinksPanel {
    -webkit-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 0 0px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 0 0px rgba(255, 255, 255, 0.3);
    box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 0 0px rgba(255, 255, 255, 0.3);
    border-top: 1px solid #000; 
    border-bottom: 1px solid #555;  
    background-color: rgba(0,0,0,.3);
    padding: .75em 1.25em!important;
    top:-10px;
    right: 15px;
    left: 15px;
}
.chatFooter .chatFooterWrapper .chatPanel .chatSendLinksPanel:hover {
    background-color: rgba(0,0,0,.6);
}
.chatLinkVip {
    margin-right: 33px!important;
}
.chatLinkVip::after {
    position:absolute;
    content:'vip';
    margin-left:21px;
}
.chatLinkModerate { 
    margin-right: 51px!important;
}
.chatLinkModerate::before {
    position: absolute;
    content:'модер';
    margin-left:21px;
}
.chatLinkMore {
    padding-left:21px;
    background: transparent url('http://madeas.usite.pro/ChaTemplate/icon/icon_plus.png') 0 0 no-repeat;
}
.chatPopupMenuDiv1 ,
.chatPopupMenuDiv2 {
    background-color: rgba(0,0,0,.5);    
    -webkit-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 1px 0px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 1px 0px rgba(255, 255, 255, 0.3);
    box-shadow: inset -1px 1px 0px rgba(255, 255, 255, 0.3), inset 1px 1px 0px rgba(255, 255, 255, 0.3);
    border-color:#333;
}
.chatPopupMenuDiv2:hover {
    background-color: rgba(0,0,0,.8); 
}
.chatTopLineWrapper ul li ul {
    background-color: #fde910;
    border:1px solid #ffd700;
}
.chatTopLineWrapper > ul > li > ul {
    top:27px !important;
    width:178px!important;
}
.chatTopLineWrapper > ul > li > ul > li > a:hover {
    background-color: #ffd700;
    color: #fff;
}
#chatMainMenuChatovod {
    margin-left:-12px;
}
#chatMainMenuChat {
    margin-left:55px;
}
.smilesBox {
    margin-top:1px;
    margin-left:-3px;
    width: 313px;
    height: 240px;
    padding:5px;
}
.chatPopupMenuContent input[type="submit"],
.chatPopupMenuContent input[type="text"] {
    padding:3px 5px!important;
    height: auto;
}
.chatSendText.chatInputText {
    background: rgba(0, 0, 0, 0.4) url(http://madeas.usite.pro/ChaTemplate/icon/text_icon.png) 10px center no-repeat /25px 25px;
}
.chatSendText.chatInputText:focus {
    background: rgba(0, 0, 0, 0.6) url(http://madeas.usite.pro/ChaTemplate/icon/text_icon.png) 10px center no-repeat /25px 25px;
}
.vscrollable::-webkit-scrollbar,
.smilesBox::-webkit-scrollbar {
    width: 9px;
    height: 4px;
}
.smilesBox::-webkit-scrollbar-thumb,
.vscrollable::-webkit-scrollbar-thumb {
    background-color: #ffd700;
}
.smilesBox::-webkit-scrollbar-thumb:hover,
.vscrollable::-webkit-scrollbar-thumb:hover {
    background-color: #fde910;
}
.smilesBox::-webkit-scrollbar-track,
.vscrollable::-webkit-scrollbar-track {
    background-color: rgba(207,207,201,.3);
}
.vscrollable::-webkit-scrollbar-track,
.vscrollable::-webkit-scrollbar-thumb {
    margin-top:1px;
}
#join-chat-button {
    position: absolute;
    top:30px!important;
}
#chatUserMiniMenu {
    box-shadow: 0 10px 30px rgba(25,43,55,.1);
    background-color: #fde910;
    border-color: #ffd700;
}
#scrollBottomBox {
    -moz-border-radius:0;
    -webkit-border-radius:0;
    border-radius:0;
    margin-top:0;
}
.chatPeople ul.chatPeopleList li.hover {
    border-top:1px solid rgba(51,51,51,.50);
    border-bottom:1px solid rgba(51,51,51,.50);
    background-color: rgba(0,0,0,.6);
}
.chatHeader,
.chatTitle,
.chatHeader .chatTopLine:hover,
.chatPeople ul.chatPeopleList li.hover,
.chatPopupMenuDiv2,
.chatFooter .chatFooterWrapper .chatPanel .chatSendLinksPanel {
    -webkit-transition: 0.4s all linear;
    -moz-transition: 0.4s all linear;
    -ms-transition: 0.4s all linear;
    -o-transition: 0.4s all linear;
    transition: 0.4s all linear;
}




ДОПОЛНЕНИЕ
.chatHeader {
background-image: url(//st1.chatovod.ru/i/logo-trans.png);
background-position: center center;
background-repeat:no-repeat;
}