div.multi_drop_menus * {
 margin:0; padding:0;     /* removes margin and padding off all list elements */
 }
 
/* SET YOUR PREFERENCES!!! */
/* set your menu's font and colors here - the MENU MECHANICS  follow below */

div.multi_drop_menus {
    /* you must link to the hover.htc file for this menu to work in IE6 and earlier */
     /* need a copy? go to http://www.xs4all.nl/~peterned/htc/csshover.htc          */
     /* copy the code into a text file and save it as csshover.htc */
    /* For VADA/Nova... look in IEMultiDrop.css  */
	
  font-family: Verdana, Helvetica, Arial, sans-serif;     /* font family for menu */
  font-size: .9em;                                         /* here is your one chance to set the font size */
                                                            /* since anything else nests                   */       
			 
  font-weight: bold;

  background-color: #37C;  /* colors the div -   */
                           /*   div fills the parent element for a horizontal menu  */
                           /* - set to background-color:transparent; if not needed */
                           /* original color: #AA9  */
   /* border: 1px yellow solid; /* for testing only */
 }
 
div.multi_drop_menus ul {
   font-size: 1em;               /* prevent menu shrinkage/ growth from inheritance */
             /* let this be same as parent -- any other relative size will make it grow or shrink... */              
            /* size of menu's type relative to parent element */
            /* here's the thing: if you nest elements that set a font size stated in ems, */
			/* the effective "ems" is in relation to the parent --                         */
			/*  so if the parent was set at .8 ems and you set the child at .8 ems here, */
			/* the effective size is .8 * .8 = .64 ems!  -- do this a couple times more and the print */
			 /* gets microscopic.  Can make it grow too, just use factors > 1             */
   border-left: 1px solid #217; /* creates dividing line to left of level 1's first menu item, */
                            /* revealing div color to left of menu: Originally #CCB    */
   margin-left: 20px;   	/* pushes menu to right along div background - set to 0px to remove -  */
 } 
               
div.multi_drop_menus li {
 background-color:#cef;         /* background color of the level 1 menu items, orig.  #EEB  */
 border-right: 4px solid #217;  /* creates dividing lines to right of each horiz level 1 menu item */
                                /* set to 0px to remove .. original color #CCB        */
 } 
                	/* border-right is automatically removed from vert menu below  */

div.multi_drop_menus li:hover {
   
   color: #ffffff;
 }
 
 

 div.multi_drop_menus a {
      color: #217;               /* sets the color of all menu type -- orig: #776 */
      padding:.3em 7px;          /*creates space top/bottom and left/right respectively 
                                 /* around each menu item's text - set vert height in ems */
 }
 
 div.multi_drop_menus a.daddy {  /* arrow to indicate there is a drop down here */
	background: url(/images/template/arrow-right.gif) no-repeat center right;
    }

 div.multi_drop_menus a:hover {
      background-color:#69c;     /* background color of hovered menu items - orig. #EEB   */
      color: #FFF;              
 }
 
div.multi_drop_menus a:active {
      color: #cef;
      background-color: #217;              
 }
 
 /* in order to stick the actual menus in a library and then load them in a template... , */
 /*  we had to change how this is used a bit.  */
 /* Top menu tabs have ids of form "menuTabn"    */
 /* Style the one that is current in the template head */
 /* see  Tab1-TwoCol.dwt for and example               */
 /* but you can use this code as a base */
 
div.multi_drop_menus a.current  {
      color:#fff;
      background-color: #d62;   /** fix this **/             
 }
 
div.multi_drop_menus a.current:hover {
     color: #fff;
     background-color: #69c;         /* type color of a hovered menu choice #443 */ 	 
 }
 
div.multi_drop_menus ul li ul {
     width:12em;   				     /* sets the width of menu levels 2 - 4 */
 }
div.multi_drop_menus li li { 
    background-color:#cef;        /* background color of the level 2 menu #DDA */
    border-top: 2px solid #217;   /* lines between menu choices -              */
                               /*  set to 0px if not wanted original color: #CCB */
 }
 

div.multi_drop_menus ul li ul li ul  {
    border-top: 2px solid #217;     /* set the border-top of levels 3 and 4  */
                                   /* of a horizontal menu */
                                   /* - set to 0px to remove */
                                   /* - for a vertical menu,    */
                                   /*   you will set this for levels 1 - 4 below */
    top: -1px;                    /* set to negative value of border-top */
                                  /*  for perfect pop-out alignment */
                                  /*  -set to 0 if border is 0 - don't remove! */
 }
  
div.multi_drop_menus li li li { 
    background-color: #cef;          /* background color of the level 3 menu original: #EEB */
 }
div.multi_drop_menus li li li li {
     background-color: #DDA;         /* background color of the level 4 menu original: #DDA */
 }
 
 /* Want transparency on your menus?   */
 /*  Just add the class 'transparent' to the multi_drop_menus div */
 /* div.transparent ul ul li {                                                                   */
                             /* note: the lower the value, the greater the transparency */
  /*  opacity:0.9;               /* CSS3 - range 0 to 1 */     
  /*  -moz-opacity:0.9;          /* Firefox- range 0 to 1  */
  /*  filter:alpha(opacity=90);  /* IE- range 0 to 100  */
 /*  } */
  
/* ADDITIONAL PREFS FOR VERTICAL MENU - NO NEED TO TOUCH THESE IF LEVEL 1 IS HORIZONTAL */
div.multi_drop_menus.vertical ul {
    border-top:1px solid #CCB;     /* set the border-top of level 1 of the vertical menu */
                                   /* - broken out separately so it can be different from */
                                   /* top border of other levels */
 }
 
div.multi_drop_menus.vertical li {
 border-bottom:1px solid #CCB;  /* adds horizontal lines between menu choices  */
                                /* - overrides main setting above for this feature */
 }
div.multi_drop_menus.vertical ul ul  {
    border-top:1px solid #CCB;      /* set the border-top of levels 2 - 4 of a vertical menu */
                                 /* - set to 0 to remove */
    top:-1px;          /* set to negative value of border-top for perfect pop-out alignment */
                    /* - set to 0 if border is 0 - don't remove!*/
 }
 
/* end vertical menu preferences */

/* END MENU PREFERENCES */
 
/* YOU ARE STONGLY ADVISED NOT TO MODIFY THE CODE THAT FOLLOWS : ) */
/* the menu mechanics start here */
div.multi_drop_menus {
 float:left;
 width:100%;
}

div.multi_drop_menus ul {
   float:left;    /* makes ul wrap li */
   font-size: 1em; /* prevents inheritance from main text style sheet -- since parent is .8, this will effectively be .8 too*/
}
div.multi_drop_menus li {
 float:left;           /*causes the list to align horizontally instead of stack */
 list-style-type:none; /* removes the bullet off each list item */
 position:relative;     /* positioning context for the absolutely positioned drop-down */
 }
 
div.multi_drop_menus a {
 display: block;         /* makes link fill li so entire area is "hot" */
 text-decoration:none;  /* removes the underlining from the links */
 }
 
/* the horizontal menu ends here */
/* the drop-downs starts here */
div.multi_drop_menus ul li ul { 
 position:absolute;       /* positions the drop-down ul in relation */
                          /*  to its relatively positioned li parent */
 border:0;                /* stops inheritance from level 1 ul */
 margin-left:0px;          /* stops inheritance from level 1 ul */
}
div.multi_drop_menus ul li ul li {
 width:100%;
 padding:0;        /* stops inheritance */
 border-left:0;    /* stops inheritance */
 border-right:0;   /* stops inheritance */
 }
div.multi_drop_menus ul li ul {  display:none;}          /* conceals the drop-down when menu not hovered */
div.multi_drop_menus ul li:hover ul {  display:block; }  /* shows the drop-down when the menu is hovered */

                        /* pop-outs starts here */
body div.multi_drop_menus ul li ul li ul  {
 position: absolute;     /* associated menu with parent li positioning context */
 visibility: hidden;     /* ensures that level 3 menu is not revealed          */
                        /*  when level 2 is revealed */
 left: 100%;
 top: -1px;               /* aligns level 3 and 4 pop-out with previous level */
 }
 
div.multi_drop_menus ul li ul li:hover ul {   /* shows level 3 menu when associated level 2 li is hovered */ 
    visibility:visible;
	} 

    /* second and third level popouts here*/
div.multi_drop_menus ul li ul li:hover ul li ul {    /* ensures that level 4 is not reveal when level 3 is reveled */
    visibility:hidden;
	} 
div.multi_drop_menus ul li ul li ul li:hover ul {     /* shows level 4 menu when associated level 3 li is hovered */
    visibility:visible;
	} 
	
/* the drop-downs end here */
 
     /* extra styles for the vertical menu */
div.multi_drop_menus.vertical ul {
     border-left:0px;       /* removes the border of the level 1 ul that can be used in the horizontal menu */
     margin-left:0;         /* removes left margin that is available on horizontal menu */
     }
	 
.vertical ul {              /* took off the id so the ul ul width setting in prefs was more specific */
      width:100%; 
     }
	 
div.multi_drop_menus.vertical li {
     position:relative; /* positioning context for the level 2 menu */
     width:100%;        /* set width of level 1 menu - MUST match left value in ul ul selector below */
     clear:left;        /* makes the main menu stack - note: turning off floating (alternative way to create stacking) */
                        /* causes spacing problems in IE */
     border-right:0;     /* removes right borders used by horiz level 1 */
    }
	
div.multi_drop_menus.vertical ul ul  {
     position:absolute; /* make ul position relative to parent li for all menu levels */
     left:100%;         /* align level 2 with level 1 - MUST match li width in selector above */
     top:-1px; /* aligns the level 2 pop-out */
     }
	 
	 
/* levels 2 -4 width */
div.multi_drop_menus.vertical li li {
     }
	 
div.multi_drop_menus.vertical ul ul ul {
      left:100%;          /* align level 2 with level 3 and 3 with 4 - MUST match li width in selector above */
     }
 /* END MENU MECHANICS */
 

 /* END OF LIST-BASED MENU */