/* CSS Document */

/* #Responsive For tablet
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.menu_wrapper, .menu_shell, #network_wrapper, #network_shell, #logo_wrapper, #logo_content, #logo_shell, #special_offer_shell, #sub_menu_shell, #content_shell, #footer_shell { width: 100%; min-width: 320px; }
	
	.tablet_hide { display: none; }

	.menu_shell ul li ul li { padding: 0px 2px 0px 0px; font-size: .8em; }
	.menu_shell ul li ul li:after { content:" | "; }
		.menu_shell ul li ul li:last-child:after { content:""; }
	
	#head, #navbar-wrapper, #top, #middle, #page, #gallery, #front-popular,
	#footer, #navbar, #bottom, #single-head-wrapper { width:748px !important}
	#headline, #content2 { width:728px !important }
	#front-list, #paged-list, .tanbox, #content { width:418px !important }
	.full-width { width: 100% !important;}
	
	#logo_wrapper { background: #ffffff url(https://www.foodandhealth.com/images/_2012_FAH_Logo_BG-mobile.jpg) repeat-x top center; }
	#logo_shell img { display: block; margin-left: auto; margin-right: auto; }
	
	#feature_wrapper #headline { margin: 0 auto; float: none; }
	
	.gallery-item img { display: block; max-width: 100%; }
	
	#category_wrapper ul {margin-top: 10px; }
	#category_wrapper ul li { width: 728px; float: none; margin: 0 auto; height: auto;  }
	#category_wrapper ul li p { margin: 0 auto; height: auto;  }
	
	/* Hide unneeded element */
	span.sf-arrow, #madmenu ul, #content p[align="center"],
	#logo .right, #featured { display:none !important}
	
	/* navbar */
	#navbar { margin-left:-10px }
	#madmenu { padding:10px 0 !important }
	#page-wrapper { width:570px }
	.field { padding:5px }
	.menu-select { display:block; position:relative }
	.menu-select select {
		display:block;
		width:100%;
		padding:0 5px;
		cursor:pointer;
		color:#fff;
		height:26px;
		background:#181818 url(images/menu-select-arrow.jpg) no-repeat right -2px;
		border:1px solid #000;
		text-shadow:0 1px 0 #000;
		-webkit-appearance:none;
		-webkit-border-radius:2px;
		   -moz-border-radius:2px;
		        border-radius:2px;
		-webkit-box-shadow:0 0 5px rgba(0,0,0,.1) inset, 0 1px 0 rgba(255,255,255,.1);
		   -moz-box-shadow:0 0 5px rgba(0,0,0,.1) inset, 0 1px 0 rgba(255,255,255,.1);
		        box-shadow:0 0 5px rgba(0,0,0,.1) inset, 0 1px 0 rgba(255,255,255,.1)
	}

	/* Content */
	.categorybar { width:125px }
	#bottom-left { width:438px }
	.tanbox p, .onecolumn p { overflow:hidden }
	#paged-list .clearfloat { background:none }
	.tanbox { background:url("images/dots_content.gif") repeat-x scroll center bottom transparent }
	#navigation { width:408px }

	/* Sidebar */
	#sidebar, #sidebar-left, #sidebar-right { width:300px }
	.sidebar-left-background, .sidebar-right-background, .spoiler { width:280px; }
	.sidebar-left-background, .sidebar-right-background { margin-bottom:10px }
	.spoiler .clearfloat { margin-top:35px }
	.spoiler .clearfloat:nth-child(2) { margin-top:0 }

	/* random list */
	#gallery #random, #random-wrapper, #refresh-wrapper { width:443px }
	#random-wrapper span a img { width:69px; height:69px }
	#random-wrapper span:nth-child(5n+5) a img { margin-right:0 }
	#random-wrapper span:nth-child(1n+11) { display:none }

	/* Footer */
	#recentpost, #mostcommented, #recent_comments { width:222px !important }

	/* Single */
	#single_desc { width:496px }
	#respond textarea { width:389px; height:100px }

	#head .right > div { width:500px !important; margin-top:30px }
	#head .right img { width:100%; height:auto } 

	.recipeViewLeft, .recipeViewRight { clear: left; width: 98%; }
}
/* #Responsive For Mobile(Landscape)
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#network_wrapper, .menu_wrapper, .menu_shell, #network_shell, #logo_wrapper, #logo_shell, #special_offer_shell, #sub_menu_shell, #content_shell, #footer_shell { width: 100%; min-width: 320px; }
	
	.menu_shell ul li ul li { padding: 0px 2px 0px 0px; font-size: .8em; }
	.menu_shell ul li ul li:after { content:" | "; }
		.menu_shell ul li ul li:last-child:after { content:""; }
		
	.gallery-item img { display: block; max-width: 100%; }
	
	#head, #navbar-wrapper, #top, #middle, #page, #gallery, #front-popular,
	#footer, #bottom, #sidebar, #sidebar-top, #sidebar-middle, #sidebar-bottom,
	#sidebar-left, #sidebar-right, #random, #random-wrapper, #refresh-wrapper,
	#single-head-wrapper, #navbar, #page-wrapper,
	#madmenu li { width:400px !important}
	#headline, #front-list, #paged-list, .tanbox, .sidebar-left-background,
	.sidebar-right-background, #recentpost, #mostcommented, #recent_comments,
	#single_desc, #single_head, #category-bar .categorybar, #content, #content2,
	#featured, #featured li, .spoiler, .sidebar-background { width:380px !important }
	#navigation, #respond textarea { width:360px }
	
	#logo_wrapper { background: #ffffff url(https://www.foodandhealth.com/images/_2012_FAH_Logo_BG-mobile.jpg) repeat-x top center; }
	#logo_shell img { display: block; margin-left: auto; margin-right: auto; }
	
	#feature_wrapper #headline { margin: 0 auto; float: none; }
	
	#category_wrapper ul {margin-top: 10px; }
	#category_wrapper ul li { width: 400px; float: none; margin: 0 auto; height: auto;  }
	#category_wrapper ul li p { margin: 0 auto; height: auto;  }
	/* Navbar */
	

	/* Random list */
	#random-content span:nth-child(4n+4) img, #random-wrapper span a img { margin-right:10px  }
	#random-wrapper span a img { width:64px; height:64px }
	#random-content span:nth-child(11n+1) { display:none }

	#head .right > div { width:400px !important }

	.recipeViewLeft, .recipeViewRight { clear: left; width: 98%; }
	
}

/*  #Responsive Mobile (Portrait)
================================================== */
@media only screen and (max-width: 767px) {
	#network_wrapper, .menu_wrapper, .menu_shell, #network_shell, #logo_wrapper, #logo_content, #logo_shell, #special_offer_shell, #sub_menu_shell, #content_shell, #footer_shell { width: 100%; min-width: 320px; }
	
	#head, #navbar-wrapper, #top, #middle, #page, #gallery, #front-popular,
	#footer, #bottom, #sidebar, #sidebar-top, #sidebar-middle, #sidebar-bottom,
	#sidebar-left, #sidebar-right, #random, #random-wrapper, #refresh-wrapper,
	#single-head-wrapper, #navbar, #page-wrapper,
	#madmenu li { width:300px !important}
	#headline, #front-list, #paged-list, .tanbox, .sidebar-left-background,
	.sidebar-right-background, #recentpost, #mostcommented, #recent_comments,
	#single_desc, #single_head, #category-bar .categorybar, #content, #content2,
	#featured, #featured li, .spoiler { width:280px !important }
	#navigation, #respond textarea { width:260px }
	
	#logo_wrapper { background: #ffffff url(https://www.foodandhealth.com/images/_2012_FAH_Logo_BG-mobile.jpg) repeat-x top center; }
	#logo_shell img { display: block; margin-left: auto; margin-right: auto; }
	
	#feature_wrapper #headline { margin: 0 auto; float: none; }
	
	#category_wrapper ul { margin-top: 10px; }
	#category_wrapper ul li { width: 300px; float: none; margin: 0 auto; height: auto;  }
	#category_wrapper ul li p { margin: 0 auto; height: auto;  }
	
	.gallery-item { clear: both; }
	
	/* Hide unneeded element */
	#video, span.sf-arrow, #featured, #madmenu ul,
	#content p[align="center"], #logo .right { display:none !important}

	#head .right { margin-top:20px } 
	#head .right > div { width:300px !important }
	#head .right img, #logo.bigger img { width:100%; height:auto } 

	/* Navbar */
	#navbar { margin-left:-10px; padding:10px; overflow:hidden }
	#menu-top-navigation li { border-bottom:1px solid #505050 }
	#menu-top-navigation li:last-child { border-bottom:none; margin-bottom:10px }
	.menu-select { display:block; margin-bottom:10px; position:relative }
	.menu-select select {
		display:block;
		width:100%;
		padding:0 5px;
		cursor:pointer;
		color:#fff;
		height:30px;
		background:#181818 url(images/menu-select-arrow.jpg) no-repeat top right;
		border:1px solid #000;
		text-shadow:0 1px 0 #000;
		-webkit-appearance:none;
		-webkit-border-radius:2px;
		   -moz-border-radius:2px;
		        border-radius:2px;
		-webkit-box-shadow:0 0 5px rgba(0,0,0,.1) inset, 0 1px 0 rgba(255,255,255,.1);
		   -moz-box-shadow:0 0 5px rgba(0,0,0,.1) inset, 0 1px 0 rgba(255,255,255,.1);
		        box-shadow:0 0 5px rgba(0,0,0,.1) inset, 0 1px 0 rgba(255,255,255,.1)
	}
	
	/* Headline */
	#category-bar .categorybar { padding:10px 0 15px; margin-bottom:10px}
	
	/* Flexible image */
	#headline img, #single_head img, #cp_adimage_3 { max-width:100%; height:auto }
	#headline .thumb { width:30%; margin-right:20px }

	/* Bottom left */
	.tanbox p, .onecolumn p { overflow:hidden }
	#paged-list .clearfloat { background:none }
	.tanbox { background:url("images/dots_content.gif") repeat-x scroll center bottom transparent }

	/* Sidebar */
	.sidebar-left-background { margin-bottom:10px }
	.spoiler .clearfloat { margin-top:35px }
	.spoiler .clearfloat:nth-child(2) { margin-top:0 }
	#sidebar-top { margin-top:10px }

	/* Random list */
	#random-content span:nth-child(4n+4) img, .more-refresh { margin-right:0  }
	#random-wrapper span a img { width:60px; height:60px; margin-right:12px }

	/* Footer */
	#mostcommented { margin-left:0 }
	#footer { height:auto }
	#footer-left, #footer-right { float:none; margin-bottom:5px }

	/* Single */
	#single_head { padding:10px 20px; margin:0 -10px }
	#single_head a img { border:none }
	#stats span { display:block; float:none; margin-bottom:5px }

	/* Comment form */
	#commentform input { }
	.field { padding:7px }
	#email + label small { display:none }
	#email + label::after { content:"Mail (Required)" }
	#respond textarea { height:100px }
	
	
	._33 {
		width: 100%;
		clear: both;
		margin: 20px 0;
	}

	.recipeViewLeft, .recipeViewRight { clear: left; width: 98%; }
	
}









@media all and (max-width: 699px) { /* PHONES */
	#network_wrapper, #network_shell, #logo_wrapper, #logo_content, #logo_shell, #special_offer_shell, .menu_shell, .menu_wrapper, #sub_menu_shell, #content_shell { width: 100%; min-width: 320px; }
	
	.gallery-item { clear: both; }
	
	.mobile_hide, #network_shell, #sub_menu_shell li#search, #footer_wrapper { display: none; }
	
	#feature_wrapper { width: 300px; margin: 0 auto; }
	
	#logo_wrapper { background: #ffffff url(https://www.foodandhealth.com/images/_2012_FAH_Logo_BG-mobile.jpg) repeat-x top center; }
	#logo_shell img { display: block; margin-left: auto; margin-right: auto; }
	
	.menu_shell, #sub_menu_wrapper { display: none; }
	.mobile_menu_wrapper { display: block;margin: 0 auto; width: 280px; padding-top: 10px; }
	#category_wrapper ul {margin-top: 10px; }
	
	#recentpost, #mostcommented, #recent_comments { margin-bottom: 15px; }
	
	._33, ._50, ._100 {
		width: 98%;
		clear: both;
		margin: 5px 0 0 5px;
	}

	.recipeLeft, .recipeRight { clear: left; width: 100%; }

	.recipeViewLeft, .recipeViewRight { clear: left; width: 98%; }
	
	ul.mobile_calendar { display: none; }
	
	table.calendar    { width: 100%; }
	td.calendar-day-head, td.calendar-day, td.calendar-day-np { max-width:20px; overflow: hidden; }
}

