@media screen and (max-width: 520px)
{
	/* mobile phones */
    h1 { font-size: 1.75em;}
    h2 { font-size: 1.50em;}
    h3 { font-size: 1.25em;}
    h4 { font-size: .75em;}
    #EA_text { font-size: 1.25em; display: block; }
    #snaplogo { content: url("images/SNAP-logo-tagline-small.jpg"); }
    nav { font-size: .75em; margin: 5px 0; }

	.FormElement label, .FormElement input
	{
		display: block;
		float: none;
		text-align: left;
		width: auto;
		padding: 0;
	}

	#eligibilitytable1 {
		display: none;
	}

	#eligibilitytable2 {
		display: block;
	}

	/* Force table to not be like tables anymore */
	#incometable table, #incometable thead, #incometable tbody, #incometable th, #incometable td, #incometable tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	#incometable thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	#incometable { border: 1px solid #000000; }
	
	#incometable td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #000000; 
		position: relative;
		padding-left: 50%; 
	}
	
	#incometable 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;
		content: attr(data-monthname);
	}
	
	/*
	Label the data for the first "row"
	*/
	#incometable td:nth-of-type(1):before { content: "Income Type:"; }

	input[type=text], input[type=url], input[type=email], input[type=password], 
	input[type=tel], input[type=number], input[type=date], select {
	  -webkit-appearance: none; -moz-appearance: none;
	  display: block;
	  margin: 0;
	  width: 100%; height: 40px;
	  line-height: 40px; font-size: 17px;
	  border: 1px solid #bbb;
	}
}

@media screen and (max-width: 740px)
{
	/* tablets */
    .main-content { width: 100%; }

    .sidebar
    { 
        width: 100%; 
        padding: 10px;
        margin: 10px -22px 10px 0px;
    }
}