demo: http://anhoang1.forumvi.com/ (tạo cái acc rồi test nhá - mình lười quá, dù sao cũng là forum test thôi
- Code:
/* Chatbox */
#chatbox_header.main-head{margin:0px 0 0}
#chatbox_header.main-head,#chatbox_members,#chatbox,#chatbox_footer{background:#FFF}
#chatbox p[class*="chatbox_row"] {background:#FFF ;margin-bottom: 1px;border-top: 1px solid #ddd;}
#chatbox p[class*="chatbox_row"] .date-and-time {float: right;color: #aaa;}
#chatbox_messenger_form .right:last-child{-webkit-transition:all .3s;bottom:-1px;opacity:0;padding:6px;
position:absolute;right:700px;transition:all .3s;width:180px}#divcolor img{display:none}
#chatbox_messenger_form .right:first-child{color:transparent}#chatbox_messenger_form .right:first-child:hover + .right,#chatbox_messenger_form .right:last-child:hover{opacity:1;right:450px}
#mbt-menu,#mbt-menu ul{list-style:none;margin:0;padding:0}#mbt-menu{background:#444 url(http://i77.servimg.com/u/f77/16/55/90/36/bg_rep10.jpg);border:1.5px solid #000;border-radius:5px;
margin-left:0;position:fixed;width:978px!important;z-index:998;zoom:1}#mbt-menu:after,#mbt-menu:before{content:"";display:table}#mbt-menu:after{clear:both}#mbt-menu li{-moz-box-shadow:1px 0 0 #444;-webkit-box-shadow:1px 0 0 #444;border-right:1px solid #222;box-shadow:1px 0 0 #444;float:left;position:relative}#mbt-menu a{color:#f5fffa;float:left;font-family:Arial,Helvetica;font-size:12px;font-style:normal;font-variant:normal;font-weight:700;padding:12px 25px;text-decoration:none;text-shadow:0 0 0 #111,0 0 .5em #306EFF,0 0 .4em #306EFF;text-transform:uppercase}#mbt-menu li:hover > a{-moz-border-radius:4px;-moz-box-shadow:inset 0 0 10px #EEE;-webkit-border-radius:4px;-webkit-box-shadow:inset 0 0 10px #EEE;border-image:initial;border-radius:4px;box-shadow:inset 0 0 10px #EEE;color:#f5fffa;text-shadow:0 0 0 #111,0 0 .5em Orange,0 0 .4em Orange}*html #mbt-menu li a:hover{color:#fafafa}#mbt-menu ul{-moz-border-radius:3px;-moz-box-shadow:0 -1px rgba(255,255,255,.3);-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-webkit-border-radius:3px;-webkit-box-shadow:0 -1px 0 rgba(255,255,255,.3);-webkit-transition:all .2s ease-in-out;_margin:0;background:linear-gradient(#444,#111);border-radius:3px;box-shadow:0 -1px 0 rgba(255,255,255,.3);left:0;margin:20px 0 0;opacity:0;position:absolute;top:38px;transition:all .2s ease-in-out;visibility:hidden;z-index:999}#mbt-menu li:hover > ul{margin:0;opacity:1;visibility:visible}#mbt-menu ul ul{-moz-box-shadow:-1px 0 0 rgba(255,255,255,.3);-webkit-box-shadow:-1px 0 0 rgba(255,255,255,.3);_margin:0;box-shadow:-1px 0 0 rgba(255,255,255,.3);left:150px;margin:0 0 0 20px;top:0}#mbt-menu ul li{-moz-box-shadow:0 1px 0 #111,0 2px 0 #666;-webkit-box-shadow:0 1px 0 #111,0 2px 0 #666;_line-height:0;border:0;box-shadow:0 1px 0 #111,0 2px 0 #666;display:block;float:none}#mbt-menu ul li:last-child{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}
#mbt-menu ul a{_height:10px;display:block;float:none;padding:10px;text-transform:none;white-space:nowrap;
width:130px}#mbt-menu ul a:hover{background-color:#0186ba;background-image:linear-gradient(#04acec,#0186ba)}#mbt-menu ul li:first-child > a{-moz-border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}#mbt-menu ul li:first-child > a:after{border-bottom:6px solid #444;border-left:6px solid transparent;border-right:6px solid transparent;content:'';left:40px;position:absolute;top:-6px}#mbt-menu ul ul li:first-child a:after{border-bottom:6px solid transparent;border-left:0;border-right:6px solid #3b3b3b;border-top:6px solid transparent;left:-6px;margin-top:-6px;top:50%}#mbt-menu ul li:first-child a:hover:after{border-bottom-color:#04acec}#mbt-menu ul ul li:first-child a:hover:after{border-bottom-color:transparent;border-right-color:#0299d3}#mbt-menu ul li:last-child > a{-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}a,a:hover,a:link{text-decoration:none!important}
#chatbox_main_options{margin-top:6px}.chatbox-options li,.chatbox-options li a,.chatbox-options li label{color:#999}#chatbox_footer{padding:3px 0}#message,#submit_button{border:1px solid #A8A8A8;border-width:1px;height:24px!important;line-height:22px!important;padding:2px 5px!important}
#message:hover{background:#FFF}
#divstrike{display:none}
#chatbox_messenger_form{margin-top:2px}.chatbox-title{font-weight:300;padding:0px 0px 0!important}
#show_color{display:block!important;height:20px;width:20px}
#chatbox_footer #submit_button{background:#57BAFF!important;color:#FFF;height:30px!important;
padding:4px 8px!important}
.chatbox {background: #fff;}
.chatbox-title {padding: 3px 10px;font-size: 13px;font-weight: bold;}
.chatbox-title a {color: #e74c2e}
.chatbox-options {margin: 1px;}
#chatbox .user span, .online-users li a span, .online-users li span, .away-users li a span, .away-users li span {display: none;}
#chatbox .user a *, .online-users li a span:last-child, .away-users li a span:last-child {display: inline-block !important;}
#chatbox_members {
left: -160px;background-color: #fff;z-index: 1;
border-right: 3px solid #ddd;position: fixed;opacity: 0;
} #chatbox_members:hover {left: 0;opacity: 1;}
#chatbox {left: 0;bottom: 39px;}
#chatbox_footer {background-color: #fff;border-top: 1px solid #ddd;z-index: 3;}
#chatbox_footer input[name="submit_button"] {height: 28px;}
#chatbox_bottom {min-height: 500px!important;}
#message{width:390px}
#chatbox img {
max-width:400px;
border:1px solid #d4d4d4;padding:4px;
margin-top:4px;
}
#chatbox img[src*="r12.imgfast.net"]{
border:0px;padding:0px;margin-top:0px;
}
#chatbox {background: #FFF!important;font-family: Comic Sans Ms;font-size: 13px;}
#chatbox_members {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
#chatbox_members {
border-right: 1px solid;
bottom: 30px;
overflow: auto;
position: absolute;
top: 30px;
width: 180px;
}
.chatbox-title, .chatbox-title a.chat-title {
color: #57BAFF;
text-decoration: none;
}
#chatbox_members .member-title {
background-color: #57baff;
background-image: none;
color: #FFFFFF;
font-family: Comic Sans Ms;
font-size: 13px;
padding: .5em .25em;
text-align: center;
}