/** scroll.css
*** The layout definition for the AmnScroll component
*/
.scrollContainer {
    display: table;
    width: 100%;
}

.scrollContainer > div {
    display: table-row;
}

.baseScroll {
    display: table-cell;
    width: calc(100% - 50px);    
}

.bar {
    display: inline-block;
    position: relative;    
    min-width: 18px;
    height: 18px;
    cursor: grab;
    text-align: center;
}

.buttonLeft, .buttonRight {
    display: table-cell;    
    width: 22px;    
    vertical-align: middle;
    font-weight: bold;
    text-align: center;
}

    .buttonLeft:hover, .buttonRight:hover {    
        cursor: pointer;
    }

.buttonLeft {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.buttonRight {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

/** themes */
.defaultBaseScroll {
    border: 1px solid #5080f0;
    background-color: #a0b0ff;
}

.defaultBar {
    border: 1px solid #505050;
    background-color: #a0a0a0;
}

    .defaultBar:hover {
        background-color: #c0c0c0;
    }

.defaultButtons {
    border: 1px solid #909090;
    background-color: #808080;
}

    .defaultButtons:hover {
        background-color: #b0b0b0;
    }