/*

 * Title: jQuery Etalage plugin CSS

 * Author: Berend de Jong, Frique

 * Author URI: http://www.frique.me/

 * Version: 1.3.1 (20120705.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): */

#etalage { display: none; }

/* Large thumbnail: */

#etalage .etalage_thumb { background: white url(../images/Preloader_3.gif) center no-repeat; border: #ccc 1px solid; }

/* Large thumbnail - image (in case you want to add a border around the image within the frame) */

#etalage .etalage_thumb_image { }

/* Small thumbnails: */

#etalage .etalage_small_thumbs li { border: 1px solid #ddd; margin: 10px; cursor: pointer; }

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

/* Zoomed image area: */

#etalage .etalage_zoom_area, .etalage_zoom_area { background: white url(../images/Preloader_3.gif) center no-repeat; }

/* Magnifier area (thumbnail hovering rectangle): */

#etalage .etalage_magnifier { background: white; border: 1px solid #bbb; }

/* Icon that will apear at the left bottom of the large thumbnail (optional): */

#etalage .etalage_icon { /*background: url(../images/zoom.png) no-repeat; */

width: 104px; height: 104px; }

/* Hint that will apear at the top right of the large thumbnail (optional): */

#etalage .etalage_hint { /*background: url(../images/hint.gif) no-repeat; */

width: 130px; height: 57px; }

/* Description area (optional) */

#etalage .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_thumb, .etalage_thumb_image, .etalage_source_image, .etalage_zoom_preview, .etalage_icon, .etalage_hint { display: none }

.etalage_source_image { display: none !important; }

.etalage, .etalage ul, .etalage li, .etalage img, .etalage_hint, .etalage_icon, .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, .etalage_small_thumbs li { float: left }

.etalage_small_thumbs li img { width: 60px !important; height: 100% !important; }

.etalage_small_thumbs { width: 100% !important; }

.etalage_right { float: right }

.etalage li { position: absolute }

.etalage img { vertical-align: bottom; max-width: none; }

/*.etalage_thumb_image { width: 100% !important; }*/

.etalage_zoom_area div { width: 530px !important; }

.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 }

.etalage_small_thumbs li.vertical { float: none }

.etalage_zoom_area { z-index: 996 }

.etalage_zoom_area div { overflow: hidden; z-index: 997 }

.etalage_zoom_preview { position: absolute; z-index: 998 }

.etalage_zoom_img, .etalage_hint { z-index: 999 }

.etalage { direction: ltr; }

div.etalage_description { position: absolute; bottom: 0; left: 0; z-index: 999 }

div.etalage_description.rtl { direction: rtl; text-align: right }

/*--responsive design--*/

@media only screen and (max-width: 1024px) {

.etalage_zoom_area div { width: 300px !important; }

}

@media only screen and (max-width: 768px) {

.etalage_zoom_area div { width: 380px !important; }

}

@media only screen and (max-width: 640px) {

.etalage_zoom_area div { width: 200px !important; }

}

@media only screen and (max-width: 480px) {

.etalage_zoom_area div { display: none; }

}

 @media only screen and (max-width: 320px) {

#etalage .etalage_thumb { width: 90% !important; }

}