.scrollable_teaser_container { width:100%; height:398px; float:left; margin-bottom:10px; background-color:white; }
.teaser_navi_container { width:997px; height:22px; margin-top:-22px; margin-left:auto; margin-right:auto; clear:both; opacity:0.6; filter:alpha(opacity=60); background-color:gray; }
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
.scrollable { /* required settings */
position:relative; overflow:hidden; width:910px; height:100px; /* custom decorations */
border:1px solid #ccc; background:url('../images/scrollable/h300.png') repeat-x; text-align:center; float:left; }
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accomodate scrollable items.
it's enough that you set the width and height for the root element and
not for this element.
*/
.scrollable .items { /* this cannot be too large */
width:20000em; position:absolute; clear:both; }
.items div { float:left; width:910px; }
/* active item */
.scrollable .active { border:2px solid #000; position:relative; cursor:default; }
/* --- scrollable buttons --- */
/* prev,next,prevPage and nextPage buttons */
a.browse { background:url('../images/scrollable/hori_large.png') no-repeat; display:block; width:30px; height:30px; float:left; margin:40px 10px; cursor:pointer; font-size:1px; }
/* right */
a.right { background-position:0 -30px; clear:right; margin-right:0px; }
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }
/* left */
a.left { margin-left:0px; }
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }
/* up and down */
a.up,a.down { background:url('../images/scrollable/vert_large.png') no-repeat; float:none; margin:10px 50px; }
/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }
/* down */
a.down { background-position:0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }
/* disabled navigational button */
a.disabled { visibility:hidden !important; }
/* --- scrollable navigator */
/* position and dimensions of the navigator */
.navi { margin-left:430px; width:200px; height:20px; }
.navi_teaser { margin-top:4px; margin-left:46%; width:20%; height:16px; float:left; background-color:transparent; }
/* items inside navigator */
.navi a { width:8px; height:8px; float:left; margin:3px; background:url('../images/scrollable/navigator.png') 0 0 no-repeat; display:block; font-size:1px; }
/* mouseover state */
.navi a:hover { background-position:0 -8px; }
/* active state (current page state) */
.navi a.active { background-position:0 -16px; }
/* item text */
.scrollable .feedback { font-family:"Trebuchet MS",arial,helvetica,verdana; width:892px; margin:24px 8px 0 8px; font-size:16px; line-height:18px; text-align:center; }
.scrollable .feedback .quote { color:#09ad01; }

#teaser_banner { position:relative; top:-100px; left:932px; }
.teaser_banner_img { display:block; width:231px; height:57px; background: url('../images/teaser_banner.png') 0 0 no-repeat; line-height:57px; color:#fff; text-align:center; font-size:18px; font-weight:bold; padding:0 0 0 6px; }