html
{
height: 100%;
}

#head {
    background:#666666 url(header.jpg)  no-repeat scroll 0px;
    height:126px;
    margin-left:auto;
    margin-right:auto;
    width:748px;
}

body {
	background: url(background.jpg) repeat-x;
        background-color: #fffffe; 
        background-attachment: fixed;
	margin:auto;
	padding:0;
	text-align:center;   
        height: 100%;
}

#container {
    background: url(middle.jpg)  repeat-y ;
    width:748px;
    margin:auto;
    padding:0pt;
    text-align:left;

}


#content {
    float:left;
    background: transparent; 
    margin:auto;
    margin-top:0px;
    width:500px;
    color: black;
}


 

#content p  {
    
    padding: 0px 20px 0px 20px;
}

* html #content p  {
    
    padding: 0px 0px 0px 0px;
}

#footer {
    background:#fffce3  url(footer.jpg)  no-repeat;
    font-size:90%;
    height:56px;
    padding:0px 0px 0px;
    text-align:center;
    color:#93711c;
    position: relative;
    margin: auto;
    margin-top: -56px;
    width: 748px;
    clear: both; 
}

#intfooter {
    clear: both;
    height: 56px;
    padding: 0px 0px 0px;
    text-align: center;
    color: transparent;
    width: 748px;
    background: transparent;
    
}

td {
	color:#04047e;
	font-family:Verdana, arial, "sans serif";
	font-size:15px;
    
}


#nonFooter
{

position: relative;
min-height: 100%;
background: url(middle.jpg)  repeat-y;
width: 748px;
margin: auto;
    text-align:center;

}


ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
}

li {
    color: black;
    margin:0px 0px 2px;
    padding:0px;
}

p {
	color:#04047e;
	font-family:Verdana, arial, "sans serif";
	font-size:15px;
    
}


div {
	color:#F7F7F7;
	font-family: Verdana, arial, "sans serif";
	font-size:15px;
    color:transparent;
    
}

blockquote { 

	color: #04047e; 
	font-style:italic;

}

a {
    color: #93711c;
    text-decoration:underline;
}

a:hover {
    color:black;
    text-decoration:none;
}


toplink {
    color:#FFE9AD;
    font-size:26px;
    line-height:normal;
    margin:0px;
    padding:20px;
    text-align:right;

}


h3 {
    color:#04047e;
    padding: 0px 0px 0px 0px;
    /*background:  url(staff.jpg)  no-repeat;*/
    
    margin: 20px 0px 20px 20px;
	font-family: "Comic Sans MS", verdana, "sans serif";
    border-bottom: 1px solid #04047e;
    font-size: 20px;

}

* html h3 {
    margin: 20px 0px 20px 0px;


}


.links   {
    padding: 0px 0px 0px 0px;
    margin: -15px 0px 10px 20px;
    text-align: right;
    color: #04047e;    
    font-size:16px;
    font-family: "Comic Sans MS", verdana, "sans serif";
 
}

.links a:link, .links a:visited  {
   color: #04047e;    
  background:  #f5f2da;
  text-decoration:none;
   padding: 0px 5px 0px 5px;
}

.links a:hover  {
   color: black;
   background:white;    
}

.songtitle {
   font-weight:bold;
    font-size:16px;

}

.songdetails
{
    font-size: 12px;
    
}


.lyrics {
    font-size:18px;
}

.menucongregational {
    display: block;
    width: 204px;
    height: 160px;
    line-height: 160px;
    background: url("menu-congregational.jpg") no-repeat;
    float: left;
    margin-left: 0px;
    position: relative;
    overflow: hidden;
    text-indent: 10000px;
    text-decoration: none;   
}

.menucongregational:hover{
    background-position: 0 -160px;
}



.menuministering{
    display: block;
    width: 204px;
    height: 160px;
    line-height: 160px;
    background: url("menu-ministering.jpg") no-repeat;
    float: left;
    position: relative;
    overflow: hidden;
    text-indent: 10000px;
    text-decoration: none;   

}
.menuministering:hover{
    background-position: 0 -160px;
}

.menuinstrumental{
    display: block;
    width: 204px;
    height: 160px;
    line-height: 160px;
    background: url("menu-instrumental.jpg") no-repeat;
    clear: both;
    float: left;
    margin-left: 0px;
    position: relative;
    overflow: hidden;
    text-indent: 10000px;
    text-decoration: none;   

}
.menuinstrumental:hover{
    background-position: 0 -160px;
}

.menuarticles{
    display: block;
    width: 204px;
    height: 160px;
    line-height: 160px;
    background: url("menu-articles.jpg") no-repeat;
    float: left;
    position: relative;
    overflow: hidden;
    text-indent: 10000px;
    text-decoration: none;   

}
.menuarticles:hover{
    background-position: 0 -160px;
}

.leftgraphic{
    margin-top: 0px;
    display: block;
    width: 170px;   
    min-height: 210px;
    height: auto;
    line-height: 50px;
    /background: url("leftgraphic.jpg") repeat-y;
    float: left;
    margin-left: 13px;
    clear: both;
    position: relative;
    overflow: hidden;
}

* html .leftgraphic{
    margin-left: 7px;
}

.leftgraphic2{
    margin-top: 80px;
    margin-left: -185px;
    display: block;
    width: 150px;
    height: 210px;
    line-height: 50px;
    /background: url("leftgraphic.jpg") repeat-y;
    position: absolute;
    overflow: hidden;
}
   
* html .leftgraphic2{
    margin-left: -205px;
}


.leftnote{
    margin-top: 80px;
    margin-left: -175px;
    width: 150px;
    height: auto;
    line-height: 16px;
    background: transparent;
    position: absolute;
    color:#93711c;
    font-size: 12px;
    text-decoration:italic;
  
}
   
* html .leftnote{
    margin-left: -205px;
}


* html #nonFooter
{
height: 100%;
}

.left2 {
width:200px; position:relative; font-size: 17px;    margin-left:auto;
    margin-right:auto; z-index:1; float: left; text-align:left; background: transparent; height: 35px; top:35px;


}

* html .left2 {

width: 220px;

}

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/example_flyout.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* common styling */
.menu2 {
font-family: "Comic Sans MS", verdana, "sans serif"; width:200px; position:relative; font-size: 17px;    margin-left:auto;
    margin-right:auto; z-index:100; float: left; text-align:left; background: transparent; height: 125px; 


}



.menu2 ul {
margin:25px 30px 30px 15px; list-style-type: none; background:transparent; width:150px; height:125px; 
}

/*Flyout menu*/
.menu2 ul li ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; left:165px;
}

/*Boxes of menu - general*/
.menu2 ul li {
float:left;
}


.menu2 ul li a, .menu2 ul li a:visited {
display:block; float:left; text-decoration:none; color:#04047e; width:135px; height:25px; line-height:25px; font-weight:bold; font-size:17px; padding:0px 0px 0px 31px; 
  
}



* html .menu2 ul li a, * html .menu2 ul li a:visited {width:145px; w\idth:145px;}

/*Individual boxes of menu*/
.menu2 ul li.music {background: url(buttonmusic.jpg)  no-repeat;}
.menu2 ul li.articles {background: url(buttonarticles.jpg)  no-repeat;}
.menu2 ul li.about {background: url(buttonabout.jpg)  no-repeat;}
.menu2 ul li.contact {background: url(buttoncontact.jpg)  no-repeat;}
.menu2 ul li.welcome {background: url(buttonwelcome.jpg)  no-repeat;}


.menu2 table {
border-collapse:collapse; border:0; margin:0; padding:0; font-size:1em; position:absolute; left:0; top:0;

}


/*Pointer over menu boxes*/
/* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */
.menu2 ul li:hover a,
.menu2 ul li a:hover{
background-position: 0 -25px; color: black; text-decoration: none;
}

.menu2 ul li.welcome a:hover {background: url(buttonwelcome.jpg)  no-repeat; background-position: 0 -25px;}
.menu2 ul li.articles a:hover {background: url(buttonarticles.jpg)  no-repeat; background-position: 0 -25px;}
.menu2 ul li.about a:hover {background: url(buttonabout.jpg)  no-repeat; background-position: 0 -25px;}
.menu2 ul li.contact a:hover {background: url(buttoncontact.jpg)  no-repeat; background-position: 0 -25px;}
.menu2 ul li.music a:hover {background: url(buttonmusic.jpg)  no-repeat; background-position: 0 -25px;}


.menu2 ul li:hover {position:relative; z-index:90;background-position: 0 -25px;}
* html .menu2 ul li a:hover {position:relative; z-index:100;background-position: 0 -25px;}


/*Background of flyout menu*/
.menu2 ul li:hover ul,
.menu2 ul li a:hover ul {
visibility:visible; position:absolute; height:auto; border-bottom:0px; overflow:visible; width:180px; margin:0px 0px 0px 0px; padding: 0px 0px 0px 0px; border:0px; opacity:.9; -moz-opacity:.9; filter: alpha(opacity=90); -khtml-opacity:  0.9;  background:white;
}

/*Appearance of flyout menu*/
.menu2 ul li:hover ul li a,
.menu2 ul li a:hover ul li a{
display:block; color:#04047e; line-height:25px; height:25px; text-decoration:none; width:150px; font-size:16px;   text-align:left; padding:0px 0px 0px 27px; margin:px 0px 0px 0px; 
}


/*Pointer over flyout menu*/
.menu2 ul li:hover ul li:hover a,
.menu2 ul li a:hover ul li a:hover {
background-position: 0 -50px; color:#000000;  font-size:16px; border: 0px 0px 0px 0px solid black;  text-align:left; width:150px; 
}

/*.menu2 ul li:hover ul.music {background: url(buttonmusic-act.jpg)  no-repeat;}*/

.menu2 ul li:hover ul li ul,
.menu2 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; left:85px;
}
.menu2 ul li:hover ul li:hover ul,
.menu2 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; height:auto; color:#000; padding:0; border:1px solid #069; list-style-type:none; background:#069;
}
.menu2 ul li:hover ul li:hover ul li a,
.menu2 ul li a:hover ul li a:hover ul li a {
display:block; background:transparent; color:#ff0;
}

.menu2 ul li:hover ul li:hover ul li:hover a,
.menu2 ul li a:hover ul li a:hover ul li a:hover {
background:#eee; color:#000;
}



/*================= STYLES FOR THE GRC MASTHEAD & CONTROLS ==================*/
.menuminwidth0
{
    /* for all browsers (non-IE) that obey min-width */
    position : relative;
	margin-top : 0px; 
   border : 0;
   padding : 0;
    
    height : 35px;
    /* 36px masthead height + 18px button height + 1px lower border*/
    min-width : 30px;
    z-index: 3;
    text-align:left

}
/* suppress our whole menu when not an interactive mode (when printing, etc.) */
@media print, projection
{
.menuminwidth0
{
    d\isplay : none;
}
}
html .menuminwidth1
{
    /* this allows IE5/6 to simulate min-width capability */
    position : absolute;
    /* we can simulate a minimum width by creating a large */
    float : left;
    /* border in this first div, then placing our content */
     height : 0px;
    /* into a second nested div (see 2nd nested div next */
    border-left : 560px solid rgb(255 , 255 , 255);
    z-index: 3;
    text-align:left


}
/* CSS box-model borders are a fixed size */
html .menuminwidth2
{
    /* used to simulate min-width capability for IE5/6 */
    position : absolute;
    margin-left : -560px;
    height : 0px;
    z-index: 3;
    text-align: left    
    left: auto;
    right: auto



}

/*========================= TOP OF THE MENU CASCADE =========================*/
.menu
{
    z-index: 1;
    position : absolute;
    /* establish a menu-relative positioning context */
    float : left;
    /* play nicely with others */
    margin-top : 0px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    height : 32px;
    /* the menu's overall height */
    width : 150px;
    font-family : Verdana , Arial , Helvetica , sans-serif;
    /* this (and also below) sets the menu's font size */
    left: 20px;
    color: black;
	
    
}


/* prevent images from being pushed down by text */
.menu ul
{
    padding : 0;
    margin : 0;
    border : 0;
    list-style-type : none;
    /* we don't want to view the list as a list */
    line-height : 1.5em 
}



/* this must be 1.0 or 1.5 or 2.0 for Mozilla  globally set the menu's item spacing. note */
.menu li
{
    float : left;
    /* this creates the side-by-side array of top-level buttons */
    position : relative;
    /* create local positioning contexts for each button */
    margin : 0;
}
.menu ul li table
{
    margin : -1px 0;
    /* IE5 needs -1px top and bottom table margins */
m\argin : 0;
    /* re-zero the table margins for everyone but IE5 */
border-collapse : collapse;
    /* IE5 needs this for the sub-menus to work */
font-size : 12px;
}

/*======================== TOP LEVEL MENU DEFINITIONS ======================== which has a z-order sequencing bug with abs-pos elements */
.menu ul li ul
{
    display : none;
    /* initially hide the entire list hierarchy */
padding : 1px;
z-index: 3
}
/* this is our box border width */

.menu ul li a, .menu ul li a:visited
{
    /* unselected top-level menu items */
    display : block;
    float : left;
    text-decoration : none;
    height : 30px;
    width: 30px;
    margin-left: 5px;
    /* change this to white for menu text when positioned in all browsers*/
    border:1px solid transparent;

}

* html .menu ul li a, .menu ul li a:visited {
    margin-left: 2px;
    border:1px solid white;
}

.menu ul li a.headphones, .menu ul li a:visited.headphones
{
    background: url(headphones.png) no-repeat;
}

.menu ul li:hover a.headphones, .menu ul li a:hover.headphones
{
    background-position: 0 -30px;
    border:1px solid #aca1a1;
}

.menu ul li a.mp3, .menu ul li a:visited.mp3
{
    background: url(mp.png) no-repeat;
}

* html .menu ul li a.mp3, .menu ul li a:visited.mp3
{
    background: url(mp.png) no-repeat;
}

.menu ul li:hover a.mp3, .menu ul li a:hover.mp3
{
    background-position: 0 -30px;
    border:1px solid #aca1a1;
}
.menu ul li a.sheetmusic, .menu ul li a:visited.sheetmusic
{
    background: url(sheetmusic.png) no-repeat;
}

.menu ul li:hover a.sheetmusic, .menu ul li a:hover.sheetmusic
{
    background-position: 0 -30px;
    border:1px solid #aca1a1;
}


.menu ul li a.lyrics, .menu ul li a:visited.lyrics
{
    background: url(lyrics.png) no-repeat;
}

.menu ul li:hover a.lyrics, .menu ul li a:hover.lyrics
{
    background-position: 0 -30px;
    border:1px solid #aca1a1;
}

.menu ul li a.close, .menu ul li a:visited.close
{
    background: url(close.png) no-repeat;
}

.menu ul li:hover a.close, .menu ul li a:hover.close
{
    background-position: 0 -30px;
    border:1px solid #aca1a1;
}

.menu ul li a.back, .menu ul li a:visited.back
{
    background: url(back.png) no-repeat;
}

.menu ul li:hover a.back, .menu ul li a:hover.back
{
    background-position: 0 -30px;
    border:1px solid #aca1a1;
}


.menu ul li a.pdf, .menu ul li a:visited.pdf
{
    background: url(pdf.png) no-repeat;
}

.menu ul li:hover a.pdf, .menu ul li a:hover.pdf
{
    background-position: 0 -30px;
    border:1px solid #aca1a1;
}

.menu ul li a.blank, .menu ul li a:visited.blank
{
 
}


/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/
.menu ul li:hover ul, .menu ul li a:hover ul
{
    /* 2nd level drop-down box */
     display : block;
    position : absolute;
    margin : 0;
    top : 40px;
    /* place us just up underneath the top-level images */
    left : 10px;
    /* left-align our drop-down to the previous button border */
    /*height : auto;*/
    /* the drop-down height will be determiend by line count */
    /* this sets the unselected-text color #04047e*/
    color : black;
    background : transparent;
    line-height:13px;

}

.menu ul li:hover ul li a, .menu ul li a:hover ul li a
{
    /* 2nd level unselected items */
    border : 1px #93711c solid;
    padding-left : 5px;
    padding-right : 2px;
    padding-bottom : 3px;
    font-size: 12px;
    /* this sets the drop-down menu background color Chris Mowle  */
    color: black;
    background: #f5f2da;

    width: 100px;
    height: auto;
    opacity:.95; -moz-opacity:.95; filter: alpha(opacity=95); -khtml-opacity:  0.95;

}


.menu ul li:hover ul li:hover a, .menu ul li a:hover ul li a:hover
{
    /* 2nd level selected item #dddeee */
    color : #04047e;
    background: #dddeee;
    opacity:.95; -moz-opacity:.95; filter: alpha(opacity=95); -khtml-opacity:  0.95;
}