.table-head {
	background: #F8F8F8 url('../graphics/table/table-head-wrap-bg.jpg') bottom repeat-x;
	padding: 0 10px 10px;
}

.table-head h2.head {
	color: #000;
	font: 700 20px/1.3 'Futura Today Bold', Arial, Helvetica, sans-serif;
	letter-spacing: .04em;
	margin: 0 0 4px 0;
	padding: 20px 0 0;
	text-transform: uppercase;
}

.table-head h3.subhead {
	color: #343434;
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 4px;
}

.table-head p.chatter {
	color: #666;
	font-size: 12px;
	line-height: 18px;
	margin: 0 0 5px 0;
}

.table-container{
	margin: 0 0 15px;
	padding: 0 8px;
}

table{
	border: none;
	border-collapse: collapse;
	font: normal 13px/1.5 arial, Helvetica, sans-serif;
	margin: 10px 0 0;
	width: 100%;
}

tr:first-child {
	background: #fff;
	text-transform: uppercase;
}

tr:first-child {
  	background: none;
  	border-bottom: 5px solid #fff;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:nth-child(2) {
  border-top: 1px solid #ccc;
}

tr:last-child {
	border-bottom: 1px solid #ccc;
}

.lt-ie9 tr {
	border-bottom: 1px solid #ececec;
}

tr:first-child td{
	color: #343434;
	padding: 2px 10px 0;
	font-weight: 700;
}

.lt-ie9 tr:first-child td{
	padding: 2px 10px 8px;
}

td {
	color: #343434;
	font-weight: normal;
  	padding: 10px;
	text-align: right;
	vertical-align: middle;
}

tr:nth-child(2) td {
  background: url('../graphics/table/td-top-bdr.jpg') repeat-x;
  padding: 18px 10px 10px; 
}

p.table-source {
	color: #999;
	font: normal 11px/1.5 arial, Helvetica, sans-serif;
	margin: 5px 0 0 10px;
}

.table-wrap-530 {
	background-color: #fff;
	border-bottom: 1px solid #D1D3D4;
	border-top: 10px #00A53C solid;
	-moz-box-shadow: 1px 1px 10px 2px rgba(204, 204, 204, 0.5);
	-webkit-box-shadow: 1px 1px 10px 2px rgba(204, 204, 204, 0.5);
	box-shadow: 1px 1px 10px 2px rgba(204, 204, 204, 0.5);
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=-90, Color='#e5e5e5')";  
	width:90%;
}

.lt-ie9 .table-wrap-530 {
	border-right: 1px solid #ccc;
}


/* =============================================================================
   MEDIA QUERIES FOR RESPONSIVE TABLE LAYOUT 
   ========================================================================== */

	@media only screen and (max-width: 480px), (min-device-width: 768px) and (max-device-width: 1024px)  {
		table, thead, tbody, th, td, tr {display: block; }
		tr {border-top: 1px solid #ccc; border-bottom:10px solid #fff;}
		tr:first-child {position: absolute; top: -9999px; left: -9999px;}
		tr:last-child {border-bottom: none;}
		td {border: none; border-bottom: 1px solid #d7d7d7; position: relative; padding-left: 50%; text-align: left;}
		td:before {position: absolute; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;}
		td:last-child {border-bottom: 1px solid #ccc;}
		tr:nth-child(2) td {background: none; padding-left: 50%;}
		
/*  ADD TITLES FOR COLUMNS HERE  ============================================================================= */
		td:nth-of-type(1):before { content: "COLUMN 1"; }
		td:nth-of-type(2):before { content: "COLUMN 2"; }
		td:nth-of-type(3):before { content: "COLUMN 3"; }
		td:nth-of-type(4):before { content: "COLUMN 4"; }
	}
	

	@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
		body {padding: 0; margin: 0; width: 320px; }
		tr:nth-child(2) td {background: none; padding: 10px;}
	}
	

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body {width: 495px;}
	}