/*
 * Title: jQuery Etalage plugin CSS
 * Author: Berend de Jong, Frique
 * Author URI: http://www.frique.me/
 * Version: 1.21 (20110904.1)
 *
 * ------------------------------------ STYLE ------------------------------------
 * Edit this section to style your thumbnails, zoom area, magnifier etc.
 * If the id of your Etalage instance is different, do a find/replace on #etalage.
 * -------------------------------------------------------------------------------
 */

/* Etalage container (large thumb + small thumbs): */
ul#etalage{
	margin-bottom: 20px;
}

/* Large thumbnail: */
#etalage li.etalage_thumb {
background: none;
border: 0px;
padding: 0px;
padding: 0px 0px 0px 0px;
}
/* Large thumbnail - image (in case you want to add a border around the image within the frame) */
#etalage img.etalage_thumb_image{ }

/* Small thumbnails: */
#etalage li.etalage_small_thumbs li{
	background: white;
	margin: 10px 10px 10px 10px; /* The space between the small thumbs and towards the large thumb */
	height:auto!important; max-height:408px;
}
/* The one on the left that makes them slide */
#etalage ul li.etalage_smallthumb_first{ }
/* The one on the right that makes them slide */
#etalage ul li.etalage_smallthumb_last{ }
/* The currently active one */
#etalage ul li.etalage_smallthumb_active{
	/*-webkit-box-shadow: 0 0 10px #ddd;
	-moz-box-shadow: 0 0 10px #ddd;
	box-shadow: 0 0 10px #ddd;*/
}

/* Zoomed image area: */
#etalage li.etalage_zoom_area{
	/*background: white url(../images/loading.gif) center no-repeat;*/
	background-color: #FFF;
	border: 1px solid #ddd;
	margin: 10px; /* The space between the large thumbnail and the zoomed area */
	z-index: 333;
	width: 600px;
	height: 407px;
	left: 660px!important;
	/*padding: 6px;
	-webkit-box-shadow: 0 0 10px #ddd;
	-moz-box-shadow: 0 0 10px #ddd;
	box-shadow: 0 0 10px #ddd;*/
	/*visibility:hidden;*/
}

/* Magnifier area (thumbnail hovering): */
#etalage li.etalage_magnifier{
	background: white;
	border: 1px solid #bbb;
/*	visibility:hidden;*/
	
}

/* Icon that will apear at the left bottom of the large thumbnail (optional): */
#etalage li.etalage_icon{
	background: url(../images/zoom.gif) no-repeat;
margin: 20px;
width: 14px;
height: 14px;
}

/* Hint that will apear at the top right of the large thumbnail (optional): */
#etalage li.etalage_hint{
	background: url(../images/hint.gif) no-repeat;
	margin: 15px; /* The offset to the right-top corner */
	width: 130px;
	height: 57px;
}

/* Description area (optional) */
#etalage div.etalage_description{
	background: white;
	font-style: italic;
	margin: 10px;
	padding: 6px 10px;
}

/*
 * ------------------------------------ FUNCTIONALITY --------------------------------------
 * The following CSS serves to make Etalage function properly. Don't edit or edit carefully.
 * -----------------------------------------------------------------------------------------
 */

#etalage, .etalage, .etalage_thumb, .etalage_thumb_image, .etalage_source_image, .etalage_zoom_preview, .etalage_icon, .etalage_hint{ display:none }
.etalage, .etalage ul, .etalage li, .etalage img, .etalage_hint, .etalage_description{ margin:0; padding:0; border:0; list-style:none }
.etalage, .etalage_magnifier div, .etalage_magnifier div img, .etalage_small_thumbs ul, ul .etalage_small_thumbs li, .etalage_zoom_area div, .etalage_zoom_img{ position:relative }
.etalage img, .etalage li{ -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none; -webkit-user-drag:none; -moz-user-drag:none; user-drag:none }
.etalage, ul .etalage_small_thumbs li{ float:left }
.etalage_small_thumbs{height:408px;}
.etalage_small_thumbs > ul{height:325px;}
.etalage_right{ float:right }
.etalage li{ position:absolute }
.etalage img{ vertical-align:bottom }
.etalage_magnifier{ cursor:default }
.etalage_magnifier div, .etalage_small_thumbs{ overflow:hidden }
.etalage_magnifier div img{ display:none }
.etalage_icon, .etalage_hint{ cursor:default; width:0; height:0; overflow:hidden }
ul .etalage_small_thumbs li.vertical{ float:none }
.etalage_zoom_area div {
overflow: hidden;
z-index: 997;
min-width: 600px;
min-height: 407px;
}
ul .etalage_zoom_preview{ position:absolute; z-index:998 }
.etalage_zoom_img, .etalage_hint{ z-index:999 }
ul li div.etalage_description{ position:absolute; bottom:0; left:0; z-index:999 }


.etalage_thumb .etalage_thumb_image, 
#etalage > li.etalage_magnifier > div > img{height:auto!important;}

 /*.etalage_small_thumbs{
 height: 350px !important
}
STIBO Changes Start */

#etalagevideo{
    display: inline-block;
    cursor: pointer;
    z-index: 1;
    position: absolute;
    top: 420px;
}
#etalagevideo img { display:block;}
#etalagevideoplay{
    /*display: none;*/
    cursor: pointer;
    position: absolute;
	z-index:999;
    background-color: transparent!important;
	/*border: 1px solid red;*/ 
    left: 37px;
    top: 460px;
}

/*#etalagevideo:hover {color: #fff;
  -webkit-transform: scale(1.08);
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  transform: scale(1.08);
}*/
#pdpvideoetalage{
    max-height: 320px;
    max-width: 510px;
    position: absolute;
    margin-left: 170px;
    z-index: 10000;
    display: none;
}

/* STIBO Changes End */
#etalage,#image1
{
	 display: block !important; 
	width:450px;
	height:450px;
}
#flix_hotspots{
	display:none;	
}