@charset "utf-8";
/* CSS Document */

/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
  */
.scrollable {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 970px;
    height:215px;
	margin-left:-5px;

    /* 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:2000em;
    position:absolute;
    clear:both;
}

.items div {
    float:left;
    width:970px;
}

/* single scrollable item */
.scrollable .prod1, .scrollable .prod2, .scrollable .prod3, .scrollable .prod4
{
	width:235px;
    height:160px;
	margin-left:6px;
	margin-top:20px;
}
.scrollable .prod1 a img{
	background:url(../image/product/prod1.jpg) no-repeat;
    float:left;
    width:235px;
    height:160px;

}
.scrollable .prod1 a img:hover {
	background:url(../image/product/prod1_hover.jpg) no-repeat; 
}
.scrollable .prod2 a img{
	background:url(../image/product/prod2.jpg) no-repeat;
    float:left;
    width:235px;
    height:160px;

}
.scrollable .prod2 a img:hover {
	background:url(../image/product/prod2_hover.jpg) no-repeat; 
}
.scrollable .prod3 a img{
	background:url(../image/product/prod3.jpg) no-repeat;
    float:left;
    width:235px;
    height:160px;

}
.scrollable .prod3 a img:hover {
	background:url(../image/product/prod3_hover.jpg) no-repeat; 
}
.scrollable .prod4 a img{
	background:url(../image/product/prod4.jpg) no-repeat;
    float:left;
    width:235px;
    height:160px;

}
.scrollable .prod4 a img:hover {
	background:url(../image/product/prod4_hover.jpg) no-repeat; 
}

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