/* 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.
 */

body {
background-color: white;
width: 580px;
margin-left: auto;
margin-right: auto;
}

/* Vertically align a single line of text with a fixed-height parent
   suggests to use line-height on the parent. However, because the
   different browsers think about the "height" of a span of Marydale 
   differently (Safari does it "right", Firefox "wrong"), I have to
   use a different approach.
   Actually, the problem is that I've made the anchors position absolute.
   If use flexbox positioning, maybe it'll all work out...and it does.
   See http://phrogz.net/CSS/vertical-align/index.html */

#navbar {
    margin-top: 20px;
    height: 61px;
    width: 576px;
}

.navBackground {
    border: 2px solid #979797;
    background-color: #dbdbdb;
    border-radius: 15px;
    display: flex;
}

#datebar {
    display: flex;
}

.navigationBar, #datebar {
    flex-direction: row;
    align-items: center;
}

.navigationBar {    
    justify-content: space-evenly;
}

#datebar {
    justify-content: space-between;
}

.marydale a {
    color: black;
    font-family: "Marydale", Georgia;
    text-decoration: none;
}

.marydaleText {
    font-family: "Marydale", Georgia;
}

.navigationBar a {
    font-size: 30px;
}

#datebar a {
    font-size: 18px;
}

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

.navBackground a, #datebar .link,
#songListOrientation a {
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. */

.navBackground a:hover, #songListOrientation 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. */

.navBackground a.active, #datebar a.active:hover, 
#songListOrientation a.active {
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;
    font-size: 40px;
}

/*
 * Presentation.
 */

/* Justify all text. */

body {
text-align: justify;
}

#footer {
text-align: center;
}

/* Random general formatting. */

.albumTitle {
  text-decoration: underline;
}