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

    background-color:#f0f0f0;
    /* Yellow line down left edge*/
    border-left: 1px solid #d5971b;
    /* Gray line down right edge*/
    border-right: 1px solid #84919b;
    /* Dark gray line along bottom edge*/
    border-bottom: 1px solid #424845;
}

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

td.heading h1 {
    margin-bottom: 0px;
}

td.heading dfn {
    margin: 0px;
    font-style: normal;
}

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.c5 table.content2 {
    left: 9em;
}

*.menu th.button1 > div, *.menu td.button2 div.rel { 
    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.c5:hover, *.menu *.button1.c5.sel, *.menu *.button1.c7:hover, *.menu *.button1.c7.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 1, 2, 3 and 4 have different width */
*.menu th.button1.c1, .menu th.button1.c2 { 
    width: 7.25em; 
}

*.menu th.button1.c3, *.menu th.button1.c4 { 
    width: 7.25em; 
}

*.menu th.button1.c1 div.l, .menu th.button1.c2 div.l { 
    width: 7.25em; 
}

*.menu th.button1.c3 div.l, *.menu th.button1.c4 div.l { 
    width: 7.25em; 
}

/* Button 1's children are wider than their parent */
*.menu th.button1.c1 td.button2 div.l {
    width: 10em;
}
*.menu th.button1.c1 table.content2 {
    left: 11em;
}

/* Button 2's children are wider than their parent */
*.menu th.button1.c2 td.button2 div.l {
    width: 10em;
}
*.menu th.button1.c2 table.content2 {
    left: 11em;
}

/* Button 3's children are wider than their parent */
*.menu th.button1.c3 td.button2 div.l {
    width: 9em;
}
*.menu th.button1.c3 table.content2 {
    left: 10em;
}

/* Button 4's children are wider than their parent */
*.menu th.button1.c4 td.button2 div.l {
    width: 9em;
}
*.menu th.button1.c4 table.content2 {
    left: 10em;
}

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

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

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

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

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

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

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

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

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

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


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

/* Show real-color images when hovering */
td.nobutton img.orig { display:none;}
td.nobutton img.fiddled { display:block;}

td.nobutton:hover img.orig { display:block;}
td.nobutton:hover img.fiddled { display:none;}

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

/* Standard footer is now flexbox */
.stdfoot { display:flex; flex-flow:row wrap; justify-content:center; _padding: .5ex 0; }
.stdfoot > * { padding:.5ex 1.5em; font-weight: bold; color: #555; }
.stdfoot a {  }
.stdfoot img { height: 6ex; padding-top: .25ex; }

@media print {
    tr.buttons1, tr.buttons1 + tr { display:none; }

    /* Remove main menu borders: they look silly in printout */
    table.menu {
	border-left: none;
	border-right: none;
	border-bottom: none;
    }

    /* Remove footline: link texts carry no information */
    .foot, .stdfoot {
	    display: none;
    }
}

/* AUDIOS */
.rail {
    width:100%;
    height:2ex; 
    position:relative; 
    border:1px solid gray; 
    margin:0px auto;
}

.fader {
    position:absolute;
    border:1px solid black; 
    background-color:#00af49; 
    height:calc(2ex - 2px); 
    width:1em; 
    left:0px;
}