@charset "UTF-8";
/* CSS Document */

/*
ul li:hover ul li ul { display: none; }
           
ul li ul li:hover ul { display: block; }

ul li = one menu;
ul li ul li = one submenu inside the parent menu;
for each sub menu one ul li  tag MUST be added

The first line says not to display the new level when the 
first level is hovered over. If this were not set then everything 
would be displayed when the first level of the menu was hovered over. 
The second line says to display the third level of 
menu when the second level is hovered over.  */


	


/* this isn't completely necesary, check for page properties first */
			body {
	font-size: 0.8em;
	margin: 0px;
			}


/* Place the csshover.htc file in the same folder as your 
html file and add the following line to the CSS. */
			body { behavior:url("/CSS/csshover.htc"); }
			
			
/* this is the parent menu style*/
			ul#menubar {
	list-style: none;
	margin: 0px;
	padding: 0px;		
			
				}

			ul#menubar a {
	color: #FFF;
	text-decoration: none;
	display: block;
	background: #333;
	padding-bottom: 4px;
	padding-top: 5px;
	height: 24px;
			}
			
			ul#menubar a:hover {
			}
			
			ul#menubar li {
	float: left;
	position: relative;
			}
			
			ul#menubar li span {
	display: none;
	margin: 0px;
	padding: 0px;
			}
			
			ul#menubar li a {
	width: 125px;
	height: 15px;
			}
			
			ul#menubar li#menu1 a {
	background-image: url("/images/home.jpg");
	background-repeat: no-repeat;
	height: 15px;
	width: 125px;
			}
			ul#menubar li#menu1 a:hover {
			}

			ul#menubar li#menu2 a {
	background-repeat: no-repeat;
	background-image: url("/images/about.jpg");
	height: 15px;
	width: 125px;
			}
			ul#menubar li#menu2 a:hover {
			}

			ul#menubar li#menu3 a {
	background-image: url("/images/ministries.jpg");
	background-repeat: no-repeat;
	height: 15px;
	width: 125px;
			}
			ul#menubar li#menu3 a:hover {
			
			}

			ul#menubar li#menu4 a {
	background-image: url(../images/resources.jpg);
	background-repeat: no-repeat;
	height: 15px;
	width: 125px;
			}
			ul#menubar li#menu4 a:hover {
			}
		
		   ul#menubar li#img a {
	background-image: url(../images/right_nav.jpg);
	background-repeat: no-repeat;
	width: 260px;
	height: 25px;
			}
			
			ul  li#image  {
	background-image: url("/images/right_nav.jpg");
	background-repeat: no-repeat;
	width: 280px;
	height: 24px;
}
    
		
/* This styles the submenu */			
			
			ul#menubar li ul#submenu1 a {
	color: #FFF;
	text-decoration: none;
	display: block;
	width: 125px;
	background: #333;
	padding: 5px 5px 5px 10px;
			}
ul#menubar ul a {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}
			
			ul#menubar li ul#submenu1 a:hover {
				color: #4BD8FF;
				text-decoration: none;
				background: #3C3C3C;
			}
ul#menubar  li  ul#submenu2 a  {
	color: #FFF;
	text-decoration: none;
	display: block;
	padding: 5px 5px 5px 10px;
	width: 130px;
	background: #333;
			}
			
			ul#menubar li ul#submenu2 a:hover {
				color: #4BD8FF;
				text-decoration: none;
				background: #3C3C3C;
			}

			
			ul#menubar li ul#submenu3 a {
				color: #FFF;
				text-decoration: none;
				display: block;
				padding: 5px 5px 5px 10px;
				width: 125px;
				background: #333;
			}
			
			ul#menubar li ul#submenu3 a:hover {
				color: #4BD8FF;
				text-decoration: none;
				background: #3C3C3C;
			}
			
			ul#menubar li ul#submenu4 a {
	color: #FFF;
	text-decoration: none;
	display: block;
	padding: 5px 5px 5px 10px;
	width: 125px;
	background: #333;
			}
			
			ul#menubar li ul#submenu4 a:hover {
				color: #4BD8FF;
				text-decoration: none;
				background: #3C3C3C;
			}
			
			ul#menubar a:hover {
				color: #4BD8FF;
				text-decoration: none;
				background: #3C3C3C;
			}
			
/* This is the submenu positioning of the menu 
   It moves the menu to the bottom instead of the right */
			
			ul#menubar li ul {
	list-style: none;
	position: absolute;
	left: 0;
	top: 100%;
	display: none;
	width: 130px;
	border-top: 1px solid #FFF;
	padding: 0;
	margin: 0;
	font-family: Arial, sans-serif;
			}
			
			ul#menubar li:hover ul { display: block; }

/* this is for the 2nd submenu menu style
   it positions the menu to the right
*/
			
			ul#menubar li:hover ul li ul { display: none; }
			
			ul#menubar li ul li:hover ul {
				display: block;
				position: absolute;
				left: 140px;
				top: -1px;
				border-left: 1px solid #FFF;
			}
/* this is for the 3rd submenu  style
   it positions the menu to the right
*/
			
		    ul#menubar li:hover  ul li ul li ul  { display: none; }
			
			ul#menubar li ul li ul li:hover ul { 
				display: block;
				position: absolute;
				left: 140px;
				top: -1px;
				border-left: 1px solid #FFF;
			}