#oj-hozmenu {
	position:relative;
	float:left;
	text-align: center;
	margin:0px auto;
}

.clr {
	clear:both;
}

#oj-moomenu {
	margin: 0; /* all lists */
	padding: 0;
	float: left;

	padding-left:2px;
	font-family:"Myriad Pro",Arial, Helvetica, sans-serif;
	
	/*color:#8e181b;*/
	background:url(img/menu_bg.jpg) top left repeat-x;
	font-size:13px;
	z-index:99;
	
	position:relative;
	top:5px;
	left:15px;
} 

#oj-moomenu ul {
	margin: 0; /* all lists */
	padding: 0;
	z-index:99;
}

#oj-moomenu li {
	margin: 0; /* all list items */
	padding: 0;
	float: left;
	display: block;
	background: none;
	cursor: pointer;
	
}
/* width of the first drop down */
#oj-moomenu li ul { 
	width: 16.2em;    /************************background of level 2****************************/ 
	position: absolute; /* second-level lists */
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	height: auto;
	-width: 18.5em !important;
}




#oj-moomenu li ul ul {
	/* placement of the 2nd drop down in relation to the 1st */
	margin: -2.65em 0 0 16.9em; /* third-and-above-level lists */
	-margin: -2.65em 0 0 18em; !important; /* IE6 Special Margin */
	
	
	width: 16.5em;
	-width:10em !important; /**IE6 next level**/
}

/*********************************************************************************************
position of 2nd, inheriter 
still the 1st drop down 
***********************************************************************************************/

#oj-moomenu li li {
	padding: 0 0.2em 0 0; /* that .2 em handles the right red in the back... the big problem */
	margin: 0;
	width: 16em; /********************2nd hover*************/
	-width: 19.5em !important;

}
/****** how wide the first drop down it */
#oj-moomenu ul a {

	width: 14.5em;
	-width: 19.5em !important;

}



/************************************3rd level******************************************/
/* this affects the 2nd drop down */
#oj-moomenu li li ul { 
	width: 17.3em;    /************************background of level 3****************************/ 
	-width: 18.5em  !important;
}

#oj-moomenu li li ul ul {
	margin: -2.65em 0 0 16.8em;
	-margin: -2.65em 0 0 18em; !important; /* IE6 Special Margin */
	width: 18.5em;

}

/* these both bottom handle the 2nd drop down and the side that pops out on ie 6 */
#oj-moomenu li li li {
	padding: 0 0.2em 0 0;

	margin: 0;
	width: 14em; /********************3rd hover*************/
	-width:17.5em !important;
}

#oj-moomenu ul li ul a {
	width: 14.5em;
	-width: 18.5em !important;
}

/*****************************end of 3rd level*******************************************/


/************************************4th level******************************************/
#oj-moomenu li li li ul { 
	width: 20.3em;    /************************background of level 4****************************/ 
	-width: 22.5em  !important; 
		z-index:99;
}

#oj-moomenu li li li ul ul {
	margin: -2.65em 0 0 19.8em; 
	width: 25em;
		z-index:99;
}


#oj-moomenu li li li li {
	padding: 0 0.2em 0 0;
	margin: 0;
	width: 14em; /********************4th hover*************/
	-width:22em !important;
		z-index:99;
}

#oj-moomenu ul ul li ul a {
	width: 17.5em;
	-width: 22.3em !important;
		z-index:99;
}

/*****************************end of 4th level*******************************************/






/*******************************************
Border Styleee
*****************************************/

#oj-moomenu ul li {
	border:0.2em;
	border-color:#8e181b; /* behind the white part of the menu, the red below */
	border-style:solid;
}

/******************************************important Colors**********************************/

#oj-moomenu ul li a:link {
color:#8E181B; !important;   /* this shows the links on the drop downs that have not been visited */
background-color:#f9f3e3; !important;
}

#oj-moomenu ul li a:visited {
/* this looks like it's only IE 6 */
color:#8E181B; !important; /* this shows the red links on the drop downs for the pages we have already been */
background-color:#f9f3e3; !important;
}


#oj-moomenu ul li a:hover {
color:#f9f3e3; !important;
background-color:#8e181b; !important; /* this is the red behind the words the block of red roll over */
}

#oj-moomenu ul li a:active {
 color:#CCCCCC;
 background-color:#f9f3e3; !important;  /* i don't know what this does */
}




#oj-moomenu li:hover ul ul, #oj-moomenu li:hover ul ul ul,
#oj-moomenu li.sfhover ul ul, #oj-moomenu li.havechildsfhover ul ul, #oj-moomenu li.havechild-activesfhover ul ul, #oj-moomenu li.activesfhover ul ul,
#oj-moomenu li.sfhover ul ul ul, #oj-moomenu li.havechildsfhover ul ul ul, #oj-moomenu li.havechild-activesfhover ul ul ul, #oj-moomenu li.activesfhover ul ul ul {
	left: -999em;
	
}

/* This "unhides" the sub-menus (left: -999em is what hides them) */
#oj-moomenu li:hover ul, #oj-moomenu li li:hover ul, #oj-moomenu li li li:hover ul,
#oj-moomenu li.sfhover ul, #oj-moomenu li.havechildsfhover ul, #oj-moomenu li.havechild-activesfhover ul, #oj-moomenu li.activesfhover ul,
#oj-moomenu li li.sfhover ul, #oj-moomenu li li.havesubchildsfhover ul, #oj-moomenu li li.havesubchild-activesfhover ul, #oj-moomenu li li.activesfhover ul,
#oj-moomenu li li li.sfhover ul, #oj-moomenu li li li.havesubchildsfhover ul, #oj-moomenu li li li.havesubchild-activesfhover ul, #oj-moomenu li li li.activesfhover ul {
	left: auto;
	
	
}

/* STYLING THE MENU
-----------------------------------*/
/* 1st level top*/
#oj-moomenu li a {
	display: block;
	text-decoration: none;
	line-height: 30px;
	padding: 0 15px;
	font-size: 100%;
	font-weight: bold;
	color: #CCCCCC;
/*	background: url(img/toolbar-div.png) 100% 0 no-repeat;*/
}

#oj-moomenu li a:hover,
#oj-moomenu li a:focus {
	/* hover  while not active */
	
	color: #8e181b; /*****hover menu while not-active?****/
}
#oj-moomenu li:active {
color:#CCCCCC;
}



#oj-moomenu li:hover,
#oj-moomenu li.sfhover,
#oj-moomenu li.havechildsfhover,
#oj-moomenu li.havechild-activesfhover {
/* this is the code highlighting the rollover non active, only that back ground not the text */
	
	background: url(img/menu_h.jpg) 100% 0 repeat-x;
}


/* this is the active part on the menu that we are on now*/
#oj-moomenu li a.active {
	color: #000000;
	background-image: url(img/menu_h.jpg);
	background-repeat: repeat-x;
	background-position: 100% 0;
}


/****************************************************************************
To make it work with sfHover 
The values for IE is garbage, and only an estimate since it does not work
in IE 
****************************************************************************/

#oj-moomenu li li:hover,
#oj-moomenu li li.sfhover,
#oj-moomenu li li.havechildsfhover,
#oj-moomenu li li.havechild-activesfhover {
	background: url(img/menu_h.jpg) 100% 0 repeat-x;
	width:15.8em; !important;
	-width:15.2em; !important;
}

#oj-moomenu li li li:hover,
#oj-moomenu li li li.sfhover,
#oj-moomenu li li li.havechildsfhover,
#oj-moomenu li li li.havechild-activesfhover {
	background: url(img/menu_h.jpg) 100% 0 repeat-x;
	width:16em; !important;
	-width:17em; !important;
}

#oj-moomenu li li li li:hover,
#oj-moomenu li li li li.sfhover,
#oj-moomenu li li li li.havechildsfhover,
#oj-moomenu li li li li.havechild-activesfhover {
	background: url(img/menu_h.jpg) 100% 0 repeat-x;
	width:19em; !important;
	-width:19em; !important;
}


/********************************************************test
#oj-moomenu ul li ul a.active,
#oj-moomenu ul li ul a.active:hover
{
	color: #000;
	background-image: url(img/menu_h.jpg);
	background-repeat: repeat-x;
	background-position: 100% 0;
	width:14em;
	-width:18.6em;
}

#oj-moomenu ul ul li ul a.active, 
#oj-moomenu ul ul li ul a.active:hover
{
	color: #000;
	background-image: url(img/menu_h.jpg);
	background-repeat: repeat-x;
	background-position: 100% 0;
	width:17.5em;
	-width:22.5em;
}
**************************************************************/


/*************************************************Hover while Active********************/

#oj-moomenu li a.active:hover,
#oj-moomenu li a.active:focus {
	color:#AAAAAA;
}

#oj-moomenu li li a.active:hover,
#oj-moomenu li li a.active:focus {
	color:#CCCCCC;
}

/* 2nd level and above */
#oj-moomenu li ul {
	background-color:#8e181b;
}

#oj-moomenu li ul li {
	border-right: none; /* dont know */
	background: none;
	font-size:12px;
	line-height:16px;
	background-color:#8e181b;
}

#oj-moomenu li ul a {
	border-right: none;
	margin: 0;
	background: none;
	color: #0075C0;
	text-transform: none;
}

#oj-moomenu li.havesubchild,
#oj-moomenu li.havesubchild-active {
	color: #0075C0;
}
/* non active hover on drop down everywhere */
#oj-moomenu li ul a:hover,
#oj-moomenu li ul a:active,
#oj-moomenu li ul a:focus,
#oj-moomenu ul li:hover,
#oj-moomenu ul li.sfhover,
#oj-moomenu ul li.havesubchildsfhover,
#oj-moomenu ul li.havesubchild-activesfhover,
#oj-moomenu ul ul li:hover,
#oj-moomenu ul ul li.sfhover,
#oj-moomenu ul ul li.havesubchildsfhover,
#oj-moomenu ul ul li.havesubchild-activesfhover {
	color: #CCCCCC !important;
}



#oj-moomenu ul li a.active,
#oj-moomenu ul li a.active:focus,
#oj-moomenu ul li a.active:hover,
#oj-moomenu ul li a.active:active {
	color: #CCCCCC !important; /* this is the active page that is not hovered */
	background: none !important;
	font-weight: bold;
}

#oj-moomenu ul li ul a.active,
#oj-moomenu ul li ul a.active:active,
#oj-moomenu ul li ul a.active:focus,
#oj-moomenu ul li ul a.active:hover {
	background: none !important;
	width:14em; !important;
	-width:18.6em; !important;
	color:#CCCCCC; /*this is the hover colour for the ACTIVE menu items within the 3rd/4th menus(dropdowns OFF the first dropdown)*/
}

#oj-moomenu ul ul li ul a.active,
#oj-moomenu ul ul li ul a.active:active,
#oj-moomenu ul ul li ul a.active:focus,
#oj-moomenu ul ul li ul a.active:hover {
	background: none !important;
	width:17.5em; !important;
	-width:22.3em; !important;

}