/************************************************************************************/
/*                                      MOBILE!                                     */
/* Quick and nasty CCS to give BOLT ON Mobile responsive design. 				    */
/* Create new as stopgap, v5.9 before true responsive v6.0 August 2015 				*/
/************************************************************************************/

img.ImgSmall {width:300px;height:225px;}
table.ImgSmall {width:225px;}									/* I KNOW this is wrong, but fixes IE bug */

img.ImgBig {width:400px; height:300px;}
table.ImgBig {width:300px;}

/********************************************************************************************************************************/
/* DEFAULT: Ipad LANDSCAPE + older 1024 PCs */ 

#tdresizer {width: 1000px;}
#tdresizerdummytop {width: 1000px;}
#mobilebottom {display:none;}

/********************************************************************************************************************************/
/* Old larger PCs */ 
@media screen and (min-width: 1151px) {
	#tdresizer {width: 1125px;}
	#tdresizerdummytop {width: 1125px;}
}

@media screen and (min-width: 1279px) {
	#tdresizer {width: 1258px;}
	#tdresizerdummytop {width: 1258px;}
}

/********************************************************************************************************************************/
/* ipad PORTRAIT & very small PC */
/* ipad is 768, PC is 800 (-20 scroll bar) == 780   */
/* Cont width of 770 gives margin of 9 on either side of ipad */

@media screen and (max-width: 1023px) {
	#tdresizer {width: 770px;}
	#tdresizerdummytop {width: 770px;}
	
	img.ImgSmall {width:225px;height:168px;}
	table.ImgSmall {width:168px;}	

	img.ImgBig {width:300px; height:225px;}
	table.ImgBig {width:300px;}

	#searchspan {display:none!important;}								/* Loaded from TopMenuAbsolute */
	
	.TopTabsCSS {font-size: 16px; line-height: 22px; font-weight:normal; background:blue; color:white;}
	.TopTabsCSS a{display: inline; text-decoration: none; border: 0px solid blue; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; font-size: 16px; line-height: 22px; font-weight:normal; background:blue; color:white; margin: 1px 5px 0px 3px; padding: 0px 2px;}	
	.TopTabsCSS a:hover{text-decoration:none; cursor:pointer; color: white;}
	
	.TopTabsCSS ul{margin: 0; padding: 0;}			
	.TopTabsCSS ul li{line-height:0px; font-size: 0px; border:0px; margin: 0px; padding: 0px; float: left; position: relative; display: inline; border: 0px solid grey; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; background:blue; color: white;}
	.TopTabsCSS ul li a{font-size: 16px; line-height: 22px; font-weight:normal; background:blue; color:white; margin: 1px 5px 0px 3px; padding: 0px 2px;}
	.TopTabsCSS ul li a:hover{ background:#44f; color: white;}

	.TopTabsCSS ul li ul {position: absolute; left: -3px; margin-top: -2px; display: block; visibility: hidden;}
	.TopTabsCSS ul li ul li {z-index:99; margin-top: -1px; display: list-item; float: none; border: 0px;}
	.TopTabsCSS ul li ul li a{display: block; border: 0px solid black; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; border-top: 0px; padding: -10px 0px; width: 159px; text-decoration: none; background:blue; color: white;}
	.TopTabsCSS ul li ul li ul { top: 2px; margin-left: 8px; }
}

/********************************************************************************************************************************/
/* For small tablet sized smart phone - anything larger than 767 turns into an ipad portrait*/
/* margin-bottom:-20px; padding-bottom:-20px;*/
	
@media screen and (max-width: 767px) {
	body { margin-left: 0px; }
	#tdresizer {padding-left: 3px;}
	
	#topbanner {content:url("../ZZZMenus/Logo800.gif"); };						/* FORCE a change to the logo. Only works in Chrome & Safari */
	#topbanner {width:100%;}
	#topbannertable {height:auto !important;}
	
	#TopMenu {display:none;} 
	.TopMenuCSS {display:none;}
	#TopBannerOblong {display:none;} 								/* 728 width advert. Only appears if INIT screen is >767 */
	#TopBannerAd {width:300px!important; float: none !important; margin:auto!important;}					/* Agh, defined with set size */
	#searchspan {display:none!important;}							/* Loaded from TopMenuAbsolute */
	#google_translate_element {display:none;}
	.addthis_toolbox {display:none;}
	#ColumnAd {display:none;}
	
	#tdresizer{width: 100%;}
	#tdresizerdummytop{width: 100%;}
	.contentstd{min-width:300px !important; width:100%!important;}
	
	.AtAGlaceBox {display:none;}
	
	.RHSbreadcrumbAdtable {display:block !important; float: none !important; margin:auto!important;clear: both!important;}

	table.Image {width:400px; display:block !important; float: none !important; margin-left: auto!important; margin-right:auto!important; clear: both!important; border:0px red solid !important;}
	img.ImgBig {width:400px; height:300px; border:1px black solid;}						/* Border round image not table => solve Nokia bug */
	img.ImgSmall {width:400px; height:300px; border:1px black solid;}
	table.ImgSmall {width:400px;}
	table.ImgBig {width:400px;}

	.Imagemaxi {width:400px!important; border:1px black solid; }	
	.Foodimg {float: none; display:block; clear: both; width: 400px; height: 300px; }

	h1 {font-size: 24px; line-height:24px; padding:0px; margin:0px;}
	h2 {font-size: 22px; line-height:22px; padding:0px; margin:0px;}
	
	.TopTabsCSS a {font-size: 16px; line-height: 22px; font-weight:normal; background:blue; color:white; display:block; clear: both!important; width:99%; border:0px; border-bottom: 1px solid white; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; margin: 0px; padding: 0px;}
	
	.TopTabsCSS ul li {line-height:0px; font-size: 0px; border:0px; margin: 0px; padding: 0px; width:99%; }
	.TopTabsCSS ul li a {font-size: 16px; line-height: 22px; font-weight:normal; background:blue; color:white; display:block; width:99%; margin: 0px; padding: 0px 0px 0px 5px;}
	.TopTabsCSS ul li ul {display:none;}
		
	.NextButton a {font-size: 20px; line-height: 22px; font-weight:normal; background:blue; color:white; display:block; width:99%; margin: 0px; margin-left: -3px; padding: 0px 0px 0px 5px; border-bottom: 1px solid black; border-top: 1px solid black; clear: both!important; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; }

	#mobilebottom {display:block;}
	.scrolltop {font-size: 20px; line-height: 22px; background:blue; color:white; display:block; width:99%; margin: 0px; margin-left: -3px; padding: 0px 0px 0px 5px; border-bottom: 1px solid black; border-top: 1px solid black;}
	.scrolltop:hover {color:#ddd; text-decoration:underline; }
	.scrolltop:visited {color:white}
}

@media screen and (max-width: 400px) {
	table.Image {width:300px!important;}
	img.ImgBig {width:300px; height:225px; }
	img.ImgSmall {width:300px; height:225px;}
	.Imagemaxi {width:300px!important; height:225px;}
	.Foodimg {width: 300px; height: 225px; }
}