@charset "utf-8";

/* Scrollable Horizontal */

/*
root element for the scrollable.  when scrolling occurs this
element stays still.
*/
.scrollable {
  /* required settings */
  position:relative;
  overflow:hidden;
  width: 186px;
  height:180px;
  float:left;
  /* customisation settings */
}
 
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accommodate scrollable
items.  it's enough that you set 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;
}
 
/*
a single item. must be floated in horizontal scrolling.  typically,
this element is the one that *you* will style the most.
*/
.items div {
  float:left;
  /*width:680px;*/
}

.items table {
  padding: 0px;
  border-spacing: 0px;
  height:180px;
}

.items tr {
  text-align:center;
  vertical-align:middle;
}

/* single scrollable item */
.scrollable img {
    /*float:left;*/
    margin:5px 5px 5px 5px;
    /*background-color:#fff;
    padding:1px;*/
    width:174px;
    /*height:150px;*/
}

/* active item */
/*.scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}*/

/* Scrollable Navigator */

/* position and dimensions of the navigator */
.navi {
    /*margin-left:175px;
    width:200px;*/
    height:20px;
}
 
/* items inside navigator */
.navi a {
    width:15px;
    height:15px;
    float:left;
    margin:3px;
    background:url(images/navi_buttons.png) 0 0 no-repeat;
    display:block;
    font-size:1px;
}
 
/* mouseover state */
.navi a:hover {
    background-position:0 -15px;
}
 
/* active state (current page state) */
.navi a.active {
    background-position:0 -30px;
}