/*
HTML/CSS/JS'ified adaption by Joe Pettersson @ JoePettersson.com
Original concept and art by Orman Clark @ http://www.premiumpixels.com/simple-thumbnail-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 Elements *****/
html, body { border:0; margin:0; padding:0; height: 100%; }

img { border:0;} 
a img { border:0 } /* This stops link bordering on images */




/***** 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%;}

.leftAlig { float:left; }
.rightAlig { float:right; }

/***** Demo specific *****/
/* The elements below relate solely to the presentation of this example and can be safely ignored if not needed */
.wrapper { width:700px; margin:0 auto;}

.title {font-size: 11px; margin-bottom: 100px; font-weight: normal; color: #666; padding-bottom: 10px; border-bottom: 1px dotted #999;}
.credits {font-size: 11px; margin-top: 100px; color: #666; padding-top: 10px; border-top: 1px dotted #999;}
.credits a {color: #666;}
.noMarg {margin-top: 0px;}


#metaContainer {position: relative;}

/* The left and right navigation buttons */
#metaContainer .backLink, #metaContainer .forwardLink {
	position: absolute;
	top: 136px;
	width: 15px;
	height: 22px;
}
#metaContainer .backLink a, #metaContainer .forwardLink a {
	display: block;
	width: 15px;
	height: 22px;
	background-image: url(../img/nav-arrow-sprite.png);
	background-repeat: no-repeat;
	outline: 0;
}
#metaContainer .backLink {
	left: -20px;
}
#metaContainer .forwardLink {
	right: -19px;
}
#metaContainer .backLink a {background-position: 0 0; left: 0px;}
#metaContainer .backLink a:hover, #metaContainer .backLink a:active  {background-position: 0 -21px;}
#metaContainer .forwardLink a {background-position: -17px 0;}
#metaContainer .forwardLink a:hover, #metaContainer .forwardLink a:active  {background-position: -17px -21px;}

/* The Slider Container */
#slideContainer {
	width: 700px;
	height: 262px;
	background: url(../img/slider-background.png) no-repeat;
	padding: 20px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}