chart style April 2

chart

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700,600,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<style>
.bigChart {
	width: 100%;
	max-width: 600px;
	margin: 0 auto 130px;
}

.smallChart {
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
}

.chartMock {
	width: 100%;
	height: 360px;
	background-color: silver;
}

.chartHed_big, .chartHed_small, .chartIntro, .chartNote, .chartSource, .chartCredit {
	font-family: 'Open Sans', 'Arial', sans-serif;
	color: #333333;
	text-align: left;
	}
	
.chartHed_big {
	font-size: 2.4rem;
	line-height: 3.1rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.chartHed_small {
	font-size: 2rem;
	line-height: 2.7rem;
	font-weight: 600;
	margin-bottom: 0.6rem;
}

.chartIntro {
	font-size: 1.6rem;
	line-height: 2rem;
	font-weight: 400;
	margin-bottom: 2rem;
}

.chartNote, .chartSource, .chartCredit {
	font-size: 1.3rem;
	line-height: 1.7rem;
}

.chartNote {
	margin-top: 1rem;
}

.chartSource {
	display: inline-block;
	float: left;
}

.chartCredit {
	display: inline-block;
	float: right;
}

/*clearfix hack */
.clearFloatFix:after {
  content: "";
  display: table;
  clear: both; 
}

</style>



<div class="bigChart clearFloatFix">
					<h1 class="chartHed_big">Chart headline here goes here</h1>
					<p class="chartIntro">intro copy goes here. Aenean pretium mattis felis, a suscipit neque posuere ac. In nunc ipsum, porta in sapien sit amet, egestas tincidunt diam. Proin pharetra massa quis turpis scelerisque, ut pharetra enim semper. Integer congue lacus felis, sit amet accumsan neque suscipit feugiat.</p>
					<div class="chartMock"></div>
					<p class="chartNote">NOTE: This info is a footnote. As it should be. Amen. Rubber ducky. This info is a footnote. As it should be. Amen. Rubber ducky.</p>
					<p class="chartSource">SOURCE: The Circus of the Stars; <em>The Dallas Morning News </em></p>
					<p class="chartCredit">Tairfig Hairtay/Staff</p> 
				</div>
				
				
				<div class="smallChart clearFloatFix">
					<h1 class="chartHed_small">Chart headline here</h1>
					<p class="chartIntro">intro copy goes here. Aenean pretium mattis felis, a suscipit neque posuere ac. In nunc ipsum, porta in sapien sit amet, egestas tincidunt diam. Proin pharetra massa quis turpis scelerisque, ut pharetra enim semper. Integer congue lacus felis, sit amet accumsan neque suscipit feugiat.</p>
					<div class="chartMock"></div>
					<p class="chartNote">NOTE: This info is a footnote. As it should be. Amen. Rubber ducky. This info is a footnote. As it should be. Amen. Rubber ducky.</p>
					<p class="chartSource">SOURCE: The Circus of the Stars; <em>The Dallas Morning News</em></p>
					<p class="chartCredit">Tairfig Hairtay/Staff</p> 
				</div>