/* New format. Credit to http://www.stunicholls.myby.co.uk/layouts/basics2.html
   for the idea. HTML and BODY are set so that they have no scroll bar,
   and the main content div gets to use it. */

/* Well, once again, it didn't work. Internal links went to
   under the navjpg. Dammit. Spent forever on that damn thing. */


/*
 * Layout.
 */

#topmatter {
position: relative;
height: 200px;
}

body {
margin: 10%;
background-color: white;
width: 580px
}

#navbar {
background: url("../images/HeaderBackground.jpg") no-repeat top left;
position: relative;
margin-top: 20px;
height: 65px
}

/* Opacity for old Mozilla, IE, CSS 3. */

#navbar a, #datebar .link {
position: absolute;
}

.navigationBar a, #datebar .link {
filter: alpha(opacity=40);
-moz-opacity: 0.4;
opacity: .4;
}

/* Grrr. :hover only works with <a> in IE. So
  if I want to do the opacity stuff, I need to
  do it on the anchors. */

.navigationBar a:hover {
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: .6
}

/* IE7 bug: a.active:hover appears not to work.
   However, when I put an intervening node between the
   datebar and the link, and put the active element
   on that, it doesn't work ANYwhere, almost certainly
   because of a CSS specificity issue. */

.navigationBar a.active, #datebar a.active:hover {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0
}

.panel {
display: none
}

.panel.active {
display: block
}

.smallhead {
text-align: right;
margin-top: 20px;
position: relative;
height: 100px;
background: url("../images/HeaderBackground.jpg") no-repeat top right;
}

.smallhead img {
position: absolute;
top: 5px;
right: 0;
}

.pagetitle {
text-align: right;
}

/*
 * Presentation.
 */

/* Justify all text. */

body {
text-align: justify;
}

#footer {
text-align: center;
}

/* Random general formatting. */

.albumTitle {
  text-decoration: underline;
}