.scrollable {
  /* required settings */
  position: relative;
  overflow: hidden;
  width: 475px;
  height: 200px;
  /* this makes it possible to add next button beside scrollable */
  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.
  */
  /* active item */ }
  .scrollable .items {
    /* this cannot be too large */
    width: 20000em;
    position: absolute;
    clear: both; }
    .scrollable .items div.item {
      float: left;
      width: 475px;
      /* single scrollable item */ }
      .scrollable .items div.item img {
        float: left;
        margin: 20px 5px 20px 21px;
        background-color: #fff;
        padding: 2px;
        border: 1px solid #ccc;
        width: 200px;
        height: 150px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px; }
  .scrollable .active {
    border: 2px solid #000;
    position: relative;
    cursor: default; }

/* prev, next, prevPage and nextPage buttons */
a.browse {
  background: url(https://secure.cityeats.com/images/scrollable_arrows.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; }

/* disabled navigational button */
a.disabled {
  visibility: hidden !important; }

.navi {
  margin-left: 328px;
  width: 200px;
  height: 20px; }
  .navi a {
    width: 8px;
    height: 8px;
    float: left;
    margin-top: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-left: 3px;
    background-color: transparent;
    background-image: url(https://secure.cityeats.com/images/navigator.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0pt 0pt;
    display: block;
    font-size: 1px; }
  .navi a:hover {
    background-position: 0pt -8px; }
  .navi a.active {
    background-position: 0pt -16px; }