/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
  margin-bottom: 20px;
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #003366; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  /*border: 1px solid #ccc;*/
  text-align: left; 
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/

@media only screen and (min-width: 480px) and (max-width: 767px) {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { /*border: 1px solid #ccc;*/ }
	
	td { 
		/* Behave  like a "row" */
		border-color: -moz-use-text-color -moz-use-text-color #EEEEEE;
		border-image: none;
		border-style: none none solid;
		border-width: medium medium 1px;
		float: right;
		padding-left: 50%;
		position: relative;
		width: 194px;
	}
	
	td:before { 
		/* Now like a table header */
		float: left;
		line-height: 1.2;
		margin-left: -191px;
		padding-right: 10px;
		width: 167px;
		font-weight: bold;
 	}

	td:before { content: attr(data-before); }
	
	td ul li {
		margin-left: -30px;
	}
	
}
	
@media only screen and (max-width:29.9375em) {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { /*border: 1px solid #ccc;*/ }
	
	td { 
		/* Behave  like a "row" */
		border-color: -moz-use-text-color -moz-use-text-color #EEEEEE;
		border-image: none;
		border-style: none none none;
		border-width: medium medium 1px;
		float: right;
		position: relative;
		width: 47%;
	}
	
	td ul li {
		margin-left: -30px;
	}
	
	td:before { 
		/* Now like a table header */
		float: left;
		line-height: 1.2;
		margin-left: -135px;
		/*padding-right: 10px;*/
		width: 100px;
		font-weight: bold;
	}

	td:before { content: attr(data-before); }
	
}



.bababooey {
	float: left;
	width: 325px;
}

.legend {
	float: left;
	width: 300px;
	margin: 0;
	padding: 10px 0;
}

.legend dl {
	float: left;
	width: 320px;
	margin: 0;
	padding: 0;
	display: inline;
	/*font-size: 1.25em;*/	
}

.legend dt {
	float: right;
	width: 274px;
	margin: 6px 0 0 0;
	padding: 0;
}

.legend dd {
	margin: 0 0 0 47px;
	padding: 0;
}

.legend dl dd.img {
	margin: 0;
}

.legend dd.img img {
	float: left;
	margin: 0;
	padding: 4px;
}