#scroller { margin: 0 0 -16px 0; position: relative; top: -33px; }
.scrollable { position: relative; overflow: hidden; width: 960px; height: 302px; }
.scrollable .items { width: 20000em; position: absolute; clear: both; }
.scrollable .page { float: left; width: 960px; position: relative; }
.scrollable .active { z-index: 9999; position: relative; }
.navi { position: absolute; z-index: 50000; top: 260px; right: 30px; }
.navi a { width: 18px; height: 18px; float: left; margin: 3px; background: url(/assets/images/navitems.png) 0 0 no-repeat; display: block; cursor: pointer; }
.navi a:hover { background-position: -18px 0px; }
.navi a.active { background-position: -18px 0px; }

.scroll_areas { position: relative; overflow: hidden; width: 912px; height: 120px; }
.scroll_areas .areaitems { width: 20000em; position: absolute; clear: both; }
.scroll_areas div { float: left; margin: 0 4px 0 0; cursor: pointer; height: 96px; width: 87px; text-align: center; -moz-border-radius: 4px; -webkit-border-radius: 4px; position: relative; }
.scroll_areas div a { color: #5a92c8; text-decoration: none; font-weight: bold; font-size: 11px; }
.scroll_areas .active { background-color: #f5f6f8; }
.scroll_areas .active a { color: #2dbaf5; }

.subarea { display: none; position: absolute; bottom: 106px; background-color: #f5f6f8; width: 87px; z-index: 1000000; }
.subarea li a { color: #000; text-decoration: none; display: block; padding: 3px 5px; font-size: 11px; }
.subarea li a:hover { background-color: #2dbaf5; color: #fff; }
a.browse { background: url(/assets/images/hori_large.png) no-repeat; display: block; width: 15px; height: 21px; float: left; margin: 40px 10px; cursor: pointer; font-size: 1px; }
a.right { background-position: -15px 0px; position: absolute; top: 5px; left: 934px; z-index: 100000; }
a.rightsmall { background-position: -15px 0px; position: absolute; top: 5px; left: 709px; z-index: 100000; }
a.rightstart { background-position: -15px 0px; position: absolute; top: 5px; left: 672px; z-index: 100000; }
a.left { margin-left: 0px; position: absolute; top: 410px; left: 0px; }
a.left { margin-left: 0px; position: absolute; top: 5px; left: 0px; }
a.disabled { visibility: hidden !important; }

.scroll_areas_small { position: relative; overflow: hidden; width: 695px; height: 120px; }
.scroll_areas_small .areaitemssmall { width: 20000em; position: absolute; clear: both; }

.scroll_areas_small div { float: left; margin: 0 0px 0 0; cursor: pointer; height: 96px; width: 87px; text-align: center; -moz-border-radius: 4px; -webkit-border-radius: 4px; position: relative; }
.scroll_areas_small div a { color: #5a92c8; text-decoration: none; font-weight: bold; font-size: 11px; }
.scroll_areas_small .active { background-color: #f5f6f8; }
.scroll_areas_small .active a { color: #2dbaf5; }

.scroll_areas_start { position: relative; overflow: hidden; width: 655px; height: 120px; }
.scroll_areas_start .areaitemsstart { /* this cannot be too large */ width: 20000em; position: absolute; clear: both; }
.scroll_areas_start div { float: left; margin: 0 0px 0 0; cursor: pointer; height: 96px; width: 82px; text-align: center; -moz-border-radius: 4px; -webkit-border-radius: 4px; position: relative; }
.scroll_areas_start div a { color: #5a92c8; text-decoration: none; font-weight: bold; font-size: 11px; }
.scroll_areas_start .active { background-color: #f5f6f8; }
.scroll_areas_start .active a { color: #2dbaf5; }