/* The below set of settings is needed to enforce a 2-column lay-out with header and footer. The left (navigation) column 
and the header and footer are fixed, meaning that they will always be visible in the window when scrolling through the main
content. If the content of the left column is larger than the screen, a vertical scrollbar will appear. The screen may look
as if it is a 3-column lay-out; however, this is done by adding a background image (including "border") to the right column. */
html,body {
overflow: hidden;
background: #ffffcc;
margin: 0;
padding: 0;
}
body {
height: 100%;
font-family: Verdana;
font-size: 10pt;
}
#header {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
right: 0;
height: 40px;
background: #3366ff;
border-bottom: 5px solid #ffffcc;
font-weight: bold;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
#left {
position: absolute;
overflow: auto;
top: 45px;
left: 0;
bottom: 21px;
width: 170px;
background: #999999;
padding: 10px;
font-family: Arial;
}
/* This div contains the main content. I wanted to have the right scrollbar visible at all times to prevent the main content
from shifting horizontally. Unfortunately, there is no uniform cross-platform way to do this. "Overflow-x" is for IE only
(though CSS3, so it will not validate), Firefox is OK too, but Opera is showing a horizontal scrollbar, probably because
somehow the content is wider than the div. For the time being I don't mind; I will look into this later. */
#outer {
position: absolute;
overflow: scroll;
overflow-x: hidden;
top: 45px;
left: 190px;
right: 0;
bottom: 21px;
background: #ccffff url("algemeen/rightbackground2.jpg") repeat-y right top;
border-left: 5px solid #ffffcc;
padding: 10px;
}
#center {
margin-right: 125px;
min-height: 0;
}
#right {
position: relative;
float: right;
width: 100px;
color: #000000;
font-family: Arial;
}
#footer {
position: absolute;
overflow: hidden;
left: 0px;
right: 0;
bottom: 0;
height: 16px;
background: #000000;
border-top: 5px solid #ffffcc;
font-size: 8pt;
color: #ffffcc;
text-align: right;
padding-left: 10px;
padding-right: 10px;
}
#footerleft {
position: absolute;
float: left;
font-size: 8pt;
}
/* General paragraph settings. */
p {
margin: 0 0 0 0;
text-align: justify;
}
p.left {
text-align: left;
}
p.left8 {
text-align: left;
font-size: 8pt;
}
p.right {
text-align: right;
}
/* Seems simple; however, not for Firefox and Opera..... */
hr {
width: 100%;
color: #000000;
background-color: #000000;
border: 0;
height: 2px;
}
h1 {
font-size: 20pt;
margin-top: 3px;
}
h2 {
font-size: 16pt;
}
h3 {
font-size: 14pt;
text-align: center;
text-decoration: underline;
}
h4 {
margin-bottom: 0;
font-size: 10pt;
font-weight: normal;
text-decoration: underline;
}
/* Thumbnail definition in left column, causing the belonging text to center vertically. */
img.tnleft {
margin-top: -6px;
margin-bottom: -9px;
}
/* Images in the center column can be left or right aligned. */
img.centerleft {
float: left;
margin-right: 10px;
margin-bottom: 5px;
}
img.centerright {
float: right;
margin-left: 10px;
margin-bottom: 5px;
}
/* There are different definitions for links in the left, center and right column. */
a.left {
font-size: 10pt;
font-weight: bold;
text-decoration: none;
}
a.left:link,a.left:visited {
color: #ffffcc;
}
a.left:hover {
color: #000000;
}
a.center {
font-weight: bold;
text-decoration: none;
}
a.center:link,a.center:visited {
color: #ff0000;
}
a.center:hover {
color: #000000;
}
a.right {
font-weight: bold;
text-decoration: none;
}
a.right:link,a.right:visited {
color: #ff0000;
}
a.right:hover {
color: #000000;
}
/* Definition of the flag up left. */
#flag {
position: absolute;
float: left;
font-size: 10pt;
margin-top: 10px;
}
/* General table settings. */
/* Caption definition accompanying tables. */
p.caption {
width: 96%;
font-size: 8pt;
text-align: justify;
margin-left: auto;
margin-right: auto;
margin-top: 2px;
}
table.std {
border-spacing: 0px;
}
td.width30 {
width: 30px;
padding: 0px;
vertical-align: top;
}
td.width50 {
width: 50px;
padding: 0px;
vertical-align: top;
}
td.varwidth {
text-align: justify;
padding: 0px;
vertical-align: top;
}
/* Photo-Caption PZ3 CSS (The Good Stuff) */
.PZ3-l {
float: left;
margin-right: 10px;
}
.PZ3-r {
float: right;
margin-left: 10px;
direction: rtl;
position: relative;
}
.PZ3zoom {
border: 2px solid #3366ff;
}
.PZ3zoom a,.PZ3zoom a:visited {
display: block;
padding: 0;
overflow: hidden;
text-decoration: none;
height: 100%;
width: 100%;
}
.PZ3-r a {
right: 0;
}
.PZ3zoom a:hover {
position: absolute;
z-index: 999;
padding: 0;
background: none; 
cursor: default;
height: auto;
width: auto;
overflow: visible;
border: 2px solid #3366ff;
margin: -2px -2px 0 -2px;
}
.PZ3zoom a img {
border: 0;
height: 100%;
width: 100%;
}
.PZ3zoom a:hover img {
height: auto;
width:auto;
border: 0;
}
a:hover .PZ3cap, a:hover .PZ31cap {
display: block;
direction: ltr;
margin-top: -3px;
background: #3366ff;
text-align: left;
color: #ffffcc;
}
a:hover .PZ3cap {
padding: 3px 5px;
}
.PZ3inr {
display: block;
padding: 2px 0px;
}
.noCap a:hover .PZ3cap {
display: none;
}
.noBdr,.noBdr a:hover {
border: 0;
}
.Lnk a:hover {
cursor: pointer;
}