body {background:rgb(255,255,255) left top no-repeat fixed ; 
     width:100%;height:100%;}

.trapezoid {
border-bottom: 1300px solid rgb(250,248,58);
border-left: 720px solid transparent;
border-right: 720px solid transparent;
height: 0px;
width: 360px;
position: absolute;
float: left;
margin-top: -60px;
margin-left: -440px;
}


h1 {font-family:"arial"; font-size:50px; font-weight:900} 
h2 {font-family:"arial"; font-size:10px; font-weight:normal}  
a {color:black}
a:hover {color:gray}      
h3 {font-family:"arial"; font-size:30px; font-weight:900}  
h4 {font-family:"arial"; font-size:22px; font-weight:900} 
h5 {font-family:"arial"; font-size:22px; font-weight:normal}



img.hoofdA {position:absolute; top:0px; left:0px;height:50px;width:400px;border:0px} /* no border around left column images */
	div#hoofdA a:hover {background:white} /* this seems to be necessary for it to work properly in IE6, I'm honestly not sure why */
	div#hoofdA a img.big {height: 0; width: 0; border-width: 0} /* hide the big image by making its height and width 0 */
	div#hoofdA a:hover img.big {position:absolute; top:-2px; left:-2px;height:54px;width:404px;border:0px;} /* make the big image appear in the same space as the frame at right when the visitor hovers over one of the image in left column */


img.hoofdtekst {position:absolute; top:0px; left:0px;height:90px;width:450px;border:0px} /* no border around left column images */
	div#hoofdtekst a:hover {background:white} /* this seems to be necessary for it to work properly in IE6, I'm honestly not sure why */
	div#hoofdtekst a img.big {height: 0; width: 0; border-width: 0} /* hide the big image by making its height and width 0 */
	div#hoofdtekst a:hover img.big {position:absolute; top:-5px; left:-5px;height:100px;width:460px;border:0px;} /* make the big image appear in the same space as the frame at right when the visitor hovers over one of the image in left column */

	
img.links {position:absolute; top:0px; left:0px;height:110px;width:110px;border:0px} /* no border around left column images */
	div#links a:hover {background:white} /* this seems to be necessary for it to work properly in IE6, I'm honestly not sure why */
	div#links a img.big {height: 0; width: 0; border-width: 0} /* hide the big image by making its height and width 0 */
	div#links a:hover img.big {position:absolute; top:-2px; left:-2px;height:124px;width:124px;border:0px;} /* make the big image appear in the same space as the frame at right when the visitor hovers over one of the image in left column */