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

    /* required settings */
    float:left;
    height:105px;
    overflow:hidden;
    position:relative;
    width:317px;
  }

  /*
      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:2000em;
      position:absolute;
  }

  /*
      a single item. must be floated on horizontal scrolling
      typically this element is the one that *you* will style
      the most.
  */
  div.item {
    border:1px solid #e9e8e4;
    background-color: white;
    float:left;
    margin-right:9px;
    position:relative;
    text-align:center;
    width: 67px;
    line-height: 1em;
  }

  div.items_image {
      /*margin-left:10px;*/
      text-align:center;
      text-transform:uppercase;
  }

  div.items_description {
    padding: 1px;
    height: 45px;
    font-size: 0.8em;
  }


  div.items_info {
    padding: 1px;
    height: 12px;
  }

  /* you may want to setup some decorations to active item */
  div.items div.active {
      border:1px solid #b00b12;
  }
  a.prev, a.next {
    background:transparent url(../pics/left_scroll.jpg) no-repeat scroll 0 0;
    cursor:pointer;
    float:left;
    height:16px;
    margin:5px;
    position:relative;
    top:15px;
    width:11px;
  }

  a.next  {
    background-image:url(../pics/right_scroll.jpg);
    float:left;
  }

  a.disabled  {
    background-image:none;
    float:left;
  }