/* Set background colour to White and text colour to black for all pages */
body {
  background:white;
  color:black;
}


/* Set link colours */
/* Default link to blue */

a:link {
 color:blue;
}

/*  Visited link to purple      */
a:visited {
 color:purple;
}

/*  Hover link to green      */
a:hover {
 color:green;
}

/*  Active link to red      */
a:active {
 color:red;
}




/* Heading styles */

h1 {color: black;
    margin-left: 20px;
    font-size: 40px;
}

h2 { color: black;
     margin-left: 20px;
    font-size: 30px;
}

h3 { color: black;
     margin-left: 20px;
    font-size: 20px;
}

h4 { color: black;
     margin-left: 20px;
    font-size: 15px;
}


/* Set Center command for all pages */
.center {
   text-align: center;
}

/*   -----------------        */


.centerblock {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


/* center a table on the page */
.center-table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}



/*   -----------------        */



/* Set paragraph style for class="tiny" */
.tiny {
   font-family: "Arial, Helvetica, sans-serif";
   font-size: 5%;
}

/*   -----------------        */

/* Set paragraph style for class="Normal" */
.normal {
   font-family: "Arial, Helvetica, sans-serif";
   font-size: 100%;
}


/*   -----------------        */
/*   Use this to put an area with text, a banner, above the fixed menu bar on every page       */

/* Set paragraph style for class="banner" */
/* See also UL below    */

.banner {
   font-family: "Arial, Helvetica, sans-serif";
   font-size: 230%;   /*  set size of text used in banner */
   color: black;  /* set colour for text in banner */
   background-color: #FFFFFF;  /* set colour for banner background */

   top: -40px;   /* Distance from top of screen the banner is displayed */
   position: fixed;
   width: 100%;
   padding: 10px;    /* Space padding around text in banner */

}



/*   -----------------        */


/*        MENU fixed at top of pages      */
/*  Set style for unordered lists */
/*  used for fixed menu at top of page   */


ul {
   list-style-type: none; /* removes bullet points */
   margin: 0; /* removes browser default settings */
   padding: 0; /* removes browser default settings */
   
  
   overflow: hidden; /* Don't let li elements go outside the list */
   overflow: auto; /* Enable scrolling if navigation bar too much content */
   white-space: nowrap; /*  ? to do with scrolling   */
   background-color: #555;  /* Grey backgrond colour */
   position: fixed; /* Fix the Nav bar to the top of the page so it does not scroll */

   top: 60px;
   width: 100%;  /* Width of block highlighted */
   height: 50px; /* Set Height of block */
}

li {
   float: left;
   border-right: 1px solid #bbb; /* Add a grey divider border to the right of each link */
}

li:last-child {
   border-right: none;    /* except for the last link. */
   border-bottom: none;
}


/* Set a block colour for links */
li a {
   display: inline-block;    /* Makes the whole area clickable */
   color: white;
   text-align: center;
   padding: 14px 16px; 
   text-decoration: none;   /* Do not underline links */
}


/* Change the link colour on hover */

li a:hover:not(.active) {
   background-color: #111;
}


/* Set a "selected" class with black background and red text to show which link is active */
.selected {
   background-color: #111;
   color: #FF0000;    /* red text */
}




/* centre the text in lists and add borders*/
li {
   text-align: center;
   border-bottom: 1px solid #555;
} 




/*   -----------------        */

/* Set dropshadow for containers */
.dropshadow {
  width: 100%;  /* makes this scalable */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  margin:0 auto;
}
.container {
  padding: 10px;
}



/* REM Setup centering for Copyright notice at foot of pages */
.copyright {
  text-align: center;
  font-weight: bold;
}

/* REM Setup centered heading 1 */
.centre-h1 {
     color: black;
     text-align: center;
    font-size: 50px;
    font-weight: bold;
}

/* REM Setup centered heading 2 */
.centre-h2 {
     color: black;
     text-align: center;
    font-size: 30px;
    font-weight: bold;
}

/* ----------------------- */
/* Set up horizontal top menu bar with links */

.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  /* position: fixed;   */ /* fix the nav bar to top of window - will not scroll if fixed */
  position: sticky;
  top: 0;               /* bar floats but then sticks at top of window */

}

.scrollmenu a {
  display: inline-block;
  color: white;   /* Colour of text in menu links */
  text-align: center;
  padding: 14px;    /* Padded space around text in menu bar options  */
  text-decoration: none;  /* Remove underline from links */
  border-right: 3px solid grey;  /* place a grey border to the right of each link */
}

.scrollmenu a:hover {
  background-color: #777;   /* Set colour of menu option background to grey when hovered over */
}

.scrollmenu a.active {
  background-color: #04AA6D;  /* Add a green colour to the active/current link */
  color: white;   /* Colour of text in active link on menu bar */
}

/* ---------------------- */

/* Set up table properties for Prices tables */
 .price-table {
   border-collapse: collapse; /* Stop duplication of borders for table and table headers and table data items */
   width: 100%;
}

 .price-table td, th {
   border: 1px solid black;
   padding: 8px;
}


/*  ----------------------- */

/* The slide-fading class produces the 10 second fading from one slide to another and uses @keyframes values */

.slide-fading {
  animation:fading 10s infinite
 }
 @keyframes fading {
 0%{opacity:0}
 50%{opacity:1}
 100%{opacity:0}  /* Keyframes defines how the frames fade using opacity values */
 }


/* The slide-content centres the image box from the slideshow using margin: auto; and sets the max width for the image box. It also sets the box border style */

.slide-content {
    padding: 20px;   /* creates space around the content within the box */
    max-width: 70%;
    margin: auto;    /* Creates space around the box within the browser window */
    border: 3px solid grey;
}