﻿#tw {
    overflow: auto;
    height: 500px;
    padding: 0 5px;
    border: 1px solid #b7b7b7;
}

.track4 {
    width: 10px;
    background-clip: padding-box;
    background: #fff;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-left-width: 1px;
}

.track4.dragging,
.track4:hover {
    background: #f2f2f2; /* No RGBA support */
    background: rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
}

.track4:active {
    background: #f2f2f2; /* No RGBA support */
    background: rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14),
                        inset -1px -1px 0 rgba(0, 0, 0, 0.07);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14),
                inset -1px -1px 0 rgba(0, 0, 0, 0.07);
}

.handle4 {
    width: 10px;
    background-clip: padding-box;
    background: #ccc; /* No RGBA support */
    background: rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
                        inset 0 -1px 0 rgba(0, 0, 0, 0.07);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
                inset 0 -1px 0 rgba(0, 0, 0, 0.07);
}

.handle4:hover {
    background: white; /* No RGBA support */
    background: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
}

.dragging .handle4,
.handle4:active {
    background: white; /* No RGBA support */
    background: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
}