.scrollable {

  /* required settings */
  position:relative;
  overflow:hidden;
  width: 80%;
  height:160px;
	/*border: 1px solid black;*/
	/*min-width: 400px;*/
  /*margin-top: 20px;*/  

  /* custom decorations */
}
/*
  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:20000px;
  position:absolute;
  clear:both;
}

/* single scrollable item */
.scrollable .div {
  float:left;
  margin:20px 5px 20px 21px;
  text-align: center;
  /*height:75px;*/
	/*width: 150px;*/
  
}

.ph_item
{
	border: 1px solid #000;
}
/* active item */
.scrollable .active {
 
  /*z-index:9999;*/
  position:relative;
}

.scrollable {
  float:left; 
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
  /*background:url(../js/hori_large.png) no-repeat;*/
  display:block;
  width:30px;
  height:30px;
  float:left;
  margin:60px 10px;
  cursor:pointer;
  font-size:1px;
}

/* right */
a.right     { background-position: 0 -30px; clear:right; margin-right: 0px; margin-left: 25px}
a.right:hover   { background-position:-30px -30px; }
a.right:active  { background-position:-60px -30px; } 


/* left */
a.left      { margin-left: 15px; } 
a.left:hover    { background-position:-30px 0; }
a.left:active   { background-position:-60px 0; }

/* up and down */
a.up, a.down  { 
  /*background:url(../img/scrollable/arrow/vert_large.png) no-repeat;*/ 
  float: none;
  margin: 10px 50px;
}

/* up */
a.up:hover      { background-position:-30px 0; }
a.up:active     { background-position:-60px 0; }

/* down */
a.down        { background-position: 0 -30px; }
a.down:hover      { background-position:-30px -30px; }
a.down:active   { background-position:-60px -30px; } 


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