علبة الدردشة بشكل جديد ومتطور

   /* --  CHATBOX -- */
    body.chatbox { background-color:#FFF; }

    #chatbox_members, #chatbox_members:after, #chatbox { transition:200ms; }
    #chatbox_header, #chatbox_footer, #chatbox_members, #chatbox {
      position:absolute;
      left:0;
      right:0;
    }

    #chatbox_header { top:0; }
    #chatbox_footer { bottom:0; }
    #chatbox_header, body #chatbox_footer {
      color:#FFF;
      background:#69C;
      height:40px;
      line-height:40px;
      padding:0 3px;
      overflow:hidden;
    }

    #chatbox_header a { color:#FFF; }

    .chatbox-title, .chatbox-options li { float:right; }
    .chatbox-options { float:left; }
    .chatbox-options li { list-style-type:none; }

    /* buttons */
    body #divcolor { line-height:15px; }
    #divsmilies > img { vertical-align:middle; }
    #divcolor, #divsmilies, #help-button, #submit_button, .format-message + label {
      margin:8px 1px 0 1px;
      cursor:pointer;
      overflow:hidden;
    }

    .text-field { padding-left:6px; }
    #message, body #submit_button {
      height:auto;
      padding:3px;
    }

    /* messages */
    #chatbox {
      top:70px;
      bottom:40px;
      padding:3px;
      overflow:hidden;
      overflow-y:auto;
      border:1px solid #69C;
    }

    body #chatbox > p {
      margin:3px 0;
      border:none;
    }

    /* member lists */
    #chatbox_members {
      top:40px;
      height:30px;
      overflow:hidden;
      border-left:1px solid #69C;
      border-right:1px solid #69C;
    }

    #chatbox_members:after {
      content:"Hover over to see who is online.";
      color:#FFF;
      font-size:16px;
      line-height:30px;
      text-align:center;
      background:rgba(0, 0, 0, 0.3);
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      opacity:1;
    }

    #chatbox_members > h4 {
      color:#FFF;
      background:#69C;
      position:absolute;
      top:0;
      left:0;
      width:50%;
      height:30px;
      line-height:30px;
      text-align:center;
      display:block !important;
    }

    #chatbox_members > h4.online { background:#8B5; }
    #chatbox_members > h4.away {
      background:#E53;
      border-left:1px solid #69C;
      left:auto;
      right:0;
    }

    #chatbox_members > ul {
      position:absolute;
      top:30px;
      left:0;
      width:50%;
      height:120px;
      overflow:hidden;
      overflow-y:auto;
    }

    #chatbox_members > ul:empty:after {
      content:"";
      display:block;
      padding:3px;
      text-align:center;
    }

    #chatbox_members > ul.away-users:empty:after { content:"No members are currently away."; }
    #chatbox_members > ul.online-users:empty:after { content:"No members are currently online."; }

    #chatbox_members > ul.away-users {
      border-left:1px solid #69C;
      left:auto;
      right:0;
    }

    #chatbox_members > ul > li { padding:3px; }
    #chatbox_members li span { cursor:pointer; }

    #chatbox_members:hover + #chatbox { top:190px; }
    #chatbox_members:hover { height:150px; }
    #chatbox_members:hover:after {
      opacity:0;
      visibility:hidden;
    }

    body #chatbox_contextmenu {
      background:#FFF;
      border:1px solid #CCC;
      padding:3px;
      min-width:100px;
    }

    /* embedded chatbox */
    .panel #chatbox_bottom, .panel #chatbox_top {
      height:400px !important;
    }

    /* cb-avatar */
    body #chatbox .cb-avatar {
      border:2px solid #69C !important;
      box-shadow:none;
    }

    body #chatbox .cb-avatar, body #chatbox .cb-avatar img {
      height:34px;
      width:34px;
    }