/*
technique: http://www.frankmanno.com/ideas/css-imagemap/
css file by Johannes De Ridder
*/

/*boerderij map hotspots*/
img.image{
	display: none;
}

dl#map{
	margin: 0;
	padding: 0;
	background: transparent url(gfx/imagemap.gif) top left no-repeat;
	height: 440px;
	width: 520px;
	position: relative;
	top: 10px;
	left: 10px;
}

dt{ margin: 0; padding: 0; position: absolute; font-size: 85%; display: none; }
dd{ margin: 0; padding: 0; position: absolute;  font-size: 85%; }

dd#infoDef{ top: 230px; left: 200px; }
dd#infoDef a{ position: absolute; width: 35px; height: 30px; text-decoration: none; }
dd#infoDef a span{ display: none; }
dd#infoDef a:hover{ position: absolute; background: transparent url(gfx/imagemap.gif) -200px -665px no-repeat; top: -7px;}

dd#infoDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 250%;
}


dd#bijenDef{ top: 350px; left: 305px; }
dd#bijenDef a{ position: absolute; width: 55px; height: 45px; text-decoration: none; }
dd#bijenDef a span{ display: none; }
dd#bijenDef a:hover{ position: absolute; background: transparent url(gfx/imagemap.gif) -305px -790px no-repeat; top:-2px;}

dd#bijenDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 250%;
}


dd#geitenDef{ top: 320px; left: 410px; }
dd#geitenDef a{ position: absolute; width: 50px; height: 40px; text-decoration: none; }
dd#geitenDef a span{ display: none; }
dd#geitenDef a:hover{ position: absolute; background: transparent url(gfx/imagemap.gif) -420px -760px no-repeat; }

dd#geitenDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 250%;
}


dd#schapenDef{ top: 280px; left: 410px; }
dd#schapenDef a{ position: absolute; width: 60px; height: 30px; text-decoration: none; }
dd#schapenDef a span{ display: none; }
dd#schapenDef a:hover{ position: absolute; background: transparent url(gfx/imagemap.gif) -410px -725px no-repeat; }

dd#schapenDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 250%;
}


dd#varkensDef{ top: 310px; left: 360px; }
dd#varkensDef a{ position: absolute; width: 50px; height: 65px; text-decoration: none; }
dd#varkensDef a span{ display: none; }
dd#varkensDef a:hover{ position: absolute; background: transparent url(gfx/imagemap.gif) -360px -755px no-repeat; }

dd#varkensDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 250%;
}


dd#kippenDef{ top: 255px; left: 50px; }
dd#kippenDef a{ position: absolute; width: 80px; height: 35px; text-decoration: none; }
dd#kippenDef a span{ display: none; }
dd#kippenDef a:hover{ position: absolute; background: transparent url(gfx/imagemap.gif) -50px -700px no-repeat; }

dd#kippenDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 250%;
}


dd#konijnenDef{ top: 215px; left: 100px; }
dd#konijnenDef a{ position: absolute; width: 30px; height: 45px; text-decoration: none; }
dd#konijnenDef a span{ display: none; }
dd#konijnenDef a:hover{ position: absolute; background: transparent url(gfx/imagemap.gif) -100px -655px no-repeat;}

dd#konijnenDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 250%;
}



dd#koeienDef{ top: 130px; left: 395px; }
dd#koeienDef a{ position: absolute; width: 120px; height: 100px; text-decoration: none; }
dd#koeienDef a span{ display: none; }
dd#koeienDef a:hover{ position: absolute; background: transparent url(gfx/imagemap.gif) -395px -575px no-repeat; top:3px;}

dd#koeienDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 110%;
}


dd#paardDef{ top: 235px; left: 410px; }
dd#paardDef a{ position: absolute; width: 90px; height: 50px; text-decoration: none; }
dd#paardDef a span{ display: none; }
dd#paardDef a:hover{ position: absolute; background: transparent url(gfx/imagemap.gif) -410px -675px no-repeat; top:-2px;}

dd#paardDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 110%;
}


dd#boomgaardDef{ top: 155px; left: 15px; }
dd#boomgaardDef a{ position: absolute; width: 130px; height: 60px; text-decoration: none; }
dd#boomgaardDef a span{ display: none; }
dd#boomgaardDef a:hover{ position: absolute; background: transparent url(gfx/imagemap.gif) -15px -595px no-repeat; }

dd#boomgaardDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 110%;
}


dd#groententuinDef{ top: 1px; left: 30px; }
dd#groententuinDef a{ position: absolute; width: 160px; height: 155px; text-decoration: none; }
dd#groententuinDef a span{ display: none; }
dd#groententuinDef a:hover{ position: absolute; background: transparent url(gfx/imagemap.gif) -30px -441px no-repeat; }

dd#groententuinDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 100%;
}


dd#ezelDef{ top: 310px; left: 465px; }
dd#ezelDef a{ position: absolute; width: 50px; height: 60px; text-decoration: none; }
dd#ezelDef a span{ display: none; }
dd#ezelDef a:hover{ position: absolute; background: transparent url(gfx/imagemap.gif) -465px -755px no-repeat; }

dd#ezelDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 250%;
}


dd#cafetariaDef{ top: 235px; left: 240px; }
dd#cafetariaDef a{ position: absolute; width: 115px; height: 110px; text-decoration: none; }
dd#cafetariaDef a span{ display: none; }
dd#cafetariaDef a:hover{ position: absolute; background: transparent url(gfx/imagemap.gif) -240px -675px no-repeat; top:-2px;}

dd#cafetariaDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 100%;
}


dd#bakkersDef{ top: 300px; left: 210px; }
dd#bakkersDef a{ position: absolute; width: 50px; height: 40px; text-decoration: none; }
dd#bakkersDef a span{ display: none; }
dd#bakkersDef a:hover{ position: absolute; background: transparent url(gfx/imagemap.gif) -210px -745px no-repeat; }

dd#bakkersDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 200%;
}



dd#priveDef{ top: 80px; left: 210px; }
dd#priveDef a{ position: absolute; width: 65px; height: 105px; text-decoration: none; }
dd#priveDef a span{ display: none; }
dd#priveDef a:hover{ position: absolute; background: transparent url(gfx/imagemap.gif) -210px -520px no-repeat; top:-2px;}

dd#priveDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 200%;
}