body {background-image: url("images/leather-3-b-double-width.jpg"); background-repeat:round; background-color:#333311; font-family: Tahoma, sans-serif; font-size:1.2rem; text-align:justify; color:#210; padding:0px; margin:0px;} h1, h2, h4 {text-align:center;} h1, h2, h3, h4 {font-family:serif; font-style:italic;} h2 {margin-top:0px;} /*line-height:100%;*/ h3 h4 /*DEFINE LINKS, BUT NOT COLOURS*/ a:link, a:active, a:visited, a:hover {font-family:proseantique, arial, sans-serif; font-weight:bold; text-decoration:underline; text-shadow:none; cursor:pointer;} div.fixed-button a {font-weight:normal;} a.btt, a.btt:hover {text-decoration:none; vertical-align:30% /*transform: translateY(-5px);*/}/*back to top link. SEE also toggle-nav and COLOURS DEFINED FOR NAV for styling of this element*/ div.btt {position: fixed; left: 2%; bottom:1%; font-size:25px; z-index:15; padding:5px; rotate:90deg; /*vertical-align:text-top;*/} /* --------DEFINE COLOURS*/ body.sos {color:white;} a:link {color:#620; font-weight:bold;} /*rust*/ a:active {color:#c20;} /*red*/ a:visited {color:#751;} /*paler rust*/ a:hover {color:white;} div.mara, div.dates, div.notes, .fixed-button {color:#420;} /*brown*/ div.picr, div.picl {color:white; background-color: rgba(50,90,50,0.4); } /*the transition colour is handled in the Define Images section*/ .pale {background:rgba(256,256,256,0.4);} .green {background:rgba(110,130,000,0.5);} .red {background:rgba(200,150,150,0.5);} /*.fixed-button {color:#620;}*//* rust*/ .fixed-button:hover {color:white;} .fixed-button a {color:white;} .fixed-button button {background:rgba(256,256,256,0.3);} div.btt, .toggle-nav { box-shadow:4px 4px 4px rgba(255,255,255,0.25); border:solid; border-radius:5px; background:#303030; border-color:grey; } /*COLOURS DEFINED (FOR NAV)*/ nav.menu a, li.hamburger, a.btt {color:#c99; text-decoration:none;} /* dusty red like background colour for all menu links*/ nav.menu a.current-item {color:#d82; font-size:1em;}/* current item bighter rust*/ .menu {background-color:#303030;}/* top menu colour defined*/ /*Define GRID shape for head area*/ div.grid-head-area {display:grid; grid-template-rows: minmax(25px, 70px) repeat(3, minmax(60px, 12vw)) auto; grid-template-columns: minmax(40px,1fr) 2fr 5fr minmax(50px, 5fr); grid-template-areas: "menu menu menu menu" "dragons head-row1 head-row1 dates" "dragons head-row2 head-row2 ." "dragons head-row3 head-row3 announce" "dragons . . . " " . . dates2 dates2 " " . announce2 announce2 . "; /*row-gap:10px;*/} /* potentially add to areas with named background and use for trees - ie trees in this layer*/ /*Create classes for positioning within grid-head-area*/ /*.menu */ {grid-area:menu; z-index:20; width:100%;} .head-img {grid-area:menu; z-index:2; width:100%;} .dragons {grid-area:dragons; z-index:10; width:90%; padding:5%;} .spirit {grid-area:head-row1 / span 2; grid-row-start:head-row1; } .of {grid-column-start:3; grid-row-start:head-row2; } .scotland {grid-column-start:3; grid-row-start:head-row3; margin:auto; } img.spirit, img.of, img.scotland {z-index:5; height:100%; } .dates {grid-area:dates;} .dates, .announce {z-index:12; text-align:center; height:fit-content; width:fit-content; padding:.5em; font-size:1rem; margin-bottom:10px;} .dates h3 {margin:0;} .announce {grid-area:announce; text-align:center;} @media screen and (max-width: 500px) {.dates {grid-area:dates2;}} @media screen and (max-width: 500px) {.announce {grid-area:announce2;}} /*DEFINE GRID FOR TOUR SUMMARY*/ div.summary-area {display:grid; grid-template-columns: minmax(150px, 1fr) 4fr minmax(180px,1fr); grid-template-areas: "pics summary mara"; } div.pics {grid-area:pics; margin-left:1em;} div.summary, div.mara, div.pics {z-index:12;} div.summary {margin:1em;} div.mara {grid-area:mara; font-size:0.8em; margin-right:1em; padding:0.5em;} @media screen and (max-width: 500px) {.pics, .mara {display:none;}} @media screen and (max-width: 500px) {div.summary {grid-column:pics / mara; grid-row:1}} @media screen and (min-width: 501px) {div.summary {grid-area:summary;}} /*-----DEFINE MAIN SPACE GRID------*/ div.main-area {display:grid; grid-template-areas: /* three columns needed below to allow tree background to position behind the rows correctly*/ "main main main " "main main main " "main main main " "main main main " "main main main " "main main main " "main main main " "main main main " "main main main " "main main main " "main main main " "main main main " "main main main "; /*"footer footer footer "*/ /* grid-template-columns: 1fr 4fr 1fr; NOT needed because later nested rows*/ grid-template-rows:min-content; /* align-items:center; This sort of work sto move the backgronf trees up and down, but also everything else*/ } /* SYNTAX grid-area: row-start / column-start / row-end / column-end align-self:end; place-tiems: center*/ /*justify-content:center;*/ /* SITE AND STYLE TREE BACKGROUND */ /*All trees need a width statement to prevent them overflowing out to the right*/ /*This tree is in the summary area*/ .tree-border-tall-left {grid-area:pics / pics / 1 / 3;} img.tree-border-tall-left {z-index:2; opacity:0.3; align-self:end; width:50%;} /*These areas are part of div.main-area, not separete grids, because they lie behind the rows*/ .tree-border-l-one {grid-area: main / main / span 3 / span 2; z-index:2; width:80%; /*align-self: center;*/} .tree-border-r-one {grid-row:1 / 4; grid-column:-1 / -3; z-index:2; width:100%; align-self: center;} /*Note that the rowspans here set the row height for the text rows*/ .tree-border-r-three {grid-row:3 / 5; grid-column:-1/-3; width: 100%;align-self: center;} .tree-border-tall-left-two {grid-row:6/9; grid-column:1/3; width: 80%;} /*note that this item height across rows affects the height of the tour rows that overlay it*/ .tree-border-l-four {grid-row:9 / 12; grid-column:1/3; width: 100%;align-self: center;} .tree-border-tall-left-five {grid-row:11/14; grid-column:1/3; width: 80%;} .tree-border-tall-right-six {grid-row:11/14; grid-column:-1/-3; width:100%;} .tree-border-centre {grid-row:8/10; grid-column: 1/4; width:100%;} img.tree-border-trans { z-index:1; mask-image:linear-gradient(to top, transparent 0%, rgba(0,0,0,.5) 50%, transparent 100%); /*This is transparent at 0% from bottom and 0.5 opaque by half way to top and trasnparent again by 100% to the top*/ -webkit-mask-image:linear-gradient(to top, transparent 0%, rgba(0,0,0,.5) 50%, transparent 100%); /*This is transparent at 0% from bottom and 0.5 opaque by half way to top and trasnparent again by 100% to the top*/ } h1.itin-heading {grid-area:2/1/3/4;} /*CREATE NESTED GRIDS FOR MAIN PAGE AREA ROWS*/ /*Locate the Rows in grid-area:main and style them*/ div.row1, div.row2, div.row3, div.row4, div.row5, div.row6, div.row7, div.row8, div.row9, div.row10, div.row11, div.row12, div.row13 {grid-area:main; margin:1%; z-index:10; align-items:center;/* this v-centers the picl and picr against the text*/ grid-column:1/4;} /*grid-template-columns:minmax(100px, 1fr) 3fr minmax(100px, 1fr);*/ /* Make each row a nested grid so that it can have 3 sub-columns*/ div.row1 {grid-row:1; display:grid; /* NESTED GRID*/} div.row2 {grid-row:2; display:grid; /* NESTED GRID*/} div.row3 {grid-row:3; display:grid; /* NESTED GRID*/} div.row4 {grid-row:4; display:grid; /* NESTED GRID*/} div.row5 {grid-row:5; display:grid; /* NESTED GRID*/} div.row6 {grid-row:6; display:grid; /* NESTED GRID*/} div.row7 {grid-row:7; display:grid; /* NESTED GRID*/} div.row8 {grid-row:8; display:grid; /* NESTED GRID*/} div.row9 {grid-row:9; display:grid; /* NESTED GRID*/} div.row10 {grid-row:10; display:grid; /* NESTED GRID*/} div.row11 {grid-row:11; display:grid; /* NESTED GRID*/} div.row12 {grid-row:12; display:grid; /* NESTED GRID*/} div.row13 {grid-row:13; display:grid; /* NESTED GRID*/} /* alternating rows - location of pics*/ div.row1, .row3, .row5, .row7, .row9, .row11, .row13 {grid-template-columns:1fr 2fr;} div.row2, .row4, .row6, .row8, .row10, .row12 {grid-template-columns:2fr 1fr;} /*DEFINE PRICE FOOTER AREA*/ div.price-footer-area {display:grid; grid-template-columns:1fr } div.price {grid-area:1/1/2/2 ;/*price;*/} div.price-flex {grid-area:2/1/3/1;/*mid;*/ } div.notes {grid-area:3/1/4/1;/*notes;*/} div.button {grid-area:5/1/6/1} div.activity {grid-area:6/1/7/1;/*activity;*/} div.footer {grid-area:7/1/8/1;/*footer;*/} div.sky {grid-area:1/1/8/1;} /* further define price-footer-area divs*/ div.price-flex {display: flex; display: -webkit-flex; flex-direction:row; grid-auto-rows:max-content; } @media screen and (max-width: 600px) {div.price-flex {flex-direction:column; }} div.price, div.price-flex, div.not-inc, div.included, div.notes, div.button, div.activity, div.footer {z-index:12; width:85%; margin:2px auto 2px auto;} /*more on these divs below*/ /*grid-row:1/4;*/ /*grid-area:mid / footer;*/ div.price, div.button {text-align:center; font-size:1.4em; text-shadow:0px 2px 5px rgba(0,0,100,0.8);} /*ALL THE PRICE BOXES*/ div.price, div.not-inc, div.included, .notes { border:solid 1px; padding:1em;} div.not-inc, div.included {margin-left:3px; margin-right:3px;} div.price-flex {font-size:1.2em;/* grid-auto-rows:max-content;*/} div.notes {margin-bottom:1em;} div.activity {} div.footer {/*margin:2em auto 4em auto;*/ text-align:center;} div.sky {margin:0px; z-index:2; align-self:end;} /*MULTI-USE AND LOCATION DIVS*/ div.picl, div.picr {margin:10px 0px 10px 0px;} /* , div.mobile-only */ /*SIDE IMAGES ON TOUR PAGES - STYLE*/ /*This styles the text and box of the side images*/ div.picl, div.picr, div.mobile-only {padding:1.5em 0.5em 1em 0.5em; height:fit-content; text-align:center; font-size:0.7em; font-style:italic; z-index:12;} /*This styles the side-image*/ div.picl img {border-radius:5px; /*margin-top:10px;*/ width:90%;/* this width % shrinks the full image to match the column fr*/;} div.picr img {border-radius:5px;/* margin-top:0px;*/ width:90%;/* this width % shrinks the full image to match the column fr*/;} div.mobile-only {width:70%;margin:auto;} /*this places the image center and not full width*/ div.mobile-only img {border-radius:5px; width:90%;} @media screen and (max-width: 500px) {/*div.picl {display:none;}*/} @media screen and (max-width: 500px) {div.picr, div.picl {grid-column:1/4; width:90%; justify-self:center;}} /*This puts the image below in mobile*/ @media screen and (max-width: 500px) {div.text {grid-column:1/4;}} @media screen and (min-width: 501px) {.mobile-only {display:none;}} @media screen and (max-width: 500px) {.mobile-only {display:block;}} div.text {padding:0.5em; text-align:justify; z-index:10;} /*STYLE IMAGES*/ img.gradient {mask-image: linear-gradient(to bottom, black 40%, transparent 100%); /* for header image*/ -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%); } img.sky {width:100%; mask-image: linear-gradient(to top, rgba(0,0,0,0.8) 30%, transparent 100%); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.7) 30%, transparent 100%); z-index:2;} img.newin, img.fb-logo {border:none; width:1.5em; vertical-align: middle; margin:0 0.2em 0 0.2em;} img.footerimg, .break-img {width:20vw; margin-left:auto; margin-right:auto; margin-bottom:2em;} /*IMAGES EXPAND ON ACTIVE CLICK*/ /*img.guides {height:20vh;} img.guides, */ div.picl, div.picr, div.horizstrip { transition-property:scale(0) translate(0); -moz-transition-property:scale(0); transition:all 1s ease; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -ms-transition:all 1s ease; } /* transition-property:scale(0);transition-duration:1s; -webkit-transition-property:scale(0);-webkit-transition-duration:1s; -moz-transition-property:scale(0);-moz-transition-duration:1s; -ms-transition-property:scale(0);-ms-transition-duration:1s; -o-transition-property:scale(0);-ms-transition-duration:1s;}*//* This is the starting size and ending size*/ img.guides:hover, img.guides:active, div.horizstrip img:hover {-webkit-transform:scale(2) ; /* Safari and Chrome */ -moz-transform:scale(2) ; /* Firefox */ -ms-transform:scale(2) ; /* IE 9 */ -o-transform:scale(2) ; /* Opera */ transform:scale(2) ; } /*This is the scaling in situ for the guide images*/ /* This scales the left floated imagees*/ @media screen and (min-width:500px){ div.picl:hover { -webkit-transform:scale(1.4) translateX(17%) ; /* Safari and Chrome */ transform:scale(1.4) translateX(17%) ; background-color:rgba(70,60,10,1); z-index:13; } div.picr:hover { -webkit-transform:scale(1.4) translateX(-17%); /* Safari and Chrome */ transform:scale(1.4) translateX(-17%) ; background-color:rgba(70,60,10,1); z-index:13; } } /*DEFINE BULLETS*/ ul.centerblock, ul.tours {text-align:left; list-style-position: inside; text-indent:-1em; padding-left:1em; } /*DEFINE BUTTONS*/ /* ---------Define Global Divs, Paragraphs and text*/ small {font-size:1.0rem;} small.xe {font-size:0.6em; text-shadow:none;} div {border-radius:5px;} /*BUTTON DEFINED - Not colors or the menu button*/ button, button.huge {padding:1em; border-radius:10px } button {font-size:1em; max-width:50vw; margin:0.5em 0 0.5em 0;} button:Hover {cursor:pointer;} button.huge:first-line {font-size:2vw;} button.huge {font-size:.8em; max-width:100vw; margin:1em;} /*********Nav menu************/ /*----- Toggle Button -----*/ .toggle-nav { display:none; } nav.menu {z-index:15;} .menu button {font-size:0.7em; padding:10px} /* controls size of button as it is on the black top menu*/ /*----- Menu itself-----*/ @media(hover: hover) {nav.menu:hover {height:10em;} } @media(hover:hover) /*screen and (min-width: 900px) */{ nav.menu { width:100%; /*controls width of full-width-menu*/ height:2.7em; /* collapsed upwards menu*/ position:fixed; text-align:center; top:10px; left:10px; /*z-index:10;*/ /*padding:5px 18px;*/ /* internal padding to menu bar*/ overflow:hidden; transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -ms-transition:all 1s ease-in-out; /*trans added to create expandable full menu*/ /*NOTE THAT THE TRANSITION (EASE) MUST BE ON THE SECOND, NON-HOVER STATEMENT TO BOTH EASE IN AND OUT*/ } } /*@media(hover:none) {nav.menu {height:7em;}} REDUNDANT when non-hover device uses mobile menu*/ /*Note that menu list items are different on each page - they show only what is relevant to the topic*/ .menu li { margin:0px 1.5em 0.5em 0px; /* 50px space between each link words in full menu*/ float:none; /*when 'left', causes menu items to left align*/ display:inline-block;/* allows menu items to centre*/ vertical-align:top; list-style:none; font-size:1.2em; /*17px 1em*/ text-align:center; } a.tours {font-size:0.7em; margin-bottom:1.2em;} /*This margin only applies to tours sub-list links*/ .content-mobile {display:none;} /* this line makes the booking button absent from the main menu in desktop mode*/ .menu li.hamburger {font-size:1.2em; position:relative; left:-0.3em; top:-0.5em;} /*Needed to override font-size:0.9em above*/ /*----- Responsive -----*/ /*@media screen and (max-width: 1150px) { .wrap { width:100%;} }*/ @media(hover:none) { .menu { position:relative; z-index:15; /*added by scot*/ display:inline-block; float:left; /* added by scot otherwise when container padding is set and nav is moved above it, the hamburger centres*/ left:2%; /*20px . Positions the Hamburger. .added as part of the above*/ } .menu ul.active {display:none; width:100%;} .menu ul { position:fixed; /*absolute;*/ top:0px; /* controls vertical position of opened menu*/ left:8%; /*controls position (h) of vertical MOBILE menu when opened*/ /*padding:10px 18px;*/ margin-right:4%; box-shadow:0px 1px 1px rgba(0,0,0,0.15); border-radius:3px; background:#303030; padding:0px; /* this removes inherited padding that causes the text to move right of center*/ } /* the below controls the wee arrow atop the mobile menu*/ .menu ul:after { width:0%; height:0px; position:absolute; /* from abs*/ top:0px; /* 0%*/ left:12px; content:''; transform:translate(0%, -100%); border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid #303030; } .menu li { margin:5px 0px 2vh 0px; /*controls margin around list items in mobile menu, akin to padding*/ /*5px 0px 15px 0px made mobile menu too tall for screen*/ float:none; display:inline-block; /* makes the mobile menu links stack vertically*/ width:100%; } .menu a { display:inline-block; /* was: "block"" which gives vertical stack of tours links*/ /*padding:5px*/; /*this can control the space between the tours sub menu list items*/ /*6px*/ } /* the hamburger symbol is unicode in the page itself*/ .toggle-nav { display:inline-block; /*scot added. Positions the hamburger vertically*/ padding:10px; position:fixed; /*scot added*/ float:left; top:1%; font-size:30px; /*transition:color linear 0.15s;*/ } .content-mobile {display:block;} /* this line makes the bookin button appear on the menu in mobile mode*/ img.bc, img.fb-logo {display:none;} /*This makes the two menu logos disappear in mobile*/ /* .menu li.hamburger {display:none;}makes the hamburger from the large menu disappear in the mobile menu*/ /*TO MAKE THE DRAGONS MOVE IN MOBILE SIZE*/ img.dragons {padding-top:15%} } /* END NAV MENU*/ /*FIXED BUTTON*/ div.fixed-button {height:14em; width:8em;} @media(hover:none) {div.fixed-button {width:3em;}} /* Wee arrow beside the fixed button NB THIS code must appear above the below code for the arrow to appear*/ .fixed-button:after {font-size:2em; position: absolute; top:-0.6em; left:-0.6em; rotate:-45deg; content:'↕'; /*❮*/ color:white;} div.fixed-button:hover {width:16em; font-size:0.9em; height:17em; background-image:url("images/leather-3-b-double-width.jpg"); border:solid white 2px;} /* The above line must be above the transition code below*/ .fixed-button {position:fixed; z-index:14; bottom:5px; right:10px; border-radius:5px; padding:0.2em; font-size:0.6em; overflow:visible; /* to make wee arrow appear*/ text-align:center; transition:all 1s ease; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -ms-transition:all 1s ease;} .fixed-button:hover::after {display:none;} /*arrow disappears on fixed button expansion*/ .fixed-button button {width:95%; font-size:0.7em; margin:0; } /* THE BUTTON ITSELF. 1.0em is relative to the div font em size*/ /*END FIXED BUTTON - DESKTOP*/ /*Video divs*/ div.video-grid {display:grid; grid-gap:1em; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); margin:1em 0 1em 0;} div.flex {display: flex; flex-direction:column;} div.flex iframe {/*position:relative; left:0;*/ width:100%;} iframe.yt-embed {aspect-ratio: 16 /9; width: 80%;/* margin: 2em;*/} /* End Video divs*/