body {background-image: url("images/parchment-6th.jpg"); 
background-repeat:repeat;
background-position:center top;
background-attachment:scroll;
background-color:#cba7a7;
font-family: Tahoma, Geneva, sans-serif; 
font-size:1.1em;
text-align:center;  
color:#210;
/*margin-top:20%;*/
width:100%; 
border:none; 
margin:0;}

a:link, a:active, a:visited, a:hover 
{font-family:proseantique, arial, sans-serif;  font-weight:bold;
text-decoration:underline; } /* line-height:1.5em; padding:0em .4em  .0em;
border-width:0em; border:none;*/
div.fixed-button a  {font-weight:normal;}

h1	     {font-size:1.7em;}
h2	     {font-size:1.4em;}
h3, h4	     {font-size:1.3em;} /* h3 used on contact page*/
label     {font-size:1.2em; font-weight:bold;}
h1,h2,h3,  label    {font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style:italic; }

/* COLOURS DEFINED*/
a:link    {color: #700;}
nav.menu a      {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*/
a:visited {color: #700;}/*brighter red for links   purple = #215*/
a:hover,  nav.menu a:hover   {color: #b60;}  /*the general mustard hover link; lilac = #cce*/
a:active {color: white;}

div.audio, div.tourslinks, ul.bigger, ul.tours, ul.centerblock, div.red, 
h1, h2, h3, label, button:hover,
div.picl, div.picr, img, .fixed-button      {color:#400;}  /*THE RED COLOUR TEXT*  , div.fixed-button a:hover/
div.picl img, div.picr img  {border-color:#002;} /*to keep pic border as per body due to below */
div.titling {color:#543;} /*for Sos using grid*/
div.green	{color:#050;}
div.yellowgold, .yellow	{color:yellow;}
div.redgold, div.announce	{color:#fa0;}
div.whitegold	{color:#eee;}
    div.whiteheadings h1, 
    div.whiteheadings h2, 
    div.whiteheadings h3, 
    div.whiteheadings, 
    th {color:#eed;}  /*don't know why, but an ordinary comma separated list of h elements doesn't work*/
.menu 	{background-color:#303030;}/*  top  menu colour defined*/
button  {background-color:rgba(256,256,256,0.7);} 
button:hover {background-color:white;}/* back color change for button on hover*/
.fixed-button       {background-color: rgba(255,255,255,0.7);}
.fixed-button:hover {background-color:#fff;} 
th                  {background-color:rgba(255,255,255,0.2); text-shadow:0px 2px 5px rgba(0,0,100,0.8);}
div.picl:hover, div.picr:hover   {background-color:#aa8888cc;} /*#333344*/

/* END OF COLOUR DEFINED*/


/* DIVS and Grid*/
div.container	{max-width:100%; margin-top:10%; margin-left: 1em ; margin-right:1em;}/* width:90%;*/
@media screen and (min-width:860px) {.container {margin-top:2%}}
 
        /*Define GRID for pages*/
        div.grid-container  {display:grid; 
                            grid-template-columns: 1fr 12fr 3fr;  
                            /*grid-gap: 0%; margin-top:0%;*/
                            grid-template-rows:auto;
                            grid-template-areas:
                            "head-img   head-img    head-img"
                            "title       title       title"
                            "grid-l-sidebar   grid-between  grid-r-sidebar"
                            "grid-main-space grid-main-space grid-main-space "
                            "footer     footer      footer";}
        .head-img           { grid-area:head-img;}
        .title              { grid-area:title;}
        .grid-l-sidebar     { grid-area:grid-l-sidebar;}
        .grid-between       {grid-area:grid-between; padding:1em;}
        .grid-r-sidebar     { grid-area:grid-r-sidebar; font-style:italic; font-size:0.8em;}
        .grid-main-space    { grid-area:grid-main-space; padding:1em;}   
        
        /*some images defined here for grid above. Move later to elsewhere in css?*/
        .grid-l-sidebar, .grid-r-sidebar  img  { width:100%;}
        /*Some Divs defind here which perhaps replicate those in the rest of css, but for grid*/
         .titling   {font-size:smaller;}

/*old style Divs for flexbox styling below here*/
div.horizstrip	{margin:2em auto 2em auto; height:10vw;}
div.stripright	{width:20%; float:right; margin:1em;}
    .stripright p { font-size:0.6em; text-align:center;}
div.stripleft   {/*width:8%;*/}    
div.picl        {float:left; clear:left;}
div.picr        {float:right;}
div.picr, div.picl      {width:25vh;/*28%*/ font-size:0.7em; font-style:italic; margin: 10px; bxorder:solid;}
div.yourguides  {width: 60%; margin: auto; clear:right; bxorder:solid;}
div.audio	{border:solid; max-width:80%; border-radius:5px;  margin:2em auto 2em auto; padding:1%; line-height:2;}
div.audio audio {max-width:100%;}/* not sure this still does anything*/  
div.footer	{margin:0 auto 0 auto;  width:100%; font-size:0.5em;height:100px;}
div.centerimage	{margin:0 auto 0 auto;  width:70%; font-size:0.5em; text-align:center;}
div.press	{font-size:0.7em;}
div.announce    {font-size:1.2em; font-style:italic; background-color:#33333366; width:40%; margin:0 auto 0 auto; border-radius:5px; padding:0.5em; border: solid 1px white;} 
div.covid {margin:0 auto 0 auto; background-color:#955; color:white;  border:solid; border-width: 1px;  border-color:#900; width:98%; z-index:5; padding:0.3em; font-size:0.8em; }
@media screen and (min-width:861px) {div.covid {position:relative; top:19vh;}}
@media screen and (max-width:860px) {div.covid {position:absolute; top:1vh; padding-left:8%; width:90%}}
div.redgold, .yellowgold, .whitegold {margin-top:2.5em;}
    /*Video divs*/
        div.video-container-center    	{width:60%; margin-left:auto; margin-right:auto; margin-top:1em; margin-bottom:2.5em;/*border:solid;*/}
        div.video-center, div.flex	{/*height: 0;*/ height: 0; width: 100%; padding-bottom: 56.25%; overflow:hidden; position: relative; text-align:center;}
        div.video-center iframe  	{position:absolute; top:0; left:0; width:100%; height:100%;/* border:solid;*/ z-index:0;}
        div.video-container-center  p  	{poxsition:bottom; width:100%; text-align:center; font-size:0.8em; /*margin-bottom:1.1em; */margin-top:0em;}

        div.video-grid          {display:grid; grid-gap:1em; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));}
        div.flex                {display: flex; flex-direction:column;}
        div.flex iframe    	{position:relative; txop:20vh; left:0; width:100%; /*height:100%;*/ /*border:solid;*/ /*z-index:0;*/}
    /* End Video divs*/

div.tourslinks		{font-size:1.2em; text-align:left;}
div.tourslinks	img 	{width:20%; vertical-align:middle;}
div.tourspage 		{width:100%; margin:0 auto 0 auto; }
div.containertours	{width:95%; margin-left:auto; margin-right:auto;}
div.transpheader        {position: absolute; top:-12px; border:none; height:80vh;} /*position removes the background gap at the top*/
.lowered                {position:relative; top:40%; left:0px; width:100%; text-align:center; }
.lowered-border         {position:relative; top:125%; left:0px; width:100%; text-align:center; }
div.green, div.red, div.yellow	{border: solid; text-align: justify; padding:1em; margin-bottom:1em;}
div.break               {width:100%; height:1px; clear:both; bxorder:solid;}
div.fb-container-center {margin:1em auto 2.5em auto;}
div.fb-footer           {width:80%; margin:0 auto 0 auto; clear:both;} 
div.fb-internal         {width:50%; float:left; margin: 0 auto 1em auto;}  /*creates an invisible div for the fb div to expand to 100% of*/
/*this attempt to control fb post embed is not robust - they disappear sometimes*/
div.fixed-button       {position:fixed; bottom:10px; right:10px; width:8em; height:10em; font-size:0.6em; 
                        border-radius:5px; padding:0.2em; 
                        box-shadow:; transition:width 1s; webkit-transition:width 2s; moz-transition:width 2s}
 .fixed-button button  {width:100%; font-size:1em; margin:0; }  /*1.0em is relative to the div font em size*/
div.fixed-button:hover {width:16em; font-size:1em; height:10em;}
@media screen and (max-width: 496px) {div.fixed-button:active  {transition:width 2s; webkit-transition:width 2s; moz-transition:width 2s}} 
/*This line seems to be required to keep the transition working in FF on a smal screen.  Chromium does it with just the above line*/

 /*for mailchimp signup form on gaidhlig.html*/
div.mc-field-group li   {color:black; text-align:left;}
div.center   {margin: 1em auto 1em auto;}

 /* END DIVS*/
 
/*SECTIONS for dropdown defined*/
        /*The drop down on the TNC page - clickable version*/        
section.drop-container {position: relative; z-index:1; /*position needed for making the click open and close wording appear*/
            max-width:100%;
            margin-right:2%; /*pushes the label bar away from RHS*/
            background-color:#ffffff66;  
            margin-top:0.9em; } /*This is the title element pre-opening*/
section.drop-container input	{display:none;} /* the engine to open and close uses input and checkbox*/
section.drop-container label	{
    text-align:left;
    padding: 5px 20px;
    margin-top:0.5em;
    display: block;
    cursor: pointer;
    text-shadow: 2px 2px 1px rgba(255,255,255,0.8);
    line-height: 2em;
    font-size:1.2em;
    text-align:left;
    background-image: url("images/background-drops.jpg");
      }
    
/* below handles the changes to label background when hovering PLUS dropdown  */      
section.drop-container:hover	{background-color: rgba(255,255,255,0.8); border-radius:5px;}

section.drop-container article	{
    height: 0;
    overflow:hidden;
        transition-property:height, opacity, background-color;
        transition-duration: 1s;
        -webkit-transition-property:height, opacity, background-color;
        -webkit-transition-duration: 1s;
        opacity:1;
}

    /* below control the dropping down engine AND the box styling*/
section.drop-container input:checked ~ article.drop-auto{
    height:auto; 
    max-width:100%;
    position:relative ; left: 2%; top:0.5em;
    text-align:justify;
    padding:0.3em;
    background-color: rgba(255,255,255,1);}
    
    /*below = stylng (not engine)for tnc drop downs label and article*/
    
.drop-container, article {
    box-shadow: 1px 8px 16px 0px rgba(0,0,0,0.4); 
    border-radius:5px;} /*styling for both*/    
 
 /* below is to give click instruction when article is closed.  NB important "," end of line 1  */	
.drop-container label:after { content: 'Click to view '; 
    position:absolute; right:0.3em; 
    top:2em; font-size:0.5em;/* former arrows \25c0  \25bc*/ }

  
/*below is to give click instruction when article is open.  */	
.drop-container input:checked + label:after 
    { content: 'Click to close'; top:-1em; color:#a00} /* former arrows  \25b2  \25c0*/
                
        /*end of dropdown on the tnc page*/
        
 /* END SECTION*/


/* Define IMAGES  */
/*Grid images define*/
.grid-r-sidebar img {width:90%;}
/*old style define of imges some of which are used in grid*/
img.dragons	{float:left; margin-top:1%; border:none; clear:left; width:6%;/*position:relative; z-index:5;*/}
img.header	{width:100%; border:none; margin:0;  }
img.iona        {height:90%; position: absolute;  left: 0px; top: 0px; z-index:-1;}
img.borders     {position: relative; left:0px; top:-15px;}
img.gradient        {mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0));
                    -webkit-mask-image:linear-gradient(to bottom,  black 0% 70%, transparent 100%); }
img.title	{width:70%; border:none;}
img.my-image 	{float:left; margin-left:2%; width:18%;}
img		{border:solid; margin:1%; border-radius:5px;}
img.left	{float:left;  clear:left;}
img.right	{float:right;  clear:right;}
img.left, img.right {width:25%;} /* this class used on most pages when image subtitling is not required.*/
div.dropdown-content img    {width: 25%;} /* just bulk defines the TNC dropdown images to be same as others*/
div.picl img, div.picr img {width:95%;}/* used for Borders page where image subtitling is required */
div.picr        {clear:right;}
img.clear       {border:none; }
img.center	{margin:1em auto 1em auto; width:50%;}
div.stripright img	{width:100%;}
div.horizstrip	img {max-height: 100%; object-fit: contain; border: none;}
img.footerimg	{width:20%; border:none;}/*height:8em; z-ixndex:10;*/
img.about	{border:solid; width:60%;}
div.press	img {height:100px;}
div.centerimage	img {width:100%;}
/*div.containertours img	{width:25%;}*/
img.purse	{width:30%; border:none; margin:auto;}
img.seal        {width:15%; border: none;}
img.bc          {border:none; float:left; margin:0%; margin-right:2px;} /* margin to zero to override the 1% for all other images*/


 /*IMAGES EXPAND ON HOVER OR ACTIVE CLICK*/
img.guides      {height:20vh;}
img.guides, div.picl, div.picr, div.horizstrip img:hover  {
                 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(1.4) ; /* Safari and Chrome */
                -moz-transform:scale(1.4) ; /* Firefox */
                -ms-transform:scale(1.4) ; /* IE 9 */
                -o-transform:scale(1.4) ; /* Opera */
                transform:scale(1.4) ; }  /*This is the scaling in situ for the guide images*/
           
div.picl:hover, div.picl:active {
    -webkit-transform:scale(1.4) translateX(17%) ; /* Safari and Chrome */
    -moz-transform:scale(1.4) translateX(17%) ; /* Firefox */
    -ms-transform:scale(1.4) translateX(17%) ; /* IE 9 */
    -o-transform:scale(1.4) translateX(17%) ; /* Opera */
     transform:scale(1.4) translateX(17%) ; } /* This scales the left floated imagees*/
     
div.picr:hover, .picr:active {
    -webkit-transform:scale(1.4) translateX(-17%) ; /* Safari and Chrome */
    -moz-transform:scale(1.4) translateX(-17%) ; /* Firefox */
    -ms-transform:scale(1.4) translateX(-17%) ; /* IE 9 */
    -o-transform:scale(1.4) translateX(-17%) ; /* Opera */
     transform:scale(1.4) translateX(-17%) ; }
     
div.picl:hover, div.picr:hover   {border-radius:5px; padding:0.1em;} /* background colour of frame defined above*/
div.clear:hover          {background-color:#EEEEFF55;} /*this element overrides the above background to remain clear for connois png.*/
    
    /* End OF images expand on hover*/
    
/* End of IMAGES*/


/*PARAGRAPH CLASSES*/
div.tourslinks	p {margin-bottom:2em;}
p               {text-align:justify;}
/* END PARA CLASSES*/

/*BUTTON DEFINED  -  Not colors or the menu button*/
button	{font-size:1em; padding:0.3em; border-radius:0.4em; margin:0.5em 0 0.5em 0; max-width:50vw;}
button:Hover {cursor:pointer;}


/*UL and lists of bullets*/

ul.bigger	{font-size:1.3em;} /*clear:left;*/
ul.tours	{font-size:1.0em;}
ul.bigger, ul.tours  {text-align:left; padding:0% 7% 0% 7%; list-style-position: inside; bxorder:solid; }  /*was 15%*/
ul.centerblock      {width:70%; margin:0 auto 0 auto; text-align:left;}


 /*DEFINE TABLE*/
 /* generic table only used on prices for long tours */
table               {margin-top:1em;}
table, td           {table-layout:fixed; border:collapse; border:solid 1px;  border-radius:5px; }
th                  {font-size:1.3em; padding:1em;} /*th colour defined above*/
td		    {padding:0.5em; vertical-align: top;}
td.col1-west, td.col2-west  {width:50%;}

table.download		{background:white;}
table.download img	{width:20%;}


/*   MISC DEFINED*/
emf	{font-size:1.2em; font-style:italic;}
b2      {font-weight:bold; color:white;}
small	{font-size:0.8em;} /*used for small text either within a para or outside, which then centres from body attributes*/
small.xe   {font-size:0.6em; text-shadow:none;}
@media screen and (max-width:440px) {.content-desktop-only {display:none;}}   /*That is up to 440px display=none*/

/*   END OF MISC*/




/*********Nav menu************/
/*----- Toggle Button -----*/
.toggle-nav {
    display:none;
}

.menu button {font-size:0.7em;} /* controls size of button as it is on the black top menu*/

/*----- Menu itself-----*/
@media screen and (min-width: 860px) {
    nav.menu {
        width:100%;  /*controls width of full-width-menu*/
        margin-left:auto; margin-right:auto;
/*scot added*/  position:fixed;
/*scot added*/  top:10px;
/*scot added*/	z-index:10;
        /*padding:5px 18px;*/  /*   internal padding to menu bar*/
        box-shadow:0px 1px 2px rgba(0,0,0,0.5);
        border-radius:3px;
        
    }
}

/*Note that menu list items are different on each page - they show only what is relevant to the topic*/
/*.menu ul {display:inline-block;}*/  /*removed May 2021 during implimentation of grid on SoS.  seems to make the nav menu taller but nothing else.*/
 

.menu li {
    margin:0px 1.5em 0px 0px; /* 50px  space between each link words in full menu*/
    float:left;
    list-style:none;
    font-size:0.9em;  /*17px  1em*/
    }
 
a.tours	{font-size:0.7em; }

.content-mobile    {display:none;} /* this line makes the booking button absent from the main menu in desktop mode*/


/*----- Responsive -----*/
@media screen and (max-width: 1150px) {
    .wrap { width:100%;}
}


@media screen and (max-width: 860px) {
  body	{margin-top:2%;}  /*added by scot to increaase real estate for hamburger in mobile version*/
  .menu {
        position:relative;
        z-index:10;  /*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:1%; /*20px  .  Positions the Hamburger. .added as part of the above*/
        }
 
    .menu ul.active {display:none; width:100%;}

 
    .menu ul {
        position:fixed; /*absolute;*/
        top:5%;  /* controls vertical position of opened menu*/
        left:10%;  /*controls position (h) of vertical MOBILE menu when opened*/
        /*padding:10px 18px;*/
        box-shadow:0px 1px 1px rgba(0,0,0,0.15);
        border-radius:3px;
        background:#303030;
        }
 
/* the below controls the wee arrow atop the mobile menu*/
    .menu ul:after {
        width:0%;
        height:0px;
        position:absolute; /* from abs*/
        top:0%;   /* 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 5px 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: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:6px; /*this can control the space between the tours sub menu list items*/   /*6px*/
	    }
 
    .toggle-nav {  /* the hamburger symbol is unicode in the page itself*/
        padding:2%;  
	position:fixed;  /*scot added*/	
	top:2%;  /*scot added.  Positions the hamburger vertically*/
        float:left;
        display:inline-block;
        box-shadow:4px 4px 4px rgba(255,255,255,0.25);
        border:solid;
        border-radius:5px;
        background:#303030;
        border-color:grey;
       /* text-shadow:0px 1px 0px rgba(0,0,0,0.5);*/
        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*/
    .fixed-button      {display:none;} /*  This line makes the fixed date-price button in bottom right disappear in mobile mode*/

    /*TO MAKE THE DRAGONS MOVE IN MOBILE SIZE*/
    img.dragons		{padding-top:15%}
}


/* END NAV MENU*/