
.strip_menu_box {
	width:800px;
	background-color:#66669A;
	margin-top:2px;
	height:15px;
}

#MainMenu {
	background:white;
	margin:0 0 0 35px;
	padding:0 0 0 0;
	line-height:1; /* This is needed for the spacing between lines in the dropdowns. */
	width:725px; /* = 8 menu items taking up a total of 86px each, plus 1px of white at LHS */
	list-style:none;
	height:15px; /* for Mac browsers */
}


/* General styles for all menu lists (except the top level UL) */

#MainMenu ul {
	float: left;
	list-style:none;
	line-height:1; /* This is needed for the spacing between lines in the dropdowns. */
	margin:0 0 0 0;
	padding:0 0 0 0;
	border: none;
}


/* This applies to ALL menu items, and is needed to specify styles for top strip.  Styles overridden for deeper menu items */

#MainMenu li {

	float: left;
	margin:0 1px 0 0; /* 1px on RHS of each menu item as per designs */
	padding:0 0 0 0;

	width:85px;

	background-color:#66669A; /* purple for top strip tabs */
	background-image:url(/images/stripmenu_cutcorner.gif); background-position: bottom right;
	background-repeat:no-repeat;

	font-weight:normal;
	text-transform:lowercase;
	text-align:left; /* Ideally "center" for top strip tabs, but this messes up drop-downs */
}

#MainMenu li#building { width:120px; }

#MainMenu #church {
	margin-left:1px; /* 1px of white to left of menu strip */
}


/* This applies to all "a" tags including top strip: */

#MainMenu a {
	display: block;
}


/* This is needed for the links in the top strip tabs, but is overridden elsewhere for links deeper into the menu: */

#MainMenu li a {
	color:white;
	text-decoration:none;
	text-align:center;
	width:85px;
	margin:2px 0 2px 0; /* Top and bottom margins on "a" to achieve required padding effect */
}

#MainMenu li#building a { width:120px; }
#MainMenu li#building li a { width:85px; }


/* This applies to all menu items except the top level tabs: */

#MainMenu li ul li {
	background-image:none; /* remove the cut-corner GIF that's used on top strip tabs */
	background-color:#C5CDD7; /* pale grey */

	xfont-weight:bold;
	text-transform:none;
	text-align:left;

	width:80px;
}



/* This applies to all "a" tags -except- in the top strip: */

#MainMenu li ul li a {
	color:#8175AD; /* purple text when dropdown item not hovered over */
	text-decoration: none;
	margin:4px 4px 4px 4px;
	width:80px; /* ??? */
	text-align:left;
}


/* Special style for any items that have further drop downs... */

#MainMenu a.daddy {
	background-image:url(rightarrow2.gif);
	background-position:center right;
	background-repeat:no-repeat;
}


/* Define styles for drop down boxes */

#MainMenu li ul {
	position: absolute;
	left: -999em; /* It starts off-screen */
	height: auto;
	width: 100px;
	border: none;
	margin:0 0 0 0;
	padding:0 0 0 0;
}


/* The margin defined below set sup how far to indent the second level menus: */

#MainMenu li ul ul {
	margin: -20px 0 0 80px;
}

#MainMenu li:hover ul ul, #MainMenu li:hover ul ul ul, #MainMenu li.sfhover ul ul, #MainMenu li.sfhover ul ul ul {
	left: -999em;
}

#MainMenu li:hover ul, #MainMenu li li:hover ul, #MainMenu li li li:hover ul, #MainMenu li.sfhover ul, #MainMenu li li.sfhover ul, #MainMenu li li li.sfhover ul {
	left: auto;
}

/* The colour defined here will be the roll-over colour for all menu items,
** at all levels of the menu:
*/

ul#MainMenu li ul li:hover, ul#MainMenu li ul li.sfhover {
	background-color: #97AED4;
	color:white;
}

ul#MainMenu li ul li:hover a:hover, ul#MainMenu li ul li.sfhover a:hover {
	color:white;
}

