/* When the browser width falls below 550px */
@media (max-width:650px) {

	/* All table elements become 'block' elements, this puts them all on a new row instead of side by side */
	.horz tr, .vert tr{
		display:block;
		width:95%;
	}
	.horz td, .vert td{
		display:block;
		width:95%;
	}
	
	
	/* Hides the header row */
	.horz tr:first-child, .vert tr:first-child{
		display:none;
	}
	
	/* Adds a border around the 'tr' element */
	.horz tr, .vert tr{
		border:1px solid #C6DDE6;
	}
	
	/* Removes the border from the 'td' element and adds a bottom border */
	.horz td, .vert td{
		border:none;
		border-left:none;
		border-bottom:1px solid rgba(76,77,79,0.5);
		text-align:left;
		padding:2.5%;
	}
	
	/* Adds the header text before the 'td' text for the regular rows */
	.horz td:before, .vert td:before{
		font-weight:bold;
		white-space:pre;
		content: attr(data) '\A';
	}
	
	/* Adds the header text before the 'td' text for the new header rows */
	.horz td:nth-child(1):before, .vert td:nth-child(1):before{
		content: '\25bc   ' attr(data) ' - ';
	}
	
	/* Styles the new header rows */
	.horz td:nth-child(1), .vert td:nth-child(1){
		background-color:rgba(76,77,79,1);
		color:#FFFFFF;
		font-weight:bold;
		cursor:pointer;
	}
	
	.horz td.hidden,.vert td.hidden{
		display:none;
	}
}