/**
Based on an idea by Scott Jehl 
**/

@media screen and (max-width: 47em){ 
  html:not(.responsive-tap) .responsive-tap th, 
  html:not(.responsive-tap) .responsive-tap td {
    font-size: 0;
    padding: 0;
    content: "";
    height: 7px;
  }
  html:not(.responsive-tap) table {
    position: relative; 
    overflow: hidden;
  }
  html:not(.responsive-tap) table.responsive-tap:before {
    content: attr(data-view-label);
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-weight: bold;
    font-size: 1.6em;
    text-align: center;
    vertical-align: middle;
    z-index: 100;
    font-family: Helvetica, sans-serif; 
  }
  html.responsive-tap table:before {
    content: "";
    display: block;
    background: #333;
    padding: 10px;
  }  
  html.responsive-tap table:before{
    content: attr(data-close-label);
    position: absolute;
    top: 0;
    left: 15px;
    padding: .5em 1em;
    margin: 10px 0;
    font-weight: bold;
    color: #fff;
    background: #000;
    border: 1px solid #fff;
  }
   /* around here we could use the HTML class to hide all other content on the page aside from the table */
  html.responsive-tap p, html.responsive-tap h1 {
    display: none; 
  }
}