<style type="text/css">
<!--

/* Dit zijn de instellingen voor de links. Het gedeelte tussen de <span> </span> dat 
binnen de links staat wordt niet getoond (display:none) tenzij er overheen gehovered
wordt. Deze oplossing wordt ook gebruikt in de andere blokken
*/
body {position: relative; background: paleturquoise ; font: 10px Verdana, sans-serif;
   
     } ;

div#links {position: relative; top: 121px; left: 0px; width: 166px; height: 700px; 
           font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; 
   text-align: left; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFC; background: #444;
   border-right: 5px solid #505050;}
div#links a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}

div#links a:visited {border-left: 2px inset darkslategray;} 
     
div#links a span {display: none;}
div#links a:hover span {display: block;
   position: absolute; top: 132px; left: 156px; width: 504px;
   padding: 5px; margin: 10px; z-index: 100;
   color: lightblue; background: midnightblue;
   font: 14px Verdana, sans-serif; text-align: center;}
   
/*  Dit zijn de instellingen voor de plaatjes. Let op: plaatjes hebben allemaal een
zelfde grootte.*/

div#picture {position: absolute; top: 420px; left: 0; width: 166px; height: 700px; 
   font: 16px Verdana, sans-serif; z-index: 100;}
div#picture a {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFC; background: lightsteelblue  ;
   border-right: 5px solid #505050;}
div#picture a:hover {color: #411; background: gainsboro;
   border-right: 5px double azure;}
div#picture a span {display: none;}

div#picture a img {height: 0; width: 0; border-width: 1px;}   
div#picture a:hover img {position: absolute; top: 0px; left: 170px; height: 340px; width: 420px;}   
div#picture a:hover span {display: block;
   position: absolute; top: -80px; left: 0; width: 125px; height: 44px;
   padding: 5px; margin: 10px; z-index: 100; border: 4px solid lavender;
   color: #AAA; background: black;
   font: 10px Verdana, sans-serif; text-align: center;}
   
/*  Dit zijn de instellingen voor de demo knop. De toelichting verschijnt op dezelfde plaats als de links*/   
div#demo {float: left; padding: 10px; width: 80px; height: 20px; 
    font: 16px Verdana, sans-serif; color: blue; z-index: 100;}
div#demo a {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFC; background:#AAA ;
   border-right: 0px solid #505050; border-left: 0px solid #505050; border-top: 0px black ; border-bottom: 0px double white;}
div#demo a:hover {color: #411; background: #444;
   border-top: 0px solid black; border-right: 5px solid #505050; border-bottom: 0px black}

div#demo a span {display: none;}
div#demo a:hover span {display: block;
   position: absolute; top: 340px; left: -170px; width: 125px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: black;
   font: 10px Verdana, sans-serif; text-align: center;}  

/*  Dit zijn de instellingen voor de vensters. Let op: deze verschijnen over de tekst heen. Om te voorkomen dat de andere teksten 
over of achter de knoppen verdwijnen in Mozilla browsers, heb ik een float toegevoegd. */

div#windows {float: left; padding-right: 10px; width: 120px; height: 120px;  font: 16px Verdana, sans-serif; z-index: 100;}
div#windows a {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFC; background:#AAA ;
   border-right: 0px solid #505050; border-left: 0px solid #505050; border-top: 0px black ; border-bottom: 0px double white;}
div#windows a:hover {color: #411; background: darkslategray;height: 20px;
   border-top: 0px solid black; border-left: 0px solid #505050; border-bottom: 0px black}

div#windows a span {display: none;}
div#windows a:hover span {display: block;
   position: relative; top:-40px ;left: 180px; width: 360px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: green;
   font: 12px Verdana, sans-serif; text-align: left;}       

div#content {position: absolute; top: 26px; left: 161px; right: 25px;
   color: lightgoldenrodyellow; background: darkslategray ; 
   font: 13px Verdana, sans-serif; padding: 10px;
   border: solid 5px #444;}
div#content p {margin: 0 1em 1em;}
div#content h3 {margin-bottom: 0.25em;}

div#background {position: absolute; top: 540px ; left:340px }

div#bottom {position: absolute ; top: 880px; left: -5px; right: 25px; width:685px;
   color: #BAA; background: #22232F; 
   font: 13px Verdana, sans-serif; padding: 10px; 
   border: solid 5px #444;}

div#attention {color:orange; text-align:right}

div#song {color:skyblue ; font: bold; padding: 15px; text-align: center}

h1 {margin: -9px -9px 0.5em; padding: 15px 0 5px; text-align: right; 
	background: white;
	background-image: url('bestanden/evaluatie3.jpg'); background-repeat: no-repeat;
	  ; color: #667; letter-spacing: 0.5em; text-transform: lowercase; font: bold 25px sans-serif; height: 110px; vertical-align: middle; white-space: nowrap;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {color: white;}
div#content a:visited {color: #BBC;}
div#content a:link:hover {color: #FF0;}
div#content a:visited:hover {color: #CC0;}
code, pre {color: #EDC; font: 110% monospace;}

table.sample {
	border-width: 2px 2px 2px 2px;
	border-spacing: 5px 5px;
	border-style: none none none none;
	border-color: gray gray gray gray;
	border-collapse: separate;
	background-color: none;
}
table.sample td {
	border-width: 1px 1px 1px 1px;
	padding: 5px 5px 5px 5px;
	border-style: outset outset outset outset;
	border-color: blue blue blue blue;
	background-color: none;
	-moz-border-radius: 9px 9px 9px 9px;
}
table.sample th {
	border-width: 1px 1px 1px 1px;
	padding: 5px 5px 5px 5px;
	border-style: outset outset outset outset;
	border-color: blue blue blue blue;
	background-color: none;
	-moz-border-radius: 9px 9px 9px 9px;
}

UL { padding: 10px; list-style-type: disc; }

UL UL { list-style-image: circle; }
</style>

