table { 
  width:80%; 
  border-collapse: collapse; 
  margin: 0 auto;
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #fcfcfc; 
}
th { 
  background: #fff; 
  color: black; 
  font-weight: bold; 
  border-bottom: 2px solid black;
  
}
td, th {
  padding: 11px 5px;
  border: none;
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
  text-align: left;
  /* margin: 10px; */
}
td li {}
td li span {margin-left: -10px;}
th {
  border-bottom: 2px solid #000000;
  border-top:none;
  border-left:none;
  border-right:none;
  font-size: 0.8rem;
  font-weight: 100;
  color: #000000;
  letter-spacing: 1.5px;
}
thead   {
margin-bottom:1rem;
}
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px) {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr {
		display: block;
		
	}
	table {
		width:90%
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		/* position: absolute; */
		/* Top/left values mimic padding */
		/* top: 6px; */
		/* left: 6px; */
		width: auto;
		padding-right: inherit;
		white-space: nowrap;
		margin: 0;
		padding-right: 0.2rem;
	}
	
	/* my new styles and overides */
	 
	tr {
   		 padding: 0.5rem 0;
   		 border: none;
   		 border-bottom: 1px solid #f1f1f1;
   		 display: block;
   		 padding-left: 0.4rem;
 }
	th {display: none;}
	.thead {display: none;}
	td {
		border: none;
		/* padding: 0.5rem 0; */
		margin: 0px 0 0 0;
		padding-top: 0.36rem;
		padding-bottom: 0.3rem;
		font-size: 0.8rem;
		display: inline-table;
		
	}
	td:nth-of-type(1){
    	padding: 0rem 0 0rem 0rem;
    	text-align: left;
    	font-weight: 600;
    	font-size: 1rem;
    	/* line-height: 1.2rem; */
    	/* baseline-shift: 10px; */
    	display: inline-block;
    	margin: 0;
    	width: 100%;
    }
	td:nth-of-type(2){clear: both;/* float: left; *//* display: inline-block; */}
	
	
	/*
	Label the data
	*/
	/* DO THIS ON EACH PAGE 
	td:nth-of-type(1):before { content: "PLAY"; }
	td:nth-of-type(2):before { content: "CHARACTOR(S)"; }
	td:nth-of-type(3):before { content: "APPROX DATE"; }
	td:nth-of-type(4):before { content: "WRITER"; }
	td:nth-of-type(5):before { content: "Arbitrary Data?"; }
	td:nth-of-type(6):before { content: "Arbitrary Data2"; }
	td:nth-of-type(7):before { content: "Arbitrary Data3"; }
	td:nth-of-type(8):before { content: "Arbitrary Data4"; }
	td:nth-of-type(9):before { content: "Arbitrary Data5"; }
	td:nth-of-type(10):before { content: "Arbitrary Data6"; }
	*/
}