ul {
    padding: 0;
}

#chatpanel {
    /*height: 245px;*/
    overflow: hidden;
    transition: all .5s ease;
}

#dock-conainer-data {
    margin-top: 4px;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
}

#dock-container {
    position: fixed;
    bottom: 0;
    text-align: center;
    right: 50%;
    left: 50%;
    width: 400px;
    height: 70px;
    padding-top: 5px;
    /*background: rgba(255,255,255,0.2);*/
    border-radius: 10px 10px 0 0;
    transform: translate(-50%);
}

    #dock-container li {
        list-style-type: none;
        display: inline-block;
        position: relative;
    }

        #dock-container li img {
            width: 48px;
            height: 48px;
            -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255,255,255,.5))); /* reflection is supported by webkit only */
            -webkit-transition: all 0.3s;
            -webkit-transform-origin: 50% 100%;
            opacity: 0.9;
        }

        #dock-container li:hover img {
            -webkit-transform: scale(2);
            margin: 0 2em;
        }

        #dock-container li:hover + li img,
        #dock-container li.prev img {
            -webkit-transform: scale(1.5);
            margin: 0 1.5em;
        }

        #dock-container li span {
            display: none;
            position: absolute;
            bottom: 140px;
            left: 0;
            width: 100%;
            background-color: rgba(0,0,0,0.75);
            padding: 4px 0;
            border-radius: 12px;
        }

        #dock-container li:hover span {
            display: block;
            color: #fff;
        }