/* Basic styles */
body {font: medium/1.5 verdana; margin: 0; padding: 0;}
h1 {font-size: 150%;}
h2 {font-size: 120%;}
h3 {font-size: 110%;}
h1, h2, h3 {margin: 0;}

#header {margin-bottom: 1em; background: #9DC62F;}
#header h1 {padding: .5em 1em ; margin-bottom: .5em;}

#content {padding: 0 1em;}
.column:first-child {margin-right: 5%;}
.column {
	float: left; 
	width: 43%; 
	height: 100px; /* for display purposes */
	background: #ddd;  
	padding: .5em; 
	margin: 1em 0;
	}
	
.column h3+p {margin-top: 0;}
p {clear: left;}

/*  Definition List styled AS a table */
#dtmTable {
	display: table;
	border-collapse: collapse; 
	width: 80%; 
	}
	
.caption {display: table-caption;}

.dataHead , dd, dt {
	padding: 5px 10px;
	border: 1px solid #545454;
	}
	
.head {
	background-color: #9DC62F; 
	color: #000;
	display: table-header-group;
	}

.tBody {display: table-row-group;}

dl, .row {display: table-row;}

.dataHead, dd, dt {display: table-cell;}

.dataHead {font-weight: bold;}

.label, .race {display: none;}

dl:hover {background: #CBF360;}


/* Media Queries */
/* Applies to all devices */
/* Applies when width is 500px or smaller */

@media all and (max-width: 500px)  {
	#header {background: #ddd;}
	
	.column {
		float: none; /* linearize */
		width: 95%; /* reset width */
		background: #6374AB; 
		color: #FFF; 
		}
		
	/* Set definition list back to block */
	#dtmTable {
		display: block; 
		width: 100%;
		}
	
	.caption {
		display: block; 
		font-weight: bold; 
		font-size: 1.3em;
		background: #6374AB;
		color: #fff;
		padding: .25em;
		}
		
	.tBody {
		display: block; 
		}

	dl {
		display: block;
		width: 100%;
		border: 1px solid  #545454;
		}

	dt, dd {display: block; border: none;}
	
	dt {font-weight: bold; font-size: 1.1em;}
	
	.label, .race {display: inline; font-style: italic;}
	
	.head, .ranking {display: none;}
	
	dl:hover {background: #BECAF0;}
}