/* @charset "UTF-8";*/
/* CSS Document */


/* getting rid of all margins and paddings (so a reset to 0) */
*{margin:0; padding:0;}

/* getting rid of all those ugly outlines */
*{outline:none;}
 
body {
	background-color: #333333;
	color: #999999;
	font-family: "Lucida Grande", Arial, sans-serif;
	font-size: 10px;
}

p { padding-top: 1px; padding-bottom: 0px;}
a { text-decoration: none; color: #666666;}
a:hover { color: #FFFFFF; }

b { font-weight:bold; font-size:11px;}

/*  aligning hor. and vert. in the middle... */
#wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -240px;
	margin-left: -450px;
	min-height: 480px;
	height: 440px;
	width: 900px;
}

.indentmin5000 a {text-indent: -5000px; display: block; font-size:60px;}
.beelden a, .penningen a { text-indent: -5000px; display: block; font-size:60px;}

#preview2 a:hover {color:#000000;}
#preview2 a {color: #0066FF;}

/* creating the stage aligning it hor in the middle */
/* 
#wrapper {
	position: relative;
	margin: 0 auto;
	background-color: transparent;
	border: none; 
	width: 1000px;
	height: 550px;
	overflow: visible;
	z-index: 0;
}
*/
	
#main {
	position: absolute;
	left: 250px;
	top: 0px;
	width: 399px;
	height: 440px;
	background-color: #999999;
}
 
#preview {
	position: absolute;
	left: 15px;
	top: 15px;
	width: 369px;
	height: 340px;
	background-color: #CCCCCC;
	background-position: center;
	background-repeat: no-repeat;
}

#preview2 {
	position: absolute;
	left: 15px;
	top: 15px;
	width: 369px;
	height: 410px;
	background-color: #FFFFFF;
	background-position: center;
	color: #333333;
}

#preview2 p, #preview2 h1, #preview2 h2 { 
	padding-left: 12px; 
	padding-top: 12px; 
	padding-right: 12px;
	/*text-align:justify;*/
}


#preview.beeld001 { background-image: url(../images/beelden/001_zondeval_genesis-3_iers-hardsteen_20x8x8cm_.png);}
#preview.beeld002 { background-image: url(../images/beelden/002_knoop_enkel-marmer_24x22x2cm_.png);}
#preview.beeld003 { background-image: url(../images/beelden/003_St._Gotthart_belgisch-hardsteen_26x7x15cm_.png);}
#preview.beeld004 { background-image: url(../images/beelden/004_Pudenda_Diabas_28x19x10cm_.png);}
#preview.beeld005 { background-image: url(../images/beelden/005_delta_marmer_23x12x10cm_.png);}
#preview.beeld006 { background-image: url(../images/beelden/006_Schootsteek_Belgisch_hardsteen_25x15x6cm_.png);}
#preview.beeld007 { background-image: url(../images/beelden/007_IJzerhard_Belgisch-hardsteen_43x12x9cm_.png);}
#preview.beeld008 { background-image: url(../images/beelden/008_Oorzaak_Aurore_20x12x10cm_.png);}
#preview.beeld009 { background-image: url(../images/beelden/009_pappardelle_iers-hardsteen_20x8x8cm_.png);}
#preview.beeld010 { background-image: url(../images/beelden/010_Pyriet_Belgisch-hardsteen_20x8x8cm_.png);}
#preview.beeld011 { background-image: url(../images/beelden/011_oer_belgisch-hardsteen_36x29x4cm_.png);}
#preview.beeld012 { background-image: url(../images/beelden/012_voet_belgisch-hardsteen_26x19x9cm_.png);}
#preview.beeld013 { background-image: url(../images/beelden/013_Maryam_Aurore_portugees-marmer_45x20x25cm_.png);}
#preview.beeld014 { background-image: url(../images/beelden/014_rol_belgisch-hardsteen_52x38x10cm_.png);}
#preview.beeld014_baz { background-image: url(../images/beelden/014_rol_belgisch-hardsteen_52x38x10cm__baz.png);}
#preview.beeld015 { background-image: url(../images/beelden/015_Banier_Iers_hardsteen_25x15x17cm_.png);}
#preview.beeld015_baz { background-image: url(../images/beelden/015_Palmblad_Belgisch-hardsteen_28x28x3cm__baz.png);}
#preview.beeld016 { background-image: url(../images/beelden/016_Ginkgo_Marmer_14x18x9cm_.png);}
#preview.beeld017 { background-image: url(../images/beelden/017_Phlomis_belgisch-hardsteen_28x7x6cm_.png);}
#preview.beeld018 { background-image: url(../images/beelden/018_Miles_belgisch-hardsteen_40x19x5cm_.png);}

#preview.penning001 { background-image: url(../images/penningen/001_darwin-1_terracotta_diameter-ca-70mm.png);}
#preview.penning001_kz { background-image: url(../images/penningen/001_darwin-1_terracotta_diameter-ca-70mm_keerzijde.png);}
#preview.penning002 { background-image: url(../images/penningen/002_Epohke_Hara-Hachi-Bu.png);}
#preview.penning002_kz { background-image: url(../images/penningen/002_Epohke_Hara-Hachi-Bu_keerzijde.png);}
#preview.penning003 { background-image: url(../images/penningen/003_destijl_terracotta_diameter-ca-70mm.png);}
#preview.penning003_kz { background-image: url(../images/penningen/003_destijl_terracotta_diameter-ca-70mm_keerzijde.png);}
#preview.penning004 { background-image: url(../images/penningen/004_Lucie_Nijland_terracotta_diameter_ca-60mm_.png);}
#preview.penning004_kz { background-image: url(../images/penningen/004_Lucie_Nijland_terracotta_diameter_ca-60mm_keerzijde_.png);}
#preview.penning005 { background-image: url(../images/penningen/005_Blossfeldt_terracotta_diameter-ca-70mm.png);}
#preview.penning005_kz { background-image: url(../images/penningen/005_Blossfeldt_terracotta_diameter-ca-70mm_keerzijde.png);}
#preview.penning006 { background-image: url(../images/penningen/006_sint_brons_maart_2012.png);}
#preview.penning006_kz { background-image: url(../images/penningen/006_sint_brons_maart_2012_keerzijde.png);}


#beeld14_baz, #beeld15_baz, #beeld14_vz, #beeld15_vz, #penning1_kz, #penning2_kz, #penning3_kz, #penning4_kz, #penning5_kz, #penning6_kz, #penning1_vz, #penning2_vz, #penning3_vz, #penning4_vz, #penning5_vz, #penning6_vz{
	position: absolute;
	width: 60px;
	height: 60px;
	top: 365px;
	left: 324px;
}

#bovenkant_keerzijde {
	position: absolute;
	width: 60px;
	height: 60px;
	top: 365px;
	left: 324px;
	background-color: #CCCCCC;
}

#omschrijving{
	color: #000000;
	position: absolute;
	width: 295px;
	height: 58px;
	top: 365px;
	left: 15px;
	text-align: left;
	background-color: #CCCCCC;
	padding-top: 2px;
	padding-left: 4px;
}

#kees_logo1 {
	position: absolute;
	left: 0px;
	top: 140px;
	width: 399px;
	height: 300px;
	background-image: url(../images/main.png);
	background-repeat: no-repeat;
}


#menu_beelden {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 230px;
	height: 440px;
	/*background-color: #000000;*/
}

.beelden, .penningen {
	position: absolute;
	width: 60px;
	height: 60px;
	background-color: #FFFFFF;
}

.beelden_active, .penningen_active {
	position: absolute;
	width: 56px;
	height: 56px;
	background-color: #FFFFFF;
	border: 2px solid #000000;
	background-position: -2px -2px;
}

.menu {
	position: absolute;
	width: 60px;
	height: 60px;
	background-color: #FFFFFF;
	text-align: center;
	font-size: 11px;
	color: #999999;
}

.menu_active{
	position: absolute;
	width: 60px;
	height: 60px;
	background-color: #CCCCCC;
	text-align: center;
	font-size: 11px;
	color: #000000;
}

.menu a {
	display: block;
	color: #666666;
	height: 60px;
	width: 60px;
	padding-top: 20px;
}

.menu_active a {
	display: block;
	color: #000000;
	height: 60px;
	width: 60px;
	padding-top: 20px;
}

.menu a:hover, .menu_active a:hover{
	display: block;
	height: 60px;
	width: 60px;
	color: #000000;
}


.beelden:hover, .penningen:hover {
	border: 1px solid #FFFFFF;
	height: 58px;
	width: 58px;
	background-position: -1px -1px;
}

.menu:hover {
	/*border: 1px solid #FFFFFF;*/
	height: 60px;
	width: 60px;
	background-position: -1px -1px;
	background-color: #CCCCCC;
	
}

#beeld1 {left: 15px; top: 15px; background-image: url(../images/beelden/thumbnails/001.png);}
#beeld2 {left: 85px; top: 15px; background-image: url(../images/beelden/thumbnails/002.png);}
#beeld3 {left: 155px; top: 15px; background-image: url(../images/beelden/thumbnails/003.png);}
#beeld4 {left: 15px; top: 85px; background-image: url(../images/beelden/thumbnails/004.png);}
#beeld5 {left: 85px; top: 85px; background-image: url(../images/beelden/thumbnails/005.png);}
#beeld6 {left: 155px; top: 85px; background-image: url(../images/beelden/thumbnails/006.png);}
#beeld7 {left: 15px; top: 155px; background-image: url(../images/beelden/thumbnails/007.png);}
#beeld8 {left: 85px; top: 155px; background-image: url(../images/beelden/thumbnails/008.png);}
#beeld9 {left: 155px; top: 155px; background-image: url(../images/beelden/thumbnails/009.png);}
#beeld10 {left: 15px; top: 225px; background-image: url(../images/beelden/thumbnails/010.png);}
#beeld11 {left: 85px; top: 225px;  background-image: url(../images/beelden/thumbnails/011.png);}
#beeld12 {left: 155px; top: 225px; background-image: url(../images/beelden/thumbnails/012.png);}
#beeld13 {left: 15px; top: 295px; background-image: url(../images/beelden/thumbnails/013.png);}
#beeld14 {left: 85px; top: 295px; background-image: url(../images/beelden/thumbnails/014.png);}
#beeld14_vz { background-image: url(../images/beelden/thumbnails/014.png);}
#beeld14_baz { background-image: url(../images/beelden/thumbnails/014baz.png);}
#beeld15 {left: 155px; top: 295px; background-image: url(../images/beelden/thumbnails/015.png);}
#beeld15_vz { background-image: url(../images/beelden/thumbnails/015.png);}
#beeld15_baz { background-image: url(../images/beelden/thumbnails/015baz.png);}
#beeld16 {left: 15px; top: 365px; background-image: url(../images/beelden/thumbnails/016.png);}
#beeld17 {left: 85px; top: 365px; background-image: url(../images/beelden/thumbnails/017.png);}
#beeld18 {left: 155px; top: 365px; background-image: url(../images/beelden/thumbnails/018.png);}

#menu_penningen {
	position: absolute;
	left: 670px;
	top: 0px;
	width: 230px;
	height: 440px;
	/*background-color: #000000;*/
}

#penning1 {left: 15px; top: 15px; background-image: url(../images/penningen/thumbnails/001.png);}
#penning1_vz {background-image: url(../images/penningen/thumbnails/001.png);}
#penning1_kz {background-image: url(../images/penningen/thumbnails/001_keerzijde.png);}

#penning2 {left: 85px; top: 15px; background-image: url(../images/penningen/thumbnails/002.png);}
#penning2_vz {background-image: url(../images/penningen/thumbnails/002.png);}
#penning2_kz {background-image: url(../images/penningen/thumbnails/002_keerzijde.png);}

#penning3 {left: 155px; top: 15px; background-image: url(../images/penningen/thumbnails/003.png);}
#penning3_vz {background-image: url(../images/penningen/thumbnails/003.png);}
#penning3_kz {background-image: url(../images/penningen/thumbnails/003_keerzijde.png);}

#penning4 {left: 15px; top: 85px; background-image: url(../images/penningen/thumbnails/004.png);}
#penning4_vz {background-image: url(../images/penningen/thumbnails/004.png);}
#penning4_kz {background-image: url(../images/penningen/thumbnails/004_keerzijde.png);}

#penning5 {left: 85px; top: 85px; background-image: url(../images/penningen/thumbnails/005.png);}
#penning5_vz {background-image: url(../images/penningen/thumbnails/005.png);}
#penning5_kz {background-image: url(../images/penningen/thumbnails/005_keerzijde.png);}

#penning6 {left: 155px; top: 85px; background-image: url(../images/penningen/thumbnails/006.png);}
#penning6_vz {background-image: url(../images/penningen/thumbnails/006.png);}
#penning6_kz {background-image: url(../images/penningen/thumbnails/006_keerzijde.png);}

/*#penning7 {left: 15px; top: 155px;}
#penning8 {left: 85px; top: 155px;}
#penning9 {left: 155px; top: 155px;}*/

#kees_logo2 {
	position: absolute;
	left: 1px;
	top: 140px;
	width: 229px;
	height: 300px;
	background-image: url(../images/KeesReek2.png);
	background-repeat: no-repeat;
}

#keesportret { 
	position: absolute;
	left: 265px;
	top: 18px;
	width: 84px;
	height: 84px;
	background-image: url(../images/Keesportret.png);
	background-repeat: no-repeat;
}

#menu1 {left: 155px; top: 295px;}
#menu2 {left: 155px; top: 365px;}
#menu3 { display: none;}

#copyright{
	position: absolute;
	left: 250px;
	top: 440px;
	width: 200px;
	height: 20px;
	padding-top:5px;
	text-align: left;
	color: #666666;
}

#design {
	position: absolute;
	left: 450px;
	top: 440px;
	width: 199px;
	height: 20px;
	padding-top:5px;
	text-align: right;
	color: #666666;
}

#design a:hover { color: #FFFFFF; }

#contact_left {
	position: absolute;
	left: 250px;
	top: 465px;
	width: 200px;
	height: 50px;
	padding-top:5px;
	text-align: left;
	color: #CCCCCC;
}

#contact_right {
	position: absolute;
	left: 450px;
	top: 465px;
	width: 199px;
	height: 50px;
	padding-top:5px;
	text-align: right;
	color: #CCCCCC;
}

#contact_right a {
	color: #CCCCCC;
}

#contact_right a:hover {
	color: #FFFFFF;
}