/*
 * slideshow.css
 * 
 * Accompanying CSS for slideshow displays.
 * 
 * built 2009 by max thom stahl for vsa partners inc.
 */

#slideshow {
	clear: both;
	display: block;
	position: relative;
}

#categorylanding #slideshow { margin-bottom: 40px; }

#product-slideshow {
	color: white;
	margin-bottom: -138px; 
}

.slideshow-mask {
	display: block;
	width: 697px;
	height: 361px;
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
}

#productdetail .slideshow-mask, #categorylanding .application .slideshow-mask {
	height: 204px;
}

#categorylanding .application .slideshow-mask { width: 100%; }

#product-slideshow-images { 
	height: 413px;
	width: 100%;
}

html.js-enabled .slideshow-mask {
  overflow: hidden;
}
body#artistlanding .promo-viewer .slideshow-mask {
  width: 697px;
  height: 486px;
}

/*
 * This element is huuuuuuuuuge but it's huge for a reason:
 * because from here it's impossible to tell if there will be
 * two slides or ten. So, it's several screen-widths wide by
 * default. If this is going into a CMS though, this value
 * can be set by an inline style on the .slideshow-inner element
 * itself. Just take the width of the slideshow mask and multiply
 * that by how many slides you have and that should be the width
 * of the slideshow-inner container. This is not important for
 * users who have javascript enabled, as in that case overflow
 * is simply disabled. The scrollbar only stays when javascript
 * is disabled, and in that case the slideshow-inner element
 * need only be as wide as its content.
 */
.slideshow-inner {
  width: 10000px;
	position: absolute;
	height: 361px;
	clear: both;
}

#product-slideshow-slider { 
	height: 100%; 
}

.no-slide .slideshow-mask {
	height: auto;
	}
	
.no-slide .slideshow-inner {
	position: relative;
	height: auto;
	}
	
.slideshow-slide {
  width: 980px;
  display: block;
  float: left;
}

#product-slideshow .slideshow-slide { width: 737px; }

#productdetail .slideshow-inner { height: 100%; }
#categorylanding .application .slideshow-inner { height: 100%; }
#productdetail .slideshow-slide { width: 697px; }
#categorylanding .application .slideshow-slide { width: 960px; }

body#artistlanding .slideshow-inner, body#artistlanding .promo-slide { height: 502px; }
body#artistlanding .promo-viewer .slideshow-mask,
body#artistlanding .promo-viewer .slideshow-slide,
body#home .promo-viewer .slideshow-mask,
body#home .promo-viewer .slideshow-slide,
body#buyers-guide .promo-viewer .slideshow-mask,
body#buyers-guide .promo-viewer .slideshow-slide { width: 660px; }
body#artistlanding .promo-viewer .slideshow-mask,
body#artistlanding .promo-viewer .slideshow-slide { width: 652px; }
body#buyers-guide .filter-articles .slideshow-mask { width: 940px; height: 778px; }
body#buyers-guide .filter-articles .slideshow-inner { height: 778px; }
body#country-jump .slideshow-mask, body#country-jump .slideshow-slide { width: 329px; height: 486px; }
body#productlistingall .product-list .slideshow-mask, body#productlisting .product-list .slideshow-mask { width: 1000px; }
body#productlistingall .product-list .slideshow-slide, body#productlisting .product-list .slideshow-slide { display: none; float: none; height: 1422px; width: 1000px; }
.product-list .oneRow { height: 474px; }
.product-list .twoRow { height: 948px; }
/*body#productlistingall .product-list .slideshow-inner { height: 1422px; }*/
#productlistingall .filter-pagination, #productlisting .filter-pagination { background: #6085B9 url('bg-filter-pagination.jpg') repeat-x left top; width: 980px; margin: auto; clear: both; border-top: none; }
	#productlistingall .filter-pagination .pages, #productlisting .filter-pagination .pages { font-size: 12px; margin: 0; line-height: 27px; padding-left: 12px; }
	#productlistingall .filter-nav .prev, #productlisting .filter-nav .prev { background: url("btn-filter-prevnext.png") no-repeat scroll left bottom transparent }
	#productlistingall .filter-nav .next, #productlisting .filter-nav .next { background: url("btn-filter-prevnext.png") no-repeat scroll right bottom transparent }
/*body#productlistingall .top-pager { margin-top: 10px; }*/

#lightbox-slideshow .slideshow-mask, #lightbox-slideshow .slideshow-slide { width: 651px; height: 360px; }
#lightbox-slideshow .filter-articles { height: 406px; text-align: left; }