table#responsiveTable { 
  margin: 0 auto;
  border-collapse: collapse;
  font-family: Agenda-Light, sans-serif;
  font-weight: 100; 
  background: #333; color: #fff;
  text-rendering: optimizeLegibility;
  border-radius: 5px; 
}
table#responsiveTable caption { 
  font-size: 2rem; color: #444;
  margin: 1rem;
  /*background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/responsiveTable.png), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/responsiveTable2.png);*/
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center left, center right; 
}
table#responsiveTable thead th { font-weight: 600; }
table#responsiveTable thead th, table#responsiveTable tbody td { 
  padding: .8rem; font-size: 1.4rem;
}
table#responsiveTable tbody td { 
  padding: .8rem; font-size: 1.4rem;
  color: #444; background: #eee; 
}
table#responsiveTable tbody tr:not(:last-child) { 
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;  
}

@media screen and (max-width: 600px) {
  table#responsiveTable caption { background-image: none; }
  table#responsiveTable thead { display: none; }
  table#responsiveTable tbody td { 
    display: block; padding: .6rem; 
  }
  table#responsiveTable tbody tr td:first-child { 
    background: #666; color: #fff; 
  }
	table#responsiveTable tbody td:before { 
    content: attr(data-th); 
    font-weight: bold;
    display: inline-block;
    width: 6rem;  
  }
}