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

div.field-field-product-image-full img {
	/*cursor: pointer;*/
}


div.field-field-product-image { 

	/* required settings */ 
	position:relative; 
	overflow:hidden; 
	width: 489px; 
	height: 82px; 
} 

/* 
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 width and height for the root element and 
not for this element. 
 */ 
div.field-field-product-image div.field-items {
	/* this cannot be too large */ 
	width:20000em;
	position:absolute;
} 

/* 
a single item. must be floated in horizontal scrolling. 
typically, this element is the one that *you* will style 
the most. 
 */ 
div.field-field-product-image div.field-items div { 
	float:left;
	cursor: pointer;
	padding:15px 17px 0 0;
	opacity:0.5;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
} 
div.field-field-product-image div.field-items div.active{ 
	opacity:1;
	filter:alpha(opacity=100);
	-moz-opacity:1;
}

/* you may want to setup some decorations to active the item */ 
div.field-items div.active { 
	/*border:1px inset #fff;*/
	/*border-color: white; */
	
	background-color:#fff; 
}

/* the overlayed element */ 
#field-field-product-image-overlay { 
     
    /* initially overlay is hidden */ 
    display:none;
     
    /* growing background image */ 
    /*background-image:url(images/overlay/white.png); */
    background:transparent;
     
    /*  
        width after the growing animation finishes 
        height is automatically calculated 
    */ 
    width:640px;         
     
    /* some padding to layout nested elements nicely  */ 
    padding:35px; 
 
    /* a little styling */     
    font-size:11px; 
} 
 
/* default close button positioned on upper right corner */ 
#field-field-product-image-overlay div.close { 
    background-image:url(images/overlay/close.png); 
    position:absolute; right:5px; top:5px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
}
