#narrative-frame {
	position: relative;
	overflow-y: scroll;
	height: 368px;
	padding: 1em;
	background-color: #f8f8f8;
	border: 1px solid #c0c0c0;
}

#narrative-frame h3 {
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	text-indent:0px;
	color:#003399;
	margin-bottom:10px;
	margin-top:20px;
}

.column {
	padding: 1em;
	border-radius: 5px;
	margin-bottom: 1em;
	background-color: #eeeeee;
}

.column h3 {
	color: #1d456e;
	margin-bottom: 0.5em;
}

#vp-image {
	display: none;
}

@media screen and (min-width: 641px) {

	.column {
		float: left;
		width: 40%;
		margin-right: 1em;
		height: 260px;
	}
	
	#column-deaerators {
		height: 568px;
	}

}

@media screen and (min-width: 761px) {

	#vp-header {
		margin-bottom: 1em;
	}
	
	#vp-description {
		margin: 0;
	}
	
	#vp-image {
		display: block;
		float: right;
		width: 25%;
		margin: 0 0 1em 0;
		color: #555555;
	}
	
	.column {
		float: left;
		width: 30%;
		margin-right: 1em;
		height: 260px;
	}

}


@media screen and (min-width: 961px) {
	
	#vp-header,
	#vp-description {
		float: left;
		width: 75%;
	}
		
	#vp-image img {
		height: auto;
	}

	.column {
		float: left;
		min-height: 200px;
		width: 40%;
	}
	
	.column div {
		min-height: 250px;
	}
	
	#column-condensate div {
		background-image: url("../../images/bg-listing-condensate.png");
		background-repeat: no-repeat;
		background-position: right top;
	}
	
	#column-boiler-feed-and-surge-tank div {
		background-image: url("../../images/bg-listing-boilerfeed.png");
		background-repeat: no-repeat;
		background-position: right bottom;
	}
	
	#column-deaerators div {
		background-image: url("../../images/bg-listing-deaerator.png");
		background-repeat: no-repeat;
		background-position: right top;
	}
	
	#column-pumps div {
		background-image: url("../../images/bg-listing-pumps.png");
		background-repeat: no-repeat;
		background-position: right top;
	}
	
	#column-vacuum div {
		background-image: url("../../images/bg-listing-vacuum.png");
		background-repeat: no-repeat;
		background-position: right top;
	}
		
}