@media (max-width: 400px) {

#debug #mobile{display:block;}
#debug #tablet{display:none;}
#debug #desktop{display:none;}
#debug #desktopOnly{display:none;}
	body{
		margin: 0px 0px;
		padding: 0px;
	}
	
	#banner #proudly{
		display:none;
		background-image:none;
	}


	#banner img#JerseyFresh{
		display: block;
		left: 23%;
		position: absolute;
		top: 20%;
		width: 60%;
		z-index: 3;
	}	
	
	#container #pepper{
    	display:none;
	}
	
	#container nav{
		width:0%;
		overflow: hidden;
	}
	#container nav ul{
	
	}
	
	div#mobile-search{
		display:block;
		background-color: #51BB01;	
	}



div#mobile-search form {
    display: inline;
}
	
	
	div#mobile-search img{
		float: right;
		padding: 3px 3px 0px 0px;
		margin: 3px 0px;
		cursor:pointer;
	}

	div#mobile-search input.searchbox{
		margin: 3px 0px 3px 3px;
		width: 70%;
	}
	div#mobile-search input.button{
		background-color: green; /*keep definition as green*/
		border-radius: 3px;
		padding: 3px 6px;
		position: relative;
		top: 3px;
		vertical-align: text-bottom;
	}	
	
	nav {
		left: 100%;
		position: absolute;
	}
	
	nav.open{
		left: 0;
		top:0;
		position: relative;		
	}
	
	nav ul.opened li{
		border-top: 1px solid #FFF;
	}
	
	nav ul.opened li.primary > a{
		border-right: 0px none;	
	}

	nav ul.opened li.primary{
		float: none;	
	}
	
	nav ul.opened li.primary > a {
		text-align:left;
		height: auto;
		text-decoration:none;
	}
	nav ul.opened li.primary > a:hover{
		text-decoration:underline;	
	}
	
	nav ul.opened li.primary > a > span{
		padding: 0.5em;
	}
	
	nav ul.opened li.primary > a > span > br{
		display: none;	
	}
	
	nav ul.opened ul.secondary{
		position: relative;
		left: 0px;
		top: 0px;
	}

	nav ul.opened li.secondary{
		float: none;	
	}
	
	nav ul.opened li.secondary > a{
		color: #fff;
    	font-weight: bold;
		display: block;
		text-decoration:none;
	}
	nav ul.opened li.secondary > a:hover{
		text-decoration:underline;	
	}	

	nav li.secondary.current > a{
		background-color: #4F91CD;
	}

	nav ul.opened li.secondary > a > span{
		padding: 0.5em 1.5em;
		display:block;
	}
	
	nav ul.opened li.secondary > a > span > br{
		display: none;	
	}
	
	
	nav ul.tertiary{
		background-color: #51BB01;
	}
	
	nav ul.opened li.tertiary{
		float: none;	
	}
	
	nav ul.opened li.tertiary > a{
		color: #fff;
    	font-weight: bold;
		display: block;
		text-decoration:none;
	}
	nav ul.opened li.tertiary > a:hover{
		text-decoration:underline;	
	}		
	
	nav li.tertiary.current > a{
		background-color: #4F91CD;
	}

	nav ul.opened li.tertiary > a > span{
		padding: 0.5em 3em;
		display:block;
	}
	
	nav ul.opened li.tertiary > a > span > br{
		display: none;	
	}


	#container hr#composite1{
		display:none;
	}


	#container hr#composite2{
		background-image: url("../images/shadow-down.png"), url("../images/composite.png");
		background-repeat: repeat-x,repeat-x;
		border-right: 0px none;
		border-left: 0px none;
		border-bottom: 0px none;
		border-top: 2px solid red;
		display: block;
		height: 12px;
		margin: 0;
		outline: medium none;
		padding: 0;
		position: relative;
		width: 100%;
	}	
	
	#container #headerLogo{
		width: 100%;
		margin:0px;
		
	}

	#container #headerLogo img{
		width: 100%;
	}	
	#container #govHeader {
		display:none;
	}
	#container #headerLinks {
		display:none;
	}
	#container #headerSearch {
		display:none;
	}		


	#footer{
		font-size:.8em;	
	}


	/**********HomePage***********/
	
	#homePage #container #left-column{
		width: 96%;
		margin: 2%;
		float:left;
	}
		
	#homePage #container #right-column{
		width: 96%;
		margin: 2%;
		float:left;
	}
	
	#homePage #container #social-media{
		width: 90%;
		margin: 5%;
	}
	#homePage #container #social-media img{

	}
	
	#homePage #container #department{
		width: 96%;
		margin: 2% 5% 2% 0%;	
	}


	/**** Generic Content ****/
	
	#genericPage #container #breadCrumb{
		margin: 2%;
	}	
	
	#genericPage #container #left-column{
		display:none;
	}

	#genericPage #container #middle-column{
		width: 96%;
		margin: 2%;
		float:left;
		clear:both;	
	}
	
	#genericPage #container  #right-column{
		float:left;
		clear:both;
		width: 96%;
		margin: 2%;
	}		
	#genericPage #container #bottom{
		float:left;
		clear:both;
		width: 96%;
		margin: 2%;
	}						

	/*Top Tomato*/

	#genericPage #container #left-column.top-tomato {
		display: block;
		width: 100%;
	}
	
	#genericPage  #container #middle-column.top-tomato-archive .feature {
		width: 96%;

	}	

}