div#menu * {margin:0; padding:0;} 



/*############################

 		SKINNING 
 
 ############################*/
 
 
 
 
/*MENU CONTAINER*/
div#menu {
	width:100%; 	/* makes the div full width */
	float:left; /*makes the div enclose the list */
	font-size:.8em;	/* SET FONT-SIZE HERE */
	background-image:url(../..//images/gradient_panel_bottom.gif); /* colors the div */
	height:30px;
	font-family: verdana, arial, sans-serif; 
	font-size:0.9em;	
	border-top:1px solid #000000;
  	border-bottom:1px solid #000000;
}



/*######  HORIZONTAL ROOT MENUS  ################### */


/* MENU START*/	
div#menu ul {
 margin:0 0 0 5px;/* indents ul from edge of container */ 
}



	
/* root menu item*/		
div#menu li {
	float:left;	/* causes the list to align horizontally instead of stack */
	position:relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type:none;	/* removes the bullet off each list item */
	border-right:1px solid #CCCCCC; /* creates dividing lines between the li elements */
	padding:2px;
}
	
div#menu a {
	display:block; /*makes list items in drop down highlight and wrapped lines indent correctly */
	padding:4px 6px; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
	color:#FFFFFF;	/* sets the type color */	
	font-size:12px;
	font-weight:bold;
}

 
 /* Root Menus   */
div#menu ul li{
padding-left:5px;
padding-right:40px;
text-align:center;
padding-top:4px;
padding-bottom:4px;
z-index: 100;

}
/*###### END HORIZONTAL ROOT MENUS  ##### */






/*########## DROP DOWNS ############## */


/* first level submenu block  */
div#menu ul  ul {
	display:none;/* conceals the drop-down when menu not hovered */
	margin:0; /* prevents the TEMP value inheriting from the horiz menu - OK to remove if you remove TEMP above */
	position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
	width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
	left:-1px; /*aligns the drop exactly under the menu */
	
	top:30px;
	}
	

/* first level submenus */	
div#menu ul  ul li {
	width:100%; /* makes the list items fill the list container (ul) */
	border-left:1px solid #666666; /*  three sides of each drop-down item */
	border-bottom:1px solid #666666;
	border-right:1px solid #666666;
	padding:0 0 1px;/* top and bottom padding*/	
	background:url(../../../images/menu_bg_gradient.png);
	padding-left:5px;
	
	width:183px;
	text-align:center;
	text-transform:none;
	font-weight:normal;
	height:25px;
	
	}
	
	
div#menu ul  ul li:first-child {
	border-top:1px solid #666666; /*the top edge of the dropdown */
	}
	
	


/* dropdown submenu links  */
div#menu ul  ul  a{
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
text-indent:5px;
font-weight:normal;

}



/*############ POP-OUTS ##########*/

body div#menu ul  ul  ul  {
	visibility:hidden; /* same effect as display:none in this situation */
	margin-top:3px;
	padding-right:80px;
	
	}	
	
	
	
	
body div#menu ul  ul  ul li {	
left:23px;

}

body div#menu ul  ul  ul  ul{
	visibility:hidden; /* same effect as display:none in this situation */
	margin-top:3px;
	padding-right:80px;
	
	}
	body div#menu ul  ul  ul  ul li {	
left:23px;

}

	

/*############################

		BEHAVIOURS 
 
 ############################*/


/*  root menu  mouseover.

 !!!!!!!!IMPORTANT!!!!!!!!!!!!
 Full image path required. 
  Due to document context changing from this css file to the
  calling page   when parsing CSS with JScrit in the  IE6 hack csshover.htc,
   relative paths won't work.  
  
 e.g. http://www.stupid.com/images/stupid.jpg 
 [ NOT /images/stupid.jpg or ../images/stupid.jpg ]
*/
div#menu ul li:hover{

text-transform:none;
}

div#menu ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */







div#menu ul li:hover ul  a{color:#FF6600;}



/* Use the left property to align all popups except the first dropdown
2nd and subsequent levels
*/		
div#menu ul  ul li:hover ul {
visibility:visible;
left:165px;

}

/* sub menus level one  mouseover*/
div#menu ul  ul li:hover a{
text-transform:none;
color:#000000;
font-weight:normal;
}

/* another level of pop-outs */
div#menu ul  ul li:hover ul  ul {display:none;} /* conceals the drop-down when menu not hovered */

div#menu ul  ul  ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */


/* another level of pop-outs */
div#menu ul  ul ul li:hover ul  ul {display:none;} /* conceals the drop-down when menu not hovered */

div#menu ul  ul  ul ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */



/*sub menu level one mouseover behaviour for dropdown sub menus level 2*/
div#menu ul  ul li:hover  ul li {
text-transform:none;
color:#FF6600;
font-weight:normal;
}
div#menu ul  ul li:hover  ul  a{
text-transform:none;
color:#FF6600;
font-weight:normal;
}


/* sub menus level 2   mouseover*/
div#menu ul  ul   ul li:hover  a{
text-transform:none;
color:#000000;
font-weight:normal;
} 


/*sub menus level 2 mouseover behaviour for dropdown  sub menus level 3*/
div#menu ul  ul   ul li:hover  ul   a{
text-transform:none;
color:#FF6600;
font-weight:normal;
} 


/* sub menus level 3   mouseover */
div#menu ul  ul  ul  ul li:hover   a{
text-transform:none;
color:#000000;
font-weight:normal;
} 


/*sub menus level 2 mouseover behaviour for dropdown  sub menus level 3*/
div#menu ul  ul   ul ul li:hover  ul   a{
text-transform:none;
color:#FF6600;
font-weight:normal;
} 


/* sub menus level 4   mouseover */
div#menu ul  ul  ul  ul ul li:hover   a{
text-transform:none;
color:#000000;
font-weight:normal;
} 


/*####################### 

	 THE HACK ZONE 
	 
 ########################*/
 

/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#menu ul {
	float:left; /* makes the ul wrap the li's */
	border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
	margin-left:0px; /* IE doubles the given value above - why? */
	}
	
	
/* target->IE 6:: add a top line to drops and pops in IE browsers - can't read :first-child */
*  div#menu ul  ul , * div#menu ul  ul  ul  {
	*border-top:1px solid #666666;
	*border-left:0px; /* stops the drop inheriting the ul border */
	}
	
/* target->IE 7:: remove top border added for IE6 above  */	
div#menu > ul  ul ,div#menu > ul ul  ul {
	* border-top:0px;	
	}

/* root menu link color on mouseover. IE6 HACK*/
div#menu ul li:hover a{*color:#000000;}
	
	
/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */
* html  div#menu ul  ul  ul { 
  left:9.85em; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  left:10em;
  }
  
  
/* and the "be nice to Opera" rule */
html>body div#menu ul  ul  ul {
  top:-1px;
  left:10em;
  }

/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
/* the pop-out menu stays open for 22px below the bottom but at least it works */
	@media all and (min-width: 0px){
   body div#menu ul  ul {padding-bottom:70px;}
   body div#menu ul  ul  ul {padding-bottom:22px;}
   body div#menu ul  ul  ul  ul li:hover {visibility:visible;} /* same effect as display:block in this situation */
   
   
   }
/*end Opera hack */


/*####################END OF MENUS############################*/