body { font-family:Arial,sans-serif; }
table.menu {
/* Center content in window, not counting stickout-pictures */
    margin:0px auto;

    border-width: 0px 1px;
    border-style: solid;
    /* Yellow line down left edge*/
    border-left-color: #d5971b;
    /* Gray line down right edge*/
    border-right-color: #84919b;
}

td.heading {
    /* Background Gray */
    background-color: #84919b;
    color:white;
    padding:.5ex;
}

td.heading img {
    /* R.A.M. logo */
    float: right;
    padding:.5ex;
    height:8ex;
}

/* Function:
   - sub-menus pop up when you hover on super menu.
   - selected menus (class="sel") never pop shut...
   - ...except when someone hovers on non-direkt parent
   */

*.menu *.button1 *.content1, *.menu *.button2 *.content2 {
    /* Submenus usually closed */
    display:none;
}

*.menu *.button1.sel *.content1 {
    /* Preselected sub-menu automatically open */
    display:block;
}

*.menu *.button2.sel *.content2 {
    /* Preselected sub-sub-menu automatically open */
    display:inline;
}

*.menu tr.buttons1:hover *.content1 {
    /* Preselected submenu closes when mouse enters menu area */
    display:none;
}

*.menu tr.buttons1:hover *.content2 {
    /* Preselected subsubmenu closes when mouse enters menu area */
    display:none;
}

*.menu tr.buttons1:hover *.button1:hover *.content1 {
    /* Open submenu by hovering on menu item */
    display:block;
}

*.menu tr.buttons1:hover *.button2:hover *.content2 {
    /* Open subsubmenu by hovering on menu item */
    display:inline;
}

*.menu table.content1, *.menu table.content2 {
    position: absolute;
}

*.menu table.content1 {
    left: 0em;
    /* For placement to work, the parent th.button1 > div needs to be
       relative. Not the th itself, this was unclear in css2 spec and
       therefore didn't work before firefox 30. */
}

*.menu table.content2 {
    /* This should be the displaywidth of button1 div.l */
    left: 11em; 
    top: 0ex;
    /* For placement to work, the parent td.button2 > div needs to be
       relative. Not the td itself, this was unclear in css2 spec and
       therefore didn't work before firefox 30. */
}
*.menu th.button1.c4 table.content2 {
    left: 9em;
}

*.menu th.button1 > div, *.menu td.button2 > div { 
    position:relative;
    width: 100%; 
}

/* Top level button's highlighting */

*.menu *.button1 {
    /* Normal background: gray */
    background-color: #84919b;
    color: white;
}

*.menu *.button1:hover, *.menu *.button1.sel {
    /* Normal highlight: black */
    background-color:black;
}

*.menu *.button1.c1:hover, *.menu *.button1.c1.sel {
    /* Hover: dark yellow */
    background-color:#d5971b;
}

*.menu *.button1.c2:hover, *.menu *.button1.c2.sel {
    /* Hover: dark pink */
    background-color:#af0066;
}

*.menu *.button1.c4:hover, *.menu *.button1.c4.sel, *.menu *.button1.c6:hover, *.menu *.button1.c6.sel {
    /* Hover: nearly black */
    background-color:#202020;
}

/* Second and third level button's highlighting */

*.menu *.button2, *.menu *.button3 {
    /* Normal background: white */
    background-color:white;
    color:black;
}

*.menu *.button2:hover, *.menu *.button3:hover, *.menu *.button2.sel, *.menu *.button3.sel {
    /* Normal highlight: gray */
    background-color: #84919b;
}

*.menu *.c1 *.button2:hover, *.menu *.c1 *.button3:hover, *.menu *.c1 *.button2.sel, *.menu *.c1 *.button3.sel {
    /* Hover: light yellow */
    background-color: #f7ebcc;
}

*.menu *.c2 *.button2:hover, *.menu *.c2 *.button3:hover, *.menu *.c2 *.button2.sel, *.menu *.c2 *.button3.sel {
    /* Hover: light pink */
    background-color: #edd3e4;
}

/* Layout: */

*.menu table.content1, *.menu table.content2 {
    /* Tables that pop up have no border */
    border: solid 0px black;
    width:100%;
    z-index:5;
}

*.menu table.content1 th, *.menu table.content2 th {
    /* Invisible gap at top of 2nd-level menu
       and bottom of 1st and 2nd level menus */
    height: 1ex;
}

*.menu th {
    /* First layer buttons left aligned although th */
    text-align:left; 
}

table.menu, *.menu table{ 
    /* All tables cells without surprising intervening space */
    border-collapse:collapse; 
}

*.menu th.button1, *.menu td.button2, *.menu td.button3 {
    /* tell table precise width */
    width: 11em;
}

*.menu th.button1 div.l, *.menu td.button2 div.l, *.menu td.button3 div.l {
    border: 1px solid black;
    padding-left:.5em;
    padding-right:.5em;
    padding-bottom:.5ex;
    padding-top:.5ex;

    /* Width plus padding is displaywidth */
    width: 10em;
}

*.menu td.button2 div.l, *.menu td.button3 div.l {
    font-weight:normal;
}

/* Links inside buttons not underlined, no special colors */
*.menu a {
    text-decoration:none;
}

*.menu *.button1 a {
    color:white;
}

*.menu *.button2 a {
    color:black;
}

/* Buttons 4, 5 and 6 have different width and different text-align */
*.menu th.button1.c4 {
    width: 6em;
}

*.menu th.button1.c5 {
    width: 6em;
}

*.menu th.button1.c6 {
    width: 4em;
}

*.menu th.button1.c4 div.l {
    width: 6em;
}

*.menu th.button1.c5 div.l {
    width: 6em;
}

*.menu th.button1.c6 div.l {
    width: 4em;
}

/* Button 4's sub-sub-menu is wider */
*.menu th.button1.c4 table.content2 td div.l {
    width: 8em;
}

/* Button 5's children are wider than their parent and left-aligned */
*.menu th.button1.c4 td.button2 div.l {
    width: 8em;
    text-align: left;
}

/* Button 6's children are wider than their parent and left-aligned */
*.menu th.button1.c6 td.button2 div.l {
    width: 6em;
    text-align: left;
}

*.menu th.button1.c4, *.menu th.button1.c5, *.menu th.button1.c6 {
    text-align:center;
}


/* images below popups */
*.menu td.nobutton img {
    border: solid 1px white;
    /* This should be the displaywidth of button1 div.l */
    width: 11em;
}

/* force new line after button1 for ie */
*.menu th.button1 > div.inv {
    height:0px; 
    border: none 0px black; 
}