/*
//	===== _magazine_v3_article_base.scss // Woo, SASS! =====
//	:mode=css:
*/

/* ----------------- [article holder / base styling] ----------------- */
.article_holder {
	background-color: #fff;
	border: 1px solid $grey-84;
	margin: 0 0 20px 0;
	position: relative;
	width: $width-article_holder;
	
	.article_credit {
		color:#81888d;
		font: 1.1em/1.2em "Georgia", "Times New Roman", "Times", serif;
		margin: 10px 10px 0 0;
		position: absolute;
		right: 0;
		text-align: right;
		top: 0;
		width: 225px;
		
		a { display: block; }
		a.name { color: #1E1C1A; float: right; margin-left: 4px; }
		a.office { font-size: 0.8em; }
	}
	
	.article_content {
		clear: both;
		margin: 45px 25px 60px;
		overflow: hidden;
		
		h1.feature_title {
			border-bottom: 3px solid #777;
			color: #30393D;
			float: left;
			height: auto;
			margin: 5px 0 20px;
			padding: 0 0 10px;
			text-shadow: 0 1px 0 #fff;
			width: 100%;
			
			.sub_title { font-size: 0.75em; font-weight: normal; }
		}
	}
	
	a.readmore {
		background: url($rm_css_path + "../images/read-more.gif") no-repeat top right transparent;
		bottom: 0;
		line-height: 15px;
		margin: 0 20px 20px 0;
		padding-right: 20px;
		position: absolute;
		right: 0;
		
		&:link, &:hover { color: #393939; }
	}
}


/* ----------------- [section image] ----------------- */
@mixin section_image($side: none, $width: 530px, $caption: bottom, $border: true) {
	@extend .section_image;
	$width: $width + 10;
	
	width: $width;
	
	@if $side == left {
		float: left;
		@if $border == false { margin: 5px 15px 15px 0; } @else { margin-right: 10px; }
	} @else if $side == right {
		float: right;
		@if $border == false { margin: 5px 0 15px 12px; } @else { margin-left: 12px; }
	} @else {
		width: $width;
		&, img { margin-left: auto; margin-right: auto; }
	}
	
	img {
		@if $border == false {
			border: none;
			padding: 0;
		}
	}
	
	p.caption {
		@if $caption == over {
			background: url($rm_css_path + "../images/black_semi_transparent_bg.png") repeat scroll 0 0 transparent;
			color: #fff;
			position: absolute;
			padding: 10px;
			width: $width - 30;
			
			@if $border == false {
				left: 0;
				bottom: 5px;
			} @else {
				left: 5px;
				bottom: 10px;
			}
		}
	}
}

.section_image {
	display: inline-block;
	float: none;
	margin: 0 0 10px 0;
	overflow: hidden;
	position: relative;
	
	img {
		border: 1px solid #e4e4e4;
		display: block;
		margin-bottom: 5px;
		padding: 4px;
	}
	
	p.caption {
		color: #000;
		float: none;
		font-style: italic;
		margin-bottom: 0px;
		padding: 0 5px;
		width: 100%;
	}
}