@charset "utf-8";
main table {margin-bottom: 0.5em; border-radius: 0 0 5px 5px;}
main caption {text-align: center; margin: 5px 0px 0px 0px; border-bottom: none; border-radius: 5px 5px 0 0;}
main th {display: none;}
main td {vertical-align: top;}
.bullets li {margin: 0 0 0.25em 1em;}
main > img {float:right; width: 97px; height: 200px;}

@media screen
{
	#early, #deer, #timber, #amenity {display: none;}
	/*#early {background-color: blue; box-shadow: 0 0 50px blue; }*/
	#earlylast {height: 55px;}
	#deerlast {height: 50px;}
	#timberlast {height: 100px;}
	#timeline {background: url(images/img_Timeline.gif) no-repeat; width: 58px;}
}
@media print
{
	h3 {margin: 0px;}
	th:first-child, #timeline {display: none;}
}
@media only screen and (max-width: 750px)
{
	main td {font-size: small; padding-bottom: 4px;}
	#timeline {background-size: contain;}
}
@media only screen and (max-width: 538px)
{
	#timeline {background-size: cover;}
}
@media only screen and (max-width: 520px)
{
	#early, #deer, #timber, #amenity {display: table-cell; vertical-align: middle;}
	:is(#early, #deer, #timber, #amenity) h3 {margin: 0; writing-mode: vertical-lr; text-orientation: upright;} 
	#early {background-color: rgba(0,0,255,0.2)}
	#deer {background-color: rgba(0,255,0,0.2)}
	#timber {background-color: rgba(255,0,0,0.2)}
	#amenity {background-color: rgba(255,255,0,0.3)}
	#timeline {display: none;} 
	main td {padding-bottom: 0;}
	#earlylast {height: auto;}
	#deerlast {height: auto;}
	#timberlast {height: auto;}
}