html {
height:100%; 
max-height:100%;  
padding:0; 
margin:0; 
border:0; 
font-size:100%; 
font-family: trebuchet ms, tahoma, verdana, arial, sans-serif; 
color: white;
background:#666 url(clown.jpg) -18px 0 no-repeat; 
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */ }

body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {display:block; height:100%; max-height:100%; overflow:auto; padding-left:320px; padding-right:50px; position:relative; z-index:3;}
#head {position:fixed; margin:0; top:0; right:0; display:block; width:100%; height:100px; background:#333; font-size:4em; z-index:5; color:#eee;}
#foot {position:fixed; margin:0; bottom:-1px; right:0; display:block; width:100%; height:50px; background:black; color:#c00; text-align:right; font-size:1em; z-index:4;}

#left {position:fixed; left:120px; top:0; height:100%; width:180px; background:#c22; background-position:0 100px; font-size:1em; color:#000; z-index:4;}
#prent {position:fixed; left:0; bottom:0; top:110px; height:100%; width:120px; z-index:5; }
* html #head, * html #foot,* html #left {position:absolute;}

#pad1 {display:block; width:18px; height:100px; float:left; padding-left:120px; }
#pad3 {display:block; width:18px; height:50px; float:left;}
.pad2 {display:block; height:100px;}

#content p {padding:5px;}
#content #blurb { padding-top:220px; font-size:120%; color:#000; }
#content #blurb17 { padding-top:40px; font-size:120%; color:#000; text-align:right; }
#content .kopje { color:#ccc; font-weight:bold; }

.bold {font-size:1.2em; font-weight:bold;}

#wordsleft {float:left; top:100px; left:150px; height:120px; width:150px; background:#222; color:#363; border:1px solid #000; margin:5px; padding:5px;}
#wordsright {float:right; top:100px; right:150px; height:100px; width:150px; background:#444; color:#666; font-size:80%; border:1px solid #000; margin:5px; padding:5px;}
#wordsabsolute {position:absolute; top:280px; left:400px; background:#eee; border:1px solid #000; margin:5px; padding:5px; font-size:2em; color:#c00;}
#wordsrelative {position:relative; top:10px; left:30px; background:#ddd; border:1px solid #000; margin:5px; padding:5px; font-size:1.2em; color:#c00; width:200px;}

#head a { text-decoration:none; color:#fff; }

a.nav, a.nav:visited {display:block; width:100px; height:25px; text-decoration:none; color:#fc6; font-weight:bold; line-height:25px;}
a.nav:hover {color:#fc0;}
a.nav2, a.nav2:visited {display:block; width:300px; height:25px; text-decoration:none; color:#fc6; font-weight:bold; line-height:25px;}
a.nav2:hover {color:#fc0; }

.transparant { opacity:.20; filter: alpha(opacity=20); -moz-opacity: 0.2; background-color: #000; }

.picture { background-color: #ccc; border: 1px solid #999; padding: 3px; font-size:72%; color:#000; text-align:center; }
.picture img { border: 1px solid #ccc; vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.5em 0pt 0.5em 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; } 

li { margin-bottom:15px; }