#slider {
    background-color: transparent;
    border: 1px dotted #ccc;
    font-family: Arial;
    font-size: 11px;
    height: 200px;
    overflow: hidden;
    width: 280px;
}

.slider-position {
    display: block;
    position: absolute;
    height: 20px;
    color: #fff;
    text-align: right;
    font-weight: bold;
    text-shadow: 0 0 2px #000;
}
.slider-control {
    display: block;
    position: absolute;
    cursor: pointer;
    z-index: 1000;
    width: 100px;
    height: 24px;
    line-height: 24px;
    top: 1px;
    text-align: center;
    vertical-align: middle;
    color: #999;
    font-size: 18px;
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHonAACAgwAA+mQAAIDSAAB2hgAA7OkAADmeAAAV/sZ+0zoAAAATSURBVHjaYmBgYFADAAAA//8DAAArACdenP6WAAAAAElFTkSuQmCC) repeat 0 0;
}
.slider-control:hover {
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHonAACAgwAA+mQAAIDSAAB2hgAA7OkAADmeAAAV/sZ+0zoAAAATSURBVHjaYmBgYHAAAAAA//8DAABFAEF85EXUAAAAAElFTkSuQmCC) repeat 0 0;
    color: #666;
}
.slider-control-previous {
    left: 1px;
    border-radius: 0 0 7px 0;
}
.slider-control-next {
    right: 1px;
    border-radius: 0 0 0 7px;
}
.slider-text {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 5px;
    z-index: 1100;
}
.slider-text-overlay {
    left: 9px;
    bottom: 6px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 2px #000;
}
.slider-text-shadow {
    color: #000;
    font-weight: bold;
    text-shadow: 0 0 2px #000;
}