/*Styles for screen 820px and lower*/
@media screen and (max-width: 820px) {

	menu { 
  		height: auto;
  	}
  	menu ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	menu li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	menu li a {
		border-bottom: 1px solid #004D00;
		border-right: 1px solid #004D00;
	}
  	menu a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
	}
	
	.main-content {
	}
	#left-col {
		width: 98%;
	}
	#nav {
	width: 100%;
	}
	.left-col {
	width: 98%;
	float: none;
	clear: left;
	}
}

/*Styles for screen 820px and lower*/
@media only screen and (max-width : 820px) {
	menu {
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #004D00;
	}
	menu ul {
		display: none;
		height: auto;
	}
	menu a#pull {
		display: block;
		background-color: #99CC66;
		width: 100%;
		position: relative;
	}
	menu a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
}
/*Smartphone*/
@media only screen and (max-width : 360px) {
	menu li {
		display: block;
		float: none;
		width: 100%;
	}
	menu li a {
		border-bottom: 1px solid #004D00;
	}
}
@media screen and (max-width:320px) {

}
	@media 
	only screen and (max-width: 940px),
	(min-device-width: 940px) and (max-device-width: 1024px)  {
	
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block;
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { border: 1px solid #004D00; }
		
		td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #004D00; 
			position: relative;
			padding-top: 10px; 
			padding-left: 10px; 
			padding-right: 10px; 
			padding-bottom: 10px; 
		}
		
		td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
	}

@media screen and (max-width: 740px) 	{
	
	.headtxt {
	font-size: 40px;
	}
	h1 { font-size: 40px; padding: 5px; }
	h2 { font-size: 30px; padding: 2px; }
}
@media screen and (max-width: 620px) 	{
	.headtxt {
	font-size: 36px;
	}
	h1 { font-size: 36px; padding: 5px; }
	h2 { font-size: 30px; padding: 2px; }
	

@media screen and (max-width: 540px) 	{
	.headtxt {
	font-size: 30px;
	}
	h1 { font-size: 30px; padding: 4px; }
	h2 { font-size: 30px; padding: 2px; }
	
}
@media screen and (max-width: 480px) {
	.headtxt {
	font-size: 30px;
	}
	h1 { font-size: 30px; padding: 0px; }
	h2 { font-size: 30px; padding: 2px; }
	
}
@media screen and (max-width:320px) {
	.headtxt {
	font-size: 30px;
	}
	h1 { font-size: 30px; padding: 0px; }
	h2 { font-size: 26px; padding: 0px; }
	
	}
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}