/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.

Be sure to:
  1. Add "responsive" class to the table element for this styling to take effect.
  2a. If you need labels shown in your mobile version, add the styles shown commented at bottom of this textarea for "table.responsive td:nth-of-type".
    For example, add this style tag and content to the source markup of your body content:
    
      @media
      only screen and (max-width: 760px),
      (min-device-width: 768px) and (max-device-width: 1024px)  {
        table.responsive td:nth-of-type(1):before { content: "First Name"; }
	    table.responsive td:nth-of-type(2):before { content: "Last Name"; }
	    ...
	    table.responsive td:nth-of-type():before { content: "Nth-Column Name"; }
      }
      
  2b. If no labels are needed or used, add the class "no-labels" to the table in addition to the "responsive" class.
    
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table.responsive,
	table.responsive thead,
	table.responsive tbody,
	table.responsive th,
	table.responsive td,
	table.responsive tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	table.responsive thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.responsive tr { border: 1px solid #ccc; }
	
	table.responsive td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc; 
		position: relative;
		padding-left: 50%; 
	}
	
	table.responsive td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	table.responsive td:before { color: #000; font-weight: bold; }
	table.responsive.no-labels td { padding-left: 0; padding-right: 0; }
	
	/*
	Label the data
	*/
	/*table.responsive td:nth-of-type(1):before { content: "First Name"; }*/
	/*table.responsive td:nth-of-type(2):before { content: "Last Name"; }*/
	/*table.responsive td:nth-of-type(3):before { content: "Job Title"; }*/
	/*table.responsive td:nth-of-type(4):before { content: "Favorite Color"; }*/
	/*table.responsive td:nth-of-type(5):before { content: "Wars of Trek?"; }*/
	/*table.responsive td:nth-of-type(6):before { content: "Other Name"; }*/
	/*table.responsive td:nth-of-type(7):before { content: "Date of Birth"; }*/
	/*table.responsive td:nth-of-type(8):before { content: "Dream Vacation City"; }*/
	/*table.responsive td:nth-of-type(9):before { content: "GPA"; }*/
	/*table.responsive td:nth-of-type(10):before { content: "Arbitrary Data"; }*/
}