body { background:white; margin: 0px; font-family: Arial Narrow, Arial, sans-serif; }

/**************************** Generic for FRONT and for PAGES ********************************/

a {color:#4B0082;; text-decoration:none}
a:hover {color:blue; text-decoration:underline; }
a:visited {color:#4B0082;}	

#topbanner {display:block; margin: 0 auto; margin-top:0px; margin-bottom:0px; padding:0px; border:0px; height:91px;} 
#TopAdvert {display:table; margin: 0 auto; margin-top:-10px; margin-bottom:4px; }									/* Top displayed advert. */	
#dummyspacermenu {display: none;}
#centremenu { display: table; margin: 0px auto; width:100%; text-align:center; }

.MenuCSS {line-height:25px; z-index:100;  margin: 0px 0px; padding: 1px 5px 1px 5px; color: white; font-family: Century Gothic, Tahoma, Arial, sans-serif; background:#4B0082; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; float:initial; margin-right:0px auto; margin-left:0px auto;}
.MenuCSS a{ color: white;}
.MenuCSS a:hover{background:#DD9400; text-decoration:none;}
.MenuCSS a:after {content:"  |  ";}
.MenuCSS a:last-child:after { content: ""; }

td.bottomtablet {height:16px; text-align:center; background:#4B0082; font-family: Tahoma, Arial, sans-serif;color:white;}
td.bottomtablet a{color:white;}

@media screen and (min-width: 1198px) {.MenuCSS {font-size: 24px; } }
@media screen and (max-width: 1198px) {.MenuCSS {font-size: 20px; } }
@media screen and (max-width: 1023px) {.MenuCSS {font-size: 16px; } }	

/* Top Advert on page */
@media screen and (max-width: 749px) {	#TopAdvert {display: none;} }   	    /*if less than 749, display it */

/* For mobile */
@media screen and (max-width: 500px) { #topbanner {width:100%;} }

@media screen and (max-width: 340px) {
	#topbanner {width:100%;} 
	#TopMenu {font-size: 20px; line-height:20px;}	
	#menuhalf {display: none;}
	.MenuCSS a{ display:block; text-align:center; border-bottom: 1px white solid; padding: 0px 20px; margin: 0px 0px -2px 0px;}  /* magin -3 so white line is below curve */
	.MenuCSS a:last-child {} 
	.MenuCSS a:after {content:"";}
}

table.TableCurved {
	background:#4B0082;
	margin:0px;
	border:black 1px solid;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	font-size: 13px; font-family: tahoma, Verdana, Helvetica, Arial, sans-serif;}
	
table.TableCurved th { padding:2px 5px; border-bottom:black 1px solid; color: white;}
 
table.TableCurved td {
    position:relative; vertical-align:top;
	background:#fff;
	padding:0px 3px 0px 3px;
	}

table.TableCurved tr.subhead td {background:#ddd; border-top:black 1px solid;}
table.TableCurved tr.bar td { border-top:black 1px solid;}
table.TableCurved tr.even td {background:#ddd}
 
table.TableCurved tr:last-child td:first-child {
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
	border-bottom-left-radius:5px}
	
table.TableCurved tr:last-child td:last-child {
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-bottom-right-radius:5px}	

/**************************** JUST for FRONT page and subsection pages ********************************/
/* 117 on art box, as pic is 300 x 112, but extra 5 pixels for hanging y or g etc, then 10px of whitepase in the margin.	
/* June 2015 bugfix for 1024 screens: artbox now 335px was 341px */

.indexcontainer {width:1024px; border-collapse: collapse; font-size:16px; line-height: 16px; padding:0px; margin:0px; } /* overflow-y:hidden; overflow-x:hidden; Collapse gives no space in bord */
.storylink {font-size:18px; font-weight:bold;}
.bighead {font-size:20px; line-height: 22px; font-weight:bold; display:block;}
.artbox {width: 335px; height:120px; font-family: Arial, sans-serif; font-size:13px; line-height: 14px; padding:0px 10px 0px 10px; margin:0px 0px 10px 0px; box-sizing:border-box; display:inline-block; vertical-align:top; float:left; overflow-y: hidden;}
.subheadtitle {font-family: "Arial Rounded MT Bold", ArialRoundedMTBold, "Helvetica Rounded", Tahoma, Verdana, Arial, sans-serif; font-weight:bold; font-size:32px; line-height: 32px; padding:0px; margin:0px 0px 0px 10px;}
.bigart { min-height: 250px;}

.image300 {width:300px; height:225px; border:0px; display: block; margin-left: auto; margin-right: auto;}
.image150 {width:150px; height:112px; float:left; border:0px; margin-right:5px;}

/* Row of headlines: have to use a UL so if goes to two lines second line indented, and have to force the arrow. Only a IMG will preserve indent NO WORK: (►) in HEX \2023 list-style: none; */

ul.headlinelist {font-weight:bold; margin: 0px 0px 0px 5px; padding-left: 10px; padding-right: 0px; }
ul.headlinelist  li{list-style-image: url("Arrow.gif");}
		 
h2 {font-family: "Arial Rounded MT Bold", ArialRoundedMTBold, "Helvetica Rounded",  Tahoma, Verdana, Segoe, Arial, sans-serif; font-size:32px; line-height: 38px; display:block;}

/* For larger PC & ipad PORTRAIT - display in a table */
@media screen and (max-width: 1023px) {.indexcontainer {width:724px;} }

/* For small tablet */
@media screen and (max-width: 681px) {
	.artbox {width: 100%; height:100%; margin-bottom:10px;}
	.indexcontainer {width: 100%;}
	div.artbox img {display:block; float:none; margin-left: auto; margin-right: auto;}
	.bigart {height: 100%; min-height:1px;}
	.image150 {width:300px; height:225px; margin-bottom:10px;}
	.subheadtitle {display:block;}
	.bookingboxad {display: none;}						/* The flash ad fails on phones */
}
	
/**************************** JUST for article PAGES ********************************/

h1 {font-family: "Arial Rounded MT Bold", ArialRoundedMTBold, "Helvetica Rounded",  Tahoma, Verdana, Segoe, Arial, sans-serif; font-size:32px; line-height: 32px; padding:0px; margin:0px;} /* Crucial: space used for scroll */

h3 {font-family: "Arial Rounded MT Bold", ArialRoundedMTBold, "Helvetica Rounded",  Tahoma, Verdana, Segoe, Arial, sans-serif; font-size:22px; line-height: 22px; display:block;} /* Used for Recommend */

#h1holder {display: table; height: 64px; padding:0px; margin:0px;}
#h1box {display: table-cell; vertical-align: middle;}

#standfirst {font-weight:bold;}

/********************************************************************************************************************************/
/* For Generic all PCs 1024 screen and ipad landscape and everything without CSS3 */
/* HAVE TO ADD IN WIDTH OF SCROLL BAR: 16px in chrome */	

.bigwrapper {width: 1005px; margin: 0 auto; padding:0px; border:0px black solid; box-sizing:border-box; overflow-y:hidden; overflow-x:hidden;}
.content {width:700px; font-family: Calibri, Arial, sans-serif; font-size: 16px; line-height:16px; padding:0px; margin:0px; margin-right:5px; float:left; display:inline-block; vertical-align:top; border:0px black solid; box-sizing:border-box; -webkit-user-select: none; -webkit-touch-callout: none;}
.breadcrumbs {font-size: 12px;}

.rhsboxTOP {width:300px; height: 100%; min-height: 100%; padding:0px; margin:0px; float:right; display:inline-block; vertical-align:top;}
.rhsboxBOT {width:300px; height: 100%; min-height: 100%; padding:0px; margin:0px; float:right; display:inline-block; vertical-align:top;}

.toppic {width:700px; height:525px; background-size: 700px 525px;vertical-align:bottom; font-size: 82px; line-height:82px; background-position: center;}

.recommend {width:700px;} 
.recommendbox {width:325px; font-size:13px; line-height: 14px; padding:0px; margin:0px 10px 0px 0px; display:inline-block; vertical-align:top; float:left;}
.recommendbox a {font-size:16px; font-weight:bold;}

.disqus {width:700px;}



/********************************************************************************************************************************/
/* Images display the size they are in the file, UP TO the max width of container  - was display:inline-block;*/

.inlinepic {background:black; color:white; border: 1px black solid; display:table; margin: 0 auto;}
.inlineimg {max-width:700px; vertical-align: top; -webkit-user-select: none; -webkit-touch-callout: none;}
.inlinecaption {max-width:300px; word-wrap: break-word;}  /* Backup: We actually write into the DIV the actual width */

.inlineimg {width:700px \0/ !important; } /* Nasty hack for IE 8-9 to stop black bar on right*/

/* NEW TEMPTFIX until total rebuild Mar 2019 */
.inlinecaption {margin-left:3px;}
.captioncopyright {float:right; font-size:75%; margin-left:3px; margin-right:3px;}

/********************************************************************************************************************************/
/* 		For larger PC 1280 (or wider) screen - shown if screen larger than 1132 fit it + scroll bar								*/							 
/* 			container 1112     +---------------------content 802-----------------------+10+----300---+Sc20+ 					*/
/*       	inline images		 img max: 800: size of pic. div border not inc, so is 802 wide									*/
@media screen and (min-width: 1132px) {
	.bigwrapper {width:1112px;}
	.content {width:802px; margin-right:10px;}
	.inlineimg {max-width:800px;}
	.toppic {width:800px; height:600px; background-size: 800px 600px; font-size: 96px; line-height:96px;}
	.rhsboxBOT {background:white;}	
	.recommend {width:802px;} .recommendbox {margin:0px 70px 0px 0px;}
	.disqus {width:802px;}
	.img400 {max-width:400px;}
	.imgright {float:right;}	
}

/********************************************************************************************************************************/
/* For smaller PC & ipad PORTRAIT - both for 800 (-20 scroll bar) == 780 and ipad is 768  */
/* Cont width of 770 gives margin of 9 on either side of ipad
/* 			container 770     +---------------------content 453 -----------------------+----300---+Sc20+ 						*/
/*       	inline images		  											*/
@media screen and (max-width: 1023px) {
	.bigwrapper {width:758px; max-width:758px;}
	.content {width:453px; margin-right:5px;}
	.inlineimg {width:100%; max-width:453px;} 
	.toppic {width:453px; height:325px; background-size: 453px 325px; font-size: 0px; line-height:0px; background-repeat: no-repeat;}
	.rhsboxBOT {background:white;}
	.recommend {width:463px;}
	.disqus {width:443px;}
}

/********************************************************************************************************************************/
/* For small tablet sized smart phone 							*/
/* Gives THE STRIPE in Chrome -- DEBUG Must Fix*/
@media screen and (max-width: 767px) {
		/*
	.bigwrapper{width: 100%; } 
	.content {width:95%; margin-left:5px;}					
	.inlineimg {width:100%; max-width:749px; } 
			BELOW NEW temp fix for mobile Mar 2019 --- */
	.bigwrapper{width: 100%; } 
	.content {width:99%; width:calc(100% - 12px); margin-left:6px; font-size: 18px; }
	.inlinepic {width:calc(100% + 12px); max-width:initial; position:relative; left:-6px; border: none; border-top:1px black solid;}
	.inlineimg {width:100%; max-width:initial;} 
	.inlinecaption {margin-left:6px;}
	.captioncopyright {font-size:60%; margin-right:6px;}
	
	#h1holder {margin-left:6px;}
	.toppic {width:296px; height:225px; background-size: 300px 225px; font-size: 0px; line-height:0px; background-repeat: no-repeat; }
	/*.inlinepic td {width:296px;}			 /* IS THIS IN USE NOW??? for top pic title caption */
	.rhsboxTOP {float:none; display: block; margin: 0px auto;} 		/* centre it */
	.rhsboxBOT {float:none; display: block; margin: 0px auto;}
	.recommend {float:none; display: block; margin: 0px auto;}
	.disqus {width:100%; float:none; display: block; margin: 0px auto;}
}

/********************************************************************************************************************************/
/* For very small phones - no disqus							*/
@media screen and (max-width: 350px) {
  .disqus {display: none; }
}

/********************************************** For Lounge Index text Ad *******************************************************/
table.ad { border:1px gray solid; border-spacing:0; border-collapse:collapse; margin:0px; table-layout: fixed; text-align:center; font-size:14px;}
table.ad th a {color:blue; font-size:20px;text-decoration:underline;}
table.ad td a {color:green; font-weight:bold;}

/********************************************** For tables within stories *******************************************************/
table.storytable {border:1px black solid; border-collapse:collapse; margin:0px; padding:0px; table-layout: fixed; text-align:center; font-size:13px; line-height:14px;}
table.storytable th {width:100px; height:14px; background:#ddd;}
table.storytable td {width:100px; height:14px; border-left:1px black solid; border-top:1px black solid;}
table.storytable td a {color:blue; font-size:13px; text-decoration:underline;}
#tdb {font-weight:bold; background:#ddd;}

table.storytabletop {background:#4B0082; color:white; margin:0px; padding:0px; margin-bottom:-16px; border:black 1px solid; border-bottom: 1px #4B0082 solid; border-top-left-radius:5px; border-top-right-radius:5px; font-size: 22px;}

/********************************************** For youtube iframe within stories *******************************************************/
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
	
/**** HACK to remove the bar in IE8 in menus: after doesnt work */
/* IE8 uses \0 */
@media all\0 { 
  .MenuCSS a:after { content:"\00a0\00a0"; }
  .MenuCSS a:before { content:"\00a0\00a0"; }
} 
/*** Hack for IE7 menu bar ***/
#centremenu { *width: 400px; *margin: 0 auto; } /* notice the * before the property - shows in IE7 and below */




/*
top right bottom left
Margin is applied to the outside of you element hence effecting how far your element is away from other elements.
Padding is applied to the inside of your element hence effecting how far your element's content is away from the border.
display:inline-block; The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box
float:left; shuffles all left, dont go to bottom of box and newline
box-sizing:border-box; wont increase width if padding in element
1024 div 3 is 341
height of box is 250 - size of the block advert height

Table border-collapse: collapse;   border takes no space (otherwise 1px)

visibility: hidden; takes space
display: none; - vanishes, no space
*/