Jobs report 2016// source http://jsbin.com/vaqomuz

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="jobs report 2016">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
	#employment-block {
		vertical-align: top;
	}
	.employment-block {
		background-color: #def9f7;
		display: inline-block;
		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Sans-serif';
		height: 260px;
		padding: 20px;
		margin: 15px;
		position: relative;
		width: calc(33.33% - 27px);
		vertical-align: top;
		min-width: 258px;
		text-align: left;
		box-shadow: 0 5px 7px rgba(0,0,0,.15);
	}
	.employment-block > .block-top {
		font-family: 'ProximaNovaSemiBold', 'Arial';
		font-size: 16px;
		margin-top: 8px;
		text-transform: uppercase;
		text-align: center;
	}
	.block-top.sectors {
		padding-top: 12px;
		padding-bottom: 20px;
		font-weight: 800;
		font-size: 24px;
		text-transform: none;
	}
	.sectors-span {
		font-family: 'ProximaNovaSemiBold', 'Arial';
		margin-top: 8px;
		font-size: 16px;
		line-height: 30px;
		text-align: center;
		text-transform: uppercase;
	}
	.employment-block:nth-of-type(2), .employment-block:nth-of-type(3)  {
		margin-left: 0;
	}
	.annotation-container {
		margin-left: auto;
		margin-right: auto;
		display: block;
		height: 10px;
		max-width: 850px;
		width: 100%;
		position: relative;
	}
	.shaded-annotation {
		color: #777;
		font-size: 11px;
		font-weight: 300;
		max-width: 850px;
		right: 0;
		top: 0;
		position: absolute;
		text-align: right;
		text-transform: uppercase;
		width: 100%;
	}

.employment-block > .block-label {
		color: #474747;
		font-size: 11px;
		text-transform: uppercase;
		text-align: left;
	}
	.rose-or-dropped, .added-or-lost {
		font-weight: 800;
	}
	.block-top {
		line-height: 30px;
		text-align: left;
	}
	.block-bottom {
		margin-top: 12px;
		font-size: 11px;
		text-align: left;
		line-height: 14px;
		margin-left: auto;
		margin-right: auto;
		max-width: 540px;
	}
	.change-pct {
		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Sans-serif';
		font-weight: 800;
	}

.numbers-div {
		height: 77px;
		font-size: 52px;
		margin-bottom: 5px;
		margin-top: -5px;
		text-align: center;
		width: 100%;
		font-weight: 300;
	}
	#jobs-block {
		width: 25%;
	}
	.highlight-change {
		background-color: #c9f3f0;
		display: inline-block;
		font-size: 24px;
		vertical-align: top;
		padding-left: 5px;
		padding-right: 5px;
	}

.updated-span {
		font-size: 24px;
		margin-top: 5px;
		text-align: center;
	}
</style>
</head>
<body>
<!DOCTYPE html>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<div style="display:block; text-align: center;">
<div class="employment-block"><span class="block-label"></span><div class="block-top">The economy</div>
	<div class="unemployment-rate numbers-div"><div style="color: #fdbe85; font-size: 28px; display: inline-block; vertical-align:middle;">+</div><div style="display: inline-block; vertical-align:middle;">209,000</div></div>
	<div class="updated-span"><span class="highlight-change"><span class="added-or-lost">added jobs</span></span></div>
	<div class="block-bottom">Total Nonfarm payrolls, a measure of the number of U.S. workers in the economy.</div>
  </div>
</div>
</body>
</html>