/*--------------------------------------------------
Menu Style Sheet

version:		1.3 (mainly used for the menu bar)
author:			brian zollinhofer
email:			brian.zollinhofer@gmail.com
website:		http://www.zollinhofer.com/
--------------------------------------------------*/

* {
	margin: 0px;
	padding: 0px;
}

body {
		line-height: 16px;
		behavior:url("../scripts/csshover.htc"); /* <-- allows for hovering all tags in IE */
	}

#mainNav {
	position: relative;

	background: url(../images/bluemenu.jpg) repeat; /* <-- background for entire mainnav bar */
	height: 16px;
	margin: 0px;
	text-align: left;
	border: 0px solid red;
}

#nav {
	width: 800px;
	height: 16px;
	top:  0px; /* <-- distance from top of #mainNav */
	left: 0px; /* <-- distance from left of #mainNav */ 

}

#nav, nav ul {
	list-style: none;
}


/* headers and subheaders - background, size, font, color */
#nav li {
 float: left;
 position: relative;
 font-size: 10px;
 font-family: "Verdana";
 text-transform: uppercase;
 color: #fff;
 border-right: 0px solid #799193; /* <-- right separating bar for main headings */
 margin-right: 15px;
}

#nav li ul {
display:none;  /* <-- hides submenus, only shows headers */
 position: absolute;
 top: 16px; /* <-- how far down the first submenu starts - seems to only control IE*/
 left: 0px; /* <-- how far left the first submenu starts */


}

#nav ul li { 
 background: transparent none;
 border-right: 2px solid #0369B1; /* <-- right border on submenu */
 border-left:  2px solid #0369B1;
 width: 120px; /* <-- width of submenu cells */
 text-transform: none;
 float: none;
 display: block;
}

#navMinistries ul li {
width: 220px;

}

#navMissions ul li {
width: 165px;

}

#navDownloads ul li {
width: 200px;

}

#navAboutUs ul li {
width: 150px;

}


#nav li>ul { top: 16px; left: 0; }  /* <-- how far down the first submenu starts - not IE, but FF? */

 /* :BUG: This doesn't work in IE because you can't hover non-anchors */
 /* :FIX: You must add a csshover.htc file to a scripts folder on the server. */  
 /* Csshover.htc can be found at http://tinyurl.com/5352r. */
 /* You must also add a behavior to the body tag above. */  

#nav li:hover ul, #nav li.over ul { display: block; z-index: 9999; }

#nav li a {
 display: block;
 padding: 0px 3px 0px 3px; /* <-- padding for headers & submenus */
 text-decoration: none;
 color: white; /* <-- color for headers & submenus */
 background: #1F8AC6; /* <-- background color for submenus */
}

#nav li li a {
	height: 25px; /* <--height of submenus in */
	border-bottom: 2px solid #0369B1; /* <-- bottom border between submenus */
	padding: 7px 0px 0px 7px;
  }
  
#nav li a:hover, #nav li li a:hover.subLast { background: #39A5E1; } /* <-- hover color of submenu */  


li#navHome, li#navAboutUs, li#navMinistries, li#navMissions, li#navContact, li#navAdmin, li#navSearch, li#navDownloads {
 height: 16px;
 /* <-- height of headers, where you can hover to drop down the submenus */
}

#navHome:hover, #navAboutUs:hover, #navMinistries:hover, #navMissions:hover, #navContact:hover, #navAdmin:hover, #navDownloads:hover, #nav li.over, #about #navAboutUs, #ministries #navMinistries { background: #39A5E1 0 100%;} /*  When you hover over submenu, this keeps the header highlighted */


#nav .baseNav, li#navContact a  { background: transparent none; } /* <-- makes headers have transparent background, or add colors */

#nav a.baseNav:hover { background: transparent none; } /* <-- makes headers have transparent background when hovered over, or add colors */

#nav li li a.subFirst {
	border-top: 2px solid #0369B1;
}

#nav li li a.subLast {
 /* background: transparent url(/images/bg/bgSubLast.gif) bottom no-repeat;  This allows to control the last submenu to put a curve or separate image on the bottom */
 background: #1F8AC6 0 100%;
border-bottom: 2px solid #0369B1;
}

/* Search field */	
li#navSearch {
	bottom: 0px;
	_bottom: 0px;

}		

input#search {
	height: 12px;
	font-size: 10px;
	color: #0369B1;
	border: 1px solid white;
	background-color: white;
	text-transform: uppercase;
	margin-top: 1px;
	_margin-top: 0px;
}

input#submit {
	height: 14px;
	font-size: 10px;
	font-family: "Verdana";
	background-color: #0369B1;
	color: white;
	cursor: pointer;
	text-transform: uppercase;
	_margin-bottom: 0px;
}

input#submit:hover {
	color: black;
}

#formSearch {
	margin-top: 0px;
	_margin-top: 1px;
}



/* #nav li a.subLast:hover { background: transparent url(/images/bg/bgSubLastHover.gif) bottom no-repeat;} This allows to control the last submenu to put a curve or separate image on the bottom */