/*
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 Elements *****/
html, body { border:0; margin:0; padding:0; height: 100%; }
body { font:12px "Helvetiva Neue", Helvetica, Arial, sans serif; background: url(../img/page-background.jpg) repeat;}

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

.credit {font-size: 11px; color: #999; margin-top: 60px; text-align: center;}
.credit a {color: #999;}

h1 {font-size: 13px; margin: 0px 0px 60px; font-family: Georgia, Times New Roman, serif; font-weight: normal; text-align: center; color: #333; text-shadow: 1px 1px 1px #fff; -moz-text-shadow: 1px 1px 1px #fff; -webkit-text-shadow: 1px 1px 1px #fff; -o-text-shadow: 1px 1px 1px #fff;}

/***** Demo specific *****/
.wrapper { width:730px; margin:0 auto; padding-top: 100px;}
#metaContainer {position: relative;}

/* The left and right navigation buttons */
#metaContainer .backLink, #metaContainer .forwardLink {position: absolute; top: 130px; width: 15px; height: 22px;}
#metaContainer .backLink a, #metaContainer .forwardLink a {display: block; width: 22px; height: 42px; text-indent: -9999em; background-image: url(../img/nav-arrow-sprite.png); background-repeat: no-repeat; outline: 0;}
#metaContainer .backLink {left: 43px;}
#metaContainer .forwardLink {right: 50px;}
#metaContainer .backLink a {background-position: 0 0; left: 0px;}
#metaContainer .backLink a:hover, #metaContainer .backLink a:active  {background-position: 0 -43px; width: 30px; margin-left: -8px;}
#metaContainer .forwardLink a {background-position: -96px 0;}
#metaContainer .forwardLink a:hover, #metaContainer .forwardLink a:active  {background-position: -88px -43px; width: 30px!important; margin-right: -8px!important;}

/* The Slider Container */
#slideContainer { margin: 0 auto; width: 730px; height: 350px; background: url(../img/slider-background.png) no-repeat; padding: 20px 81px; z-index: 1;}

/* The Pager */
#pager {text-align: center; margin: -59px auto 0px; z-index: 100; width: 45px;}
#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;}

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