@media screen and (min-width: 601px) {
    #Nav {position: absolute; top: 0; bottom: 0; left: 0; width: 230px; /* The width of the navigation frame */ height: 100%;
          font-size: 12px}
    main {position: fixed; left: 230px; /* The width of the navigation frame */ top: 0; right: 0; bottom: 0;}
}
@media screen and (max-width: 600px) {
    #Nav {position: static; width: 100%}
    #Balk {font-size: 5vw} # Dit werkt niet behoorlijk - de schaling loopt niet gelijk met die van de viewport.
}

#Nav    {overflow: visible; /* "hidden" disables, "scroll" enables, scrollbars on the navigation frame, "auto" lets the browser decide. */
         font: bold 12px verdana, helvetica, sans-serif; background-color: blue;}
#Nav *  {margin: 0px; border: 0px; padding: 0px; list-style-type: none;}
#Nav > * {margin-top: 10px}
#Nav a  {color: aqua; text-decoration: none}
#Nav a:hover {text-decoration: underline}
#Nav .hier > a {color: silver}
#Nav #Hier {color: white} /* Kan meermaals voorkomen, bijvoorbeeld als een Tab zelf, of een blad uit de drop-down, in focus is. */

#Balk      {text-align: center}
#Balk > li {background-color: ThreeDFace; display: inline-block; border: ButtonShadow 3px outset}
#Balk > li > a {color: black; font-weight: bold}
/* #Balk > li > a:before, #Balk > li > a:after {content: ' '} /* Werkt niet: moet &nbsp; zijn. */

#Tabs {text-align: center} /* Waarom werkt dit wel, maar hetzelfde met #Tabs niet? */
#Tabs > li {display: inline-block}
/* Tabjes bouwen..  Dit is verrassend moeilijk.
#Tabs > li {background-color: aqua; box-shadow: 0 3px/* background-origin: content-box; border: aqua solid; border-width: 0px 1px * /}
#Tabs > li.hier {background-color: #BBBBFF; /*border-width: 2px 2px 1px 0px; * / transform: translate(-2px, 2px); box-shadow: 3px -3px}
#Tabs > li > a {color: blue}
#Tabs > li > a.hier {color: aqua} */

#Tabs > li > a:hover {background-color: gray}
#Tabs > li > ul {position: absolute; text-align: left; padding: 5px 5px 0px 5px; background-color: aqua;
                 box-shadow: 6px 6px 6px 6px rgba(0,0,0,0.5); z-index: 1; display: none;}
#Tabs > li:hover > ul {display: block}
#Tabs > li > ul > li:hover {text-decoration: underline}
#Tabs > li > ul > li > a {color: blue} /* #nav is nodig omdat eerder de kleur voor #nav gezet is. */

#Nav h1 {font-weight: bold; font-size: 20px; text-align: center;}

p#Lijst {color: white} /* Zou niet voor moeten komen, maar ik heb het wel gezien.. */
#Lijst li {margin-left: 10px} /* De inspringing voor ieder niveau */
#Lijst > li {margin-left: 5px} /* De kantlijn */
#Lijst > li > ul > li {font-style: italic;}
#Lijst > li > ul > li > ul > li {font-weight: normal;}
#Lijst > li > ul > li > ul > li > ul > li {font-style: italic;}
#Lijst > li > ul > li > ul > li > ul > li > ul > li {font-style: normal;}
#Lijst > li > ul > li > ul > li > ul > li > ul > li > ul > li {font-style: italic;}
#Lijst > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {font-style: normal;}
#Lijst > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li li {font-style: italic;}
/* Enzovoort - maar dat kun je helaas niet zeggen in een CSS :-( */

body     {/* padding: 0; */ margin: 0; /* border: 0 */}
main     {overflow: auto; background-color: rgb(200,220,255); color: blue; text-align: justify; font-family: serif;}
main > * {margin-left: 10px; margin-right: 10px;}
main h1  {font: 150% bold italic}    /* Percentages moeten eerst - 'cursive' levert soms script op */
main h1:first-letter {text-transform: capitalize}
main dt  {font-family: sans-serif; font: bold;}
main .register   {color: maroon; text-decoration: none}
main dfn {color: red}
main thead   {text-align: center; font-weight: bold;}
mail .naslag dd {font: italic}

:target {background-color: gray}

/*IE6 fix*/
* html body{padding: 0 0 0 230px;} /* Set the last value to the width of the navigation frame */
* html main{height: 100%; width: 100%}