.scroll-track{
height:8px;
width:15px;
background-image: url('/images/scrollbar/VScrollTrackFill.gif');
background-repeat: repeat;
}

.scroll-handle{
border: 0px;
height:10px;
width:15px;
background-image: url('/images/scrollbar/BlueVFill.gif');
background-repeat: repeat;
background-position:top;
cursor:pointer;
}

#scroll-track-top-1, #scroll-track-top-2, #scroll-track-top-3, #scroll-track-top-4 {
height:13px;
width:15px;
background-image: url('/images/scrollbar/up.gif');
}

#scroll-handle-bot-1, #scroll-handle-bot-2, #scroll-handle-bot-3, #scroll-handle-bot-4 {
height:8px;
width:15px;
background-image: url('/images/scrollbar/bot.gif');
}

#scroll-handle-top-1, #scroll-handle-top-2, #scroll-handle-top-3, #scroll-handle-top-4 {
height:8px;
width:15px;
background-image: url('/images/scrollbar/top.gif');
background-repeat: no-repeat;
}

#scroll-track-bot-1, #scroll-track-bot-2, #scroll-track-bot-3, #scroll-track-bot-4 {
height:13px;
width:15px;
background-image: url('/images/scrollbar/down.gif');
}

.splitpane-divider {
    border: 1px solid black;
    background:#5B207B;
    opacity: .5;
   filter: alpha(opacity=50);
}

/* The classes/ids below are just used in this example. You can use whatever you like */
#parent {
    width: 100%;
    background: #eeeeee;
}

.column {
    float: left; /* This is forces the page content to adjust to changes in height of the columns */
    overflow: hidden; /* As a precaution, all content is clipped to the column width */
    margin: 0; /* This and padding need to be zero */
    padding: 0;
    z-index: 1;
    background:#E7FECD;
    color: #666666;
    width: 33%; /* Default value, overridden by class */
}