/* De div die vrijwel de hele inhoud bevat krijgt een id "page" waarvan hier de eigenschappen vastgelegd worden:
 * 900 pixels breed, boven en onder 5 pixels marge; links en rechts automatische marges ==> gecentreerd
 * een afbeelding op de achtergrond die alleen rechtsboven geplaats wordt en een rand van 2 pixels */
#page {width: 900px; margin: 5px auto; background-image: url(../images/bomenweg.jpg); background-repeat: no-repeat; background-position: right top; border-width: 2px; border-style: solid}

/* De div met id "kop" heeft de andere afbeelding als achtergrond linksboven, is 129 pixels hoog en net zo breed
 * als de div waar hij in zit (i.e. de "page") een kleine marge aan de onderkant, boven het menu*/
#kop {height: 129px; width: 100%; background-image: url(../images/image002.jpg); background-position: left top; background-repeat: no-repeat; margin-bottom: 3px}

/* Het object met als id "logo" zit in "kop" en wordt ten opzichte van de 'standaard'positionering verschoven
 * In dit geval zou de 'standaard'positie linksboven zijn omdat "kop" verder leeg is */
#logo {position: relative; left: 325px; top: 50px; width: 400px}

/* De div "menu" is ook net zo breed als "page" en de text is gecentreerd. Link (<a>) in het menu worden niet
 * onderlijnd en hebben links en rechts een marge van 9 pixels. Als de muis boven een link beweegt, wordt
 * die wel onderlijnd. Om niet actiev menu-items op dezelfde manier op te maken als links worden die in een span
 * geplaatst en een span binnen "menu" heeft ook links en rechts een marge van 9 pixels.*/
#menu {width: 100%; text-align:center}
#menu a {text-decoration: none; margin: 0 9px}
#menu a:hover {text-decoration: underline}
#menu span {margin: 0 9px}

/* De div met id "content" bevat alle variërende inhoud. Het ROE logo wordt als achtergrond gebruikt zodat
 * het niet op elke pagina gespecificeerd hoeft te worden. Er is aan alle kanten een rand van 5 pixels rondom de
 * inhoud behalve rechts, daar is de rand 280 pixels zodat de afbeelding niet verdekt wordt. Alle tekst
 * is rechts uitgelijnd. Bedoelde div kent twee classes, "centered" wordt op vrijwel alle pagina's gebruikt;
 * hierbij staat de afbeelding op halve hoogte van de div. "fixed" wordt gebruikt in certlist.html om er voor
 * te zorgen dat de afbeelding niet op en neer schommelt als de hoogte van de div verandert.*/
#content {background-image: url(../images/roe.png); background-repeat: no-repeat; padding: 5px; padding-right: 280px; text-align: right}
.centered {background-position: 96% 50%}
.fixed {background-position: 96% 300px}

/* Alle ul worden zonder 'tick' weergegeven en hebben een bovenmarge van 10 pixels */
ul {list-style: none; margin-top: 10px}

/* Geen randen om afbeeldingen */
img {border: 0}

/* Een afbeelding die op het eerste niveau in "content" zit schuift naar de linker kant en heeft een
 * marge van 12 pixels */
#content>img {float: left; margin: 12px}

/* Een afbeelding die in een ol in "content" zit schuift ook naar links en heeft een marge van 15 pixels*/
#content ol img {float: left; margin: 15px}

/* Een div met class "image-with-caption" schuift zo ver mogelijk naar links, heeft een marge van 10 pixels
 * en de tekst binnen de div (de caption dus) is gecentreerd. De afbeelding in de div heeft een marge van 9 pixels.*/
.image-with-caption {margin-top: 10px; text-align: center; float: left}
.image-with-caption img {margin: 9px}

/* Om er voor te zorgen dat de lengte van "content" past bij wat we er in zetten moet na element met een
 * float: specificatie nog een element met class "new-line" volgen */
.new-line {clear: both;}

/* De lijst in certlist.html is opgebouwd uit spans (zodat de javascript elke naam als entiteit behandelt) met
 * een class "tag". Die zorgt voor voldoende marge (15 pixels) en voorkomt het afbreken van namen met spaties.*/
.tag {margin-left: 15px; white-space: nowrap}

/* Er zijn een aantal tabellen met class "schedule". Die schuiven helemaal naar rechts; als er nog plaats
 * zou zijn naast een ander float: right element dan komt de tabel daaronder. Elke cel in een "schedule"
 * heeft 10 pixels ruimte aan de linker kant*/
.schedule {clear: right; float: right; margin-top: 15px}
.schedule td {padding-left: 10px}

/* De inputs houden onderling wat afstand en ook afstand van de tekst ervoor */
input {margin-top: 3px; margin-left: 6px}

/*De div met id "voet" wordt onderaan geplaatst; de bottom: 0 werkt alleen als er een position: specificatie is.
 * Tekst wordt gecentreerd en aan de onderkant is er wat opvulling. Links in de voet worden niet onderlijnd;
 * tenzij de muis eroverheen beweegt, hun marge is 6 pixels links en rechts. Alle afbeeldigen in "voet" zijn
 * 13 pixels hoog; de breedt wordt naar proportie bepaald.*/
#voet {position: relative; bottom: 0; text-align: center; padding-bottom: 3px}
#voet a {text-decoration: none; margin: 0 6px}
#voet a:hover {text-decoration: underline}
#voet img {height: 13px}

/* De span "flags" wordt links geplaats en de span "sig" rechts (2 pixels van de rand) */
#flags {position: absolute; left: 0}
#sig {position: absolute; right: 2px}

/* De div "ps" komt na de "page" en is dus net zo breed als de browser toelaat. De tekst is gecentreerd
 * en de links worden bij het aanwijzen onderlijnd */
#ps {width: 100%; text-align: center}
#ps a {text-decoration: none}
#ps a:hover {text-decoration: underline}