/*general*/
article, aside, figure, footer, header, main, menu, nav, section {
	display: block;
	box-sizing: border-box;
}
h1, h2, p, ul, ol, li, dd, dl {
	margin: 0; padding: 0;
}
body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
 }
 
/*table styling*/
header {
	padding: 50px 20px;
}
h1, main {
	text-align: center;
}
table {
	border-collapse: collapse;
	display: inline-block;
	text-align: left;
	border-top: 1px solid #888;
}
table thead {
	background: #bbb;
}
table tr:nth-child(even) {
	background: #dfdfdf;
}
table th, table td {
	padding: 10px 20px;
	border: 1px solid #888;
	border-width: 0 1px 1px;
}
/*responsive table*/
@media screen and (max-width: 1000px) {
	/*put each field on its own line and align text to the right
	 *border is added for further readability
	 */
	table td {
		display: block;
		text-align: right;
	}
	/*put data-label content before each field floated to the left*/
	table td:before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		margin-right: 10px;
	}
	/*remove thead*/
	table thead {
		display: none;
	}
}