div.scrollable { position: relative; float: left; overflow: hidden; width: 522px; padding: 20px 0; height: 120px; }
div.verticalScroll { position: relative; overflow: hidden; height: 78px; width: 170px; left: 2px; }
.items { width: 20000em; position: absolute; left: 0; padding: 0; }
.verticalItems { height: 20000em; position: absolute; left: 0; padding: 0; margin: 0; }
    .verticalItems ul { margin: 0; padding: 0; }
.liv { text-align: right; direction: rtl; margin: 5px 0 15px 0; width: 160px; height: 24px; }
.items ul { float: left; margin: 0; padding: 0; }
.lih { float: left; height: 148px; width: 120px; background: url(/images/alukah30/scrollable/bg.png) left -12px repeat-x; margin: 0 10px 0 2px; }
a.browse { background: url(/images/alukah30/scrollable/hori_large_2.png) no-repeat; display: block; width: 32px; height: 32px; float: left; margin: 40px 10px; cursor: pointer; font-size: 1px; }
a.left { background-position: 0 -32px; clear: right; margin-right: 0; }
    a.left:hover { background-position: -32px -32px; }
    a.left:active { background-position: -64px -32px; }
a.right { margin-left: 0; }
    a.right:hover { background-position: -32px 0; }
    a.right:active { background-position: -64px 0; }
a.left.disabled, a.left.disabled:hover, a.left.disabled:active { background-position: -96px -32px; }
a.right.disabled, a.right.disabled:hover, a.right.disabled:active { background-position: -96px 0; }
.navi { margin-left: 59px; width: 100px; height: 20px; }
    .navi a { width: 8px; height: 8px; float: left; margin: 3px; background: url(/images/alukah30/scrollable/navigator.png) 0 0 no-repeat; display: block; font-size: 1px; }
        .navi a:hover { background-position: 0 -8px; }
        .navi a.active { background-position: 0 -16px; }