/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
  */
.scrollable {
  /* required settings */
  position:relative;
  overflow:hidden;
}
/*
   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;
}
.scrollable .active {
  border:2px solid #000;
  position:relative;
  cursor:default;
}
/* this makes it possible to add next button beside scrollable */
.scrollable {
  float:left;
}
/* prev, next, prevPage and nextPage buttons */
a.browse {
  cursor:pointer;
}
/* right */
a.right {
  float:right;
}
/* left */
a.left { 
  float:left;
}
/* disabled navigational button */
a.disabled {
  visibility:hidden !important;
}
/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}
:focus {
  -moz-outline-style:none;
}
/*small images*/
#smallImage{
  position: relative;
}
#smallImage .scrollable{
  width: 92%;
  height: 110px;
  margin-left: 1%;
}
#smallImage .scrollable img{
  width: 100px;
}
#smallImage a.left{
  margin-top: 45px;
}
#smallImage a.right{
  margin-top: 45px;
}
/*product buttom product*/
#productsButtom{
  position: relative;
}
#productsButtom .scrollable{
  width: 97%;
  height: 350px;
}
#productsButtom .scrollable img{
  width: 280px;
  padding: 10px;
}
#productsButtom a.left{
  margin-top: 145px;
}
#productsButtom a.right{
  margin-top: 145px;
}
#productsButtom h4{
  width: 260px;
}