body {
    margin: 0px;
    padding: 0px;
    background: white;
    font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;
    font-size: 13px; 
}
  
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1, h2 { font-family: Georgia, serif; }

img { border: none }

.clear-both { clear: both; }
  
#body-wrapper { 
    position: relative; 
    margin: 0px auto; 
    width: 1000px;
    background: url("../images/background.gif") repeat;
    border: 1px solid #ccc;
    border-width: 0px 1px;
}

img#logo { position: absolute; top: 0px; left: 0px; }

#header { 
      background-image: url("../images/header.gif");
      background-repeat: no-repeat;
      width: 100%;
      height: 123px;
      margin: 0px 0px 2px 0px;
}
  
.hidden { display: none; }
  
#navmenu {
      position: absolute;
      top: 20px;
      left: 280px;
      height: 44px;
      width: 675px;
      margin: 0px;
      padding: 0px;
}
  
#navmenu li {
    list-style-type: none;
    display: block;
    float: left;
    margin: 0px 10px;
    height: 44px;
    overflow: hidden;
    font-family: Georgia, serif;
    font-size: 22px; 
    position: relative;
}
  
/* following section defines overlayed images for the navigation menu */

#navmenu li span {  
    display:block;
    position:absolute;
    left: 0; 
    top: 0;
    z-index: 1;
    height: 44px;
    background-repeat: no-repeat;
    background-attachment: top left;
}

/* note: the hover image swap creates a momentary visual glitch in safari. consider 1. a JS preload / JS swap? 2. don't use accessibility text 3. disable rollover */
#nav-home { width: 64px; }
#nav-home span { width: 64px; background-image: url("../images/nav-home.gif"); }
#nav-home span:hover { background-image: url("../images/nav-home-hover.gif"); }

#nav-calendar { width: 110px; }
#nav-calendar span { width: 110px; background-image: url("../images/nav-calendar.gif"); }
#nav-calendar span:hover { background-image: url("../images/nav-calendar-hover.gif"); }

#nav-menu { width: 68px; }
#nav-menu span { width: 68px; background-image: url("../images/nav-menu.gif") ; }
#nav-menu span:hover { background-image: url("../images/nav-menu-hover.gif"); }      

#nav-news { width: 62px; }
#nav-news span { width: 62px; background-image: url("../images/nav-news.gif"); }
#nav-news span:hover { background-image: url("../images/nav-news-hover.gif"); }   

#nav-photos { width: 82px; }
#nav-photos span { width: 82px; background-image: url("../images/nav-photos.gif"); }
#nav-photos span:hover { background-image: url("../images/nav-photos-hover.gif"); } 

#nav-guestbook { width: 112px; }
#nav-guestbook span { width: 112px; background-image: url("../images/nav-guestbook.gif"); }
#nav-guestbook span:hover { background-image: url("../images/nav-guestbook-hover.gif"); } 

#nav-about { width: 117px; }
#nav-about span { width: 117px; background: url("../images/nav-about.gif"); }
#nav-about span:hover { background-image: url("../images/nav-about-hover.gif"); } 

#left-column {
    float: left;
    margin: 0px;
    padding: 275px 0px 0px 0px;
    width: 372px;
}

#heading-calendar { width: 258px; height: 82px; margin: 0px 0px 0px 40px; overflow: hidden; position: relative; }
#heading-calendar.index { margin: 0; margin-bottom: 10px; }
#heading-calendar span {
    width: 258px;
    height: 82px;
    display: block;
    position: absolute;
    left: 0; 
    top: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-attachment: top left;
    background-image: url("../images/heading-calendar.gif");
}

#music-calendar {
    background: url("../images/music-calendar-bg.gif") top right no-repeat;
    padding: 40px 40px 50px 30px;
    margin-left: 5px;
    height: 100%;
}
#music-calendar-index {
    background-color: rgb(174, 180, 252);
    padding: 10px;
}

#music-calendar .event-image {
    float: right;
    clear: right;
    margin: 3px 0px 10px 10px;
    width: 100px;
    border: 1px solid #aaa;
}
#music-calendar a .event-image { border: 1px solid #aaa; }
#music-calendar a:hover .event-image  { border: 1px solid #333; }
#music-calendar h2 a { text-decoration: none; color: black; }
#music-calendar h2 a:hover { text-decoration: underline; color: maroon; }
#music-calendar-index h2 a { text-decoration: none; color: black; }
#music-calendar-index h2 a:hover { text-decoration: underline; color: maroon; }


.music-calendar-event {
    clear: both;
    border: 1px solid #999;
    border-width: 0px 0px 1px 0px;
    margin: 0px 0px 20px 0px; 
    padding: 0px 0px 10px 0px;
}

.music-calendar-event h2 {
    font-size: 24px;
    margin: 0px;
}

.music-calendar-event h3 {
    font-size: 14px;
    margin: 0px;
}

.music-calendar-event p {
    margin: 5px 0px;
    font-size: 12px; 
}

#right-column { 
    float: right;
width: 626px;
}

/* the height of the slideshow is right now fixed at 370px. not an easy way around this at the moment. */
#slideshow { margin: 0px auto; padding: 0px; } /* container div (table) for centering */
#slideshow-left-edge { 
    height: 370px;
    overflow: hidden;
    background: url("../images/slideshow-bg-left.gif") top left no-repeat;
    margin-bottom: 10px;
    padding: 0px 0px 0px 40px;
}
#slideshow tr, #slideshow td { border: 0px; padding: 0px; margin: 0px; }

#slideshow-right-edge { 
    background: url("../images/slideshow-bg-right.gif") top right no-repeat;
    padding: 0px 50px 0px 0px;
    margin: 0px;
}
#slideshow-image { 
    background: url("../images/slideshow-bg-fill.gif") repeat;
    padding: 20px 0px;
    overflow: hidden;
}
#slideshow-image img { 
    height: 330px; /* this resizes the slideshow image to 330px height, auto width. a little fragile I guess. */
    margin: 0px; 
    overflow: hidden; 
border: 1px solid #666;
    background: white; /* mainly for testing purposes. */
} 

#quotebox {
    width: 500px;
    margin: 20px auto;
    text-align: center;
    clear: left;
}

#quotebox .quote { 
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    margin: 0px;
    padding: 0px;
}

#quotebox .author { margin: 5px 0px 0px 0px; }
#quotebox .sign-link { text-align: right; color: black; font-size: 11px; }

#heading-news { width: 275px; height: 84px; margin: 0px 0px 0px 10px; overflow: hidden; position: relative; }
#heading-news span {
    width: 275px;
    height: 84px;
    display: block;
    position: absolute;
    left: 0; 
    top: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-attachment: top left;
    background-image: url("../images/heading-news.gif");
}

#news-column {
    width: 300px;
    margin: 0px 0px 20px 0px;

}

.news-post {
    background: url("../images/news-bg-bottom.gif") bottom center no-repeat;
    padding: 0px 0px 10px 0px;
}

.news-post-header {
    background: url("../images/news-bg-top.gif") top center no-repeat;
    margin: 0px 0px 0px 0px;
    padding: 10px 30px 0px 35px;
}

.news-post h2 { color: maroon; margin: 10px 0px 2px 0px; }
.news-post h2 a { color: inherit; text-decoration: none; }
.news-post h2 a:hover { text-decoration: underline; }
.news-post h3 { margin: 0px; font-size: 12px; }
.news-post p a { color: inherit; }

#heading-menu { width: 275px; height: 84px; margin: 0px 0px 0px 10px; overflow: hidden; position: relative; }
#heading-menu span {
    width: 275px;
    height: 84px;
    display: block;
    position: absolute;
    left: 0; 
    top: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-attachment: top left;
    background-image: url("../images/heading-menu.gif");
}  

#menu-column {
    width: 320px;
    float: right;
    margin: 0px 0px 20px 0px;
}

.menu-menu { 
    background: url("../images/menu-submenu-bg.gif") top left no-repeat;
    width: 166px;
    height: 95px;
    margin: 0px 0px 0px 45px;
    padding: 10px 20px 0px 20px;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 16px; 
}

.menu-menu a { color: maroon; text-decoration: none; }
.menu-menu a:hover { text-decoration: underline; }

.menu-specials {
    background: url("../images/menu-specials-bg.gif") top left no-repeat;
    width: 298px;
    height: 248px;
    margin: 0px;
    padding: 10px 15px 5px 5px;
}

.menu-specials h2 {
    margin: 5px 0px;
    text-align: center;
    color: maroon;
}

.menu-specials table {
    border-width: 0px;
    height: 200px;
    color: black;
    margin: 0px auto;
    width: 95%;
}

.menu-special-day {
    font-family: Georgia, serif;
    text-transform: uppercase;
    text-align: right;
    padding-right: 10px;
    width: 40%;
}

#footer { 
    clear: right; 
    margin: 10px 0px;
    width: 626px;
    height: 124px;
    overflow: hidden;
    position: relative;
}

#footer span {
    background-image: url("../images/footer.gif");
    width: 626px;
    height: 124px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

#footer p {
    color: white;
    font-family: Georgia, serif;
    font-size: 14px;
    text-align: center;
    margin: 0px auto;
    z-index: 5;
    position: absolute;
    top: 70px;
    left: 200px;
}

ul.form { list-style-type: none; margin: 0; padding: 0; }
ul.form li { padding-bottom: 5px; }
ul.form textarea { display: block; }
ul.form .errorlist { list-style-type: none; color: rgb(255, 40, 40); padding: 0; margin: 0; }
ul.form .errorlist li { padding-bottom: -5px; }