html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,ol,ul,li {margin:0px; padding:0px; border:0px; font-family: Arial, sans-serif; }
/* Updated, not copied , Wed 9 Aug */
/* ERROR: I have .LHSBox but .RHSbox , not fixed July 2021, dont want to fiddle until revamp whole */

body {font-size: 16px;}
small {font-size: 12px;}
big {font-size: 20px;}

h1 {font-size: 42px; background:#ddd; border-bottom:1px black solid; margin-top:0px; margin-bottom:12px;}
h2 {font-size: 36px; background:#ddd; border-bottom:1px black solid; margin-top:0px; margin-bottom:8px;}
h3 {font-size: 20px; margin-top:22px; margin-bottom:6px; color:navy;}
h4 {font-size: 18px; margin-top:16px; margin-bottom:4px; color:navy; }
h5 {font-size: 17px; }
h6 {font-size: 16px; }

p {margin-top:16px;}

a, a:visited {color:blue;}
a:hover {text-decoration:underline; }
a img {border:0;}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
	
/************ PAGE ITEMS ****************/

.ZZZZZZZcontent {width:1000px; padding-top:65px; margin:0px auto;}
.content {z-index:50;}
.footer {color:white; background:black; width:100%; height:65px; line-height:45px; text-align:center; font-family: Arial, sans-serif; font-size:18px;}
.footer a{color:white; text-decoration:none;}
#footer2 {font-size:12px; line-height:12px!important;}

.infobox {visibility: hidden; position: absolute; z-index:200;}
.popwin  {visibility: hidden; position: absolute; z-index:200;}
.popupbar {width:100%; line-height:24px; background: blue; color:white; font-size:18px; text-align:center; cursor:pointer; margin:0; padding:0;}

/* For the STAY DOWN footer, to ensure always at bottom - ONLY for short pages - within body just wrap with a div class="staydownwrapper" */
html, body {height:100%;}				
.staydownwrapper {min-height:100%; position:relative;}
.staydownwrapper .content {padding-bottom:65px;}
.staydownwrapper .footer {height:65px; position:absolute; bottom:0; left:0;}

.header {height:65px; width:100%; font-size:24px; line-height:65px; background:black; position:fixed; top:0px; z-index:99; transition: font-size 0.5s, height 0.5s linear;}
#logolink {float:left; height:100%; padding-left:0; }
/* #logolink {content:url(/zzzimg/Logo.gif);} 		Can univs change logo here */

/* Class added when we scroll page */
.headerscrolled {height:40px; line-height:40px; font-size:18px; transition: font-size 0.5s, height 0.5s linear; }

/************ TOP MENU, BLACK ****************/

#TopMenuZZ a {padding: 0px 10px 0px 10px;}

/* Top 4 horiz items */
#TopMenu {list-style-type:none; margin:0px; padding:0px; float:right; text-align:right; z-index:201;}
#TopMenu li {float: left; position: relative; display: inline; padding:0px; padding-right:18px; display:inline; }
#TopMenu li a {color:white; text-decoration:none; font-family: Arial, sans-serif;}
#TopMenu li a:hover {background:#D40; text-decoration:none;}

/* First drop down outs */
#TopMenu li ul {list-style-type:none; position: absolute; left: -100px; width: 205px; display: block; visibility: hidden; border:1px black solid; background:gray; box-shadow: 3px 3px 4px #000;} 
#TopMenu li ul li {z-index:202; display: list-item; text-align:left; Zheight:14px; width: 205px; font-size:14px; line-height:14px; padding-right:0px; padding-left:4px;} 			
#TopMenu li ul li a {display: block; text-decoration: none; padding: 0px; }			
#TopMenu li ul li ul {top:0px;}
#TopMenu li ul li ul li {z-index:203; display: list-item; float: left; Zheight:14px; font-size:14px; line-height:14px; } 

.headerscrolled #TopMenu li ul {top:40px!important;}
.headerscrolled #TopMenu li ul li ul {top:0px!important;}

/* iPad vertical */
@media screen and (max-width: 1023px){					
	.header {height:40px; line-height:40px; font-size:18px; transition: font-size 0.5s, height 0.5s linear;}
	#TopMenu li {padding-right:7px;}
}

/* iPad horiz */
#burger {display:none;}
@media screen and (max-width: 680px) {
	#burger {display:inline; float:right; height:40px; background:silver; cursor:pointer;}
	#TopMenu {display:none;}
	#TopMenu {width:200px; background: black; }
	#TopMenu li {display:block; background: black; clear: both!important; }
	#TopMenu li a {color:white;}
	#TopMenu li:hover {background:gray;}
}

/* make icon a URI http://b64.io/ */
#burger { no-repeat left center; float:right; width: 40px; height:40px;
	background-image: url(data:image/gif;base64,R0lGODlhKAAoAJEAAAAAAP///wAAAAAAACH5BAkAAAEALAAAAAAoACgAAAhxAAMIHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDMGAMCxo8ePIEMuDEmyJEiFJlOWRKmypceRLltqnEmzps2bOBPGlMlyp8qePk0CDUoSJlGROZMqXcp06dGiQ5++1CkVKcKqVq9i7di0q9evYMOGDQgA);
}

/************ MID MENU, GREY ****************/

#TopTabs {width:100%; margin:0px; padding:0px;}						/* width:calc(99%-12px); overflow-x:hidden; overflow-y:hidden; max-height:55px; Used by Java to change to stickytop. NEED 100% or posn:fixed changes width to 0*/
.MenuContainer {text-align:center; z-index:97;}									/* Container 100%, inline element centred easy-way-to-center-variable-width-divs-in-css */
.MenuCenter {display:inline-block; text-align:left; vertical-align: top;}						/* Need Vert-Align to avoid space on div in div with inline block */

.TabColour, .TabColour a, .TabColour a:visited {color:black; background:#ddd; text-decoration:none;}

.MenuCSS {font-size:18px; line-height:21px; }
.MenuCSS ul {list-style-type: none; margin: 0px; padding: 0px; z-index:98;}
.MenuCSS li {float: left; position: relative; display: inline; }
.MenuCSS li:after {content:"|";}
.MenuCSS li:last-child:after { content: ""; }
.MenuCSS a {padding: 0px 10px 0px 10px; }
.MenuCSS a:hover {background:#D40; text-decoration:none;}

/* display: block; visibility: hidden; left: 0px; */
.MenuCSS ul li ul {position: absolute; display: none; visibility: hidden;  border:1px black solid; box-shadow: 3px 3px 4px #000;} 
.MenuCSS ul li ul li {display: list-item; height:21px; margin: 0px;} 			
.MenuCSS ul li ul li a {display: block; text-decoration: none; width: 190px;}			
.MenuCSS ul li ul li ul {z-index:99!important; top: 0; overflow-x:hidden;}																										
.MenuCSS ul li ul li ul li {}
.MenuCSS ul li ul li ul li a {}

/*
.MenuCSSZZZ .mainfoldericon {background: #ddd url('menudownarrow.gif') no-repeat bottom right;}  
.MenuCSS .subfoldericon {background: #ddd url('menurightarrow.gif') no-repeat bottom right;}
*/

#indexTabZZZZZ {background:yellow;}

@media screen and (max-width: 1023px){
	#TopTabs {}
	.MenuCSS { font-size:16px; transition: font-size 0.5s, height 0.5s linear; }
	.MenuCSS a {padding: 0px 1px 0px 1px;}
}

/* Nokia vertical 480 x 853 */
@media screen and (max-width: 480px) {
	#TopMenuReplace {display:none;}
	#TopTabs {overflow-x:auto; overflow-y:auto; max-height:initial;}
	.MenuCSS {font-size: 19px; line-height: 24px; display:block; clear: both!important; width:100%;}
	.MenuCSS li {line-height:0px; font-size: 0px; width:50%; background:blue;}
	.MenuCSS li a {font-size: 19px; line-height: 24px; padding: 0px 0px 0px 5px;}
	.MenuCSS li nth-child(even) {display:block; background: #1f1}
	.MenuCSS li a:hover {background:#D40; text-decoration:none;}
	.MenuCSS li ul {display:none; visibility: hidden;}
	.MenuCSS ul li ul {display:none; visibility: hidden;}
	.MenuCSS ul li ul li {display:none; visibility: hidden;}
	.TabColour, .TabColour a, .TabColour a:visited {color:white; background:blue; }
	#indexTabZZZZZ {color:black;}		/* WHY??? Change Jan 2018 */
}


@media screen and (max-width: 300px) {
	.MenuCSS li {display:block; width:100%; border-bottom: 1px solid white;}	
}

/********************************************************************************************************************************/
/* TITLE: in table at top of page 																								*/

#titpic {background-image: url(BigPictureSmall.jpg); background-repeat:no-repeat; background-position: center; background-size:100% 100%; position: relative;}
#titpic {width: 100%; height:initial; border: 0px purple solid; margin: 0px; padding:0px; border-spacing:0px; border-collapse:collapse; box-sizing:border-box;}
#titpic td {margin: 0px; padding:0px; display: block; color: #000; text-shadow: 1px 1px 0 #fff;}
#titpic img {width:100%; max-width:1600px; max-height:600px;}
#titcopy {border-spacing:0px; border-collapse:collapse; box-sizing:border-box; }

#herotitle {font-size:48px; color: white; padding: 20px; margin:0px; text-decoration:none; text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;} 
#herotitle:hover {text-shadow: 1px 1px 3px blue;}
#herotitleposn {position: absolute; left: 0px; bottom: 0px; width:100%; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4) );}
#herocaption {font-size:12px; color:black; text-shadow: 0px 0px 1px white; position: absolute; right: 0px; top: 65px; margin: 0px; box-decoration-break: clone; }

#mainh1 {color: black; text-decoration:none;}
#mainh1:hover {border-bottom:1px blue solid;}

#h1link {text-decoration:none; color:black;}
#h1link:hover {text-decoration:underline;}

#site, #site:hover {font-size:40px; color: white; text-decoration:none; padding-left: 20px;}
@media screen and (max-width: 1023px){	
	#site, #site:hover {font-size:36px;}
}

/* PHONE Horizontal - Nokia 716px	- and ipad vert						*/
@media screen and (max-width: 716px) {
	#herocaption {display:none; visibility:hidden;}
	#herotitle {padding:0; font-size:24px;}
	#site, #site:hover {font-size:24px; padding-left: 2px;}
}

#mainh1 {display:none;}
@media screen and (max-width: 480px) {
	#herotitle {display:none;}
	#mainh1 {display:block;}
}

/********************************************************************************************************************************/
/* IMAGES			 																								*/
/* For all the images in a div with class image, with subtitle below  */

.image {display:inline; background:black; color:white; border: 1px black solid; max-width:716px;}
.image img {display:block; vertical-align: top; max-width:100%; -webkit-user-select: none; -webkit-touch-callout: none;}
.imageZ {padding:0; margin:0;}	/* But no padd on the image */
.image p {display:block; margin:0; padding-left:6px;}						/* Padd all text a bit on the left */
.image.right {float:right;}
.image.left {float:left;}
.image.zoom {cursor: zoom-in; }

/* PHONE Horizontal - Nokia 716px  480px  AND ipad mini vertial - 680px */

@media screen and (max-width: 480px) {
	.image {display:block; clear: both; width:calc(100% + 6px); position:relative; left:-6px; border: none; border-top: 1px black solid;}
	.image img {width:100%;}
	.image.right, .image.left {float:initial;}
}

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

/* For images just images NO div, but with class image and also incli the zoom */
@media screen and (max-width: 716px) {
	img .image {max-width:100%; border-bottom: 1px black solid;}
}

/* For fixed 400 width images - was 481*/

@media screen and (min-width: 600px) {
	div.image400>img {width:400px;}
	.image400 {width:400px;}
}

@media screen and (max-width: 600px) {
	div.image400>img {width:calc(100% + 6px);}
	.image400 {display:block; clear: both; width:calc(100% + 6px); position:relative; left:-6px; border: none; border-top: 1px black solid; border-bottom: 1px black solid; float:initial;}
}

/********************************************************************************************************************************/
/* ADVERT BOXES 																								*/
/* DEBUG: box-sizing:border-box; padding and border included in the element's total width and height */
/* Just for tables: border-collapse:collapse; */
/* For the RHS box, we INITIALLY have it always ABSOLUTE 0 hard RIGHT, so the inside scroll fix will keep Y to top. Change to float on mob */

.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; }

.bigwrapper {margin:auto;}
.LHSBox {float:left!important; display:inline-block; padding:0px; margin:0px; }
.content {float:left; display:inline-block; padding:0px; margin:0px; -webkit-user-select: none; -webkit-touch-callout: none;}
.RHSbox {float:left; display:inline-block; padding:0px; margin:0px; position: absolute; right: 0;}

#ContentAd {height:90px; width:100%;}
/********************************************************************************************************************************/
/* FOR BOXES:  */
/* ID used for scroll adboxTOP adboxBOT */
/* CLASS used for style - bigwrapper , -> LHSBox content RHSbox */

/********************************************************************************************************************************/
/* 		DEFAULT: For larger PC 1280 (or wider) screen - shown if screen larger than 1132 fit it + scroll bar					*/							 
/* 			container 1242     +120+10+---------------------content 800-----------------------+10+----300---+Sc20+ 				*/
/*       	inline images		 img max: 800: size of pic. div border not inc, so is 802 wide									*/

.bigwrapper {width:1242px;}
.LHSBox {width:120px; border:1px white solid; box-sizing:border-box;}
#adboxTOP, #LHSsecond {width:120px;}
.content {width:800px; margin:0px 10px; }
.RHSbox {width:300px;}

/********************************************************************************************************************************/
/* For giant PC 																												*/
/* Cont width of 770 gives margin of 9 on either side of ipad
/* 			container 1260  1220+40pad    +---120---+20+---------------------content 800 -----------------------+20+----300---+						*/

@media screen and (min-width: 1262px) {
	.bigwrapper {width:1264px; }
	.LHSBox {width:120px;}
	.content {width:800px; margin:0px 20px 0px 20px;}
	.RHSbox {width:300px;}
}

/********************************************************************************************************************************/
/* For my mega PC 																												*/
/* Cont width of 770 gives margin of 9 on either side of ipad
/* 			container 1500  1400+100pad    +---300---+50+---------------------content 800 -----------------------+50+----300---+						*/

@media screen and (min-width: 1524px) {
	.bigwrapper {width:1504px; }
	.LHSBox {width:300px; border: 1px black solid; box-sizing:border-box;}
	#adboxTOP, #LHSsecond {width:300px;}
	.content {width:800px; margin:0px 50px 0px 50px;}
	.RHSbox {width:300px;}
}

/********************************************************************************************************************************/
/* For smaller PC 																												*/
/* Cont width of 770 gives margin of 9 on either side of ipad
/* 			container 1120     +---------------------content 800 -----------------------+5+----300---+						*/

@media screen and (max-width: 1262px) {
	.bigwrapper {width:1120px; }
	.LHSBox {display:none;}
	.content {width:800px; margin:0px 10px 0px 0px;}
	.RHSbox {width:300px;}
	#LHSsecond {display:none;}  

}

/********************************************************************************************************************************/
/* For ipad LANDSCRAPE ipad is 1024  */
/* 			container 1024     +---------------------content 453 -----------------------+4+----300---+ 						*/
/* For PCs with a 1024 width, this WILL give a horiz scroll bar because the SC is 20px, giving 1004 useable */

@media screen and (max-width: 1120px) {
	.bigwrapper {width:1024px; margin:0px; padding:0px; }
	.LHSBox {display:none;}
	.content {width:710px; margin-right:0px;}
	.RHSbox {width:300px;}
}

/********************************************************************************************************************************/
/* For ipad PORTRAIT - the default - ipad is 768  */
/* Cont width of 770 gives margin of 9 on either side of ipad
/* 			container 768     +---------------------content 608 -----------------------+----160---+ 						*/

@media screen and (max-width: 1023px) {
	.bigwrapper {width:768px; }
	.LHSBox {display:none;}
	.content {width:600px; margin-right:0px;}
	.RHSbox {width:160px;}
	#RHSad {width:160px;}
	.footer {height:120px; line-height:initial;}
}

/********************************************************************************************************************************/
/* PHONE Horizontal - Nokia 716px	AND ipad mini vertial - 680px						*/
@media screen and (max-width: 716px) {
	.bigwrapper {width:99%;}
	.content {width:99%; width:calc(100%-10px); margin-left:5px;}
	.RHSbox {width:300px; float:none; display: block; margin: 0px auto; position:relative; right:initial; clear:both;}
	#ContentAd {height:250px; width:300px; margin:0 auto;}
	#ContentAdZZZ {height:250px; width:302px; margin:0 auto; border:1px red solid;}
	#ContentAdZZZ {width:300px; float:none; display: block; margin: 0px auto; position:relative; right:initial; clear:both;}
	#RHSad {width:300px;}
	#RHSsecond {display:none;}  /* TEMPTEST */
	#syndicatead {display:none;}  /* TEMPTEST */
}



#breadcrumbs {display:inline;}
.rating-totals {display:inline; text-align:right; float:right;}
.review-count  {display:inline; text-align:right;}
.customer-rating {display:inline; text-align:right;}
.airreview-rating-img {display:inline; float:right;}


#nextpagebutton {display:block; width:450px; padding:0px; margin:0 auto; margin-top:28px; margin-botton:28px; font-size:28px; border-radius:4px; background:green; border:2px #3f3 solid; color: white; text-align:center; text-decoration:none;}
#nextpagebutton:hover {background: #3f3 solid; border:3px green solid; text-decoration:none;}

@media screen and (max-width: 460px) {
	#nextpagebutton {width:300px; padding:4px; font-size:22px;}
}

#syndicatead {height:400px; clear:both; margin-bottom:25px;}

.LHSBox {float:left!important;}

.News {color:red;}

/* Hack for consistency of old food pages */
.Foodimg {float: right; width: 400px; height: 300px; border: 1px black solid;}
@media screen and (max-width: 600px) {
	.Foodimg {display:block; clear: both; width:calc(100% + 6px); height:initial; position:relative; left:-6px; border: none; border-top: 1px black solid; border-bottom: 1px black solid; float:initial;}
}

.blockof4 {margin: 0 auto; border:0; background:black; color:white; border-collapse: collapse; width:302px;}
.blockof4 td {border: 1px solid black; width:50%; margin:0; padding:0;}
.blockof4 img {display: block; width:100%; height: 125px;}
.blockof4 th {font-size:70%;}

@media screen and (max-width: 302px) {
	.blockof4 {width:100%;}
	.blockof4 th {display:none;}
}

.parallaxc {position: relative; height: 400px; width: 100%; border:1px black solid; box-sizing: border-box;}
.parallax {width: 100%; height: 100%; 
		background-position: center bottom; background-repeat: no-repeat; background-size: cover;}
.parallaxt {background: black; color: white; clear:both; width:100%; padding-left:4px; box-sizing: border-box;}

@media screen and (max-width: 715px) {
	.parallaxc {height: 400px;}
}

@media screen and (max-width: 400px) {
	.parallaxc {height: 225px;}
}		
/* Java changes the width and the left fix to be whole screen width */		
@media screen and (min-width: 1025px) {
	.parallaxc {
		position: relative;
		height: 500px;
		height: 80vh;
		width: 100%;
		z-index:98;
		border:0px black solid;
	}
	.parallax { 
		background-attachment: fixed;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		width: 800px;
		width: 100vw;
		height: 100%;
		z-index:99;
		overflow:visible;
		border-top:1px black solid;
		border-bottom:1px black solid;
	}
}