.scrollable_wrapper {
	position: relative;
	width: 970px;
	height: 500px;
	margin: 0 auto;
}

.btn_wrapper {
	position: relative;
	width: 950px;
  max-width: 100%;
	height: 70px;
	margin-left: 20px;
}

/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
  */
.scrollable {
    /* required settings */
    position: relative;
    overflow: hidden;
    width: 960px;
	height: 500px;
	margin-left: 10px;
}

/*
   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;
}

.items div.cell_wrapper {
    float:left;
    width:960px;
}

/* single scrollable item */
div.cell_wrapper div.cell {
	float: left;
	margin:40px 10px 20px 10px;
}

.scrollable div.cell_img {
	position: relative;
	width: 200px;
	height: 150px;
}

.scrollable div.cell_img img {
	position: relative;
	width: 200px;
	height: 150px;
}

.scrollable p.info {  
    width: 210px;
    color: #DDD;
    line-height: 16px;
    font-size: 12px;
    padding-top: 5px;
    text-align: center;    
}




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

@media (max-width: 619px) {

div.cell_wrapper div.cell {
	float: none ;
	margin:40px 10px 20px 10px;
	display: inline-block;
}

.cell_wrapper {
	text-align : center ;
}

.items {
	/*left : 0 !important;*/
}

div.tooltip {

}

}