BODY {
  margin-left: 5%;
  margin-right: 5%;
  font-family: sans-serif;
  font-size: 16px;
}
H1 {
  font-weight: bold;
  font-style: normal;
  margin-top: 0.4em;
  margin-bottom: 0.4em;
  color: #888888;
  font-family: 'Open Sans',sans-serif;
  font-size: 30px;
  background-color: transparent;
}
H2 {
  font-weight: bold;
  clear: left;
  color: #707070;
  font-style: normal;
  font-family: 'Open Sans',sans-serif;
  font-size: 22px;
  background-color: transparent;
}
h3, H3 a {
  font-weight: bold;
  clear: left;
  color: #505050;
  font-style: normal;
  font-family: 'Open Sans',sans-serif;
  font-size: 18px;
  background-color: transparent;
}
h4 {
  font-weight: bold;
  clear: left;
  color: #505050;
  font-family: 'Open Sans',sans-serif;
  font-size: 16px;
}
P.list {
  margin-left: 5%;
  margin-right: 5%;
  text-align: left;
}
P.navigation {
  text-align: center;
  font-family: sans-serif;
  font-size: small;
}
p.disclaimer {
  text-align: center;
  font-style: italic;
  font-family: sans-serif;
  font-size: small;
}
div#termsandconditions, div#termsofuse {
  clear: both;
  font-style: italic;
  font-family: sans-serif;
  font-size: small;
}

p.footnote {
  margin-left: 2%;
  margin-right: 2%;
  font-family: sans-serif;
  font-size: small;
}
.center {
  text-align: center;
}
.tourphoto {
  text-align: center;
  margin-top: 6pt;
  margin-left: 6pt;
  margin-right: 6pt;
  margin-bottom: 6pt;
}
PRE {
  white-space: pre;
  font-family: Courier, monospace;
  font-size: small;
}
pre.trade {
  white-space: pre;
  font-family: Courier, monospace;
  font-size: small;
}

/* "cover" is used in the 'books' section. Used to float images to the left so that text can wrap around it. */
DIV.cover {
  float: left;
}

DIV.review {
  text-align: left;
  color: black;
  background-color: #ffffc0;
  border-top: thin fuchsia solid;
  border-right: thin Fuchsia solid;
  border-bottom: thin Fuchsia solid;
  border-left: thin fuchsia solid;
}

span.song {
  color: maroon;
  font-style: normal;
  font-family: sans-serif;
  background-color: transparent;
}

span.album {
  color: maroon;
  font-style: italic;
  font-family: sans-serif;
  background-color: transparent;
}

span.title {
  color: maroon;
  font-style: italic;
  font-family: sans-serif;
  background-color: transparent;
}
p.greeting {
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  color: red;
  background-color: white;
  border-top: thin blue solid;
  border-right: thin blue solid;
  border-bottom: thin blue solid;
  border-left: thin blue solid;
}
SPAN.composer {
  font-size: small;
  font-style: italic;
}
SPAN.time {
  font-size: small;
  font-style: normal;
}

.clear {
    clear: both;
}
/* New/revised stuff from hereon in */

/* Masthead - sitewide banner heading. Site name/link on LHS, strapline on RHS */

div.masthead {
    margin-top: 5px; height: 40px; padding: 8px 16px; float: none;
}

div.masthead-sitename {
    margin: 4px 0 6px 0; width: 40%; float: left; font-family: 'Open Sans',sans-serif; font-size: 15px; line-height: 1.5;
}

a.masthead-sitelink {
    text-decoration: none; line-height: 1; font-size: 35px; letter-spacing: 2px; position: relative; text-shadow: 2px 2px 2px #aaa; 
}

div.masthead-strapline {
    width: 60%; font-family: Ubuntu,sans-serif;  margin-top: 16px; float: left; letter-spacing: 3px;
}

div.masthead-strapline-holder {
    position: relative; top: 5px; float: right;
}

/* ----------- Home page ----------- */

	/* "Last updated..." message */

div#updated {clear: both; text-align: center; font-size: 14px; }

	/* "Welcome..." message */

div#welcome {
  text-align: center;
  background-color: #FFFF80;
  /*
  border-top: thin #FF8080 solid;
  border-right: thin #FF8080 solid;
  border-bottom: thin #FF8080 solid;
  border-left: thin #FF8080 solid;
  */
  font-size: 12px;
    background: linear-gradient(to right, rgba(255,255,255,0), yellow, rgba(255,255,255,0)); 

  border-radius: 20px;
    box-shadow: 5px 5px 5px #888888;
}

div#welcome p {margin: 0; padding: 0;}

span.this-url {
  color: red;
}

p.soundbite {
  clear: both; 
  text-align: center;
  color: black;
  font-family: sans-serif;
  font-size: small;

/*
  background-color: lime;
*/
/*
  border-top: aqua groove;
  border-right: aqua groove;
  border-bottom: aqua groove;
  border-left: aqua groove;
*/

  border-radius: 20px;
/*
    box-shadow: 5px 5px 5px #888888;
*/
background-color: #ccc;
background-image: radial-gradient(#ccc, #ffffff, #ffffff);
}

div#alert {
  clear: both; 
  padding: 5px;
}

div#alert p {
  text-align: center;
  color: black;
  font-family: sans-serif;
  font-size: small;
  border-top: red double;
  border-right: red double;
  border-bottom: red double;
  border-left: red double;
  margin: 5px;
}


body#home ul#headlines , body#history div#tributes ul#links {list-style-image: url("images/hand_point1.gif");}

body#home ul#headlines li , body#history div#tributes ul#links li {padding: 5px;}

/* ----------- General ----------- */

p.p1:first-letter {font-size: 200%; 
    color: #606060;
}

div#main {clear: both;}
div#ch1 {clear: both;}
div#review img {float: left; margin: 5px; padding: 5px;}
div#review ol {margin: 5px; padding: 5px;}
div#review li {margin-left: 5%; margin-right: 5%; list-style-position: inside;}
div#introtext {float: left; width: 50%; }
body#wwwlinks ul.links li {list-style-image: url("images/green.gif");}
body#whatsnew ul.changes li {list-style-image: url("images/red.gif");}
body#atthebbc ul.tracks li {list-style-image: url("images/blue.gif");}

/* I've used HR everywhere as a separator. In the new design, it is useful for clearing floats */

hr {clear: both; display: none; }

/* Address tag, at the bottom of the page */

address {font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
	font-size: 12px ;
	font-style: normal ;
	clear: both;
}
table {clear: both;}
div#intro {clear: both;}

blockquote {
	background: #eee;
}

/* ----------- News ----------- */

body#news p.newsdate {text-align: center; font-size: 12px; }

/* ----------- Archive ----------- */

body#history div#tributes pre {font-family: sans-serif; font-size: 16px;}

	/* MTH tour programme */

body#archive div#maintext {padding: 5px; clear: both;}

body#archive div#maintext div.threecolsection {float: left; display: flex; overflow: hidden; clear: both; width: 100%;}
body#archive div#maintext div.singlecol {flex: 1; padding: 5px;}
body#archive div#maintext div.doublecol {flex: 2; padding: 5px;}

body#archive span.tourdates {font-family: sans-serif; font-size: 10px;}
body#archive span.smallprint {font-family: sans-serif; font-size: 10px;}
body#archive p.smallprint {font-family: sans-serif; font-size: 10px; line-height: 16px;}

body#archive div#maintext pre {font-family: sans-serif; font-size: 16px;}
body#archive div#maintext pre.smallprint {font-family: sans-serif; font-size: 10px; line-height: 16px;}
body#archive div#maintext pre.tourdates {font-family: sans-serif; font-size: 10px; line-height: 16px;}

	/* Mick Ralphs interview */

body#archive div.dl span {font-weight: bold;}
body#archive div.mr span {font-weight: bold;}
body#archive div.dl {
  text-align: left;
  color: black;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 2%;
  background-color: #e0e0e0; }
body#archive div.mr {
  text-align: left;
  color: black;
  margin-left: 2%;
  margin-right: 2%;
  background-color: #ffff80; }

/* ----------- Books/fanzines ----------- */

body#books div#review img {float: left; clear: left; margin: 5px; padding: 5px;}
body#books div.fanzine {clear: both;}
body#books div.fanzine div.cover {float: left; clear: left; margin: 5px; padding: 5px; width: 300px;}
body#books div.fanzine div.synopsis {float: left; clear: right; width: 60%;}
body#books div.fanzine div.synopsis li {list-style-image: url("images/red.gif");}
body#books div.notes {clear: left; }

/* ----------- Discography ----------- */

div#introtext {width: 70%;}
div#introtext h2 {clear: none;}

div #introtext #mainpic img {float: left; }

div#detail {clear: both; }

body#cdindex div#faketns {clear: both;}

div.sleeve {float: left; }

div.sleeve img {margin: 5px; border: none;}

div.tracks {float: left; background-color: #ffffc0;
  border-top: thin fuchsia solid;
  border-right: thin Fuchsia solid;
  border-bottom: thin Fuchsia solid;
  border-left: thin fuchsia solid;
  border-radius: 5px;
  margin: 5px; 
  padding-right: 10px; min-height: 300px; min-width: 300px; max-width: 300px;
  font-size: 12px; }

 div.tracks h3 {
    padding-left: 10px;
 }
  div.tracks h4 {
    padding-left: 10px;
 }
 
 div.tracks p {
	padding-left: 10px;
 }
 
    /* Make track listings equal height */
.trackbox {
    float: left;
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
}
    /* Make track listings equal width */
.trackbox .tracks {
    flex: 1;
}

    /* Contents of the package. Includes the sleeve, trackbox (tracklistings for all discs), and any footnote */
.cdcontents {
    float: left;
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
}

    /* Details of the CD. Includes the trackbox (tracklistings for all discs), and any footnote */
.cddetails {

}

    /* Footnote to tracklistings. Can be musician credits, live venue info, etc */
.cddetails .footnote {
  background-color: #ffffc0;
  border-top: thin fuchsia solid;
  border-right: thin Fuchsia solid;
  border-bottom: thin Fuchsia solid;
  border-left: thin fuchsia solid;
  border-radius: 5px;

  margin: 5px; 
  padding-left: 10px; padding-right: 10px; min-width: 300px; 
  font-size: 12px; 

  clear: left;
}


.cddetails .footnote  p {line-height: 75%;}

div.tracks sup {font-size: 8px;}


div#review > img {display: block; margin: 20px;}

/* end of discography */

span.songlist {font-style: italic; font-size: 10px; }

body#cdindex div#disclaimer {clear: both; font-size: 12px;}

/* Main picture on the home page */

div#mainpic {float: left; position: relative; }

div#mainpic img {padding: 5px; margin: 5px; border: none;}

/* Handle the sidebar on the MTH Live album review */

div#review {clear: left; float: left; width: 60%;}

div.sidebar {float: left; width: 30%; background-color: silver; margin: 10px; padding: 10px; font-size: 11px;}

/* ----------- Discography track cross-reference ----------- */

  /*
    Design taken from http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
  */

  table.xref {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 45px;
    text-align: left;
    border-collapse: collapse;
  }

  table.xref th {
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe url('images/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;
  }

  table.xref td {
    padding: 8px; 
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid #fff;
    background: #e8edff url('images/gradback.png') repeat-x;
  }

  table.xref tfoot tr td {
    background: #e8edff;
    font-size: 12px;
    color: #99c;
  }

  table.xref tbody tr:hover td {
    background: #d0dafd url('images/gradhover.png') repeat-x;
    color: #339;
  }

  table.xref th.xrefTrack {width:25%;}
  table.xref th.xrefLen {width:15%;}
  
  table.xref th.xrefDate {width:15%;}
  table.xref th.xrefVenue {width:15%;}
  table.xref th.xrefRelease {width:20%;}

  /* Now make the header non-scrolling */
  table.xref th {
    position: sticky; top: -1px;
  }

/* end of track cross-reference */

/* Our 'highlights' list, images with accompanying text. Also used in the discography */

div#highlights {float: left;}
div#highlights ul , body#cdindex ul.cdlist, body#lyrics ul.cdlist {list-style: none; margin: 5px; padding: 5px; font-family: sans-serif; font-size: 10px;}
div#highlights li , body#cdindex ul.cdlist li, body#lyrics ul.cdlist li {list-style: none; clear: both; font-family: sans-serif; font-size: 12px;}
div#highlights img , body#cdindex img.tn, body#lyrics img.tn {float: left; margin: 0; padding: 2px; margin-right: 5px;}
body#cdindex ul.cdlist li, body#lyrics ul.cdlist li {font-size: 14px; padding: 2px;}

body#cdindex ul.cdlist li:last-child img.tn, body#lyrics ul.cdlist li:last-child img.tn  {padding-bottom: 10px;}

/* ----------- Lyrics ----------- */

p.composer {
  margin-left: 0%;
  color: #888888;
  font-family: sans-serif;
  font-size: small;
  background-color: yellow;
  background: linear-gradient(to right, rgba(255,255,192,1), rgba(255,255,192,0), rgba(255,255,192,0)); 
}

body#lyrics div#disclaimer {clear: both; font-size: 12px; font-style: italic;}
pre.lyrics {
  text-align: left;
  margin-left: 5%;
  margin-right: 5%;
  font-family: Courier, monospace;
  font-size: 12px;
}

body#lyrics ul.index li {list-style-image: url("images/green.gif");}
body#lyrics ul.index li.partial {list-style-image: url("images/yellow.gif");}
body#lyrics ul.index li.todo {list-style-image: url("images/red.gif");}
body#lyrics div#credits {clear: both; font-size: 12px; font-style: italic;   
	color: red; background-color: yellow; }
body#lyrics div#credits h2 {display: none; }

pre.lyrics span.deleted {text-decoration:line-through;}

/* end of lyrics section */

/* ----------- Tour dates. Similar design to the track x-ref table. ----------- */

  
  table.tourdates {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 45px;
    width: 95%;
    border-collapse: collapse;
  }

  table.tourdates th {
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe url('images/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff; 
    color: #039;
  }

  table.tourdates td {
    padding: 8px; 
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid #fff;
    background: #e8edff url('images/gradback.png') repeat-x;
  }

  table.tourdates tr.cancelled td {
    color: grey;
    background: #e0e0e0;
  }

  table.tourdates tfoot tr td {
    background: #e8edff;
    font-size: 12px;
    color: #99c;
  }

  table.tourdates th:first-of-type {width: 20%;}
  
  table.tourdates thead tr.colheaders {text-align: left; }
  
  table.tourdates thead tr:last-of-type th {
    position: sticky; top: -1px; 
  }
  
  
/* ----------- Gig reviews ----------- */

body#gr div#ch1 {clear: left;}

/* Styles for the photo gallery */

  /* ----------- Styles for the images themselves ----------- */

  div#gallery {clear: both; }
  div#gallery img {
    padding: 5px ;
    margin: 10px ;
    border-top: silver groove;
    border-right: silver groove;
    border-bottom: silver groove;
    border-left: silver groove;
  }

  /* ----------- Thumbnail styles for the gallery, in the form of photo slides ----------- */
  /* ----------- From "More Eric Meyer on CSS", www.ericmeyeroncss.com ----------- */

  div.pic {float: left; height: 98px; width: 98px;
    padding: 11px; margin: 4px 3px; 
    background: url(images/frame-ls.gif) center no-repeat;}
  div.pt {background-image: url(images/frame-pt.gif);}
  div.pic img {border: 1px solid; border-color: #444 #AAA #AAA #444;}
  div.ls img { margin: 11px 0; }
  div.pt img { margin: 0 11px; }
  div.pic ul {display: none;}
  div.thumbnails {clear: both;}
  div#footer {clear: both;}
  
  div.thumbnails {padding-top: 10px;}
  div.thumbnails > div.pic:last-child {margin-bottom: 20px;}
  
/* End of photo gallery styles */

/* ----------- Tab-style menus, from "More Eric Meyer on CSS" (see also https://alistapart.com/article/slidingdoors) ----------- */
  /* Class 'navtop' is currently (Nov 2019) unused */
  
  .navtop {margin: 0; padding: 0; clear: both; width: 100%; line-height: normal; 
    float: left; font-size: 93%; border-bottom: 1px solid #666;
  }

  .navtop ul {margin: 0; clear: both;}

  .navtop li {list-style: none; float: left;
    margin-left: 1px; padding-left: 16px;
    font-size: 10px; line-height: 20px; white-space: nowrap;
    background: #BBB url(images/tabs2-big.gif) left top no-repeat;
  }

  .navtop a {display: block; float: left; 
    text-decoration: none; font-weight: bold;
    background: #DDD url(images/tabs2-big.gif) right top no-repeat; 
    color: #333;
    width: .1em;
    padding: 0 16px 0 0;
  }

  html>body .navtop a {width: auto;}    /* fixes IE6 hack */
  /* Commented Backslash Hack hides rule from IE5-Mac \*/
  .navtop a {float: none;}            /* End IE5-Mac hack */
  .navtop a:hover {
    color: rgb(85%,10%,10%);
  }
  
  .navtop .current {color: #FDB; 
    background-image: url(images/tabs2-big-ct.gif);}

  .navtop .current a {color: #FDB; 
    background-image: url(images/tabs2-big-ct.gif);}
  
  .navtop h2 {display: none;}
  
  .navtop ~ h2:first-of-type {padding-top: 10px;}
  .navtop ~ div#intro {padding-top: 10px;} 
  
  div.navtop + div.navtop {padding-top: 10px;}
  
  /* ------------- like the above, but bottom tabs ------------- */
  /* class 'nav' is currently (Nov 2019) unused */
  
  .nav {margin: 0; padding: 0; clear: both; width: 100%; line-height: normal; 
    float: left; font-size: 93%; border-top: 1px solid #666;
  }

  .nav ul {margin: 0; clear: both; }

  .nav li {list-style: none; float: left; 
    margin-left: 1px; padding-left: 16px;
    font-size: 10px; line-height: 20px; white-space: nowrap;
    background: #BBB url(images/tabs2-big.gif) left bottom no-repeat;
  }

  .nav a {display: block; float: left; 
    text-decoration: none; font-weight: bold;
    background: #DDD url(images/tabs2-big.gif) right bottom no-repeat; 
    color: #333;
    width: .1em;
    padding: 0 16px 0 0;
  }

  html>body .nav a {width: auto;}    /* fixes IE6 hack */
  /* Commented Backslash Hack hides rule from IE5-Mac \*/
  .nav a {float: none;}            /* End IE5-Mac hack */
  .nav a:hover {
    color: rgb(85%,10%,10%);
  }
  
  .nav .current {color: #FDB; 
    background-image: url(images/tabs2-big-ct.gif);}

  .nav .current a {color: #FDB; 
    background-image: url(images/tabs2-big-ct.gif);}
  
  .nav h2 {display: none;}

  .nav {padding-bottom: 10px;}

/* End of tab-styles menus */

  nav {
    display: block;
    text-align: center;
  }

/* ----- end of navigation styles ----- */


@media only screen and (min-width: 641px) {
    /* ============ Tablets, laptops, desktops ============ */

    /* Any text we want to overlay the main pic on the home page */
    div#mainpic p {text-align: center; color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-style: bold; font-size: 20px;}

	/* Photo Gallery buttons taken from http://www.bestcssbuttongenerator.com */
	.pgnav {clear: both; padding: 10px; }

	.pgnav ul {list-style: none outside none;
		margin: 0;
		padding: 5px; 
		text-align: center;
	}

	.pgnav li {bottom: 11px; display: inline; line-height: 2.2em;
		margin: 0; padding: 0; position: relative; white-space: nowrap; 
		margin: 0 3px 0 0;
		padding: 4px 0px 4px 0; 
	}

	.pgnav a {
		-moz-box-shadow: 3px 4px 0px 0px #1564ad;
		-webkit-box-shadow: 3px 4px 0px 0px #1564ad;
		box-shadow: 3px 4px 0px 0px #1564ad;
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
		background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
		background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
		background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
		background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
		background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
		background-color:#79bbff;
		-moz-border-radius:7px;
		-webkit-border-radius:7px;
		border-radius:7px;
		border:1px solid #337bc4;
		display:inline-block;
		cursor:pointer;
		color:#ffffff;
		font-family:Arial;
		font-size:17px;
		font-weight:bold;
		padding:9px 35px;
		text-decoration:none;
		text-shadow:0px 1px 0px #528ecc;
	}
	.pgnav a:hover {
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
		background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
		background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
		background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
		background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
		background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
		background-color:#378de5;
	}
	.pgnav a:active {
		position:relative;
		top:1px;
	}

	/* ----------- Subsection navigation, within a page. navsub will eventually be discontinued.  ----------- */
	
	.navsub {margin: 0; padding: 0; clear: both; }
	.navsub ul {margin: 0; clear: both; }
	.navsub li {list-style: none; float: left;
		margin-left: 1px; padding-left: 16px;
		font-size: 10px; line-height: 20px; /* white-space: nowrap; */
	}
	.navsub li {
		position: relative;
		z-index: 100;
		margin-bottom: 10px;
		margin-left: 10px;
		font: 11px tahoma,sans-serif ;
		background: #E0EAF1;
		padding: 0;
		width: 250px;
		height: 40px;
		text-align: center;
		cursor: pointer;
		float: left;
		border-radius: 5px;
	}

	/* neat little colour change when we hover over the link */
	.navsub li:hover {
		background: #FFC0C0;
		transition-property: background;
		transition-duration: 3s;
		transition-timing-function: ease-out;
	}
	.navsub a {padding: 10px 4px; }
	
	.navsub a {text-decoration: none; color: #111; display: block; }
	
	/* For the lyrics pages, we want the list vertically aligned */
	#lyrics .navsub {clear: none;}
	#lyrics .navsub ul  {clear: none;}
	
/*	#mt-contents .navsub li {height: 70px; line-height: 70px;} */
	#sir-contents .navsub, #mt-contents .navsub {clear: none;}
	#sir-contents .navsub ul, #mt-contents .navsub ul  {clear: none;}
	
	#lyrics .navsub {float: left; 
		margin: 2px; 
		padding-right: 10px; min-height: 300px; min-width: 300px; max-width: 350px;
		font-size: 12px; }
	


	/* Stylish menu with drop-down submenus:  https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/ */

	.site-nav {
		margin: 0;
		padding:0;
		list-style: none;
	}
	.site-nav a {
		display:block; 
		background: #111; 
		color:#fff; 
		text-decoration: none;
		padding: .8em 1.8em;

		font-family: Ubuntu,sans-serif;
		font-size: 80%;letter-spacing: 2px;
		text-shadow: 0 -1px 0 #000;
		position: relative;
	}
	.site-nav{
		vertical-align: top; 
		display: inline-block;
		box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;
		border-radius:6px;
	}
	.site-nav li{position: relative;}
	.site-nav > li { 
		float:left; 
		border-bottom: 4px #aaa solid; 
		margin-right: 2px; 
	}
	.site-nav > li > a {
		margin-bottom:1px;
		box-shadow:inset 0 2em .33em -.5em #555; 
	}
	.site-nav > li:hover , .site-nav > li:hover >a{  border-bottom-color:orange;}
	.site-nav li:hover > a { color:orange; }
	.site-nav > li:first-child  { border-radius: 4px 0 0 4px;} 
	.site-nav > li:first-child>a{border-radius: 4px 0 0 0;}
	.site-nav > li:last-child  { 
		border-radius: 0 0 4px 0; 
		margin-right: 0;
	} 
	.site-nav > li:last-child >a{border-radius: 0 4px 0 0; }
	.site-nav li li a { margin-top:1px}
	.site-nav li a:first-child:nth-last-child(2):before { 
		 content:""; 
		 position: absolute; 
		 height:0; 
		 width: 0; 
		 border: 5px solid transparent; 
		 top: 50% ;
		 right:5px;  
	}

	/* submenu positioning*/
	.site-nav ul {
		position: absolute;
		white-space: nowrap;
/*		border-bottom: 5px solid  orange; */
		z-index: 1;
		left: -99999em;
		padding-left: 0px;
	}
	.site-nav > li:hover > ul {
		left: auto;
		padding-top: 5px  ;
		min-width: 100%;
		list-style: none; 
	}
	.site-nav > li li ul {  border-left:1px solid #fff;}

	.site-nav > li li:hover > ul { 
		margin-left: 1px;
		left: 100%;
		top: -1px;
	}

	.site-nav > li li {
		border-bottom: 4px #aaa solid; 
	}
	.site-nav li li a { margin-top:0px}
	.site-nav > li li:hover , .site-nav > li li:hover >a{  border-bottom-color:orange;} 
	.site-nav li li:hover > a { color:orange; }

	/* arrow hover styling */

	.site-nav > li > a:first-child:nth-last-child(2):before { 
		border-top-color: #aaa; 
	}
	.site-nav > li:hover > a:first-child:nth-last-child(2):before {
		border: 5px solid transparent; 
		border-bottom-color: orange; 
		margin-top:-5px
	}
	.site-nav li li > a:first-child:nth-last-child(2):before {  
		border-left-color: #aaa; 
		margin-top: -5px
	}
	.site-nav li li:hover > a:first-child:nth-last-child(2):before {
		border: 5px solid transparent; 
		border-right-color: orange;
		right: 10px; 
	}


	.site-nav > li li:hover > ul {
		list-style: none;
	}

	/* --- Page navigation. Other pages within the same section (eg discography). https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/ (but without sub-menus for now) --- */
	
  .page-nav {
    margin: 0;
    padding:0;
    list-style: none;
  }
  .page-nav a {
    display:block; 
    background: #111; 
    color:#fff; 
    text-decoration: none;
    padding: .8em 1.8em;

    font-family: Ubuntu,sans-serif;
    font-size: 80%;letter-spacing: 2px;
    text-shadow: 0 -1px 0 #000;
    position: relative;
  }
  .page-nav{  
    vertical-align: top; 
    display: inline-block;
    box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;
    border-radius:6px;
  }
  .page-nav li{position: relative;}
  .page-nav > li { 
    float:left; 
    border-bottom: 4px #aaa solid; 
    margin-right: 2px; 
  } 
  .page-nav > li > a { 
    margin-bottom:1px;
    box-shadow:inset 0 2em .33em -.5em #555; 
  }
  .page-nav > li:hover , .page-nav > li:hover >a{  border-bottom-color:orange;}
  .page-nav li:hover > a { color:orange; }
  .page-nav > li:first-child  { border-radius: 4px 0 0 4px;} 
  .page-nav > li:first-child>a{border-radius: 4px 0 0 0;}
  .page-nav > li:last-child  { 
    border-radius: 0 0 4px 0; 
    margin-right: 0;
  } 
  .page-nav > li:last-child >a{border-radius: 0 4px 0 0; }
  .page-nav li li a { margin-top:1px}

  .page-nav li a:first-child:nth-last-child(2):before { 
     content:""; 
     position: absolute; 
     height:0; 
     width: 0; 
     border: 5px solid transparent; 
     top: 50% ;
     right:5px;  
   }
   
   /* --- Photo gallery navigation.  https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/ --- */
   
   .gallery-nav {
    margin: 0;
    padding:0;
    list-style: none;
  }
  .gallery-nav a {
    display:block; 
    background: #111; 
    color:#fff; 
    text-decoration: none;
    padding: .8em 1.8em;

    font-family: Ubuntu,sans-serif;
    font-size: 80%;letter-spacing: 2px;
    text-shadow: 0 -1px 0 #000;
    position: relative;
  }
  .gallery-nav{  
    vertical-align: top; 
    display: inline-block;
    box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;
    border-radius:6px;
  }
  .gallery-nav li{position: relative;}
  .gallery-nav > li { 
    float:left; 
    border-bottom: 4px #aaa solid; 
    margin-right: 2px; 
  } 

  .gallery-nav > li > a { 
    margin-bottom:1px;
    box-shadow:inset 0 2em .33em -.5em #555; 
  }
  .gallery-nav > li:hover , .gallery-nav > li:hover >a{  border-bottom-color:orange;}
  .gallery-nav li:hover > a { color:orange; }
  .gallery-nav > li:first-child  { border-radius: 4px 0 0 4px;} 
  .gallery-nav > li:first-child>a{border-radius: 4px 0 0 0;}
  .gallery-nav > li:last-child  { 
    border-radius: 0 0 4px 0; 
    margin-right: 0;
  } 
  .gallery-nav > li:last-child >a{border-radius: 0 4px 0 0; }
  
  .gallery-nav li a:first-child:nth-last-child(2):before { 
     content:""; 
     position: absolute; 
     height:0; 
     width: 0; 
     border: 5px solid transparent; 
     top: 50% ;
     right:5px;  
   }
   
   /* submenu positioning*/
  .gallery-nav ul {
    position: absolute;
    white-space: nowrap;
/*    border-bottom: 5px solid  orange; */
    z-index: 1;
    left: -99999em;
    padding-left: 0px;
  }

  .gallery-nav > li:hover > ul {
    left: auto;
    padding-top: 5px  ;
    min-width: 100%;
    list-style: none; 
  }

  .gallery-nav > li li ul {  border-left:1px solid #fff;}

  .gallery-nav > li li:hover > ul { 
    margin-left: 1px;
    left: 100%;
    top: -1px;
  }

  .gallery-nav > li li {
    border-bottom: 4px #aaa solid; 
  }
  .gallery-nav li li a { margin-top:0px}
  .gallery-nav > li li:hover , .gallery-nav > li li:hover >a{  border-bottom-color:orange;}
  .gallery-nav li li:hover > a { color:orange; }

  /* arrow hover styling */
  .gallery-nav > li > a:first-child:nth-last-child(2):before { 
    border-top-color: #aaa; 
  }
  .gallery-nav > li:hover > a:first-child:nth-last-child(2):before {
    border: 5px solid transparent; 
    border-bottom-color: orange; 
    margin-top:-5px
  }
  .gallery-nav li li > a:first-child:nth-last-child(2):before {  
    border-left-color: #aaa; 
    margin-top: -5px
  }
  .gallery-nav li li:hover > a:first-child:nth-last-child(2):before {
    border: 5px solid transparent; 
    border-right-color: orange;
    right: 10px; 
  }

   /* --- Page sub-section navigation. Shortcuts to elsewhere on the same page. https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/ (but without sub-menus) --- */

  .section-nav {
    margin: 0;
    padding:0;
    list-style: none;
  }
  .section-nav a {
    display:block; 
    background: #111; 
    color:#fff; 
    text-decoration: none;
    padding: .8em 1.8em;

    font-family: Ubuntu,sans-serif;
    font-size: 80%;letter-spacing: 2px;
    text-shadow: 0 -1px 0 #000;
    position: relative;
  }
  .section-nav{  
    vertical-align: top; 
    display: inline-block;
    box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;
    border-radius:6px;
  }
  .section-nav li{position: relative;}
  .section-nav > li { 
    float:left; 
    border-bottom: 4px #aaa solid; 
    margin-right: 2px; 
  } 
  .section-nav > li > a { 
    margin-bottom:1px;
    box-shadow:inset 0 2em .33em -.5em #555; 
  }
  .section-nav > li:hover , .section-nav > li:hover >a{  border-bottom-color:orange;}
  .section-nav li:hover > a { color:orange; }
  .section-nav > li:first-child  { border-radius: 4px 0 0 4px;} 
  .section-nav > li:first-child>a{border-radius: 4px 0 0 0;}
  .section-nav > li:last-child  { 
    border-radius: 0 0 4px 0; 
    margin-right: 0;
  } 
  .section-nav > li:last-child >a{border-radius: 0 4px 0 0; }
  .section-nav li li a { margin-top:1px}

  .section-nav li a:first-child:nth-last-child(2):before { 
     content:""; 
     position: absolute; 
     height:0; 
     width: 0; 
     border: 5px solid transparent; 
     top: 50% ;
     right:5px;  
   }
   
   
	/* --- Lyrics navigation, within a given lyrics page --- */
	
	.lyrics-track-nav {margin: 0; padding: 0; clear: both; }
	.lyrics-track-nav ul {margin: 0; clear: both; }
	.lyrics-track-nav li {list-style: none; float: left;
		margin-left: 1px; padding-left: 16px;
		font-size: 10px; line-height: 20px; /* white-space: nowrap; */
	}
	.lyrics-track-nav li {
		position: relative;
		z-index: 100;
		margin-bottom: 10px;
		margin-left: 10px;
		font: 11px tahoma,sans-serif ;
		background: #E0EAF1;
		padding: 0;
		width: 250px;
		height: 40px;
		text-align: center;
		cursor: pointer;
		float: left;
		border-radius: 5px;
	}

	/* neat little colour change when we hover over the link */
	.lyrics-track-nav li:hover {
		background: #FFC0C0;
		transition-property: background;
		transition-duration: 3s;
		transition-timing-function: ease-out;
	}
	.lyrics-track-nav a {padding: 10px 4px; }
	
	.lyrics-track-nav a {text-decoration: none; color: #111; display: block; }
	
	/* We want the list vertically aligned */
	.lyrics-track-nav {clear: none;}
	.lyrics-track-nav ul  {clear: none;}
	
	.lyrics-track-nav {float: left; 
		margin: 2px; 
		padding-right: 10px; min-height: 300px; min-width: 300px; max-width: 350px;
		font-size: 12px; }
		
  
/* Neat way of adding simple content to every page */
/* Can inject either an image or text, but it must use the before or after modifiers to work */
/* Any urls are relative to the css, and so work on every page */

	div#container::after {
	  display: block;
	  text-align: center;
	  font-family: sans-serif;
	  font-size: small;
	  background: linear-gradient(to right, rgba(255,255,255,0), yellow, rgba(255,255,255,0)); 
	  content: "1996-2021: 25 years of celebrating Mott The Hoople and Ian Hunter on the web!";
	}
}

/* Alternative styles for use with mobile devices */

@media only screen and (max-width: 640px) {
    /* Mobiles (iPhone, Galaxy, HTC, etc) */

  body {margin-left: 5px; margin-right: 5px;}
  
  address {font-size: 16px;}
  
  #mainpic > img{display: none;}
  
  div#mainpic {clear: both; text-align: center; font-size: 18px; float: inherit; position: inherit;}

  /* Any text overlaying the main image on the hope page. Usually urgent/breaking news. */
  div#mainpic p {color: red; }

  /* On mobile devices, hide the main menu from all but the home page. Users can always click on the masthead. */
  div#main-menu {display: none;}
  body#home div#main-menu {display: initial;}
  
  /* Don't really want to float text next to images on such narrow viewports */
  p.p1 {clear: both;}
  
  .lyrics-track-nav {
    clear: both;
    text-align: center;
  }
  
  .lyrics-track-nav ul {
    padding-left: 0px;
  }

  
  .site-nav, .section-nav, .page-nav, .gallery-nav, .lyrics-track-nav, .navsub, .pgnav {
    border-top: none;
    box-shadow: none;
    margin: auto;
  }

  .site-nav li, .section-nav li, .page-nav li, .gallery-nav li, .lyrics-track-nav li, .navsub li, .pgnav li {
    border-bottom: none;
    list-style: none;
    float: none; 
    margin-left: initial;
    padding-left: initial;
    font-size: initial;
    line-height: initial;
    white-space: nowrap; 
    background-image: none; 
    background-color: transparent; 
    background-position: initial;
    background-repeat: initial;
  }

  .site-nav li a, .section-nav li a, .page-nav li a, .gallery-nav li a, .lyrics-track-nav li a, .navsub li a, .pgnav li a {
    box-shadow: none;
  }

  .site-nav a, .section-nav a, .page-nav a, .gallery-nav a, .lyrics-track-nav a, .navsub a, .pgnav a {
    display: inherit;
    float: none;
    padding: initial;
    text-decoration: none;
    font-weight: initial;
    background-image: none;
    background-color: #c0c0ff; 
    background-position: initial;
    background-repeat: initial;
    color: blue;
    text-align: center;
    text-shadow: none;
    font-size: 100%;
    
    border-radius: 10px;
    line-height: 48px;

    margin-left: 15px;
    margin-top: 15px;
    margin-bottom: 15px;


    padding: 10px 30px 10px 30px; 
    border-style: solid;
    border-color: silver;
    border-width: 2px;
  }

  .site-nav > li:first-child>a, .section-nav > li:first-child>a, .page-nav > li:first-child>a, .gallery-nav > li:first-child>a, .lyrics-track-nav > li:first-child>a, .navsub > li:first-child>a, .pgnav > li:first-child>a {
    border-radius: 10px;
  }

  .site-nav > li:last-child>a, .section-nav > li:last-child>a, .page-nav > li:last-child>a, .gallery-nav > li:last-child>a, .lyrics-track-nav > li:last-child>a, .navsub > li:last-child>a, .pgnav > li:last-child>a {
    border-radius: 10px;
  }

  .site-nav li, a, .section-nav li, a, .page-nav li, a, .gallery-nav li, a, .lyrics-track-nav li, a, .navsub li, a, .pgnav li, a {
    display: inline;
    float: none;
    clear: none;
  }
  
  .navsub .current, .navsub .current a, .site-nav .current, .site-nav .current a, .pgnav .current a {
    color: inherit; 
    background-image: inherit;
  }

  /* Hide drop-down submenus on mobile devices */
  .site-nav li ul, .gallery-nav li ul {
    display: none;
  }


  /* --- masthead -- */

  div.masthead {
    display: block;
  }

  div.masthead-strapline {
    float: none;
  }

  div.masthead-strapline-holder {
    margin-bottom: 10px;
  }


  /* Gallery images. Scale to the mobile viewport */
  div#gallery img {width: 100%; height: 100%; padding: 0px; margin: 0px; border: none;}

  /* Discography */
  
  span.songlist {font-size: 14px; }

  div#tracks {float: left; width: initial; background-color: #ffff80;
    border-top: thin fuchsia solid;
    border-right: thin Fuchsia solid;
    border-bottom: thin Fuchsia solid;
    border-left: thin fuchsia solid;
    border-radius: 5px;
    margin: initial; 
    font-size: 12px; }

  div.tracks {float: none; clear: both; width: initial; background-color: #ffff80;
    border-top: thin fuchsia solid;
    border-right: thin Fuchsia solid;
    border-bottom: thin Fuchsia solid;
    border-left: thin fuchsia solid;
    border-radius: 5px;
    margin: initial; 
    font-size: 12px; }
  
  .trackbox {
    float: none;
    display: inline;
    overflow: visible;
  }

  .cddetails .footnote {float: none; clear: both; width: initial; background-color: #ffff80;
    border-top: thin fuchsia solid;
    border-right: thin Fuchsia solid;
    border-bottom: thin Fuchsia solid;
    border-left: thin fuchsia solid;
    border-radius: 5px;
    margin: initial; 
    font-size: 12px; 
  }
  
  .cddetails .footnote  p {line-height: 100%;}
  
  .sleeve {clear: both; }

  div#review {clear: left; float: left; width: initial;}

  div#review img {width: 100%; height: 100%; padding: 0px; margin: 0px; border: none; margin-bottom: 10px;}
  
  div.sidebar {float: none; width: 100%; background-color: initial; margin: initial; padding: initial; font-size: initial;}

  div#introtext {width: 100%; }

  /* Discography cross-reference */
  
  table.xref {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: initial;
    text-align: left;
    border-collapse: collapse;
  }

  /* Tour dates */
  
  table.tourdates {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: initial;
    text-align: left;
    border-collapse: collapse;
    margin-bottom: 45px;
    width: 100%;
  }
  
  table.tourdates th:first-of-type {width: 30%;}

  /* 1974 tour programme */

  body#archive div#maintext div.threecolsection {float: none; display: block; overflow: hidden; clear: both; width: 100%;}
  body#archive div#maintext div.singlecol {flex: none; padding: 5px;}
  body#archive div#maintext div.doublecol {flex: none; padding: 5px;}

  /* Tablature */
  
  pre.lyrics {white-space: pre-wrap; word-wrap: break-word;}
  
  /* Kill 'stuffed' content */
  
  div#container:after {
    content: "";
  }
}