/*
 * 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.
 * -------------------------------------------------------------------------------
 */

 /*
 * This CSS is only used for the demo pages.
 */
/* 
body{ background:#f6f6ef url(images/demo_bg.jpg); font:15px Ubuntu,'Segoe UI',Calibri,Verdana,sans-serif; line-height:22px; color:#444; width:920px; margin:0 auto; text-shadow:0 0 1px #f7f7f7; position:relative; padding:44px 0 70px }
h1{ font:100 italic 58px Georgia,'Segoe UI',sans-serif; margin:0 0 5px; color:#555 }
h2{ font:26px Ubuntu,'Segoe UI',sans-serif; margin:32px 0; line-height:22px; color:#555 }
h2.closer{ margin-bottom:10px }
a{ color:#d41d1d }
hr{ border:0; margin:0; padding:0; color:#f6f6ef; clear:both; border-bottom:1px dashed #999; margin-bottom:50px }
#examples{ position:absolute; left:0; width:300px; overflow:visible }
#description{ overflow:hidden; margin-left:350px }
.code{ font:14px monospace; background:#333; color:#ddd; padding:15px 20px; text-shadow:0 0 1px #000 }
.tab{ margin-left:30px }
.comment{ color:#f5dd72; font-style:italic }
.class{ color:#61e12e }
.list{ margin:35px 0 45px; border-collapse:collapse }
.list th{ font-style:italic; font-weight:normal; text-align:left }
.list td{ vertical-align:top; padding:3px 20px 3px 6px; border:1px solid #ccc; background:#f6f6ef }
.list .option{ font-weight:bold }
.list .default{ padding-right:0 }
.list tr:hover td{ background:#fff } */

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

/* Large thumbnail: */
#etalage .etalage_thumb{
	/* background: white url(../images/loading.gif) center no-repeat; */
	/* border: 1px solid #ddd;
	padding: 6px;
	-webkit-box-shadow: 0 0 10px #ddd;
	-moz-box-shadow: 0 0 10px #ddd;
	box-shadow: 0 0 10px #ddd; */
}
/* 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{
	background: white;
	border: 1px solid #ddd;
	margin: 10px;
	padding: 3px;
}
/* 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 .etalage_zoom_area,
.etalage_zoom_area{
	background: white url(../images/loading.gif) center no-repeat;
	border: 1px solid #ddd;
	padding: 6px;
	-webkit-box-shadow: 0 0 10px #ddd;
	-moz-box-shadow: 0 0 10px #ddd;
	box-shadow: 0 0 10px #ddd;
}

/* 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: 14px;
	height: 14px;
}

/* 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, .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_right{ float:right }
.etalage li{ position:absolute }
.etalage img{ vertical-align:bottom; max-width:none }
.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 }