html {
height:100%;
}

body {
background-image: url(blauweruit.jpg);
font-family: "Comic Sans MS", Arial;
font-size: 14px;
text-align: center;
height: 100%;
}

#compleet{
width: 800px;
margin: auto;
height: 100%;
}

#top{
background-image: url(teddybeer_balk.jpg);
text-align: right;
min-height: 170px;
max-height: 180px;
padding: 0 10px 3px 0;
}

#main{
background: #FFFFFF;
padding: 10px 10px 10px 10px;
}

a:link{
color: black;
text-decoration: none;
font-family: "Comic Sans MS", Arial;
}

a:visited{
color: black;
text-decoration: none;
font-family: "Comic Sans MS", Arial;
}

a:hover{
color: black;
text-decoration: underline;
font-family: "Comic Sans MS", Arial;
}

a:active{
color: black;
text-decoration: none;
font-family: "Comic Sans MS", Arial;
} 

h1{
font-weight: bold;
font-size: 20px;
} 

h2{
font-size: 16px;
} 

li{
font-size: 14px;
text-align: left;
} 

#box1{
background: #FFFFFF;
float: left;
width: 185px;
padding: 0 0 0 0;
margin: 0 0 0 0;
height: 390px;
}

#box2{
background: #FFFFFF;
float: left;
width: 185px;
padding: 0 0 0 0;
margin: 0 0 0 20px;
height: 390px;
}

#box3{
background: #FFFFFF;
float: left;
width: 185px;
padding: 0 0 0 0;
margin: 0 0 0 20px;
height: 390px;
}

#box4{
background: #FFFFFF;
float: left;
width: 185px;
padding: 0 0 0 0;
margin: 0 0 0 20px;
height: 390px;
}

#ouders{
background: #FFFFFF;
padding: 0 0 0 0;
margin: 0 0 0 0;
text-align: left;
}



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

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

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

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

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

}