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; }
body {font-size: 16px;}
small {font-size: 12px;}
big {font-size: 20px;}
h1 {font-size: 32px; display:block; background:#ddd; border-bottom:1px black solid; margin-top:0px; margin-bottom:12px; padding:3px 3px 3px 6px; border-left:6px solid #c6c1b8;}
h2 {font-size: 22px; background:#ddd; border-bottom:1px black solid; margin-top:0px; margin-bottom:8px; padding:3px 3px 3px 6px; border-left:6px solid #c6c1b8;}
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; text-decoration: none;}
a:hover {text-decoration:underline; }
a img {border:0;}
@media screen and (max-width: 1370px) and (min-width: 480px){
.MenuCSS li:after {content:"";}
#HistoryTab {display:none;}
#RoutesTab {display:none;}
}
@media screen and (max-width: 1023px) and (min-width: 480px) {
/* .MenuCSS li:nth-child(4) {display:none;} */
.MenuCSS a {padding: 0px 5px 0px 5px;}
#IFETab {display:none;}
#ExperienceTab {display:none;}
}
/************************************************ Images ********************************************************************************/
/* Can have images:
/* AR IMG work fine - REALLY old school */
/* or New AR style, will zoom: ![]()
*/
/* or */
/* Can have tags of small (300px) or image400 (400px) or normal, ideally 600px as they pop left and right: Non-zoomable pics 600x450*/
/* Food pics 800x600 so we can zoom. */
/* Paralax pics ideal 1200x900 */
/* titpics are 1680x400, but also have a BigPictureSmall.jpg of 420x100 and BigPictureMini 210x50 compressed to 3k and embeded
/* lux-traveller FULL WIDTH style with title */
/* parallax style */
.luxpic {width:100%; border: 1px black solid; display:table; margin: 0 auto; box-sizing: border-box;}
.luxpic img {width:100%; display:block;}
.luxpic div {background:black; color:white; padding:0px; padding:0px 3px;}
.luxpic div span {float:right; font-size:75%; margin-left:3px;}
@media screen and (max-width: 800px) {
.luxpic {width:calc(100% + 10px); position:relative; left:-6px; border: none; border-top:1px black solid;}
.luxpic div span {display:none;}
}
/********************************************************************************************************************************/
/* IMAGES */
/* For all the images in a div with class image, with subtitle below */
/* From loungeindex NEW July 2019 */
.image {width:500px; max-width:800px; display:inline; background:black; color:white; border: 1px black solid; overflow: hidden; webkit-user-select: none; user-select: none; -webkit-touch-callout: none;}
.image img {width:100%; transition: all 0.3s; display:block; vertical-align: top; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.image p {display:block; margin:0; padding-left:6px;} /* Pad all text a bit on the left */
.image.right {float:right;}
.image.left {float:left; margin-right: 10px;}
.image.small {width:300px;}
.image a {color:white; text-decoration:none;}
.image.zoom {cursor: zoom-in; overflow:hidden;} /* New for AR 6.1 */
/* Zoom on the images */
@media screen and (min-width: 769px) {
.image.zoom:hover img {
transition: all 0.3s; /* New for AR 6.1 */
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
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);}
/* 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;}
}
/* 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;}
}
/* New responsive images - these pop left and right of table in maxscreen */
@media screen and (min-width: 1524px) {
.image {width:600px;}
.image.right {position:relative; left:50px; margin-left:-50px;}
.image.left {position:relative; right:50px; margin-right:-50px;}
}
@media screen and (min-width: 1624px) {
.image.right {position:relative; left:80px; margin-left:-80px;}
.image.left {position:relative; right:80px; margin-right:-80px;}
}
@media screen and (max-width: 1120px) {
.image, .image.small {display:block; clear: both; width:calc(100% + 10px); max-width:initial; position:relative; left:-5px; border: none; border-top: 1px black solid;}
.image.right, .image.left {float:initial; margin-left:0; margin-right:0;}
}
@media screen and (min-width: 1120px) and (max-width: 1524px) {
.image.left {width:400px;}
}
@media screen and (max-width: 769px) {
.image, .image.small {width:100%; width: calc(100% + 10px);}
}
/* For fixed 400 width images - despite forcing it big, we now still keep to 400px*/
@media screen and (min-width: 600px) {
div.image400>img {width:400px;}
.image400 {max-width:400px!important; display:inline; border: 1px black solid;}
.image.right.image400 {float:right;}
.image.left.image400 {float:left;}
}
@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;}
}
/****************************************** OLD style images from old AR up to v6.0 ******************************************************/
/* 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:800px; vertical-align: top; -webkit-user-select: none; -webkit-touch-callout: none;}
.inlinecaption {max-width:300px; word-wrap: break-word; margin-left:3px;}
.inlineimg {width:700px \0/ !important; } /* Nasty hack for IE 8-9 to stop black bar on right*/
.captioncopyright {float:right; font-size:75%; margin-left:3px; margin-right:3px;}
@media screen and (max-width: 1023px) {
.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;}
}
@media screen and (max-width: 767px) {
.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;}
}
/********************************************************************************************************************************/
.parallax {position: relative; width: 100%; height:600px; margin:0px; padding:0px; margin-bottom:16px; border:1px black solid; box-sizing: border-box; overflow:hidden; z-index:51;}
.parallax div {width: 100%; height: 100%; background-position: center bottom; background-repeat: no-repeat; background-size: cover; box-sizing: border-box;}
.parallax span {background: black; color: white; clear:both; width:100%; position: absolute; bottom: -16px; padding-left:8px; box-sizing: border-box;} /* Title bar */
.parallax span span {background: initial; font-size:75%;} /* Copyright tag RHS */
@media screen and (min-width: 1025px) {
.parallax {left: 50%; margin-left: calc(-50vw + 158px); width:calc(100vw - 18px); height: 95vh; margin-bottom:0px; }
.parallax {border:0px; border-top: 1px black solid; overflow:hidden;}
.parallax div {background-attachment: fixed; }
.parallax span {width:calc(100% - 2px); padding-left:4px; margin-left:-1px; bottom: 0px; } /* Title IN pic */
.parallax span span {margin:0px;}
}
/* Has a 120 column LHS but is centreed by using 50% of column, then minus 50 of view view width. Ish 1262*/
@media screen and (min-width: 1120px) {
.parallax {margin-left:calc(-50vw + 100px);}
}
@media screen and (min-width: 1282px) {
.parallax {margin-left:calc(-50vw + 96px);}
}
@media screen and (min-width: 1524px) {
.parallax {margin-left:calc(-50vw + 9px);}
}
@media screen and (max-width: 800px) {
.parallax {width:calc(100% + 10px); height:80vw; position:relative; left:-6px; border: none; border-top:1px black solid;}
.parallax span {position: absolute; bottom: 0px;}
}
/* Wow! Solved parallax on ipad problem. overflow:hidden; crucial . Does the NOT work???? */
@supports (-webkit-overflow-scrolling: touch) {
@media only screen and (min-width: 1023px) and (orientation: landscape) {
.parallax {width:100vw; height:95vh; z-index:99; margin-left:-10px; overflow:hidden;}
.parallax div:not(.notipad) {
background-repeat: no-repeat;
background-attachment: scroll !important; /* Vital to get to size properly */
background-size: cover !important; /* Vital to cover whole and size 100% */
position: fixed; top:0; left:0; /* And then we firmly put the background in the top left */
}
.parallax span {bottom: 0px;}
}
}
/********************************************************************************************************************************/
.breadcrumbs {font-size: 12px;}
.breadcrumbs ul {list-style-type:none;}
.breadcrumbs ul li {display:inline;}
.popwin {visibility: hidden; position: absolute; z-index:200;}
#PortTabMenu {background:#ddd; width:100%;}
#PortTabMenu td {text-align:center;}
#PortTabMenu a {color:#004; text-decoration:none; font-weight:bold; }
#PortTabMenu a:hover {color:blue;}
@media screen and (max-width: 1120px) { #PortTabMenu a {font-size:85%;} }
@media screen and (max-width: 1023px) { #PortTabMenu {display:none;} }
#mobilebottom {display:none;}
#mobilebottom a {background:red; color: white !important; background:red; border-bottom: 1px solid black; border-top: 1px solid black; text-decoration: none; text-align:center; display:block; width:100%; max-width:764px; float:left; font-size: 16px; line-height:22px; padding: 0px; margin: 0px; }
#mobilebottom ul {background:red; list-style-type: none;}
/* ****************** Mobile from lux-traveller 2019 ****************** */
@media screen and (min-width: 1524px) {
.LHSBox {width:300px; border: 1px #aaa solid; box-sizing:border-box;}
}
.content {z-index:50; position:relative;}
.LHSBox, #adboxTOP, #LHSsecond {z-index:49; position:relative;} /* So if resize, ads appear under text */
/********************************************************************************************************************************/
/* Changed sizes with padding from loungeindex Aug 2019 */
/********************************************************************************************************************************/
/* 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 #aaa solid; box-sizing:border-box;}
#adboxTOP, #LHSsecond {width:300px;}
.content {width:800px; margin:0px 50px 0px 50px;}
.RHSbox {width:300px;}
}
@media screen and (min-width: 1624px) {
.bigwrapper {width:1604px; }
.content {width:800px; margin:0px 100px 0px 100px;}
}
/********************************************************************************************************************************/
/* For smaller PC */
/* Cont width of 770 gives margin of 9 on either side of ipad
/* container 1120 +---------------------content 800 -----------------------+5+----300---+ */
/* WTF??? THIS IS MAD
@media screen and (max-width: 1262px) {
.bigwrapper {width:1120px; }
.LHSBox {display:none;} CHANGE Oct 2019
.content {width:800px; margin:0px 10px 0px 0px;}
.RHSbox {width:300px;}
#LHSsecond {display:none;}
}
*/
/********************************************************************************************************************************/
/* 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; }
.content {width:800px; margin:0px 10px 0px 0px;}
.RHSbox {width:300px;}
.LHSBox {height: initial; width:800px; float:none; display: block; position:relative; right:initial; clear:both; border:0; width:800px; margin:0px 10px 0px 0px; }
#LHSfirst {height: initial; width:800px; float:none; display: block; position:relative; margin: 0px auto;}
#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; }
.content {width:710px; margin-right:0px;}
.RHSbox {width:300px;}
.LHSBox {width:710px; }
#LHSfirst {width:710px;}
.footer {height:65px; line-height:initial;}
#syndicatead {margin-bottom:0px; }
}
/********************************************************************************************************************************/
/* Anything smaller than ipad landscrape */
/* Once width drops below 800+300 take RHS advert down to 160 */
@media screen and (max-width: 1023px) {
.bigwrapper {width:100%;}
.content {width: 800px; width: calc(100% - 180px);}
.RHSbox {width:160px;}
#RHSfirst {width:160px;}
#RHSsecond {width:160px;}
.LHSBox {width: 800px; width:calc(100% - 180px);}
#LHSfirst {width:336px; margin:0; margin-left: calc(50% + 167px);}
#syndicatead {margin-bottom:50px;} /* To avoid RHS ad clash, oddly have to have more margin for it on ipad vertical??? FIX AUG 2019 */
}
#titpic {background-image: url(BigPictureSmall.jpg); background-repeat:no-repeat; background-position: center; background-size:100% 100%; position: relative;}
#titpic img {width:100%; max-width:1600px; max-height:400px;}
@media screen and (max-width: 801px) {
.bigwrapper {width:100%; overflow:hidden;}
.content {width:99%; width:calc(100% - 10px); margin-left:5px;}
#herotitle {display:initial; font-size: 16px; font-size: 8vw;}
.LHSbox {all: unset; width:100vw; clear:both;}
#adboxTOP {all: unset; display: block; width:100vw;}
#LHSfirst {all: unset; display: block; }
.RHSbox {all: unset; width:100vw; clear:both; }
#adboxBOT {all: unset; display: block; width:100vw; clear:both; padding-top:20px;}
#RHSfirst {all: unset; display: block; }
.staydownwrapper .content {padding-bottom:0px;}
#syndicatead {border-bottom:1px blue dashed; display:block; clear:both; margin-bottom:10px; height:initial;} /* height:500px; WAS 1500 margin new */
#mobilebottom {display:block; width:100%; position: absolute; bottom: 0px;}
#mobilebottom a {width:100%; max-width:100%; width:calc(150% + 20px); }
/*.factbox {margin-left:5px; width:calc(100% - 10px);}*/
h1 {width:calc(100% - 4px); margin-left:-6px; padding-left:6px; font-size: 26px;}
h2 {width:calc(100% - 4px); margin-left:-6px; padding-left:6px; font-size: 23px;}
h3 {margin-left:6px;}
body {font-size: 18px;}
.button {width:300px; padding:2px; font-size:16px;}
#titpic {height:0px; overflow:hidden;}
#titpic img {display:none;}
}
.staydownwrapper {min-height:100%; min-height: calc(100% - 151px);} /*Head 65 tabs 22 footer 65 */
@media screen and (max-width: 1023px) {
.staydownwrapper {min-height: calc(100% - 126px);}
}
#toptit {color:white; text-decoration:none;}
#titpic {margin-top:65px; transition: margin 0.5s linear;}
@media screen and (max-width: 1023px){
#titpic {margin-top:40px;}
}
/************************************************ Search Bar *****************************************************************/
#topsearch {max-width: 296px; width: calc(100% - 30px); display:block; clear:both; position:relative; top:initial; right:initial; padding:5px;}/* position:absolute; top:-87px; right:7px;}*/
.gsc-search-box {border: 1px solid black; border-radius: 5px; padding: 0px 5px !important; width:300px; }
.gsc-input {font-size: 18px; text-align:right;}
.gsc-input:focus {font-size: 22px; position: relative;}
.gsc-search-box:focus-within {z-index:100!important; position: relative; background:orange;}
.gsc-search-button {padding: 2px !important; background-color: orange !important; border:0; }
@media screen and (max-width: 801px) {
#topsearch { display:block; clear:both; position:relative; top:initial; right:initial; max-width: initial; width:90%; width: calc(100vw - 40px); height:80px; padding:0px; margin:0px 10px; }
.gsc-search-box {width:100%; }
}
#socialbuttons {width:100%; max-width:100%; overflow:hidden; padding-top:10px; padding-bottom:10px;}
#News {color:red; font-size:115%;}
.footer a, .footer a:visited{color:white;}
#nextpagebutton {margin-bottom:2px;}
/*
.bigwrapper {background: yellow;}
.content {background: gray; }
.RHSbox {background: green; }
.LHSBox {background: red;}
#LHSfirst {background: yellow;}
#LHSsecond {background: blue;}
*/
/* For the lounges iframe */
.LoungesFrame {border: 1px solid black; width:100%; max-width:800px; font-size: 13px; line-height:14px; vertical-align:top;}
.LoungesFramePreview {height:110px; overflow:hidden; vertical-align:top; color:black; font-size: 13px; line-height:14px; margin:0; padding:0;}
table.TableCurvedTop {
background:orange;
margin:0px;
border:black 1px solid;
border-bottom: orange 1px solid;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
font-size: 13px; font-family: tahoma, Verdana, Helvetica, Arial, sans-serif;}
table.TableCurvedTop th { padding:2px 3px; }
.TableCurvedTop tr th a {color:black; font-size: 16px;}
@media screen and (max-width: 793px) {
.LoungesFrameRHSpic {display:none;}
.TableCurvedTop tr th a {font-size: 18px;}
}
/******************************************************************************/
/* For the review.php - New Oct 2019 */
.bigtit {font-size: 32px; margin-top: 0px; margin-bottom: 0px; text-overflow: ellipsis; width: 90%; max-width: 90%; white-space: nowrap; overflow: hidden; color:black;}
.ReviewTitle {font-size: 28px; margin-top: 0px; margin-bottom: 0px; text-overflow: ellipsis; width: 90%; max-width: 90%; white-space: nowrap; overflow: hidden; color:black;}
.ReviewInfo {font-size: 18px; color:#222;}
.ReviewText {font-size: 16px; color:black;}
.ReviewText:hoverZZ {text-decoration:none; color:#444;}
.pagebutton {font-size:24px; padding:1px 10px; margin:4px 20px 0 0; background:green; color: white!important; text-align:center; white-space:nowrap; float:left;}
.pagebutton:hover {background: #1d1; text-decoration:none; color:#444; box-shadow: 2px 2px 4px #000000;}
.button {display:block; font-size:24px; width:300px; padding:5px; margin:0 auto; margin-top:28px; margin-botton:28px; border-radius:4px; background:green; border:2px #3f3 solid; color: white!important; text-align:center;}
.button:hover {background: #1d1; border:2px green solid; text-decoration:none;}
@media screen and (max-width: 768px) {
.bigtit, .ReviewTitle {font-size: 22px;}
.button {width:300px; padding:2px; font-size:16px;}
}
/************ For the review.php - PAGE ITEMS ****************/
#graphreview {width:100%; margin:0; padding:0; border:0px green solid;}
#listreview {width:100%; margin:0; padding:0; border:0px red solid;}
#writereview {width:100%; min-height:500px; margin:0; padding:0; border:0px green solid;}
/******************************************************************************/
/* CHANGE AUG 2019 - DON't HAVE the tab colour background as blue too - otherwise zaps the orange background of active tab */
.TabColour a, .TabColour a:visited {background:initial; }
.MenuCSS ul li ul li a {background:white; }
/* Now we no longer obsure the top bar of pic, put the caption at the top */
#herocaption {top: 0px;}
/* So that when fold up on responsive, ads under text */
.content {background: white;}