* { font-family: arial; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; font-size: 13px; } body { margin: 0; padding: 0; min-width:400px; } header { position: relative; height: 52px; white-space: nowrap; background: url(../images/chat/bck-chat-header.jpg); } header h2{ display: inline-block; font-size:19px; font-weight: bold; color: #fff; vertical-align: top; } ul { margin:0; padding:0; list-style:none; } .hide { display:none !important; } .block { display:block; float:left; width:100%; } .relative { position:relative; } .table { float:left; width:100%; display:table; } .table-cell{ position:relative; display:table-cell; } .span50px { width:50px; color:#a4abba; font-size:11px; line-height:25px; } /* fixed */ .fixed .message-list{ width:auto; right:235px; } /* хак для ОПЕРЫ */ noindex:-o-prefocus,.fixed .message-list { bottom:103px; } .fixed .right-block{ width:235px; } .fixed .message-enter { width:auto; right:235px; } /* SCROLL FIX */ .message-list { margin-top:15px; padding-right:6px; } /* fix for */ .message-list #message-list{ display:block; height:100%; } .scroll-fix .mCSB_scrollTools .mCSB_dragger{ margin-top: 0; width:100%; left:0; } .scroll-fix .mCustomScrollBox .mCSB_scrollTools { width:auto; } .scroll-fix .mCSB_scrollTools .mCSB_draggerContainer{ width: 10px; position: absolute; right: 0; top: 0; background: #E4E6EB; border-right: 1px solid #D6D9E3; border-bottom: 1px solid #D6D9E3; border-radius: 5px; } /* scroll fix */ /* ОКНО СООБЩЕНИЙ */ .message-list { position:fixed; top:52px; left:0; bottom:88px; width:70%; } .message-list .hidden{ position: absolute; z-index: 1000; left: 0; right: 16px; bottom: 0; height: 11px; background: url(../images/chat/hide-b.png); } .message-list ul{ float:left; width: 100%; padding: 0 28px 0 10px; list-style:none; } .message-list ul > li { float:left; width: 100%; margin-top:5px; padding-bottom:7px; border-bottom:1px solid #edeff2; } .message-list ul li ul li { padding-bottom:0px;/**/ } .message-list ul > li.no-border { border:0; } .message-list ul li .date{ float:left; padding: 5px 7px; margin-left:40px; font-size: 13px; background: #edeff3; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .message-list ul li .icon-man-white { padding-left: 18px; font-size:11px; font-weight:bold; line-height:18px; white-space: nowrap; } .message-list-sub { float:left; width: 100%; padding:0 3px 3px 3px!important; } .message-list-sub > li { float:left; width:100%; padding-bottom:15px; border:0 !important; } .message-list-sub > li:last-child { padding-bottom: 0; } .hidden-button { position:relative; line-height:17px; } .hidden-button .btn-small{ display: none; } .hidden-button:hover .btn-small{ display: inline; } .hidden-button:hover { padding-right: 70px; } /* ОКНО ВВОДА СООБЩЕНИЯ */ .message-enter { position:fixed; bottom:0; left:0; width:70%; height:88px; } .message-enter input{ outline:none; } .message-enter .decorate-border { position:absolute; top:15px; left:15px; right:15px; bottom:15px; } .message-enter textarea{ overflow:hidden; position:absolute; top:0; left:0; width:100%; height:100%; outline:none; font-size:13px; padding:5px 120px 5px 10px; resize:none; border:1px solid #abadb3; } .message-enter .btn{ position:absolute; top: 28px; right:40px; } /* ОКНО СПИОК КОНТАКТОВ */ .right-block { position:fixed; top:0; bottom:0; right:0; width:30%; background:#edeff3; } .right-block .ttl { float:left; width:100%; line-height:30px; margin-bottom:10px; } .right-block .h-online { display:inline-block; float:left; font-size:19px; font-weight: bold; color:#608d18; } .right-block .icon-man-gray { display:inline-block; float:right; } .full-topics .contact-list{ display:none; } .full-topics .chat-topics{ top:0; bottom: 75px; padding: 10px 10px 10px 15px; } .full-topics .contact-list-cont .block{ position:fixed; bottom:10px; background:#edeff3; } #contact-list-cont2 { height:100%; } .contact-list { position:absolute; top:0; left:0; width:100%; bottom:300px; padding:10px 10px 10px 15px; } .contact-list-cont{ float:left; width:100%; } .contact-list #contact-list-cont { height:100%; } .contact-list-cont ul { float:left; width:100%; padding-right:25px; } .contact-list-cont ul li { border-bottom:1px solid #dfdfdf; padding:5px 0; line-height:160%; } .contact-list-cont ul li.no-border { border:0; } .contact-list-cont ul li:last-child { border-bottom:0; } .contact-list-cont ul li img{ vertical-align:middle; } .contact-list-cont ul li span{ vertical-align:middle; margin-left:7px; } .contact-list-cont ul li a{ font-size: 13px; color: #373e48; text-decoration: none; border-bottom: 1px dotted #98a0ac; } .contact-list-cont ul li a:hover{ color: #3C6B05; } .chat-topics { position:absolute; left:0; width:100%; bottom:0; padding:40px 10px 10px 15px; } .chat-topics .icon-message { float:right; } .chat-topics .ttl { margin-bottom:0; padding-bottom:10px; background: #edeff3; } .chat-topics .h-mor { display:inline-block; float:left; font-size:19px; font-weight: bold; color:#000; } .chat-topics .contact-list-cont { background: #edeff3; } .chat-topics .contact-list-cont ul li { padding: 8px 0; } .toggle-panel { position: absolute; width:100%; height:50px; bottom: 0; right: 0; } a.special{ display:inline-block; margin: 10px 0; font-size: 13px; color: #a4abba; text-decoration: none; border-bottom: 1px dotted #98a0ac; } a.special:hover{ color: #3C6B05; } /* КНОПКИ - ИКОНКИ */ .icon-man.gray { background: url(../images/chat/icon-man.png) no-repeat 2px 1px #e2e2e4; color:#373e48; font-size: 9px; } .icon-message { font-size:16px; color: #b0b6c3; padding-left:17px; background: url(../images/chat/icon-message.png) no-repeat left center; } .icon-man-gray { font-size:16px; color: #b0b6c3; padding-left:17px; background: url(../images/chat/icon-man-gray.png) no-repeat left center; } .icon-man-white { display:inline-block; width:16px; height:16px; vertical-align: top; background: url(../images/chat/icon-man-white.jpg) no-repeat; } .icon-logo-small { display:inline-block; margin: 0 10px; width: 109px; height: 100%; line-height: 100%; background: url(../images/chat/icon-logo-small.png) no-repeat center; } .btn input{ cursor: pointer; } .btn-small { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #fafafa) ); background:-moz-linear-gradient( center top, #ffffff 5%, #fafafa 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fafafa'); background-color:#ffffff; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #e6e6e8; display:inline-block; color:#608d18; font-family:arial; font-size:11px; font-weight:normal; padding:2px 6px; text-decoration:none; cursor:pointer; }.btn-small:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fafafa), color-stop(1, #ffffff) ); background:-moz-linear-gradient( center top, #fafafa 5%, #ffffff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#ffffff'); background-color:#fafafa; }.btn-small:active { position:relative; top:1px; }