div[id^=home], div[id^=mv], div[id^=programs], div[id^=bios],
div[id^=folks], div[id^=store], div[id^=contact], div[id^=calendar] {

 width: 11.25em;
 margin:0;
 padding:.125em 0em .25em 0em ;
 border:none;
 cursor:default;
 background: #ffcc66;
}

div[id^=home], div[id^=mv], div[id^=programs], div[id^=bios],
div[id^=folks], div[id^=store], div[id^=contact], div[id^=calendar]
{ left:1em;}


#home {  top:2.5em;}

#mv {   top:4.25em;}

#programs {   top:6em;}

#bios {   top:7.75em;}

#folks {   top:9.5em;}

#store {   top:11.25em;}

#contact {   top:13.0em;}

#calendar {   top:14.75em;}

#menu {
 text-align:left;
 width: 11.2em;
 height:0;
 margin:0;
 padding:.125em 0 .25em .75em;
 border:none;
 text-decoration:none;
 cursor:default;
 background: #ffcc66;
 position:fixed; /*absolute;*/
 top:2em;
   z-index:1000;
}

#menu ul { background:transparent; width:11.5em;
          margin:0em auto; padding:0em 0em 0em .25em; list-style:none;
          white-space:nowrap; text-align:left; min-height:100.1%;
          display:inline-block;   }
/* weirdly, this acts only when a hover happens - text align will move text inside the UL segments  but font color calls are ignored. margin only acts on 2nd level UL whereas pos padding makes 2 levels of ULs have padding but neg padding is ignored */
/* float below makes top menu shift sides in its box, bkgrn has no effect.   font size acts on everything in menu but face calls ignored. bg color effects entire top UL */

#menu li {margin:0em; padding:0; list-style:none; display:inline;  width:92%; }
/* type color calls ignored, pos margin is global in menu div but a neg margin acts only on the 1st level UL LI but weirdly ADDS margin to 2nd level only 0 margin works as expected */

#menu ul ul { background:#cc6666; width:13em;
             position:absolute; left:11.0em; top:0em;
           display:none;  padding:0em .5em 0em 0em;  margin:0;
   }
  /* above controls position of first popover */
  /* this acts on position, space and bgcolor of 2nd level UL and keeps the 2nd level hidden until 1st levl hovered over. However, if bgcolor is added to #menu ul li:hover > ul that overrides this call here */
 /* display:none supposedly doesn't always hide content from all browsers so maybe use visibility:hidden but I need to figure out how to over-ride the visibility:hidden command because it makes all the sub menus disappear */

#menu ul ul ul { background:rgb(155, 80, 80); width:13em;
    position:absolute;  left:13.5em;top:6.2em;
           display:none;  padding:0em; margin:0em;
   }

#menu ul .second { background:rgb(155, 80, 80); width:13em;
    position:absolute;  left:13.5em;top:9.3em;
           display:none;  padding:0em; margin:0em;
   }

#programs .second  {
           display:none;
   }

#programs .second:hover   {background:rgb(155, 80, 80); width:13em;
    position:absolute;  top:9.3em;  padding:0em; margin:0;
           display:block;
   }

#programs .second li:hover { background:rgb(155, 80, 80); width:13em;
     padding:0em; margin:0;
   }


  /* above controls position of second popover, keeps it invisible until hovered over, and color when hovered over */

  /* this acts on position, space and bgcolor of 2nd level UL and keeps the 2nd level hidden until 1st levl hovered over. However, if bgcolor is added to #menu ul li:hover > ul that overrides this call here */
 /* display:none supposedly doesn't always hide content from all browsers so maybe use visibility:hidden but I need to figure out how to over-ride the visibility:hidden command because it makes all the sub menus disappear */

#menu div > ul > li {float:left; display:block; position:relative;  padding:0em; margin:0;  }
/* MUST have div call to work. bgcolor acts on top LI only but color ignored, font type ignored but font size acts. margin acts only on top level LI because of >s? but when > removed the menus work correctly still. neg padding ignored, pos acts 1st level LI only */

/* position relative is critical !!
removing float:left makes top menu width change when hovering over diff menu items that have diff lengths so leave it in the rust red is rgb(204, 102, 102) */

#menu a { display:block;
   font: 100%/1.5em verdana, arial, sans-serif;
   font-weight:900; color:#cc6666; text-decoration:none;
   padding:.3em 1em .75em 0em; margin:0; }
/* padding above controls top menu, color acts on top A type only */

#menu ul ul a { color:white;   }
/* acts on 2nd level UL A - remember that those have a span call which overrides this so only the A text is changed */

/* below directly controls top menu appearance. float:left means nothing in a vertical menu */

#menu div > ul > li > a { line-height:.6em;   margin-right:.0025em;
  }
/* acts only on top ULs LIs A . color, margins, padding, font calls all work MUST have div call to work */

#menu  ul li:hover > ul,
#menu  ul li:focus > ul,
#menu  ul li:active > ul {display:block;  }
/* critical: display of none makes all stuff below top UL not appear. display of block or inline-block makes stuff appear when hover happens. 2nd level UL can get background color here but type color calls ignored. font size acts but not font face! margin acts as does pos padding */

#menu  li:hover > a,
#menu  li:focus > a,
#menu  li:active > a,
#menu  ul li:hover > a.fly,
#menu  ul li:focus > a.fly,
#menu  ul li:active > a.fly {
     color:#330000; background:rgb(255, 150, 5);
     width:100%; margin: 0;
 }
/* I think the above 2 code blocks are the meat of the pop over menus - if no color applied, it is white (span will override small stuff)  */

#menu  span {
     font: 70%/1.15em verdana, arial, sans-serif;
     font-weight:500;
     text-decoration:none;
}

#menu  ul li:hover span,
#menu  ul li:focus span,
#menu  ul li:active span {
    font: 70%/1.15em verdana, arial, sans-serif;
    font-weight:500; color:white; text-decoration:none;
}
/* color here is critical to LI span's type's color.  */

#menu  ul li ul li a {
     font: 100%/1.05em verdana, arial, sans-serif;
     font-weight:900; padding-top:.2em; padding-left:.5em;}
/* without this code, the 1st popover span calls lose line height adjustment, font size and face acts only on 2nd level UL LI A.  */


#menu #programs ul  .second { max-height:3em; }


/* homes' 1st ul acted on by #menu UL and div id=home.
homes' ul's 1st li acted on by #menu div > ul > li, #menu li, # menu ul
homes' ul's 1st li 1st A acted on by #menu div > ul > li A, #menu A,

#programs div's 1st ul's 1st li acted on by #menu div > ul > li, #menu li, #menu ul
#programs div's 1st ul's 1st li's A acted on by
#menu div > ul > li > A, #menu A, A:link, #menu li, #menu ul

#programs div's 2nd ul's acted on by #menu ul ul, #menu ul,

#programs div's 2nd ul's 1st li acted on by #menu li, #menu ul

#programs div's 2nd ul's 1st li's A acted on by #menu ul ul A, #menu A, A:link, #menu li, #menu ul



*/