/* 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;}


/*  Data Table  */
table {
	border-collapse: collapse; 
	width: 80%; 
	}
	
th, td {
	padding: 5px 10px; 
	border: 1px solid #545454;
	}
	
th {
	background-color: #9DC62F; 
	color: #fff;
	}
	
tr: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;
		}
		
	/* just a color change, not much else we can do with table */
	th {background: #6374ab;} 
	tr:hover {background: #DDD;}
}