/*Portrait Tablet Exceptions to adjust padding in content areas.*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.wrapper{
		width: 100%;
	}
	#content img{
		max-width: 50%;
		height: auto;
	}
	.blogrecipe .item-info{
		width: 48%;
		margin-bottom: 5px;
	}
	.blogrecipe .column-2 .item-info{
		margin-left: 4%;
	}
	#content .blogrecipe .item-info img{
		max-width: 100%;
		width: 100%;
		height: auto;
	}
	.nutritiondatatable{
		width: 100%;
	}
}
/*Landscape Tablet Exceptions to adjust padding and reduce font size. When a tablet is turned sideways, 
the text will appear larger so this query contains rules that reduces the font-size and padding.*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}

/* this is a hack to allow fixed width on everything EXCEPT for phones (below) */
@media only screen and (min-device-width : 680px){
}


/* For Narrow Browser Windows (between 0 and 679 pixels) and Smartphones in both orientations. */
@media only screen and (min-width: 0px) and (max-width: 679px) {
	#homeicon{
		display: block;
	}
	.wrapper{
		width: 100%;
	}
	body, 
	#headerwrapper,	#header,
	#contentwrapper,
	#footerwrapper, #footer{
		background-image: none;
	}
	#mainnav{
		display: none;
	}
	#mobilenav{
		position: relative;
		display: block;
		z-index: 100;
	}
	#header{
		padding: 0 5px 0 5px;
	}
	#content{
		padding: 0 5px 0 5px;
		margin: 0px 0px 0 0px;
		border: 0px solid #ccc;
	}
	#logo{
		text-align: center;
	}
	#logo img{
		width: 300px;
	}
	.btn-group{
		display: none;
	}
	#footer{
		padding: 5px 0 0 0;
	}
	#footerwrapper{
		padding-bottom: 10px;
	}
	.texttable td{ 
		-webkit-text-size-adjust: 100%;
	}
	#content img{
		max-width: 50%;
		height: auto;
	}
	.blogrecipe .item-info{
		width: 100%;
		margin-bottom: 0;
	}
	.blogrecipe .column-2 .item-info{
		float: left;
		margin-left: 0;
	}
	#content .blogrecipe .item-info img{
		max-width: 100%;
		width: 100%;
		height: auto;
	}
	.nutritiondatatable{
		width: 100%;
	}
}