/*
 root element for the scrollable.
 when scrolling occurs this element stays still.
*/
div.scrollable {

 /* required settings */
 position:relative;
 overflow:hidden;
 width: 630px;
 height:400px;
 margin-left:30px;

 /* custom decorations */
 padding:10px 0;
}

/*
 root element for scrollable items. Must be absolutely positioned
 and it should have a super large width to accomodate scrollable items.
 it's enough that you set width and height for the root element and
 not for this element.
*/
div.scrollable div.items {
 /* this cannot be too large */
 width:20000em;
 position:absolute;
 clear:both;

 /* decoration */
 margin-left:10px;
}

/* single scrollable item */
div.scrollable div.items div {
 float:left;

 /* custom decoration */
 text-align:center;
 width:210px;
 padding:25px 0px;
 font-size:30px;
 font-family: 'bitstream vera sans';
 border:1px outset #ccc;
 background-color: #ddd;
 margin-right: 20px;
 -moz-border-radius:5px;
}

/* active item */
div.scrollable div.items div.active {
 border:1px inset #ccc;
 background-color:#fff;
}