/*	Responsive Table
	================================================ */

/*	Basic Table Styles
	================================================ */

	table {
		border-collapse: collapse;
		width: 100%;
    }

	td, th {
		vertical-align: top;
		text-align: left;
	}

	caption {
		font-weight: bold;
		font-size: 1em;
	}

/*	Specific Table Styles
	================================================ */

	table#data {
		border: 2px solid;
		border-color: var(--greenish);
		cursor: default;
	}

	table#data td,
	table#data th {
		border-color: var(--greenish);
		padding: .25em .5em;
	}

	table#data caption {
		caption-side: bottom;
		text-align: left;
		font-weight: bold;
		margin-top: 0;
		padding: .5em;
		border-color: var(--greenish);
		background-color: var(--greenish);
		color: white;
	}


	table#data thead {
		background-color: var(--greenish);
		color: white;
	}

	table#data tbody {
		background-color: white;
	}


/*	Handle Columns
	======================================================== */

	table#data tbody td:nth-child(1) {
		font-weight: bold;
	}

	table#data tbody td:nth-child(4) {
		font-style: italic;
	}

/*	Media Queries
	========================================================
			400px	Vertical
	401px	480px	Mixed
	481px			Normal
	======================================================== */

/*	Vertical
	======================================================== */
	@media screen and (max-width: 400px) {
		table#data {

		}
		table#data>tbody>tr>td,
		table#data>tbody>tr>th {
			display: block;
		}
		table#data tbody tr:nth-child(n+2) td:nth-child(1) {
			border-top: medium solid;
		}
		table#data thead {
			display: none;
		}

		/*	First Column: Show as Header */
			table#data tbody td:nth-child(1) {
				font-size: 1.4em;
				border-bottom: thin solid;
			}

		/*	Subsequent Columns: Show Labels */
			table#data tbody td:nth-child(n+2):before {
				display: inline-block;
				width: 4em;
				font-weight: bold;
				font-style: normal;
			}

			table#data tbody td:nth-child(2):before {
				content: "Temp: ";
			}
			table#data tbody td:nth-child(3):before {
				content: "Time: ";
			}
			table#data tbody td:nth-child(4):before {
				content: "Notes: ";
			}
	}

/*	Mixed
	======================================================== */

	@media screen and (min-width: 401px) and (max-width: 480px) {
		table#data thead th,
		table#data tbody td {

		}

		table#data thead th:nth-child(1),
		table#data tbody td:nth-child(1) {
			display: block;
		}
		table#data thead th:nth-child(n+2),
		table#data tbody td:nth-child(n+2) {
			display: inline-block;
			width: calc(100% / 3 - 1em - 4px);
		}

		table#data thead th:nth-child(1) {
			display: none;
		}
	}

/*	Normal
	======================================================== */

	@media screen and (min-width: 481px) {
		/*	Zebra Stripes
			======================================================== */

			table#data>tbody>tr:nth-child(odd) {
				background-color: white;
			}

			table#data>tbody>tr:nth-child(even) {
				background-color: #f8f8f8;
			}
		
	}