Chat Css
/* Chatbox design by BMC Creative */ .chatbox { float: none; position: relative; display: block; width: 280px; height: 250px; padding: 0 2px 100px 2px; } .chatbox.mainBox{ margin: 20px auto; border: 1px solid #bbb; background: #fefefe; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-background-clip: padding-box; -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 2px rgba(0,0,0,0.1); box-shadow: 0 0 2px rgba(0,0,0,0.1); } .chatbox p{ margin: 0; padding: 0; } .chatbox a { color: #2b99ce; text-decoration: underline; } .chatbox a:hover { color: #444; } .chatbox .list-pages-box { overflow-y: scroll; max-height: 290px; position: relative; padding-bottom: 8px; } .chatbox .list-pages-box > a { display: block; clear: both; margin-left: 10px; } .chatbox:after { content: ''; position: absolute; bottom: 49px; left: 0; right: 0; height: 10px; background: url(http://bmcenterprises.wdfiles.com/local--files/images/fader-bottom.png) repeat-x 0 100%; } .chatbox .list-pages-box::-webkit-scrollbar{width:9px;height:9px;} .chatbox .list-pages-box::-webkit-scrollbar-track-piece{background-color:transparent;} .chatbox .list-pages-box::-webkit-scrollbar-thumb:vertical{ height:50px; background-color:#777; background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#aaa), to(#999)); -webkit-border-radius:8px; border: 1px solid #888; -webkit-background-clip: padding-box; } .chatbox .list-pages-box::-webkit-scrollbar-thumb:vertical:window-inactive { background: #eee; border: 1px solid #ddd; } .chatbox .list-pages-box::-webkit-scrollbar-thumb:horizontal{width:50px;background-color:#777;-webkit-border-radius:8px;} .chat { float: left; margin: 5px 0; clear: both; } .avatar-container { float: left; width: 24px; margin: 2px 8px 0; } .avatar { width: 24px; float: left; margin: 0; clear: left; } .message { width: 215px; padding: 3px; float: left; word-wrap: break-word; color: #30526f; border: 1px solid #7bb9ed; border-color: #99c9f1 #7cc1fd #75b4ea; background-color: #1095ff; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#edf7ff), to(#cbe8ff)); background-image: -moz-linear-gradient(top,#edf7ff,#cbe8ff); background-image: -o-linear-gradient(top,#edf7ff,#cbe8ff); background-image: linear-gradient(top,#edf7ff,#cbe8ff); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.13); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.13); box-shadow: 0 1px 1px rgba(0,0,0,0.13); } .message p {margin: 0;} .chatbox .new-page-box { position: absolute; bottom: 0; left: 0; right: 0; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ccc)); background-image: -moz-linear-gradient(top,#eee,#ccc); background-image: -o-linear-gradient(top,#eee,#ccc); background-image: linear-gradient(top,#eee,#ccc); padding: 10px 25px 10px 0; margin: 0 !important; border-top: 1px solid #aaa; -webkit-border-radius: 0 0 2px 2px; -moz-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; -webkit-box-shadow: 0 1px 0 #fafafa inset; -moz-box-shadow: 0 1px 0 #fafafa inset; box-shadow: 0 1px 0 #fafafa inset; behavior: url(/common--theme/base/PIE.htc); } .chatbox input.text { margin: 5px 0; padding: 4px 2px; width: 90%; color: #333; border: 1px solid; border-color: #9d9d9d #9b9b9b #afafaf; background-color: #fdfdfd; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#fdfdfd)); background-image: -moz-linear-gradient(top,#efefef,#fdfdfd); background-image: -o-linear-gradient(top,#efefef,#fdfdfd); background-image: linear-gradient(top,#efefef,#fdfdfd); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-background-clip: padding-box; -webkit-box-shadow: 0 1px 0 #ddd, 0 1px 2px rgba(0,0,0,0.15) inset; -moz-box-shadow: 0 1px 0 #ddd, 0 1px 2px rgba(0,0,0,0.15) inset; box-shadow: 0 1px 0 #ddd, 0 1px 2px rgba(0,0,0,0.15) inset; behavior: url(/common--theme/base/PIE.htc); } .chatbox input.text:focus { outline: 3px ; border: 1px solid #5d93c2; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f4f4), to(#fff)); background-image: -moz-linear-gradient(top,#f4f4f4,#fff); background-image: -o-linear-gradient(top,#f4f4f4,#fff); background-image: linear-gradient(top,#f4f4f4,#fff); behavior: url(/common--theme/base/PIE.htc); } .chatbox input.button { display: block; width: 24px; height: 20px; padding: 0; background: transparent url(http://bmcenterprises.wdfiles.com/local--files/chatbox/speechbubbleblack.png) no-repeat 0 0; position: absolute; right: 1px; top: 14px; z-index: 100; opacity: 0.4; font-size: 0; color: transparent; text-indent: -9999px; line-height: 0; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; transition: opacity 400ms ease; } .chatbox input.button:hover { opacity: 0.7; } .pie { behavior: url(/common--theme/base/PIE.htc); }
#header, #side-bar, #footer, .footer, #navi-bar, #navi-bar-shadow, #license-area, #footer-bar, #page-title, #breadcrumbs, #page-options-container, .owindow, #odialog-shader{ display: none !important; } body, #container-wrap-wrap, #container-wrap, #container, #content-wrap, #main-content, #page-content{ margin: 0 !important; padding: 0 !important; border: none !important; background: #FFF !important; }
page revision: 2, last edited: 11 Jul 2011 18:49