BODY {
  margin-left: 5%;
  margin-right: 5%;
  font-family: sans-serif;
  font-size: 16px;
}
H1 {
  font-weight: bold;
  font-style: italic;
  margin-top: 0.4em;
  margin-bottom: 0.4em;
  color: yellow;
  font-family: sans-serif;
  font-size: 35px;
  background-color: blue;
}
H2 {
  font-weight: bold;
  clear: left;
  color: blue;
  font-style: italic;
  font-family: sans-serif;
  font-size: 20px;
  background-color: transparent;
}
H3 {
  font-weight: bold;
  clear: left;
  color: teal;
  font-style: normal;
  font-family: sans-serif;
  font-size: 18px;
  background-color: transparent;
}
H4 {
  font-weight: bold;
  clear: left;
  font-family: 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;
}
DIV.sleeve {
  float: left;
  width: 350px;
}
DIV.cover {
  float: left;
  width: 200px;
}
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;
}
DIV.tracks {
  text-align: left;
  color: black;
  background-color: #ffff80;
  border-top: thin fuchsia solid;
  border-right: thin Fuchsia solid;
  border-bottom: thin Fuchsia solid;
  border-left: thin fuchsia solid;
}
TD.tracks {
  text-align: left;
  color: black;
  background-color: #ffffa0;
  border-top: thin fuchsia solid;
  border-right: thin Fuchsia solid;
  border-bottom: thin Fuchsia solid;
  border-left: thin fuchsia solid;
}
EM.song {
  color: maroon;
  font-style: normal;
  font-family: sans-serif;
  background-color: white;
}
span.song {
  color: maroon;
  font-style: normal;
  font-family: sans-serif;
  background-color: white;
}
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;
}

/* New/revised stuff from hereon in */

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

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

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

	/* "Welcome..." message */

div#welcome {
  text-align: center;
  border-top: thin #FF8080 solid;
  background-color: #FFFF80;
  border-right: thin #FF8080 solid;
  border-bottom: thin #FF8080 solid;
  border-left: thin #FF8080 solid;
  font-size: 12px;
}

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;
}

/*
div#alert {
  clear: both; 
  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: 10px;
}
*/

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%; 
    float: left; 
    line-height: 1em;
    margin: 40x 10px 10px 0;
    padding: 4px 4px;
    border: 1px solid #ccc;
    background: #eee;
}

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%;}
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: 10px ;
	font-style: normal ;
	clear: both;
}
table {clear: both;}
div#intro {clear: both;}

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

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

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

	/* MTH tour programme */

body#archive div#maintext {padding: 5px; clear: both;}
body#archive td.newscol {width: 33%;}
body#archive td {vertical-align: top;}
body#archive td span.tourdates {font-family: sans-serif; font-size: 10px;}
body#archive td span.smallprint {font-family: sans-serif; font-size: 10px;}

	/* 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#detail {clear: both; }

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

div#sleeve {float: left; }

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

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

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

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;}

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%;}


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

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

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

p.composer {
  margin-left: 0%;
  color: red;
  font-family: sans-serif;
  font-size: small;
  background-color: yellow;
}

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: 10px; font-style: italic;   
	color: red; background-color: yellow; }
body#lyrics div#credits h2 {display: none; }

/* ----------- Gig reviews ----------- */

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

/* ----------- Our photo gallery ----------- */

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;
}

/* ----------- Our new slide show for the gallery ----------- */

/* ----------- 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;}

/* ----------- Tab-style menu, from "More Eric Meyer on CSS" ----------- */

#nav {margin: 0; padding: 0; clear: both;}
#nav ul {margin: 0; }
#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) 0 100% no-repeat;}
#nav a {display: block; float: left; padding: 0 16px 0 0;
  text-decoration: none; font-weight: bold;
  background: #DDD url(images/tabs2-big.gif) 100% 100% no-repeat;
  color: #333;
  width: .1em;}
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, #nav #current a {color: #FDB; 
  background-image: url(images/tabs2-big-ct.gif);}
#nav h2 {display: none;}

/* ----------- A very similar tab scheme, but 'top' tabs ----------- */

#navtop {margin: 0; padding: 0; clear: both;}
#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 /* 0 100% */ no-repeat;}
#navtop a {display: block; float: left; padding: 0 16px 0 0;
  text-decoration: none; font-weight: bold;
  background: #DDD url(images/tabs2-big.gif) right top /* 100% 100% */ no-repeat;
  color: #333;
  width: .1em;}
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, #navtop #current a {color: #FDB; 
  background-image: url(images/tabs2-big-ct.gif);}
#navtop h2 {display: none;}

/* ----------- Similar, for navigating within the gallery ----------- */

#pgnav1 {margin: 0 ; padding: 0; clear: both; }
#pgnav1 ul {margin: 0 ; }
#pgnav1 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/tabs3-big.gif) 0 100% no-repeat;}
#pgnav1 a {display: block; float: left; padding: 0 16px 0 0;
  text-decoration: none; font-weight: bold;
  background: #DDD url(images/tabs3-big.gif) 100% 100% no-repeat;
  color: #333;
  width: .1em;}
html>body #pgnav1 a {width: auto;}    /* fixes IE6 hack */
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#pgnav1 a {float: none;}            /* End IE5-Mac hack */
#pgnav1 a:hover {color: rgb(85%,10%,10%);}

/* ---------------- Another 'top' navbar ----------------------- */

#pgnav {font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; }
#pgnav ul {list-style: none outside none;
  margin: 0;
  padding: 5px; }
@media all {#pgnav ul {text-align: center;}}
#pgnav li {bottom: 11px; display: inline; line-height: 2.2em;
  margin: 0; padding: 0; position: relative; white-space: nowrap; }
html>body #pgnav li { background: #000;
  margin: 0 3px 0 0;
  padding: 4px 0px 4px 0; }
#pgnav a, #pgnav a:link, #pgnav a:visited {
  background: #900;
  border: 1px solid #FFF;
  bottom: 2px;
  color: #FFF;
  cursor: pointer;
  display: inline;
  height: 1em;
  margin: 0;
  padding: 3px 5px 3px 5px;
  position: relative;
  right: 2px;
  text-decoration: none; }
#pgnav a:hover { background: #C00; bottom: 1px;
  color: #FFF; position: relative; right: 1px; }
#pgnav a:active { background: #999; bottom: 0px;
  color: #FFF; position: relative; right: 0px; }
#pgnav li#active { background: #369; bottom: 13px;
  display: inline;
  margin: 0 3px 0 0;
  padding: 0;
  position: relative; }
html>body #pgnav li#active { background: #000; margin: 0 4px 0 4px; }
#pgnav #active a, #pgnav #active a:link, #pgnav #active a:visited, #pgnav #active a:hover {
  background: #369;
  border-bottom: none;
  border-left: 1px solid #9CC;
  border-right: 1px solid #9CC;
  border-top: 1px solid #9CC;
  bottom: 0; color: #FFF; cursor: text; margin: 0;
  padding: 2px 5px 0 5px;
  position: relative;
  right: 0; }

div#extradiv1, div#extradiv2, div#extradiv3{display: none;}

/* Neat way of adding simple content to every page */
/* The :before and :after modifiers work on both the span and the enclosing div */
/* Can inject either an image or text, but it must use the before or after modifiers to work */
/* urls are relative to the css, and so work on every page */

div#extradiv4 {text-align: center;}
div#extradiv4:before {content: url("images/valid-xhtml10.png")}
div#extradiv4:after {content: url("images/checked_by_tidy.gif")}