/* --- Basis-Body-instellingen --- */ 

BODY    {
        /* Font en regel instellingen overgenomen van de standaard P (10-09-2017): */
        color: black;
        font-family: Verdana, Arial, Helvetica;
        font-size: 10pt;
        text-decoration: none;
        line-height: 13pt;
        font-style: normal; /* Alternatief:oblique; */
        /* font-weight: bold; */ /* Alternatief: bolder; */
        /* text-shadow: 5px 5px 5px #FF0000; */
        /* Einde font en regel instellingen overgenomen van de standaard P (10-09-2017): */

        /*
        SCROLLBAR-FACE-COLOR: white; 
        SCROLLBAR-HIGHLIGHT-COLOR: black; 
        SCROLLBAR-SHADOW-COLOR: gray; 
        SCROLLBAR-ARROW-COLOR: black; 
        SCROLLBAR-TRACK-COLOR: gray; 
        SCROLLBAR-DARKSHADOW-COLOR: black;
        */

        /* background: black; */
        /* Zorgt ervoor dat met een basis-achtergrondkleur zwart wordt geladen.
           Het kan daarna enige tijd duren voor de background-image (zie hieronder) 
           wordt toegepast.
           Gezien het verstorende visuele effect dat met deze vertraging optreedt,
           is een basiskleur wit meer wenselijk. Wit geeft een rustiger,
           minder verstorend beeld tijdens het laden.
           Wit is de defaultwaarde en hoef je dus niet te definieren. */

        background-image: url("Media Site/Background/Background Light Blue.bmp");
        /* background-image: url("Media Site/Background/Background_orange_dark.gif");
           De standaard background van HermansHome. Uitgeschakeld 19-01-2017. */

        /* Je kunt beide combineren middels:
           background: black url("Media Site/Background/Background_orange_dark.gif"); */

        /* Opacity-issue:
    
           opacity: 0.5;
           filter: alpha(opacity=50); <-- IE8 and earlier

           Op de hele BODY binnen de accolades 'opacity: 0.5;' plaatsen
           leidt ertoe dat ook het wit op de voorgrond zacht licht blauw wordt getint.
           Er bestaat nog niet zoiets als een 'background-opacity' instelling 
           waarmee je DIVs niet ook meteen hetzelfde ondergaan.
           Eigenlijk is er dus in wezen sprake van forground-opacity. 
           Ook 'opacity: 0.5' of varianten daarvan inlassen bij de url()-toewijzing
           geeft niet het gewenste effect.
           
           Je moet opacity niet toepassen met een url()-toewijzing zoals hierboven, 
           maar je kunt het goed toepassen op de DIVs die de achtergrond moeten vormen.
           Dan moet je wel per achtergrond-DIV de background-image instellen, met opacity,
           in plaats van dit op BODY-niveau in de CSS te regelen.
           Voorlopig nog even maar niet aan beginnen.

           Je kunt natuurlijk ook nog altijd met een tool een verlichte versie
           van de huidige background-image bakken.
        */

        background-attachment: fixed;
        /* The background will not scroll with the content of the page. */
        /* background-repeat: no-repeat; */

        padding-left: 15px;
        padding-right: 20px;
        padding-top: 9px;
        padding-bottom: 20px;
        }

BODY.custom_white
        {
        background: white;
        /* Zo laten. Geeft het content_frame de witte achtergrond,
           ook in de print-preview modus. */
        background-attachment: fixed;
        /* font-size: 9pt; */
        /* font-family: Verdana, Arial, Helvetica; */
        /* color: black; */
        background-color: white;
        }

/* ----------------------------------------------------------------------------
   DIV-elementen (die in wezen Frames vervangen)
   ---------------------------------------------------------------------------- */

/* ---- Header Frame, t.b.v. het ZwevendePijl- en HermsHome-logo ---- */

        /* -- De header frameset bevatte voorheen drie frames: left, middle, right -- */

        .header_frame
        {
        background-color: #000000; /* Zwart */
        color: #FFFFFF; /* Wit */
        height: 54px; /* Exacte instelling, gelijk aan de hoogte van de images */
        padding-left: 15px;
        padding-right: 15px;
        /* Het lichtjes afronden van de hoeken hieronder lukt alleen door het gebruik van padding.
           De onderstaande border-instellingen halen zonder padding zoals hierboven ingesteld niets uit.
           Nog uitzoeken wat je daaraan kunt doen. */
        /* border-radius: 5px; alle vier de hoeken afgerond */
        border-top-left-radius: 1em; /* alleen de linkerbovenhoek geboogd */
        border-bottom-left-radius: 1em; /* alleen de linkeronderhoek geboogd */
        border-top-right-radius: 1em; /* alleen de rechterbovenhoek geboogd */
        border-bottom-right-radius: 1em; /* alleen de rechteronderhoekhoek geboogd */

   /* position: fixed; */
   /* Hiermee blijft de header altijd op dezelfde plaats, ook bij verticaal scrollen. 
      Maar deze instelling van de header-strook (en header_underline) leidt tot
      de volgende vervelende bijwerkingen:
      - De header neemt niet meer de volledige breedte in, maar de minimaal benodigde.
        width: 100%; instellen (of bijv. 95%) is geen optie (uitgetest),
        en hard de (min/max-)width instellen al helemaal niet.
      - het menu_frame en content_frame nemen nu ineens y=0 als verticale startpositie in.
        Dit zou je mogelijk kunnen verhelpen door voor die frames padding-top
        te verhogen met de hoogte van de header (en header_underline).
      Vervolgpoging om de header-sectie 'fixed' op zijn plaats te houden:
      Zit de truck hem erin om de header (en header_underline) uit de site_container
      te halen en daar separaat boven te plaatsen?
      Deze wijziging is intussen doorgevoerd, en deze wijziging functioneert geheel naar wens.
      De header-sectie gedraagt zich zoals voorafgaand aan deze wijziging.
      Maar schakel je 'position: fixed;' nu weer in, dan gaat het evengoed weer mis zoals
      hierboven geschetst.
   */
        }

/* ---- Header Underline, i.c. een kleine verticale opvulling ---- */

        .header_underline_frame
        {
        /* background-color: black url('Media Site/Background/Background_orange_dark.gif');
           background-attachment: fixed; 
           Overbodig. De BODY-background volstaat. */
        height: 18px; /* Exacte instelling, gezien het gebrek aan tekst-invulling */
        clear: both;
        text-align: center; /* Centreren horizontaal */

   /* position: fixed; */
   /* Zie hierboven bij de header_frame. */
        }

/* ---- Site Container, alle overige DIV-frames omsluitend ---- */

        .site_container
        {

        /* Zo min mogelijk specificeren voor deze container.
           Het is alleen een container met lege ruimte, te vullen met de andere containers. */

        /* Dus ook geen background-color gebruiken.
           Eveneens niet toepassen:
           width: 650px;
           vgl. menu: 220 en content: 400 */
        }

/* ---- Het Menu Frame, ter linkerzijde ---- */

        /* Het Menu Frame omvat in wezen het gehele linker frame.
           Dit frame bevat 3 elementen onder elkaar:
           - menu_frame_header - koptekst
           - menu_frame - de links met de tooltips
           - menu_frame_footer - voettekst */

        .menu_frame
        {
        /* background-color: black url('Media Site/Background/Background_orange_dark.gif');
           background-attachment: fixed;
           Overbodig. De BODY-background volstaat. */
        width: 220px;
        /* height: 200px; */
        min-height: 450;
        /* max-height: 605; */
        float: left;
        padding-left: 12px; /* 0px; */
        padding-top: 0px; /* 5px; */
        /* border-radius: 10px; - alle vier de hoeken afgerond */
        /* border-bottom-right-radius: 2em; - alleen de rechteronderhoek geboogd */

   position: fixed;
   /* Instellen op 'fixed' resulteert erin dat het menu_frame verticaal meebeweegt,
      in het geval van lange pagina-content, zoals met de Portal Page.
      Deze instelling leidt er helaas toe, dat het content_frame niet meer netjes
      naast het menu_frame komt te staan, maar x-positie 0 inneemt.
      Hierdoor moet ik bij het content_frame nu helaas een harde x-positie instellen
      (menu_frame.width (220px) + menu_frame.padding-left (12px).
      Zie verder onderaan de instellingen voor het content_frame.
   */
        }

        /* -- De links in het Menu Frame t.b.v. invulling van de content ter rechterzijde van het scherm -- */

        .menu_option
        {
        display: block; 
        background-color: #000000; /* Zwart */ 
        color: #FFFFFF; /* Wit */
        font-family: Verdana, Arial, Helvetica;
        font-size: 10pt;
        text-decoration: none;
        line-height: 13pt;
        /* float: left; */
        padding-left: 35px;
        /* padding-right: 5px; */
        padding-right: -455px;
        /* Vanwaar deze zo negatieve instelling? */
        padding-top: 10px;
        padding-bottom: 10px;
        border: solid #FFFFFF 3px;
        /* Voorlopig maar op 2px ingesteld, maar 2px levert helaas
           een extra witscheiding op t.o.v. onderliggende items. */
        /* Haalt niets meer uit:
           border-top: 0 px; - Let op: zonder spatie tussen 2 en px lukt dit niet.
           border-left: 3 px; - Let op: zonder spatie tussen 3 en px lukt dit niet.
           border-right: 3 px; - Let op: zonder spatie tussen 3 en px lukt dit niet.
        */
        border-bottom: 0px;
        /* Voorlopig maar zo laten staan. Het e.e.a. levert een mooi afgerond effect op. */
        border-radius: 20px; /* Wijzigen kan tot op zekere hoogte. */
        box-shadow: 2px 3px 5px #000000; /* #0E0E0E */
        cursor: hand;
        }

        /* -- De tooltip die binnen het Menu Frame aan een van de menu_options is gekoppeld -- */

        .menu_tooltip
        {
        position: absolute;
        /* De waarde 'absolute' zorgt ervoor dat de rest van de tekst niet verspringt,
           door het al-dan-niet tonen van de tooltip. */
        margin-left: 200px; /* Horizontaal en verticaal inspringen t.o.v. het item dat de tooltip genereert. */
        margin-top: -30px;
        width: 250px;
        height: 70px;
        display: none;
        z-index: 5; /* Middelhoog instellen; de Menu Tooltip hoort wat volgorde thuis tussen 
                       de basis en het Popup Menu, dat z-index 10 heeft. */
        /* left: -1000px; */
        /* top: -1000px; */
        background-color: #DDEEEE;    /* Licht Grijs-blauw achtig. */
        /* background-color: #EEEEEE;    Vrij zacht lichtgrijs. */
        color: #272727;
        font-family: Verdana, Arial, Helvetica;
        font-size: 10pt;
        text-decoration: none;
        line-height: 13pt;
        border: 2px solid black; /* Zwart. */
        /* border: 2px solid #DD0000; donkerrood-tint - niet doen; pakt niet goed uit. */
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 10px; /* alle vier de hoeken afgerond */
        /* border-top-left-radius: 2em; */
        }

/* ---- De tekst-container, ter rechterzijde ---- */

        .content_frame
        {
        background-color: #FFFFFF; /* Wit */
        color: black;
        font-family: Verdana, Arial, Helvetica;
        font-size: 10pt;
        text-decoration: none;
        line-height: 13pt;
        /* width: 400px; */
        /* min-width: 400px;
           Voorlopig niet activeren. Deze instelling leidt ertoe
           dat bij teveel versmallen van het window m.b.v. de muis
           het content_frame linksonder het menu wordt geplaatst.
           Dit is op zich een mooie uitwijkoptie, maar ze werkt
           nog niet naar wens voor alle pagina's (Portal).
        */
        float: none; /* nodig om de resterende breedte geheel in te nemen */
        /* height: 400px; */
        min-height: 435;
        /* max-height: 600; */
        padding-left: 35px;
        padding-right: 30px;
        padding-top: 25px;
        padding-bottom: 15px;
        /* border-radius: 10px; alle vier de hoeken afgerond */
        border-top-left-radius: 2em; /* alleen de linkerbovenhoek geboogd */
        border-bottom-left-radius: 2em; /* alleen de linkeronderhoek geboogd */
        border-top-right-radius: 2em; /* alleen de rechterbovenhoek geboogd */
        border-bottom-right-radius: 2em; /* alleen de rechteronderhoekhoek geboogd */
        overflow-y: auto; /* scrollbar niet zichtbaar indien niet nodig */

   margin-left: 232px;
   /* Ingesteld op: width (220px) + menu_frame.padding-left (12px).
      Dit is een noodgreep. menu_frame.position op 'fixed' instellen
      zorgt er zomaar voor dat het content_frame naar x-positie 0 terugspringt.
      Er moet een andere optie mogelijk zijn om het content_frame in place te houden
      zonder een harde linkermarge te hoeven instellen.
   */
        }

        /* Probleem: overflow-y auto werkt wel, maar over de gehele hoogte van de alomvattende DIV-container,
           dus NIET alleen t.b.v. het Content Frame. */
        /* JE MOET VERMOEDELIJK EEN APARTE DIV VOOR DE EIGENLIJKE SCROLLBAR AANMAKEN !!
           ZIE DE UITGEPRINTE DOCUMENTATIE !! */

/* ---- Footer Frame, onderaan, over de gehele breedte ---- */

        /* footer_frame vooralsnog bij voorkeur niet met tekst gebruiken.
           Dit frame dient in wezen alleen t.b.v. verticale opvulling.
           De Copyright-melding e.d. horen thuis onderaan in het Menu Frame. */

        .footer_frame
        {
        /* background: black url('Media Site/Background/Background_orange_dark.gif');
           background-attachment: fixed;
           Overbodig. De BODY-background volstaat. */
        /* clear: both; */
        text-align: center; /* Centreren horizontaal */
        /* height: 30px; */
        /* Hoe stel ik de hoogte op maximaal doortrekken naar beneden in?
           NB, geen hoogte opgeven resulteert bij dit frame in complete leegte. */
        padding: 0px;
        }

/* ---- Het Popup Menu, dat je met klikken op de pagina kunt activeren / verbergen ---- */

        .popup_menu_div
        {
        position: absolute;
        /* De waarde 'absolute' zorgt ervoor dat de rest van de tekst niet verspringt,
           door het al-dan-niet tonen van het Popup Menu. */
        /* Overeenkomstig de oude CSS:
        top: -1000px;
        left: -1000px; */
        /* Overeenkomstig de oude CSS: */
        
        align: center;
        /* align is kennelijk niet juist. Wordt met Brackets rood weergegeven. */

        visibility: visible;
        /* Van de tooltip weggelaten, horizontaal en verticaal inspringen:
           margin-left: 180px;
           margin-top: 7px; */
        /* Van de tooltip voorlopig overnemen, maar dan met 'min-'optie: */
           min-width: 100px;
           min-height: 70px;
        /* Overeenkomstig de tooltip toegevoegd: */
        display: none;
        z-index: 10; /* Hoog instellen; het Popup Menu hoort 'on top' te verschijnen. */
        /* Uit de oude CSS weggelaten:
           background: black; */
        /* Overeenkomstig de tooltip toegevoegd: */
        background-color: #FFFFFF; /* Wit */
        color: #272727;
        font-family: Verdana, Arial, Helvetica;
        font-size: 10pt;
        text-decoration: none;
        line-height: 13pt;
        border: 5px solid black;
        padding-left: 10px;
        padding-right: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 10px; /* alle vier de hoeken afgerond */
        /* border-top-left-radius: 2em; */
        }

/* ------------------------------
   Algemene tekstopmaak-elementen
   ------------------------------ */

/* ---- Paragraph-instellingen tegen de basisachtergrond (licht blauw of wit) ---- */

P       {
        color: black;
        font-family: Verdana, Arial, Helvetica;
        font-size: 10pt;
        text-decoration: none;
        line-height: 13pt;
        font-style: normal; /* Alternatief:oblique; */
        /* font-weight: bold; */ /* Alternatief: bolder; */
        /* text-shadow: 5px 5px 5px #FF0000; */
        }

/* De volgende P-properties halen niets uit...
   text-align: left;
   text-indent: 0em;
   border: solid transparent 5px; -- shortliner, handig voor basisinstellingen
   border-style: solid;
   border-color: transparent;
   border-width: 30px;
   border-top: 0px;
   border-bottom: 0px;
   border-left: 30px;
   border-right: 0px;
*/

P.standard_paragraph
        {
        /* Kanttekening: de standard_paragraph vooralsnog bij voorkeur geheel gelijkhouden aan de basis-P. */
        }

P.standard_paragraph_blue
        {
        color: #28558C; /* blauwtint */
        }

P.standard_paragraph_red
        {
        color: #DD0000; /* donkerrood-tint */
        }

P.standard_paragraph_green
        {
        color: #44AA44;   /* -- groentint */
        /* color: #99CCA0;   -- groen, zacht en licht getint */
        /* color: darkgreen; -- een wat smerige tint (donker)groen */
        /* color: #00C8A0;   -- mooie kleur licht-groenblauw */
        }

P.standard_paragraph_blue_bold
        {
        color: #28558C; /* blauwtint */
        font-weight: bold;
        }

P.small_paragraph_blue
        {
        color: #28558C; /* blauwtint */
        /* font-family: Verdana, Arial, Helvetica; */
        font-size: 9pt;
        line-height: 11pt;
        }

P.subscription_paragraph_blue
        {
        color: #28558C; /* blauwtint */
        /* font-family: Verdana, Arial, Helvetica; */
        font-size: 8pt;
        line-height: 10pt;
        padding-bottom: 6px;
        }

P.subscription_paragraph_gray
        {
        color: gray; /* standaard grijs */
        /* font-family: Verdana, Arial, Helvetica; */
        font-size: 8pt;
        line-height: 10pt;
        padding-bottom: 6px;
        }

P.subscription_paragraph_green
        {
        color: #44AA44;    /* groentint */
        /* color: #772244;    paarstint */
        /* font-family: Verdana, Arial, Helvetica; */
        font-size: 8pt;
        line-height: 10pt;
        padding-bottom: 6px;
        }

/* De volgende class wordt gebruikt voor het copyright-onderschrift in het linkermenu. */

P.menu_copyright_paragraph
        {
        /* color: #DD0000; donkerrood-tint */
        font-size: 9pt;
        /* font-style: oblique; */
        text-shadow: 1px 1px 1px #FFFFFF; /* witte schaduw */
        }

/* De volgende class wordt desgewenst gebruikt voor de blauwe headers van pagina's. */

P.large_header_paragraph_blue_on_white
        {
        /* font-family: Verdana, Arial, Helvetica; */
        font-size: 16pt;
        letter-spacing: 1pt;
        line-height: 19pt;
        color: #28558C; /* blauwtint */
        font-weight: bold;
        }

/* Voor koptitels van paragrafen worden de volgende twee classes gebruikt,
   een blauwe en een rode, die afgezien van de kleur geheel identiek zijn. */

P.normal_header_paragraph_blue_on_white
        {
        /* font-family: Verdana, Arial, Helvetica; */
        /* font-size: 10pt; */
        /* letter-spacing: 1pt; */
        line-height: 13pt;
        color: #28558C; /* blauwtint */
        font-weight: bold;
        padding-top: 6px;
        padding-bottom: 4px;
        }

P.normal_header_paragraph_red_on_white
        {
        /* font-family: Verdana, Arial, Helvetica; */
        /* font-size: 10pt; */
        /* letter-spacing: 1pt; */
        line-height: 13pt;
        color: #DD0000; /* donkerrood-tint */
        font-weight: bold;
        padding-top: 6px;
        padding-bottom: 4px;
        }

/* Paragraph-instellingen voor bij de cartoons */

P.cartoon_title_paragraph
        {
        color: #28558C; /* blauwtint */
        /* font-family: Verdana, Arial, Helvetica; */
        font-size: 12pt;
        line-height: 13pt;
        }

P.cartoon_item_paragraph
        {
        /* color: black; */
        /* font-family: Verdana, Arial, Helvetica; */
        font-size: 10pt;
        line-height: 12pt;
        }

P.cartoon_old_item_paragraph
        {
        /* color: black; */
        /* font-family: Verdana, Arial, Helvetica; */
        font-size: 9pt;
        line-height: 14pt;
        }

/* --- Basis link-instellingen --- */ 

A       {
        border-width: 0px;
        color: #DD0000; /* donkerrood-tint */
        text-decoration: none;
        /* font-weight: bold;
           Als je alle links bold wilt hebben, moet je dat hier instellen, niet onder A.standard_link.
           Dat werkt niet.
           Ik heb ervoor gekozen om bold/normal handmatig in te stellen, per specifieke link. */
        }

A:link  {
        }

A:visited
        {
        }

A:active
        {
        }

A:hover {
        cursor: hand;
        text-shadow: 2px 2px 2px #cfcfcf;
        }

/* --- Links voor op witte achtergrond (Content Frame) --- */ 

A.standard_link:link
        {
        }

A.standard_link:visited
        {
        }

A.standard_link:active
        {
        }

A.standard_link:hover
        {
        text-decoration: underline;
        text-shadow: 2px 2px 2px #cfcfcf;
        }

/* --- Alternative Text Types --- */

PRE.standard_paragraph_poem
        {
        color: black;
        font-family: Verdana, Arial, Helvetica;
        text-decoration: none;
        /* Kun je de bovenstaande toewijzingen weglaten? */
        font-size: 9pt;
        line-height: 13pt;
        /* Make the PRE text word-wrap instead of printing out one long line: */
           white-space: pre-wrap;       /* CSS 3 */
           white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
           white-space: -pre-wrap;      /* Opera 4-6 */
           white-space: -o-pre-wrap;    /* Opera 7 */
           word-wrap: break-word;       /* Internet Explorer 5.5+ */
        /* Ook uitgetest: */
           /* white-space: normal; */ /* Werkt aardig, maar de tekst blijft een bepaalde vaste breedte houden. */
           /* word-break: keep-all; */ /* Haalt niets uit. */
        word-wrap: keep-all; /* Doet in elk geval geen kwaad; break-word wel. */
        }

/* --- Images --- */ 

IMG.standard_image
        {
        border-width: 0px;
        border-color: white;
        }

/* --- IFRAME instellingen --- */

IFRAME {
       border: 0px solid white;
       overflow: hidden; /* Wat haalt deze instelling uit? */
       padding-left: 0px;
       padding-right: 0px;
       padding-top: 0px;
       padding-bottom: 0px;
       background-color: #FFFFFF; /* Wit */
       /* Instellingen die je eigenlijk niet expliciet wilt maken: breedte en hoogte.
          Je zult deze waarden per afzonderlijk IFRAME tekst-item m.b.v. style moeten overschrijven. */
       /* min-width: 400px; */ /* Werkt op zich wel. */
       /* min-height: 380px; */ /* Werkt op zich wel. */
       }

/* --- DE NIEUWE SCHUIFBALK - OPLOSSING MET INPUT-type Range (EN OUTPUT_ID),
       ALS ALTERNATIEF VOOR DE OUDE OPLOSSING MET EEN HR EN EEN DIV: */

INPUT[type='range'] {
        -webkit-appearance: none;
        border-radius: 5px;
        box-shadow: inset 0 0 5px #333;
        background-color: #EEEEEE; /* Vrij zacht licht-blauwgrijs. */
        /* background-color: #EEFFFF; Heel licht-blauw */
        /* filter: alpha(opacity=50); */
           /* Haalt niets uit, waarschijnlijk omdat dit voor IE 8 en ouder is */
        height: 10px;
        vertical-align: middle;
        }

INPUT[type='range']::-moz-range-track {
        -moz-appearance: none;
        border-radius: 5px;
        box-shadow: inset 0 0 5px #333;
        background-color: #EEEEEE; /* Vrij zacht licht-blauwgrijs. */
        /* background-color: #EEFFFF; Heel licht-blauw */
        /* filter: alpha(opacity=50); */
           /* Haalt niets uit, waarschijnlijk omdat dit voor IE 8 en ouder is */
        height: 10px;
        }

INPUT[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        border-radius: 20px;
        background-color: #FFF;
        box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
        /* border: 1px solid #999; */
        height: 20px;
        width: 20px;
        }

INPUT[type='range']::-moz-range-thumb {
        -moz-appearance: none;
        border-radius: 20px;
        background-color: #FFF;
        box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
        /* border: 1px solid #999; */
        height: 20px;
        width: 20px;
        }

INPUT:focus {
        background-color: lightyellow;
        /* De inputs die bewerking kunnen ondergaan, krijgen hierdoor een lichtgele achtergrond
           zodra ze de focus krijgen (en verliezen die weer zodra ze de focus verliezen).
        */
        }

/* --- Algemene CSS-tips en -hints --- */

/* color: rgb(120,150,180);
   rgb is een alternatieve vorm van color instellen. Bij voorkeur niet meer gebruiken. */