html {
  font-size: 62.5%;                    /* IF USING REMS, 62.5% MAKES THE BASE FONT SIZE 10PX - SO IF YOU 16 POINT STATE 'FONT-SIZE: 1.6REM'*/
  font-family: verdana, Helvetica, Arial, sans-serif;
  word-wrap: break-word;               /* in here because long links cause schroll bars issues on small screens */
  /*height: 100%;*/  
}

body{                                                     /* THIS VERSION KEEPS THE PIC IN THE BACKGROUND */
  background-image: url("../images/halfFaceBWX2.JPG");
  background-repeat: repeat-y; /*no-repeat;*/
  background-position: center top;
  background-color: #fcfcfc;
  background-size: cover;
  background-attachment: fixed;
  margin: 1%;
  color:#303030;
  /*height: 100%;*/
  }

body.losePic{                                            /* THIS VERSION LOSES THE PIC - there's no resize */
  background-image: none;
  background-repeat: repeat-y; /*no-repeat;*/
  background-position: center top;
  background-color: #eff5ff;
  background-image: linear-gradient(to bottom right, #eff5ff, #e0e1f9, #dbffdf);
  background-size: cover;
  background-attachment: fixed;
  margin: 5px 2px 5px 2px;  /* top right bottom left */
  color:#202020;
  /*height: 100%;*/
  }

/*********************************************TABLES*********************************************************************/
table.striped{                    /*this was under dev'ment for selling mp3's*/
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;   
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}
/***************************************FANCY TABLE USED FOR 25 THINGS YOU NEED TO WRITE A SONG********************************************/

#table25x4col {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 94%;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
  word-break: break-all;           /******* needed to stop table overflowing ********/
}

#table25x4col td, #table25x4col th {
  border: 1px solid #ddd;
  padding: 8px;
  font-size:2.0em;
  text-align:center;
}
@media only screen and (max-width: 810px) {     /*IF SCREEN IS LESS THAN 810px*/
   #table25x4col td{
    padding: 4px;
    font-size:1.8em;   
  }}
#table25x4col td.red {
 color: red;
 width: 29%;
}
#table25x4col td.green {
 color: limegreen;
 width: 29%;
}
#table25x4col td.orange {
 color: darkorange;
 width: 29%
}
#table25x4col td.number {
 width: 7%;
}

#table25x4col tr:nth-child(even){background-color: #f2f2f2;}

#table25x4col tr:hover {background-color: #ddd;}

#table25x4col th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: black;
  color: white;
  font-weight:bold; 
  font-size:2.2em; 
}
/**********************EBD OF FANCY TABLE USED FOR 25 THINGS YOU NEED TO WRITE A SONG********************************************/

/* CONTAINERS */
div.videoOuterShell{
    padding: 5% 10% 10% 10%;
    border: 0px solid grey;
    text-align: center;
}
div.pjAdvertBoxMiddle01{
    Padding: 16px;
    border: 5px solid white;
    text-align: center;
}
div.pjAdvertBoxMiddle02{
    Padding: 16px;
    border: none;
    text-align: center;
}
div.pjAdvertBoxMiddle03{
    Padding: 16px;
    border: 4px black;
    text-align: center;
}
div.bioType {              /* USED FOR BIOGRAPHY INITIALLY & RESIZED BELOW FOR TABLETS AND PHONES */
  position: relative;
  left: 9%;
  width: 65%;
  /*top: 100px;*/
  border: 3px solid grey;
  padding: 5px 8px 5px 8px;
  background-color: white;
  
}

@media only screen and (max-width: 810px) {     /* BIOTYPE IF SCREEN IS LESS THAN 810px*/
  div.bioType {
  position: relative;                           /* BIOTYPE SLIPPING UNDER NAVBAR IF SCREEN IS LESS THAN 810px*/
  left: 0%;
  /*top: 40px;*/                                /*25px;temp change cos of julie's kindle*/
  width: 100%;
  /*height: 100%;*/                             /* this fixed the menu resizing bug - don't know why but putting a wrapper of height 100% seems to have                                                           sorted it - also. NO idea why. */
  border: 3px solid grey;
  padding: 5px 8px 5px 8px;
  background-color: white;
  font-size: 13px;
  box-sizing: border-box;
  }}



div.fullScreenWrapper {   /*MAIN DIV FOR CONTAINMENT AND POSITIONING OF OTHER ELEMENTS - IS A FLEXBOX ROW */
  position: relative;
  left: 0;
  width: 100%;
  height: 100%;
  top: 4rem;
  border: 0px solid green;            /*BORDER = ZERO PIXELS CAUSE IT'S EASIER THAN REMMING OUT FOR TESTING*/
  /*padding: 0.5rem 2rem 0.5rem 2rem;           /* top right bottom left */
   padding: 0.5% 0.5% 0.5% 0.5%;
  box-sizing: border-box;
  /*overflow: auto;  */                                 /*  THIS CAUSES PROBLEMS - I LEFT IT HERE SO YOU DON'T PUT IT IN AGAIN  */
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

@media screen and (max-width: 650px) {        /* VERY SMALL SCREEN - SIDE MENU GOES UNDER MAIN CONTENT - SO fullScreenWrapper MUST ADAPT */
 div.fullScreenWrapper{
   flex-direction: column;
  }
}

div.twoThirdsMainScreen {   /* FLEX-DIV FOR CONTAINMENT AND POSITIONING OF MAIN SOURCE OF SCREEN INFO - GOES INSIDE div.fullScreenContainer*/
  box-sizing: border-box;
  /*flex: 63%;  */                    /* 63% worked fine if onethirds wrapper is 32% */
  /*Flex: 70%;*/                      /* 70% works fine if onethird wrapper is 25% */
  Flex: 77%;
  display: inline-block;                  /* TESTING - TRYING TO GET TWO DIVS NEXT TWO EACHOTHER */
  border: 0.5px solid grey;
  border-radius: 3px;
  padding: 5px 50px 5px 50px;              /*top right bottom left probably > 1290px for laptops*/
  background-color: white;
  box-shadow: 5px 5px 5px grey; /*right, bottom, fade*/ 
  /*overflow: hidden;*/
  margin: 0.5%;
}

@media screen and (max-width: 650px) {        /* VERY SMALL SCREEN - SIDE MENU GOES UNDER MAIN CONTENT - SO twoThirdsMainScreen MUST BE 100% WIDE */
 div.twoThirdsMainScreen{
   /*display: flex;
   flex-direction: column;
   flex: 100%;*/
   padding: 5px 1px 5px 1px;              /*top right bottom left probably > 1290px for laptops*/
   display: block;
   width:100%;
  }
}

div.oneThirdSideMenu {                   /* FLEX-DIV FOR CONTAINMENT AND POSITIONING OF MAIN SIDE MENU -  GOES INSIDE div.fullScreenContainer*/
  box-sizing: border-box;
  display: flex;
  /*flex: 32%;*/                          /* 32% worked fine if twothirds wrapper is 63% changed 5th march 2020 cos 32% was too wide*/
  /*flex: 25%;                              /*  25% works fine of two thirds wrapper is 70% - changed 10th march for Blog cos 25% was too wide */
  Flex: 18%;
  flex-direction: column;                /* ie THE ROWS INSIDE THIS BOX WILL STACK UP ON TOP OF EACHOTHER */
  /*flex-wrap: wrap;*/
  background-color: transparent;          /* #eff5ff SAME COLOUR AS BODY BACKGROUND WHEN IN LIVE MODE - GIVES SPACE AROUND THE MENU ITEMS */
  border: 0px solid red;                 /*BORDER = ZERO PIXELS BECAUSE IT'S EASIER THAN REMMING IN & OUT FOR TESTING*/
   
  margin: 0.25%;                             /* was half a percent but added too the narrowing of everything*/
  padding: 5px 3px 5px 3px;               /* top right bottom left */
  /*min-width: 300px;*/
  /*display: inline-block;*/
    /*overflow: hidden;*/
}

@media screen and (max-width: 650px) {   /* VERY SMALL SCREEN - SIDE MENU GOES UNDER MAIN CONTENT - SO oneThirdSideMenu MUST BE 100% WIDE */
 div.oneThirdSideMenu{
   flex: 100%;
  }
}



div.sideMenuHeadingCell {                      /* ONE OFF DIV FOR SIDE MENU HEADING */
  box-sizing: border-box;
  display: flex;
  border: 0px solid yellow; 
  width: 100%; 
  font-size: 2.0rem; 
  align-items: center;
  justify-content: center;
  font: arial, sans-serif;
  background-color:black;
  color: white;
}

div.SmRowContainer {                    /* FLEX-DIV FOR CONTAINMENT AND POSITIONING OF SIDE MENU ROWS -  GOES INSIDE "div.oneThirdSideMenu" */
  display: flex;
  box-sizing: border-box;
  background-color: white;
  border-radius: 3px;
  width: 100%;
  /*width: 35rem;*/                       /* A FIXED WIDTH STOPS text WRAPPING */
  /*max-height: 150px;*/
  border: 0.5px solid grey;                 /*BORDER = SAME COLOUR AS BODY BACKGROUND WHEN IN LIVE MODE - GIVES SPACE AROUND THE MENU ITEMS */
  padding: 5px 5px 5px 5px;               /* top right bottom left */
  box-shadow: 5px 5px 5px grey;           /*right, bottom, fade*/ 
  flex-wrap: nowrap;                      /* WARNING - MAY STOP CELLS WRAPPING FOR SMALLER SCREENS ************************************/
  flex-direction: row;                    /* ie THE CELLS INSIDE THIS BOX WILL NORMALLY LINE UP NEXT TO EACHOTHER */
  /*height: 13rem; */                     /* YOU'LL HAVE TO TAKE THIS OUT TO SCALE THE CELLS AROUND CONTENT  */
  }

div.sideMenuColContainer {                      /* TWO OF THESE IN EACH SmRowContainer - SIDE BY SIDE OR IN A COLUMN ON SOME SCREENS */
  box-sizing: border-box;
  background-color: white;
  width: 100%;                       /* THIS WILL HAVE TO BE 100% FOR THE INTERMEDIATE SIZE AND was 50% when having two cols like in pj.org*/
  border: 0px solid orange;                   /*BORDER = ZERO PIXELS CAUSE IT'S EASIER THAN REMMING OUT FOR TESTING*/
  padding: 2px 2px 2px 2px;             /* top right bottom left */
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;                   /* THIS IS TO MAKE DESCRIPTION CELL SIT UNDER IT'S TITLE */
  /*align-items: center;*/
  /*justify-content: center;*/
  font-size: 1.6rem;
  /*max-height: 100%;*/
  /*overflow: hidden;*/
  text-overflow: clip;
  }
div.sMenuTitleCellAsTop {
  box-sizing: border-box;
  font: arial,sans-serif;
  width: 100%;
  min-height: 1rem;
  border: 0px solid blue;                /*BORDER = ZERO PIXELS CAUSE IT'S EASIER THAN REMMING OUT FOR TESTING*/
  padding: 2px 2px 2px 10px;             /* top right bottom left */
  display: flex;
  /*flex-wrap: nowrap;
  flex-direction: row;*/
  align-items: center;
  justify-content: center;
  align-content: center;
  font-size: 2.0rem;
  font-weight: normal;
  /*white-space: nowrap; */                   /* THIS STOPS WRAPPING BUT YOU LOSE THE TEXT  */
  overflow: hidden;
  }
  div.sMenuTitleCellAsBottom {
  box-sizing: border-box;
  background-color: black;
  color: white;
  font: arial,sans-serif;
  width: 50%;
  min-height: 1rem;
  border: 0px solid blue;                /*BORDER = ZERO PIXELS CAUSE IT'S EASIER THAN REMMING OUT FOR TESTING*/
  padding: 2px 2px 2px 10px;             /* top right bottom left */
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: center;
   font-size: 2.0rem;
  font-weight: normal;
  /*white-space: nowrap; */                   /* THIS STOPS WRAPPING BUT YOU LOSE THE TEXT  */
  overflow: hidden;
  
  }
.SmDescriptionCell{
  box-sizing: border-box;
  background-color: white;
  color: #404040;
  width: 100%;
  /* height: 75%; */
  border: 0px solid pink;             /*BORDER = ZERO PIXELS CAUSE IT'S EASIER THAN REMMING OUT FOR TESTING*/
  padding: 2px 2px 2px 10px;             /* top right bottom left */
  display: flex;  
  flex-wrap: wrap;
  /*align-items: center;*/
  /*justify-content: center;*/
  font-size: 1.6rem;
  font-weight: normal;
  /*text-overflow: clip;*/
  /*white-space: nowrap;*/                   /* THIS STOPS WRAPPING BUT YOU LOSE THE TEXT  */
  overflow: hidden;
}

@media screen and (max-width: 1100px)       /* INTEMEDIATE SCREEN - RE-ARRANGE SIDE MENU ELEMENTS -  DESCRIPTION UNDER PIC INSTEAD OF SIDE */
              /*and (min-width: 650px)*/ {
  div.SmRowContainer {
    flex-direction: column;
  }
  div.sideMenuColContainer{
    width: 100%;
  }
}
iframe.iframeIndexMenu{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/******************************************************************************************************************/

/* ODDS N SODS */
ul.blogBullet{
list-style-type: disc;
font-family: calibri, verdana, tahoma, arial, sans-serif;
font-size: 2.2rem;
line-height: 150%;
}
ol {
list-style-type: disc;
font-family: calibri, verdana, tahoma, arial, sans-serif;
font-size: 2.2rem;
line-height: 150%;
}
ol.number{
list-style-type: none;
font-family: calibri, verdana, tahoma, arial, sans-serif;
font-size: 2.2rem;
line-height: 150%;
padding:30px;
}
/*images*/

img.responsiveCellThumbImg{          /*image for right hand menu pics */
width: 100%;
height: auto;

}
img.responsiveCellThumbImg2{        /*Image for left side of blog index menus*/
width: 50%;
height: auto;
/*float: left;*/
padding: 1px 10px 10px 100px;             /* top right bottom left */
}
 img.righty {                   /* RIGHTY AND LEFTY IMAGE STYLES ARE USED ON MAIN BLOG PAGES*/
    float: right;
    padding: 5px 5px 5px 10px; /*top right bottom left*/
    width: 45%; 
    height: auto;
    }
     @media screen and (max-width: 650px) {   /* VERY SMALL SCREEN - 45% picture div looks daft - SO righty MUST BE 100% WIDE */
 img.righty{
  width:90%;
  padding: 40px 10px 40px 10px; /*top right bottom left*/
  }
}
img.rightySmaller {                   /* RIGHTY AND LEFTY IMAGE STYLES ARE USED ON MAIN BLOG PAGES*/
    float: right;
    padding: 5px 5px 5px 10px; /*top right bottom left*/
    width: 30%; 
    height: auto;
    }
     @media screen and (max-width: 650px) {   /* VERY SMALL SCREEN - 45% picture div looks daft - SO righty MUST BE 100% WIDE */
 img.rightySmaller{
  width:100%;
  padding: 0px 5px 0px 5px; /*top right bottom left*/
  }
}

   img.lefty {
    float: left;
    padding: 5px 20px 5px 5px; /*top right bottom left*/
    width: 30%; 
    height: auto;
    margin:0px 0px 0px 0px; /*top right bottom left*/
    }
    @media screen and (max-width: 650px) {   /* VERY SMALL SCREEN - 30% picture div looks daft - SO lefty MUST BE 100% WIDE */
 img.lefty{
  width:100%;
  padding: 0px 5px 0px 5px; /*top right bottom left*/
  }
}
img.fullWidth100 {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 10px 10px 10px;
}
img.fullWidth55IndexMenu{
   box-sizing: border-box;
  width: 55%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 10px 10px 10px;
  }
img.fullWidth55{
   box-sizing: border-box;
  width: 55%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 10px 10px 10px;
  }
     @media screen and (max-width: 1250px) {   /* VERY SMALL SCREEN - make it a bot bigger */
 img.fullWidth55{
  width:66%;
  }}
       @media screen and (max-width: 1150px) {   /* VERY SMALL SCREEN - make it a bot bigger */
 img.fullWidth55{
  width:77%;
  }}
    @media screen and (max-width: 950px) {   /* VERY SMALL SCREEN - make it a bot bigger */
 img.fullWidth55{
  /*width:88%;*/
  width:77%;
  }}
 
h1.mainTitle {
  font-family: "arial";
  text-align: center;
  /*color: #3300cc;*/
  color: black;
  font-size: 3.4rem
}
h1 {
  font-family: "arial";
  text-align: center;
  /*color: #3300cc;*/
  color: black;
  font-size: 2.6rem
}
h2 {
  font-family: "arial";
  text-align: center;
  /*color: #3300cc;*/
  color: black;
  font-size: 2.6rem
}
h2.left {
  font-family: "arial";
  text-align: left;
  margin-left: 15px;
  /*color: #3300cc;*/
  color: black;
  font-size: 2.6rem
}
h3.left {
  font-family: "arial";
  text-align: left;
  margin-left: 15px;
  font-weight: bold;
  /*color: #3300cc;*/
  color: black;
  font-size: 1.8rem
}
h2.listSmall {
  font-family: calibri, verdana, tahoma, arial, sans-serif;
  text-align: left;
  font-weight: normal;
  margin-left: 5px;
  padding: 0px;
  /*color: #3300cc;*/
  color: black;
  font-size: 2.0rem
}
h3.listSmall {
  font-family: calibri, verdana, tahoma, arial, sans-serif;
  text-align: left;
  font-weight: normal;
  margin-left: 5px;
  padding: 0px;
  /*color: #3300cc;*/
  color: black;
  font-size: 2.0rem
}

/*paragraphs*/
p.invisible {
  color: black;
  text-align: center;
  font-family: "arial";
  font-size: 1.6rem;
  visibility: hidden;
 }
 
p.arial {
  
  color: black;
  text-align: center;
  font-family: "arial";
  font-size: 1.6rem;
  margin-left: 30px;
}
p.standardParagraphText {
  text-indent: 0px;
  /*color: black;*/
  /*font-family: "verdana";*/
  /*font-family: "tahoma";*/   /* standard text is verdana and set in html */
  font-family: calibri, verdana, tahoma, arial, sans-serif;
  font-size: 2.2rem;
  margin-left: 15px;
  margin-right: 15px;
  line-height: 150%;
  /*white-space:nowrap;    
  overflow:hidden;         
  text-overflow:ellipsis; /*DOESNOT WORK without "overflow:hidden;" AND "white-space:nowrap;"  does not work - left here so you don't waste time trying it again*/
}
P.snippet {
  font-family:calibri, verdana, tahoma, arial, sans-serif;
  font-size: 2.4rem; 
  font-weight:600;
  margin-left: 15px;
  color: #303030;
}
p{
  font-size: 1.6rem;
}
p.space{
  font-size: 1.0rem;
}
p.halfSpace{
  font-size: 0.7rem;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/*links*/
a {
  text-decoration: none;
  color: #000000;
}
a.inlineText {
    text-decoration: none;
  color: blue;
  font-size: 2.2rem;
  padding: 16px 30px 16px 10px; /*top right bottom left*/
}
a.grey {
  text-decoration: none;
  color: grey;
}
a.pictureCaptionR{
  text-decoration: none;
  color: grey;
  font-size: 1.8rem;
  padding: 16px 10px 16px 15px; /*top right bottom left*/
  float:right;
  clear:right;
}

a.pictureCaptionL{
  text-decoration: none;
  color: grey;
  font-size: 1.8rem;
  padding: 16px 30px 16px 10px; /*top right bottom left*/
  float:left;
  clear:left;
}
a.pictureCaptionC{
  text-decoration: none;
  color: grey;
  font-size: 1.8rem;
  padding: 16px 30px 16px 10px; /*top right bottom left*/
  display:block;
  text-align:center;
  clear:both;
}

a.pictureCaptionCbig{
  text-decoration: underline;
  color: blue;
  font-weight: bold;
  font-size: 2.6rem;
  padding: 16px 30px 16px 10px; /*top right bottom left*/
  display:block;
  text-align:center;
  clear:both;
}
a.thumbCaption{                             /*Added because picture caption is too big*/
  text-decoration: none;
  color: grey;
  font-size:1.6rem;
  padding: 0px 0px 10px 0px; /*top right bottom left*/
  display:block;
  text-align:center;
  clear:both;
}
    @media screen and (max-width: 650px) {   /* VERY SMALL SCREEN - keep text below caption else it looks cluttered */
 a.pictureCaptionR{
  width:100%;
  float:left;
  text-align:center;
  }}
   @media screen and (max-width: 650px) {   /* VERY SMALL SCREEN - keep text below caption else it looks cluttered */
 a.pictureCaptionL{
  width:100%;
  }}

a:hover{
  opacity:0.7;
 }
 
 /********Pagination******************************************************************************************/
 .centerpag{
text-align: center;
}

.pagination {
  display: inline-block;
  
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 24px;
  text-decoration: none;
}

.pagination a.activepag {
  background-color: black;
  color: white;
  border-radius: 5px;
}

.pagination a:hover:not(.activepag) {
  background-color: #808080;
  border-radius: 5px;
}
 
/******************************************************************************************************************/

/* TOPNAV */

/* NEW SELF RESISING TOPNAV BAR 19 MARCH 2019 - THIS IS THE BEGINNING OF IT */

.topnav {
  /*overflow: hidden;*/             /* HAS THE EFFECT OF DROP DOWN MENU ITEMS NOT SHOWING */
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}

.topnav a {                          /* I THINK THESE ARE JUST THE ANCHOR LINKS -IE NOT DROPDOWN MENUS */
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  
  text-decoration: none;
  font-size: 17px;
}

.active {
  /*background-color: blue;
  color: white;*/
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}
/*
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
*/
  /*
RESIZING TOPNAV WOULD BE SMOOTHER IF IT TOOK THE RIGHT HAND CHILD INTO THE 'MORE' DROPDOWN AS SOON AS SCREEN WIDTH WARRANTS IT - BUT I DON'T HAVE TIME TO FIGURE THAT OUT SO HERE'S WARRAPENS - THREE STAGES; FIRST, PADDING REDUCED, SECOND, AND FONT SIZE REDUCED. THIRD, CHILDREN ie (a:not(:nth-child(-n+1)) ARE DUMPED INTO A HAMBURGER.
*/
 
  /*RESIZE TOPNAV STAGE ONE  */
@media screen and (max-width: 900px) {
.topnav a {
/*padding: 8px 8px; THIS WORKED FINE BUT I CHANGED IT COS OF CLICKABLE ELEMENTS TOO CLOSE TOGETHER*/
padding: 16px 16px 16px 16px;
font-size: 16px;
}
  
.dropdown .dropbtn {
/*padding: 8px 8px;  THIS WORKED FINE BUT I CHANGED IT COS OF CLICKABLE ELEMENTS TOO CLOSE TOGETHER*/
padding: 16px 16px 16px 16px;
font-size: 16px;
}

.dropdown-content a {
/*padding: 8px 8px;  THIS WORKED FINE BUT I CHANGED IT COS OF CLICKABLE ELEMENTS TOO CLOSE TOGETHER*/
padding: 16px 16px 16px 16px;
font-size: 16px;
}}

/*RESIZE TOPNAV STAGE TWO  */
@media screen and (max-width: 800px) {
.topnav a {
/*padding: 8px 8px;  THIS WORKED FINE BUT I CHANGED IT COS OF CLICKABLE ELEMENTS TOO CLOSE TOGETHER*/
padding: 16px 16px 16px 16px;
font-size: 16px;
}
.dropdown .dropbtn {
/*padding: 8px 8px;  THIS WORKED FINE BUT I CHANGED IT COS OF CLICKABLE ELEMENTS TOO CLOSE TOGETHER*/
padding: 16px 16px 16px 16px;
font-size: 16px;
}

.dropdown-content a {
/*padding: 8px 8px;  THIS WORKED FINE BUT I CHANGED IT COS OF CLICKABLE ELEMENTS TOO CLOSE TOGETHER*/
padding: 16px 16px 16px 16px;
font-size: 16px;
}
}
/* RESIZE STAGE THREE */
@media screen and (max-width: 650px) {
  .topnav a:not(:nth-child(-n+1)), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
 float: right;
    display: block;
  }

}
  
@media screen and (max-width: 650px) {
  .topnav.responsive {position: fixed;}     /*MAY NEED TO PLAY WITH THIS - MAKE IT 'FIXED'*/
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    color: yellow;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    font-size: 16px;               /* I PUT THIS FONT-SIZE IN COS OF BUG WON RESIZE WHERE SOME DROPDOWN MENU ITEMS ARE NOT BEHAVING*/
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: fixed;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 16px;               /* I PUT THIS FONT-SIZE IN COS OF BUG WON RESIZE WHERE SOME DROPDOWN MENU ITEMS ARE NOT BEHAVING*/
    
  }
}
/* NEW SELF RESISING TOPNAV BAR 19 MARCH 2019 - THIS IS THE END OF IT */
/*-----END OF MARCH 2019 TOP NAVIGATION BAR WITH RESPONSIVE, SELF RESISING ----*/
  

  
  
/*-----THIS IS THE ORIGIONAL TOP NAVIGATION BAR BEFORE MARCH 2019 NON RESISING -HAS LOTS OF COMMENTS WHICH I'VE DOUBLED THE /**ASTERIX**/ 
/*---- DO NOT DELETE --->
/*---- DO NOT DELETE --->
/*---- DO NOT DELETE --->  
  /*
ul {
  padding:0;
  list-style-type: none;
  text-align: center;/** Centers the child elements (menu list elements) even though they are blocks - with text inside -wont werk with 'fixed pos' */
  /**overflow: hidden;  HAS THE EFFECT OF NOT SHOWING MENU OPTIONS **/ 
/*  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  font-size: 16px; /**1.25vw; **/
  /*
}
li {
   Display: inline-block;
   /**float: left;**/         /**THIS WOULD PULL ALL THE OPTIONS OVER TO THE LEFT - UNSIGHTLY**/
  /*
}
li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 12px 25px;
  text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
  background-color: grey;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
   padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

/*-----END OF ORIGIONAL TOP NAVIGATION BAR ----*/