/*
HTML/CSS/JS'ified adaption by Joe Pettersson @ JoePettersson.com
Original concept and art by Orman Clark @ http://www.premiumpixels.com/clean-simple-image-slider-psd/

The contents of this template are in the public domain, and therefore require no attribution (although 
it's always appreciated!) and can be used commercially and modified in any way you choose.
*/

/***** Global Classes *****/
.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clear { display: inline-block; }
html[xmlns] .clear { display: block;}
* html .clear { height: 1%;}





/* The Slider Container */
#slideContainer {
	margin: 0 auto;
	max-width: 1085px;
	
	height:auto;
	padding: 0 0 0 0;
	z-index: 1;
	position: relative;
	background:#fff;
}




#slideShim {
	-webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);
}

#slideShim img {
	width: 100%;
}

	
	
	
/* The Pager */
#pager {position: absolute; left: 850px; top:630px; text-align: center; margin: 0px 0 0px 0px; z-index: 100; width: 150px;}
#pager a {display: block;text-indent: -5000px;width: 10px;height: 10px;background-image:url(../img/pager-sprite.png);background-repeat: no-repeat; float: left; margin-right: 5px;}
#pager a {background-position: 0 0;}
#pager a:hover {background-position: 0 -11px;}
#pager a:active {background-position: 0 -11px;}
#pager a.activeSlide {background-position: 0 -22px;}
#pager a.activeSlide:hover {background-position: 0 -22px;}
#pager a.activeSlide:active {background-position: 0 -22px;}




#pagerpage {position: absolute; right: 0px; top:470px; text-align: center; margin: 0px 0 0px 0px; z-index: 100; width: auto;}
#pagerpage a {display: block;text-indent: -5000px;width: 10px;height: 10px;background-image:url(../img/pager-sprite.png);background-repeat: no-repeat; float: left; margin-right: 5px;}
#pagerpage a {background-position: 0 0;}
#pagerpage a:hover {background-position: 0 -11px;}
#pagerpage a:active {background-position: 0 -11px;}
#pagerpage a.activeSlide {background-position: 0 -22px;}
#pagerpage a.activeSlide:hover {background-position: 0 -22px;}
#pagerpage a.activeSlide:active {background-position: 0 -22px;}


/* The whats hot ribbon */
.whatsHot {position: absolute; width: 107px; height: 108px; background: url(../img/whats-hot-bg.png) no-repeat; left: 0px; top:4px; z-index: 100;}


#slidecaption {
	margin-right: 15px;
	padding: 6px 0 0 0;
	color:#888;
	font-size:115%;
	float:left;
	width:87%;
	
	}

.cap {
	padding: 10px 0 0 0;
	color:#888;
	font-size:90%;
	float:left;
	width:auto;
	}