.TableCurved {margin:0px; border:black 1px solid; border-radius:5px;}
.TableCurvedth {background:orange; padding:2px 5px; border-bottom:black 1px solid; text-align:center; font-weight:bold;}
.subhead {background:#ddd; border-top:black 1px solid; display:block;}
.bar {border-top:black 1px solid;}
.even {background:#ddd} 

.TableTabs {display:table; border-collapse:separate; border-spacing: 0;}
a.active, a.null, .space{display: table-cell;}
.space {border-bottom: black 1px solid;}
a.active {color: white; text-decoration:none; border: 1px black solid; border-width: 1px 1px 0px 1px;}
a.active:hover {background: darkred;}
a.null {border:1px black solid; color: black; text-decoration:none;}

#mobilebottom {display: none;}

.adsbygoogle {display:block; margin-bottom:20px; clear:both;}
#h1h2ad {clear:both; height:280px; background:#eee; margin-top:20px; display:block;}
#H3add {clear:both; height:280px;}

@media screen and (max-width: 1023px) {
	.adsbygoogle {aspect-ratio: 300/251; }	/* Stops CLS on first ad! */
	.LHSBox {all: unset; width:100vw; clear:both;}
	.LHSbox, #adboxTOP, #LHSfirst {background: #ddd; display:block; clear:both;} 
	#adboxTOP {margin: 0 auto; width:100vw; }
	#LHSfirst {all: unset; width:100vw;}
	#LHSsecond {all: unset; width:100vw;}
    #adboxBOT {all: unset;}

	#LHSsecond {display:block;}
	#RHSsecond {display:block;}
	#OtherLounges {display:block;}	

	.bigwrapper {border: 0px yellow solid; box-sizing:border-box;}
	.LHSBox {border: 0px blue solid; box-sizing:border-box; }
	.content {border: 0px red solid; box-sizing:border-box; }
	.RHSbox {border: 0px green solid; box-sizing:border-box; }

	#syndicatead {all: unset; width:100vw;}
	#adLHS2{display:none;} 							/* Also in java remove data-ad-format="auto" but need to kill to remove pad */
	#adLHS1 {border:1px white solid; box-sizing: border-box;}				/* Stops mobile first ad jumping */
	.adsbygoogle{aspect-ratio:300/251}
}


@media screen and (min-width: 801px) and (max-width: 1023px) {
	.LHSBox, #adboxTOP, #LHSfirst {width:600px;}
}

@media screen and (max-width: 801px) {
	#mobilebottom {display:block;}
	.LHSBox {all: unset;  width:100%; clear:both;}  
	#adboxTOP {width:100%;}
	.RHSBox {all: unset; width:100%; clear:both;}  
    #adboxBOT {width:100%;}
	#RHSfirst {all: unset; width:100vw;}
	#RHSsecond {all: unset; width:100vw;}
	
}	


/* To avoid CLS */
.image img {height: auto; aspect-ratio: attr(width) / attr(height); }

@media screen and (min-height: 481px) and (max-width: 801px) {				/* For accessibility */
	.crumbmenucss ul li a{background:#8b0000;}	
	.active a{background:#8b0000;}
	#mobilebottom a {background:#8b0000;}
	#toplogo img {content:url("/o300x22.gif");}
}


@media screen and (min-width: 1121px) {
	/*.image.small {width:300px; }					/* min-height:246px; removed! AUG 2024*/
	
}
@media screen and (min-width: 1524px) {
	/*.image {min-height:469px;}												/* 450 plus one line desc */
}










/***********************************************************************************************************/
/* IMAGE CONTROL - NO CLS	
/* Speedy Hack AUG 2024 - SIX months to avoid the CLS!!!*/
/***********************************************************************************************************/

.image {all: unset;}
.image img {all: unset;}
.image.small {all: unset; }
/*
@media screen and (min-width: 1120px) and (max-width: 1524px) {
	.image.left {height:initial;}
	.image.left img {width:300px; height:225px;}
}
*/

.image {border: 1px black solid; background:black; color:white; display: inline-block; overflow:hidden;}
.image img {display:block; object-fit: contain; vertical-align: top; user-select: none; cursor: zoom-in; width:500px; height:375px; aspect-ratio: 4/3; transition: all 0.3s;}
.image.right {float:right; margin-left: 10px;}
.image.left {float:left; margin-right: 10px;}
.image.small img {width:300px; height:225px; }
.image a {color:white; text-decoration:none;}

/* Zoom on the images */
@media screen and (min-width: 769px) {
	.image:hover img {transform: scale(1.05);}
}

/* If we have no gallery, add class image right nozoom to images, and it won't show zoomin! */
.image.nozoom:hover img {cursor:initial; transform: scale(1);}

@media screen and (min-width: 1524px) {
	.image img {width:600px; height:450px;} 
	.image.right {position:relative; left:50px; margin-left:-40px;}
	.image.left  {position:relative; right:50px; margin-right:-40px;}
}	
	
@media screen and (max-width: 1024px) {
	.image {width:100%; }
	.image.right, .image.left {margin:0px; float:initial;}
	.image img {width:100%; height:initial;}
	.image.small img {height:initial; }
}

