/*	================	Feature fader	================   */
/*
	Handles styling the feature box, and the content that is
	loaded into it via AJAX-y methods.
	
		Notes:
		* Assumes that images sent to it are 150x200px.
		* Assumes sent text is relatively short, 1-3 lines.
		
*/

/*	#feature wraps the entire feature box content.	*/
#feature {
	position: relative;
	height: 200px;
	margin-right: 10px;
	border: 1px solid #000;
	background-color: #343404;
	padding: 0px;
	color: #fff;
	border-bottom: none;
}

/*	fader wraps content that is delivered via AJAX.	*/
.fader {
	position: relative;
	width: 100%;
}

/*	fader-content is the top level of the html stuff delivered via AJAX.	*/
.fader-content {
	text-align: center;
	height: 200px;
	position: absolute;
	top:0px;
	left: 0px;
}

	.fader-content img {
		border-right: 1px solid #000;
	}

	.fader-content table {
		margin: 0px;
		padding: 0px;
		border-collapse: collapse;
	}
	
	.fader-content table td,
	.fader-content table tr {
		margin: 0px;
		padding: 0px;
	}

/*	fader-description wraps the text stuff in the content table.	*/
.fader-description {
	padding: 10px;
}

	.fader-description h2 {
		color: #fff;
		font-size: large;
		line-height: 1.2;
	}

	.fader-description a { color: #fbce00; }

	.fader-description .link-to-more {
		position: absolute;
		bottom: 0px;
		right: 0px;
	}

/*	sub-feature is the black bar beneath the rotating content.		*/
#sub-feature {
	margin-right: 10px;
	border: 1px solid #000;
	background-color: #000;
	padding: 5px 10px;
	color: #fff;
	text-align: right;
	border-top: none;
	font-size: 11.5px;
}

	#sub-feature a { color: #fbce00; }


/*	The message that displays before the feature loads.	*/
#feature-explanation {
	position: absolute;
	padding: 10px;
}

	#feature-explanation a { color: #fbce00; }