/* RESPONSIVE TABLE */
@media only screen and (max-width: 760px),
only screen and (min-device-width: 768px) and (max-device-width: 1024px)  {
	
/* Force table to not be like tables anymore */
table.assignmentList, .assignmentList thead, .assignmentList tbody, .assignmentList th, .assignmentList td, .assignmentList tr,
table.groupList, .groupList thead, .groupList tbody, .groupList th, .groupList td, .groupList tr,
table.groupLogList, .groupLogList thead, .groupLogList tbody, .groupLogList th, .groupLogList td, .groupLogList tr,
table.schoolList, .schoolList thead, .schoolList tbody, .schoolList th, .schoolList td, .schoolList tr,
table.jobLogList, .jobLogList thead, .jobLogList tbody, .jobLogList th, .jobLogList td, .jobLogList tr,
table.staffList, .staffList thead, .staffList tbody, .staffList th, .staffList td, .staffList tr,
table.studentList, .studentList thead, .studentList tbody, .studentList th, .studentList td, .studentList tr,
table.studentLogList, .studentLogList thead, .studentLogList tbody, .studentLogList th, .studentLogList td, .studentLogList tr 
{ 
	display: block; 
}
		
/* Hide table headers (but not display: none;, for accessibility) */
.assignmentList thead tr,
.groupList thead tr,
.groupLogList thead tr,
.schoolList thead tr,
.jobLogList thead tr,
.staffList thead tr,
.studentList thead tr,
.studentLogList thead tr 
{ 
	position: absolute;
	top: -9999px;
	left: -9999px;
}
		
.assignmentList tr,
.groupList tr,
.groupLogList tr,
.schoolList tr,
.jobLogList tr,
.staffList tr,
.studentList tr,
.studentLogList tr 
{ 
	border: 1px solid #ccc;
}
		
.assignmentList td,
.groupList td,
.groupLogList td,
.schoolList td,
.jobLogList td,
.staffList td,
.studentList td,
.studentLogList td 
{ 
	/* Behave  like a "row" */
	border: none;
	border-bottom: 1px solid #DDD; 
	position: relative;
	padding-left: 30%; 
}
		
.assignmentList td.center, assignmentList td.right,
.groupList td.center, .groupList td.right,
.groupLogList td.center, .groupLogList td.right,
.schoolList td.center, .schoolList td.right,
.jobLogList td.center, .jobLogList td.right,
.staffList td.center, .staffList td.right,
.studentList td.center, .studentList td.right,
.studentLogList td.center, .studentLogList td.right 
{ 
	text-align: left; 
}
		
.assignmentList td:before,
.groupList td:before,
.groupLogList td:before,
.schoolList td:before,
.jobLogList td:before,
.staffList td:before,
.studentList td:before,
.studentLogList td:before 
{ 
	/* Now like a table header */
	position: absolute;
	/* Top/left values mimic padding */
	top: 6px;
	left: 6px;
	width: 25%; 
	padding-right: 10px; 
	white-space: nowrap;
}
		
/* Label the data */
.assignmentList td:nth-of-type(1):before { content: "#"; font-weight: bold;}
.assignmentList td:nth-of-type(2):before { content: "Coordinator"; font-weight: bold;}
.assignmentList td:nth-of-type(3):before { content: "Service"; font-weight: bold; }
.assignmentList td:nth-of-type(4):before { content: "School"; font-weight: bold; }
		
.groupList td:nth-of-type(1):before { content: "#"; font-weight: bold;}
.groupList td:nth-of-type(2):before { content: "Group Name"; font-weight: bold;}
.groupList td:nth-of-type(3):before { content: "Actions"; font-weight: bold; }
		
.groupLogList td:nth-of-type(1):before { content: "#"; font-weight: bold;}
.groupLogList td:nth-of-type(2):before { content: "Provider"; font-weight: bold;}
.groupLogList td:nth-of-type(3):before { content: "Group"; font-weight: bold; }
.groupLogList td:nth-of-type(4):before { content: "Services"; font-weight: bold; }
.groupLogList td:nth-of-type(5):before { content: "Date"; font-weight: bold; }
.groupLogList td:nth-of-type(6):before { content: "Total Hrs"; font-weight: bold; }
.groupLogList td:nth-of-type(7):before { content: "No Show"; font-weight: bold; }
.groupLogList td:nth-of-type(8):before { content: "Rate"; font-weight: bold; }
.groupLogList td:nth-of-type(9):before { content: "Total"; font-weight: bold; }
.groupLogList td:nth-of-type(10):before { content: "Paid"; font-weight: bold; }
.groupLogList td:nth-of-type(12):before { content: "Admin Ver"; font-weight: bold; }
.groupLogList td:nth-of-type(13):before { content: "Actions"; font-weight: bold; }
				
.schoolList td:nth-of-type(1):before { content: "#"; font-weight: bold;}
.schoolList td:nth-of-type(2):before { content: "Name"; font-weight: bold;}
.schoolList td:nth-of-type(3):before { content: "Phone 1"; font-weight: bold; }
.schoolList td:nth-of-type(4):before { content: "Phone 2"; font-weight: bold; }
.schoolList td:nth-of-type(5):before { content: "Principal"; font-weight: bold; }
.schoolList td:nth-of-type(6):before { content: "POC"; font-weight: bold; }
.schoolList td:nth-of-type(7):before { content: "Actions"; font-weight: bold; }
		
.jobLogList td:nth-of-type(1):before { content: "#"; font-weight: bold;}
.jobLogList td:nth-of-type(2):before { content: "Provider"; font-weight: bold;}
.jobLogList td:nth-of-type(3):before { content: "Service"; font-weight: bold; }
.jobLogList td:nth-of-type(4):before { content: "Date"; font-weight: bold; }
.jobLogList td:nth-of-type(5):before { content: "Admin Ver"; font-weight: bold; }
.jobLogList td:nth-of-type(6):before { content: "Rate"; font-weight: bold; }
.jobLogList td:nth-of-type(7):before { content: "Total"; font-weight: bold; }
.jobLogList td:nth-of-type(8):before { content: "Paid"; font-weight: bold; }
.jobLogList td:nth-of-type(9):before { content: "Actions"; font-weight: bold; }
		
.staffList td:nth-of-type(1):before { content: "#"; font-weight: bold;}
.staffList td:nth-of-type(2):before { content: "Name"; font-weight: bold;}
.staffList td:nth-of-type(3):before { content: "Email"; font-weight: bold; }
.staffList td:nth-of-type(4):before { content: "Phone"; font-weight: bold; }
.staffList td:nth-of-type(5):before { content: "Position"; font-weight: bold; }
.staffList td:nth-of-type(6):before { content: "District"; font-weight: bold; }
.staffList td:nth-of-type(7):before { content: "Actions"; font-weight: bold; }
		
.studentList td:nth-of-type(1):before { content: "#"; font-weight: bold;}
.studentList td:nth-of-type(2):before { content: "Name"; font-weight: bold;}
.studentList td:nth-of-type(3):before { content: "Email"; font-weight: bold; }
.studentList td:nth-of-type(4):before { content: "Guardian"; font-weight: bold; }
.studentList td:nth-of-type(5):before { content: "Phone"; font-weight: bold; }
.studentList td:nth-of-type(6):before { content: "District"; font-weight: bold; }
.studentList td:nth-of-type(7):before { content: "Actions"; font-weight: bold; }
		
.studentLogList td:nth-of-type(1):before { content: "#"; font-weight: bold;}
.studentLogList td:nth-of-type(2):before { content: "Student"; font-weight: bold;}
.studentLogList td:nth-of-type(3):before { content: "Provider"; font-weight: bold; }
.studentLogList td:nth-of-type(4):before { content: "Location"; font-weight: bold; }
.studentLogList td:nth-of-type(5):before { content: "Type"; font-weight: bold; }
.studentLogList td:nth-of-type(6):before { content: "Services"; font-weight: bold; }
.studentLogList td:nth-of-type(7):before { content: "Date"; font-weight: bold; }
.studentLogList td:nth-of-type(8):before { content: "Total Hours"; font-weight: bold; }
.studentLogList td:nth-of-type(9):before { content: "No Show"; font-weight: bold; }
.studentLogList td:nth-of-type(10):before { content: "Rate"; font-weight: bold; }
.studentLogList td:nth-of-type(11):before { content: "Total"; font-weight: bold; }
.studentLogList td:nth-of-type(12):before { content: "Paid"; font-weight: bold; }
.studentLogList td:nth-of-type(14):before { content: "Admin Ver"; font-weight: bold; }
.studentLogList td:nth-of-type(15):before { content: "Actions"; font-weight: bold; }
}
/* END RESPONSIVE TABLE */