/*
Layout
*/

.thumbnail
{
position: relative;
z-index: 0;
}

.thumbnail:hover
{
background-color: transparent;
z-index: 50;
}

.thumbnail span
{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: none;
visibility: hidden;
color: #008080;
text-decoration: none;
width: 404px;
text-align: center;
}

.thumbnail span img
{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span
{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 20px;
left: -360px; /*position where enlarged image should offset horizontally */
}

html
{
background: url(../images/bg.gif) repeat-x;
margin: 0;
cursor: url("../images/vlinder2.cur"), pointer;
}

body
{
font: 1em/1em papyrus, 0.8em/1em verdana, arial;
margin: 0;
scrollbar-face-color: #ffffff;
scrollbar-arrow-color: #fe9700;
scrollbar-base-color: #fe9700;
scrollbar-shadow-color: #fe9700;
scrollbar-darkshadow-color: #fe9700;
scrollbar-highlight-color: #fe9700;
scrollbar-3dlight-color: #fe9700;
scrollbar-track-color: #ffff99;
}

img
{
border-style: none;
}

h1
{
font: 1em/1em papyrus, 0.8em/1em verdana, arial;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1.4em;
}

p
{
margin-top: 10px;
margin-bottom: 0px;
}

a
{
cursor: url("../images/vlinder3.cur"), pointer
}

#indextext
{
text-align: center;
position: absolute;
top: 500px;
left: 0;
width: 100%;
font-size: 24px;
font-weight: bold;
color: #008080;
line-height: 30px;
}

.indexnotvis
{
visibility: hidden;
}

#giraflinks
{
position: absolute;
top: 0px;
left: 0px;
width: 332px;
height: 700px;
background: url(../images/giraf-links.gif) no-repeat;
z-index: 10;
}

#girafrechts
{
position: absolute;
top: 0px;
left: 675px;
width: 440px;
height: 737px;
background: url(../images/giraf-rechts.gif) no-repeat;
z-index: 10;
}

.vlinders
{
position: absolute;
width: 32px;
height: 32px;
z-index: 10;
}

#een
{
top: 200px;
left: 100px;
background: url(../images/v1.gif) no-repeat;
}

#twee
{
top: 150px;
left: 50px;
background: url(../images/v2.gif) no-repeat;
}

#drie
{
top: 220px;
left: 20px;
background: url(../images/v3.gif) no-repeat;
}

#vier
{
top: 280px;
left: 40px;
background: url(../images/v4.gif) no-repeat;
}

#vijf
{
top: 360px;
left: 5px;
background: url(../images/v1.gif) no-repeat;
}

#zes
{
top: 10px;
left: 960px;
background: url(../images/v4.gif) no-repeat;
}

#zeven
{
top: 120px;
left: 940px;
background: url(../images/v1.gif) no-repeat;
}

#acht
{
top: 80px;
left: 1000px;
background: url(../images/v2.gif) no-repeat;
}

#negen
{
top: 40px;
left: 1075px;
background: url(../images/v3.gif) no-repeat;
}

#tien
{
top: 25px;
left: 1150px;
background: url(../images/v4.gif) no-repeat;
}

#navcontainer
{
position: absolute;
top: 10px;
left: 300px;
height: 180px;
width: 520px;
z-index: 20;
}

#navcontainer a, #navcontainer a:visited
{
font-size: 100%;
color: #008080;
background-color: #fffcc;
text-decoration: none;
}

#navcontainer a:hover, #navcontainer .active
{
letter-spacing: 1px;
color: #fe9700;
}

.navitem
{
width: 100px;
height: 32px;
position: absolute;
padding: 4px 0 0 32px;
vertical-align: center;
line-height: 26px;
}

#nav1
{
top: 40px;
left: 15px;
background: url(../images/v3.gif) no-repeat left top;
}

#nav2
{
top: 85px;
left: 45px;
background: url(../images/v1.gif) no-repeat left top;
}

#nav3
{
top: 20px;
left: 105px;
background: url(../images/v2.gif) no-repeat left top;
}

#nav4
{
top: 70px;
left: 175px;
background: url(../images/v4.gif) no-repeat left top;
}

#nav5
{
top: 30px;
left: 245px;
background: url(../images/v4.gif) no-repeat left top;
}

#nav6
{
top: 0px;
left: 310px;
background: url(../images/v1.gif) no-repeat left top;
}

#nav7
{
top: 110px;
left: 400px;
background: url(../images/v2.gif) no-repeat left top;
}

#nav8
{
top: 65px;
left: 340px;
background: url(../images/v4.gif) no-repeat left top;
}

#nav9
{
top: 105px;
left: 245px;
background: url(../images/v3.gif) no-repeat left top;
}

#nav10
{
top: 125px;
left: 125px;
background: url(../images/v3.gif) no-repeat left top;
}

#nav11
{
top: 140px;
left: 0px;
background: url(../images/v4.gif) no-repeat left top;
}

#wrapper
{
position: absolute;
top: 195px;
left: 162px;
height: 470px;
width: 615px;
padding-right: 120px;
border-top: 5px solid white;
background: #ffff99 url(../images/bggiraf.gif) no-repeat center;
z-index: 0;
}

#bodytext
{
font-size: 16px;
color: #008080;
line-height: 22px;
position: absolute;
top: 210px;
left: 260px;
height: 420px;
width: 540px;
padding: 10px 10px 20px 0px;
overflow: auto;
z-index: 20;
}

#bodytext a, #bodytext a:hover, #bodytext a:visited
{
font-size: 16px;
color: #fe9700;
line-height: 22px;
}

#terug
{
position: absolute;
top: 641px;
left: 825px;
line-height: 24px;
z-index: 30;
}

#terug a, #terug a:hover, #terug a:visited
{
text-decoration: none;
}
.start
{
font-size: 110%;
color: #fe9700;
}

.links
{
font-size: 16px;
color: #008080;
line-height: 22px;
text-decoration: none;
}

#logo
{
text-align: center;
position: absolute;
top: 80px;
left: 0;
width: 100%;
}

#logo img
{
border: 3px solid #fe9700;
}

#footer
{
position: absolute;
top: 670px;
left: 240px;
width: 600px;
z-index: 20;
}

#footer a, #footer a:hover, #footer a:visited
{
font-size: 12px;
color: gray;
text-decoration: none;
}

#footer ul
{
margin: 5px auto 5px auto;
}

#footer li
{
display: inline;
padding: 0 2px 0 2px;
margin: 0;
}

.formulier
{
border: 1px solid #fe9700;
background: lightyellow;
color: #008080;
}