a:link {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: navy;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a img {
  border: none;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
}

.quote {
  font-weight: bold;
}

blockquote.quote {
  font-weight: normal;
  border: solid 1px black;
  padding: 1em;
}

/* Space in between first and second halves of programmes */
dl.programme + dl.programme {
  margin-top: 2em;
}

dt {
  font-weight: bold;
  margin-top: .5em;
}

.concert {
  border: solid silver 1px;
  padding: 1em 2em;
  margin-top: 1em;
}

.concert .description, .concert h2 {
  font-style: italic;
}

.concert h2, .concert h3 {
  margin-bottom: 0;
  margin-top: 0;
}

.diary div.event {
  margin-left: 2em;
  margin-bottom: .5em;
}

.diary div.date {
  font-weight: bold;
   font-style: italic;
 }

.diary div.details {
  margin-left: 2em;
}

.diary h3 {
  font-weight: normal;
  font-size: 100%;
  margin-left: 1em;
}

.diary .important {
  color: #cc0000;
}

/* Links on pages that are split into multiple parts */
.pagerLinks {
  background: #ebf1fa;
  border-top: solid 1px silver;
  border-bottom: solid 1px silver;
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
  padding-left: .2em;
  padding-right: .2em;
  text-align: center;
  width: 55%;
}

.photo {
  margin-bottom: 0;
  text-align: center;
}

.photo + .caption {
  margin-top: 0;
  margin-bottom: 2em;
  margin-left: 15%;
  margin-right: 15%;
  text-align: center;
}

.relLink {
  text-align: right;
}

/* To be done */
.tbd {
  color: red;
}

.tbd:before {
  content: "[";
}

.tbd:after {
  content: "]";
}

/**********************/
/* Begin layout stuff */
/**********************/

/* Area surrounding the part of the window that has content */
#container {
  background: #b0c4de url(images/blueBg.png);
  position: relative; /* Needed for IE */
}

#header {
  /* background image fades from #2175bc to colour of background */
  background:  #75abd9 url(images/headerBackground.png) repeat-y;
  font-weight: bold;
  font-style: italic;
  padding: .3em 1em;
}

/* Text in the header saying Micklegate Singers */
#micklegateSingers {
  font-size: 180%;
  letter-spacing: .01em;
  margin: 0;
  padding: 0;
  color: white;
}

#musicalDirector {
  color: navy;
  text-align: right;
  margin: 0;
  padding: 0;
  padding-top: .3em;
  float: right;
  position: relative; /* Needed for IE */
}

/* Stop unvisited link showing bright blue */
#musicalDirector a {
  color: navy;
}

#sidebar {
  clear: both;
  /* Pixel values are derived from logo width! */
  width: 130px;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  background: #b0c4de url(images/blueBg.png);
  position: relative; /* Needed for IE */
}

/* CSS for navlinks borrowed heavily from http://www.alistapart.com/stories/taminglists/ */
#navLinks {
  padding: 0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 85%;
  color: #333;
  position: relative; /* Needed for IE */
}

#navLinks ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#navLinks li {
  border-bottom: 1px solid #90bade;
  margin: 0;
}

#navLinks li a {
  display: block;
  padding: 5px 5px 5px 0.5em;
  border-left: 10px solid #1958b7;
  border-right: 10px solid #508fc4;
  background-color: #2175bc;
  color: #fff;
  text-decoration: none;
  width: 98px; /* IE hack to make hover work on whole item. */
}

#navLinks li a:hover {
  border-left: 10px solid #1c64d1;
  border-right: 10px solid #5ba3e0;
  background-color: #2586d7;
  color: #fff;
}

#logo {
  text-align: center;
}

#main {  
  background: white url(images/whiteBg.png);
  margin-top: 10px;
  /* Pixel values are derived from logo width! */
  margin-left: 150px;
  margin-right: 10px;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  border-right: solid 1px gray;
  border-bottom: solid 1px gray;
  /*-moz-border-radius: 10pt 10pt;*/
}

h1 {
  color: #003399;
  margin-top:0;
}

#footer {
  color: #333;
  text-align: center;
  font-size: 75%;
  margin: 0;
  padding: 0;
  /* This rule breaks IE.  Elements in the header and main container lose their background,
     don't appear and so on.  The fix is to explicitly set position: relative on floated elements,
     their container and some other elements affected by the float. */
  clear: both;
}

#makingMusicLogo {
  text-align: right;
}