

/*
 * This is a general guide on building drop down menus using ex-menu.
 * The code below can be modified to work with the default joomla menu system (mainmenu)
 * basically just replace #nav-root with ul.menu or whatever class / id you are using
 * 
 * Note the use of li.over for hover elements - this is because IE6 does not support the
 * li:hover pseudo class.  Instead of doubling up each reference to hover with li.over, li:hover
 * I have decided to just support li.over
 * 
*/
                
#nav_box {
  
  /*  top: -310px;
    left: 398px;
    position: absolute; */   
   /* clear: both; /* forces ie6 to work */
	/*font-size: 11px;
	background: url(images/1.gif) top left repeat;
	z-index: 90;
	letter-spacing: 0px;
	text-align: left;*/
}
    #navigation {
       /* position: absolute;
       top: 50px;
        left: 50px;*/
		z-index: 90;
		
    }
        #nav-root {
            margin: 0;
            padding: 0;
            list-style: none;
            z-index: 90;
            float: left;
        }
		
		.nest {
			height: auto;
			/height: 26px !important;
			/height: auto;
			}
	
		#navigation #nav-root li.active .nest{
			position: relative;
			z-index: 1;
		}
		#navigation #nav-root li.active .first_nest {
			background:url(../../images/nav_left.gif) top left no-repeat !important;
			
			z-index: 2;
		}
		
		#navigation #nav-root li.over .first_nest {
			background: url(../../images/nav_left.gif) top left no-repeat !important;			
		}
		
		#navigation #nav-root li .first_nest, #navigation #nav-root li .second_nest,  #navigation #nav-root li .third_nest {
			padding: 0px 4px 0px 2px;
		}
		
		#navigation #nav-root li.active .second_nest {
			background: url(../../images/nav_right.gif) top right no-repeat !important;
			
		}
		
		#navigation #nav-root li.over .second_nest {
			background: url(../../images/nav_right.gif) top right no-repeat !important;
			
			}
		
		#navigation #nav-root li.active .third_nest {
			background: url(../../images/nav_repeat.gif) left top repeat-x !important;		
		}
		
		#navigation #nav-root li.over .third_nest {
			background: url(../../images/nav_repeat.gif) left top repeat-x !important;		
		}
		
	#navigation #nav-root li.over ul li .first_nest, #navigation #nav-root li.over ul li .second_nest, #navigation #nav-root li.over ul li .third_nest {
			background: none !important;
		}

		#navigation #nav-root li.active a#active_menu.mainlevel_current  {
			background: url(../../images/nav_arrow.png) no-repeat left  55% !important;
			/background: url(../../images/nav_arrow.gif) no-repeat left 55%;			
		}
		
		#navigation #nav-root li {
			padding-left: 0px;
			
			}
		#navigation #nav-root li a {
			padding-right: 0px;
                            font-weight: bold;
		}
		
			#navigation #nav-root li {
				margin-right: 0px;
			} 
		
		
		#navigation #nav-root li.active ul li.active .first_nest, #navigation #nav-root li.active ul li.active .second_nest,
		#navigation #nav-root li.active ul li.active .third_nest, #navigation #nav-root li.active ul li .first_nest,
		#navigation #nav-root li.active ul li .third_nest, 	#navigation #nav-root li.active ul li .second_nest  { 
			background: none !important;
		}
		
            /* Style all li tags like this */
            #navigation li {
                margin: 0;
                padding: 0;
                float: left;
                position: relative;
                list-style: none;				
            }
                /* 1st level - horizontal menu */
                #nav-root li a, #nav-root li span, #nav-root .div {
                    padding: 3px 3px 6px;  /* Padding specific to 1st level */
                    display: block;
       
                    color: #676767; /* text color for 1st level */
					}
					
					#navigation #nav-root li.over ul li a {
						 color: #333333;
						 font-weight:normal;
					}
					
					#nav-root li a:hover {
						text-decoration: underline;
					}
					
                    #nav-root li {
                        /* background: url(images/separator.gif) left center no-repeat; /* Set the separator image here */
                    }
                        #nav-root li.first {
                            background-image: none; /* This removes the separator image from the first item */
							
                      }
                /* 2nd level - drop down */
                #nav-root ul {
                    margin: 0;
                    padding: 0;
                    position: absolute;
                    top: 26px; /* Positions second level below first level - will be equal to height of #nav_box */
					left: 0;
					background:none;
					z-index: 999;
					/* background: url(images/nav_repeat.png) left bottom repeat-x !important;
					/background: url(images/nav_repeat.gif) left bottom repeat-x; */			 
                }
                    #nav-root ul li {
                        width: 208px;
                        /* if you need to add an icon to the front
                        padding: 0 0 0 30px;
                        background: url(images/3nd-level-icon.jpg) left center no-repeat; */
                       /* background: #ffffff; *//* 2nd level default background color */
                        /clear: both; /* IE6 sends next item to next line */
                    }
					
					#nav-root ul li.first {
						background:  url(../../images/submenu_box_top.png) top left no-repeat;
						padding-top: 5px;
						border: none;
						width: 210px;
						}
                        #nav-root li li a, #nav-root li li span {
                            padding: 6px 13px 5px 13px; /* Padding specific to 2nd level - define or otherwise will inherit from #nav-root li */
                            display: block;
                            color: #676767; /* text color for 2nd & 3rd level - delete if you want it to inherit from #nav-root */
                        }
                        #nav-root ul li.over {
                            /* background: #ccc; /* 2nd level hover color */
							color: #bde0f0;	
							text-decoration: none;
							display: block;							

                        }
                    /* 3rd level - drop down */
                    #nav-root ul ul {
                        position: absolute;
                        top: 0;
                        left: 160px; /* Positions the ul next to its parent li */
                    }
                        #nav-root ul ul li {
                            width: 160px;
                            /* if you need to add an icon to the front
                            padding: 0 0 0 30px;
                            background: url(images/3nd-level-icon.jpg) left center no-repeat; */
                            background: #ccc; /* 3rd level default background color */
                        }
                            #nav-root ul ul li.over {
                                background: #000; /* 3rd level hover color */
                            }
/* Active menu item */
  #nav-root span.mainlevel_active, #nav-root a#active_menu, #nav-root a.mainlevel_active, #navigation #nav-root li.over a  {
   color: #ffffff;
}
/* Hide menus - do not change */
#nav-root ul, #nav-root li.over ul, #nav-root li.over ul ul {
    display: none;
}
/* Show Menu on Hover - do not change */
#nav-root li.over ul, #nav-root li li.over ul {
    display: block;
}

#navigation ul li ul {
	padding-bottom: 5px;
	background:url(../../images/submenu_box_bot.png) bottom left no-repeat;
}
#navigation ul li ul li a {
	color:#0000FF;

}
#nav_box ul li ul li {
	border-left: #676767 1px solid;
	border-right: #676767 1px solid;
}

#nav-root li li a#active_menu {
	color: #676767;
	font-weight: bold;
}        

