@charset "utf-8";

/* If your table overflows your page's width, this creates a sideways scroller under your table only, as opposed to your whole page. */ 
.tableContainer{
	margin: 0px auto;
	padding: 0px;
	overflow-x: auto;
}

/* Apply this class to your table's opening tag. No other elements within the table need classes or inline styles. */
.myTable{
	max-width: 100%;
	margin: 15px auto;
	border-collapse: collapse;
	border: 2px solid #696969;	
}

/* This affects all table cells. The media queries below shrink the text and cell padding for narrow screens. */
.myTable td{
	border: 1px solid #696969;
	padding: 6px;
	vertical-align: top;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	text-align: center;
	line-height: 1.1;
	background-color: #ffffff;
}
@media screen and (max-width: 1000px){
	.myTable td{
		font-size: 12px;
		padding: 4px;
    }
}
@media screen and (max-width: 550px){
	.myTable td{
		font-size: 10px;
		padding: 2px;
    }
}

/* This makes the background color on every other row a different color, to make it easier to read. */
.myTable tr:nth-child(odd) td{
	background-color: #f0f0f0;
}

/* This affects only the column number in parentheses. */
.myTable td:nth-child(1){
	text-align: left;
	font-weight: bold;
}

/* This affects only the row number in parentheses. In this case it makes the first row a header row. */
.myTable tr:nth-child(1) td{
	background-color: #696969;
	color: #ffffff;
	font-weight: bold;
	border: 1px solid #ffffff;
}