#content-container{width: 940px; margin: 10px auto 10px;}


	/*--------------------------*/
	/*- FEATURE AREA -----------*/
	#feature-container{overflow: hidden; white-space: nowrap; width: 1200px; margin: 0 0 0px -130px;}
		span.fade-overlay-right{background: rgba(0, 0, 0, 0.6) url(img/fade-right.png) top left repeat-y;}
		span.fade-overlay-left{background: rgba(0, 0, 0, 0.6) url(img/fade-left.png) right top repeat-y;}

		#feature-container ul {position: relative; z-index: 2; margin-left: -810px; left: 0px; width: 9999px;}
			#feature-container ul li {display: inline; position: relative;}
				#feature-container ul li a.image-link{display: block; overflow: hidden; float: left; width: 940px; height: 400px; margin: 0px; padding: 0px; position: relative; z-index: 5;}
				#feature-container ul img {display: block; margin: auto; padding: 0px;}

		.overlay-container{width: 940px; margin: -400px 0px 0px 130px; height: 400px; background: none; position: relative; z-index: 4;}
			span.fade-overlay-right{display: block; width: 940px; height: 400px; position: absolute; z-index: 2; left: 940px; top: 0px;}
			span.fade-overlay-left{display: block; width: 940px; height: 400px; position: absolute; z-index: 2; right: 940px; top: 0px;}
			

			/*---------------------------------*/
			/*- POST TITLE AND INTRO ----------*/
			.slider-post{width: 860px; padding: 20px; margin: 0px auto; bottom: 20px; left: 20px; position: absolute; white-space: normal; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; behavior: url(PIE.htc); background: url(img/transparent-dark-bg.png) repeat;}
				.slider-post h2{padding: 0px; margin: 0px; font-size: 27px;}
					.slider-post h2 a{font-weight: lighter; font-size: 18px; text-transform: uppercase; color: #fff;}
						.slider-post h2 a:hover{color: #f33;}
				.slider-post p{padding: 0px; margin: 0px; font-size: 14px; color: #BCBCBC;}
				
				/*-------------------*/
				/*- ARROWS ----------*/
				.overlay-container a.previous, .overlay-container a.next{display: block; width: 35px; height: 36px; position: absolute; top: 45%; z-index: 6; text-indent: -9999px; overflow: hidden;}
				.overlay-container a.previous, .overlay-container a.next{background: url(img/sprite.png) no-repeat;}
				.overlay-container a.previous	{background-position: -0px -60px; left: -50px;}
				.overlay-container a.next		{background-position: -36px -60px; right: -50px;}
					.overlay-container a.previous:hover	{background-position: -0px -97px;}
					.overlay-container a.next:hover		{background-position: -36px -97px;}


/*-----------------------------------------------------------------------------------------------------------------------------------*/
/*- CLEARFIX --- * I prefer not to touch this code, I don't recommend you do so either, it works... so don't fix whats working ;) * -*/
/*-----------------------------------------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear
{background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none;	margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0;}

/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after{clear: both; content: '.'; display: block; visibility: hidden; height: 0;}
.clearfix{display: inline-block;}
* html .clearfix{height: 1%;}
.clearfix{display: block;}