@charset "UTF-8";
/* CSS Document voor de pagina's die leiden naar de demosite BBB versie 2 */

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color:#FFFFCC;
	line-height: 17px;
	background-color: #330066;
}

      
/* +++++++++++++++++++++++++++++++containerindexpag ++++++++++++++++++++++ */
#container {
	position: absolute;
	margin-left: -392px;
	top: 20px;
	left: 50%;
	width: 784px;
	height: 448px;
	z-index: 1;
} 
/* container style voor overige browsers \*/    
#container {
	position: absolute;
	margin-left: -392px;
	margin-top: -224px;
	top: 50%;
	left: 50%;
	width: 784px;
	height: 448px;
	voice-family: "\"}\"";
	voice-family: inherit;
	background-image:url(../afb/achtergrond/Home_nl.gif);
	z-index: 1;
}
/* einde IE 5 hack */


/* ++++++++++++++++++++++++++++++++++++++ Leeg divje waar een achtergrond in staat voor over rode vlak++++++++ */
#tekstoprood {
	position: absolute;
	left: 310px;
	top: 40px;
	width: 317px;
	height: 317px;
	z-index: 3;
	overflow:hidden;
	background-image:url(../afb/home/home_roodtekst.gif);
	visibility: visible;
}

#tekstoppaars{
	position: absolute;
	left: 35px;
	top: 61px;
	width: 90px;
	height: 46px;
	z-index: 2;
	visibility: visible;
	overflow:hidden;
	text-align: center;
}
/*+++++++++++++++++++++++++++++++++++++++++Vlaggetje en/of terugpijltje++++++++++++++++++++*/
#vlag{
	position:absolute;
	right: 0px;
	top: 0px;
	width: 38px;
	height: 39px;
	text-align: right;
	z-index: 10;
}
/*+++++++++++++++++++++++++++++++++++++++++Portfolio woord en blokjesafbeelding met link ++++++++++++++++++++*/
#portfolioblokjes {
	position: absolute;
	width: 251px;
	height: 34px;
	z-index: 11;
	left: 310px;
	top: 2px;
	visibility: hidden;
}

#portfoliowoord {
	position: absolute;
	left:236px;
	top:10px;
	width:65px;
	height:30px;
	z-index:12;
	visibility: visible;
}
/*+++++++++++++++++++++++++++++++++++++++++link opmaak ++++++++++++++++++++*/      
a:link, a:visited {
	font-size: 11px;
	font-weight: bold;
	color: #FF9900;
	text-decoration: none;
}
	a:hover, a:active { 
	font-size: 11px; 
	font-weight: bold; 
	color: #FFFFCC; 
	text-decoration: none; 
}

/*+++++++++++++++++++++++++++++++++Contact woord links en tekst + mailform + wat tekst +++++++++++++++++++++++++++*/
#contact {
	position: absolute;
	left:145px;
	top:94px;
	width:25px;
	height:60px;
	z-index:5;
	visibility: visible;
}
#contacttekst {
	position: absolute;
	left: 329px;
	top: 60px;
	width: 270px;
	height: 275px;
	z-index: 8;
	overflow: hidden;
	visibility: hidden;
}
#mailform {
	position: absolute;
	left: 447px;
	top: 60px;
	width: 160px;
	height: 250px;
	z-index: 9;
	overflow: hidden;
	visibility: hidden;
}
#mail {
	position: absolute;
	left: 342px;
	top: 68px;
	width: 100px;
	height: 250px;
	z-index: 3;
	overflow:hidden;
	overflow: hidden;
	text-align: right;
	visibility: hidden;
}

/*++++++++++++++++++++++++++++webdesign woord en tekst roodtekstBBB is 1e en tweede deel+++++++++++++++++ 2 */

#webdesign {
	position:absolute;
	left: 235px;
	top: 359px;
	width: 210px;
	height: 25px;
	z-index: 7;
	visibility: visible;
}

#webdesigntekst1 {
	position: absolute;
	left: 329px;
	top: 60px;
	width: 270px;
	height: 288px;
	z-index: 8;
	overflow: hidden;
	visibility: hidden;
}
#webdesigntekst2 {
	position: absolute;
	left: 329px;
	top: 60px;
	width: 270px;
	height: 288px;
	z-index: 9;
	overflow: hidden;
	visibility: hidden;
}

/*+++++++++++++++++++++++++++++++++paarsje ruitje onderaan het beeld+++++++++++++++++++++++++*/
#ruitje {
	position:absolute;
	width: 59px;
	height: 59px;
	z-index: 18;
	top: 392px;
	left: 496px;
	visibility: visible;
}
/* ++++++++++++++++++++++++++++++++Els naam onderin, foto plus tekst+++++++++++++++++++++++++*/
#els { 
	position: absolute; 
	left: 54px; 
	top: 425px; 
	width: 136px; 
	height: 25px; 
	z-index: 3; 
	visibility: visible; 
}
#elsfoto {
	position: absolute;
	width: 114px;
	height: 114px;
	z-index: 13;
	left: 27px;
	top: 34px;
	visibility: hidden;
}
#elstekst1 {
	position: absolute;
	left: 329px;
	top: 60px;
	width: 270px;
	height: 288px;
	z-index: 8;
	overflow: hidden;
	visibility: hidden;
}
#elstekst2 {
	position: absolute;
	left: 329px;
	top: 60px;
	width: 270px;
	height: 297px;
	z-index: 8;
	overflow: visible;
	visibility: hidden;
}

/*+++++++++++++++++++++++++++++++++++++++++++++Suzanne naam onderin, foto en tekst++++++++++++++++++++++++++*/
#suz { 
	position: absolute; 
	left: 248px; 
	top: 425px; 
	width: 240px; 
	height: 25px; 
	z-index:2; 
	visibility: visible;
}
#suzfoto {
	position: absolute;
	width: 114px;
	height: 114px;
	z-index: 13;
	left: 27px;
	top: 34px;
	visibility: hidden;
}
#suztekst1 {
	position: absolute;
	left: 329px;
	top: 60px;
	width: 270px;
	height: 288px;
	z-index: 8;
	overflow: hidden;
	visibility: hidden;
}	
#suztekst2 {
	position: absolute;
	left: 329px;
	top: 60px;
	width: 270px;
	height: 288px;
	z-index: 8;
	overflow: hidden;
	visibility: hidden;
}	



/*++++++++++++++++++++++++++++++++++++++++++++++++++++++ extra linken kleur++++++++++++++++++++++ */
.extralink{
	font-size: 11px;
	color:#FFFFCC;
}
extralink a:link, extralink a:visited {
	font-size: 11px;
	font-weight: bold;
	color: #FFFFCC;
	text-decoration: none;
}
extralink a:hover, extralink a:active { 
	font-size: 11px; 
	font-weight: bold; 
	color: #FFFFCC; 
	text-decoration: none; 
}
/*+++++++++++++++++++++++++++++++++++++++++++h1 kop, spaarzaam gebruikt +++++++++++++++++++++++++++++++ */
.h1 {
	color: #FF9900;
	font-weight: bold;
}
.h2 {
	color: #FFFFCC;
	font-weight: bold;
}
/*+++++++++++++++++++++++++++++++++++++++++++      voor demo pagina        +++++++++++++++++++++++++++++++ */


#containerdemo {
	position: absolute;
	margin-left: -392px;
	top: 20px;
	left: 50%;
	width: 784px;
	height: 448px;
	z-index: 1;
} 
/* container style voor overige browsers \*/    
#containerdemo {
	position: absolute;
	margin-left: -392px;
	margin-top: -224px;
	top: 50%;
	left: 50%;
	width: 784px;
	height: 448px;
	voice-family: "\"}\"";
	voice-family: inherit;
	background-image:url(../afb/achtergrond/demopag.gif);
	z-index: 1;
}
/* einde IE 5 hack */

#demopaars1{
	position: absolute;
	left: 68px;
	top: 101px;
	width: 115px;
	height: 112px;
	z-index: 2;
	visibility: visible;
	overflow:hidden;
	text-align: center;
}
#demopaars2{
	position: absolute;
	left: 176px;
	top: 17px;
	width: 90px;
	height: 51px;
	z-index: 2;
	visibility: visible;
	overflow:hidden;
	text-align: center;
}
#demopaars3{
	position: absolute;
	left: 314px;
	top: 17px;
	width: 87px;
	height: 51px;
	z-index: 2;
	visibility: visible;
}
#paarsblokje1{
	position: absolute;
	left: 28px;
	top: 34px;
	width: 115px;
	height: 112px;
	z-index: 1;
	visibility: visible;
	overflow:hidden;
	text-align: right;
}
#paarsblokje2{
	position: absolute;
	left: 163px;
	top: 34px;
	width: 115px;
	height: 112px;
	z-index: 1;
	visibility: visible;
	overflow:hidden;
	text-align: right;
}

#paarsblokje3{
	position: absolute;
	left: 298px;
	top: 34px;
	width: 115px;
	height: 112px;
	z-index: 1;
	visibility: visible;
	overflow:hidden;
	text-align: center;
	background-image:url(../afb/achtergrond/MKB1.jpg);
}


#tekstoprooddemo {
	position: absolute;
	left: 344px;
	top: 181px;
	width: 236px;
	height: 238px;
	z-index: 3;
	overflow:visible;
	visibility: visible;
}

#demogroen1 {
	position: absolute;
	left: 16px;
	top: 243px;
	width: 186px;
	height: 187px;
	z-index: 3;
	overflow:visible;
	visibility: visible;
}
#demogroen2 {
	position: absolute;
	left: 20px;
	top: 245px;
	width: 182px;
	height: 187px;
	z-index: 3;
	overflow:hidden;
	visibility: hidden;
}

/*  +++++++++++++++++++++++++++++++++++++           sites portfolio pagina                +++++++++++++++++++  */

#wrap {
	position: absolute;
	margin-left: -560px;
	left: 50%;
	width: 1120px;
	height: 560px;
	z-index: 1;
} 
/* container style voor overige browsers \*/    
#wrap {
	position: absolute;
	margin-left: -560px;
	margin-top: -280px;
	top: 50%;
	left: 50%;
	width: 1120px;
	height: 560px;
	voice-family: "\"}\"";
	voice-family: inherit;
	z-index: 1;
}
/* einde IE 5 hack */




/*       ++++++++++++++++++++  offlinesite pagina tweede versie 25 maart */
#inhoud {
	width:100%;
	height:560px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left: -50%;
	margin-top: -280px;
	text-align:center; 
}

#offgifs {
	position: absolute;
	left: 0px;
	width: 100%;
	height: 78px;
	z-index: 10;
	top: 463px;
}

#shKaart1 {
	margin-left: -392px;
	position: absolute;
	top: 0px;
	left: 50%;
	width: 784px;
	height: 370px;
}

#tekst1 {
	position: absolute;
	top: 385px;
	left: 380px;
	width: 400px;
	height: 61px;
	text-align:left;
	z-index: 5;
	visibility:visible;
}


#Vorige {
	position: absolute;
	top: 385px;
	left: 300px;
	width: 40px;
	height: 40px;
	background-color:#FFFFFF;
}


/*  +++++++++++++++++++++++++++++++++++++  offline sites pagina  +++++++++++++++++++  */

#wrapOffline {
	position: absolute;
	margin-left: -392px;
	top: 0px;
	left: 50%;
	width: 784px;
	height: 560px;
	overflow:visible;
	background-color:#CCCC99;
	z-index: 1;
} 
/* container style voor overige browsers \*/    
#wrapOffline {
	position: absolute;
	margin-left: -392px;
	margin-top: -255px;
	top: 50%;
	left: 50%;
	width: 784px;
	height: 560px;
	voice-family: "\"}\"";
	voice-family: inherit;
	overflow:visible;
	z-index: 1;
}
/*  +++++++++ tijdelijke wrap nieuwe pagina    +++++++++++++++++++*/

#wrapExtra {
	position: absolute;
	margin-left: 0px;
	left: 0px;
	width: 100%;
	height: 560px;
	text-align: center;
	z-index: 1;
} 
/* container style voor overige browsers \*/    
#wrapExtra {
	position: absolute;
	margin-left: 0px;
	margin-top: -280px;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 560px;
	voice-family: "\"}\"";
	voice-family: inherit;
	z-index: 1;
	text-align: center;
}
/* einde IE 5 hack */




/* Tijdelijke div om de blokjes in te plaatsen*/
#tijdelijk{
	position: absolute;
	top: 150px;
	left: 5px;
	width: 100%;
	height: 78;
	z-index: 12;
}
.kadergif{
	border: #333333 solid thin;

}

/*++++++++  offlinegifs staan in wrapgifs in een tabel onderaan de pagina  en niet binnen de hoofdwrapwrap Offline+ +++++++++++++++++++++*/
#wrapgifs {
	position: absolute;
	margin-left: 0px;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 80px;
	z-index: 1;
} 
/* container style voor overige browsers \*/    
#wrapgifs {
	position: absolute;
	margin-left: 0px;
	margin-right: 0px;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 80px;
	voice-family: "\"}\"";
	voice-family: inherit;
	z-index: 1;
}
/* einde IE 5 hack */


#offlinegifs {
	position: absolute;
	left: 0px;
	width: 100%;
	height: 77px;
	z-index: 10;
	top: 463px;
}	

#wrapExtra2 {
	position: absolute;
	left: 0px;
	width: 100%;
	height: 432px;
	z-index: 2;
	top: 0px;
}	

/*+++++++++++++++++++++ showcase laat de afbeelding van een site-pagina zien: sitenaam+cijfer shwocase 1 algemene tekst ++++++++++++++++++++++*/
#showcase1 {
	position: relative;
	top: 0px;
	margin-left: auto;
	marginright:auto;
	width: 784px;
	height: 432px;
	z-index: 5;
	visibility: visible;
	text-align: center;
}

#showcaseKaart1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
}
#showcaseKaart2 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
}#showcaseKaart3 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
}
#showcaseFles1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
}
#showcaseVossius1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
}
#showcaseBeaute1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
	
}
#showcaseBeaute2 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
}
#showcaseAccg1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
	
}
#showcaseAccg2 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
}
#showcaseDebuut1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
}
#showcaseDebuut2 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
}
#showcaseDebuut3 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
}
#showcaseWilhelm1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
}
#showcaseWilhelm2 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
}
#showcaseWilhelm3{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
}
#ShowcaseSchoen{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 784px;
	height: 370px;
	z-index: 5;
	visibility: hidden;
	text-align: center;
}
/* ++++++++++++++++++++++++++++++++++++ Pijltje terug ++++++++++++++++++++++++++++*/
#offlineTerug{
	position: absolute;
	top: 392px;
	left: 100px;
	width: 38px;
	height: 40px;
	text-align: left;
	z-index: 5;
	visibility:visible;
}


/*+++++++++++++++++++++ showtekst laat de tekst van een site-pagina zien: sitenaam+cijfer showtekst1=algemene starttekst ++++++++++++++++++++++*/
#showtekst1 {
	position: absolute;
	top: 366px;
	left: 120px;
	width: 480px;
	height: 68px;
	text-align: left;
	line-height:14px;
	z-index: 5;
	visibility:visible;
}
#tekstKaart1 {
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}
#tekstKaart2{
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}
#tekstKaart3 {
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}
#tekstVossius1 {
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}
#tekstFles1 {
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}
#tekstBeaute1 {
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}
#tekstBeaute2 {
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}
#tekstAccg1 {
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}
#tekstAccg2 {
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}
#tekstDebuut1 {
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}
#tekstDebuut2 {
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}
#tekstDebuut3 {
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}
#tekstWilhelmina1 {
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}
#tekstWilhelmina2 {
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}
#tekstWilhelmina3 {
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}
#tekstSchoen {
	position: absolute;
	top: 392px;
	left: 152px;
	width: 480px;
	height: 61px;
	text-align: left;
	z-index: 5;
	visibility:hidden;
}


/* ++++++++++++++++ Hieronder de divs voor de demo1 pagina - versie 2 +++++++++++++++++++++++*/

#demoblokje1{
	position: absolute;
	left: 27px;
	top: 34px;
	width: 114px;
	height: 113px;
	z-index: 1;
	visibility: visible;
	text-align: right;
}
#demoblokje2{
	position: absolute;
	left: 163px;
	top: 34px;
	width: 114px;
	height: 113px;
	z-index: 1;
	visibility: visible;
	text-align: right;
}

#demoblokje3{
	position: absolute;
	left: 298px;
	top: 34px;
	width: 114px;
	height: 113px;
	z-index: 1;
	visibility: visible;
	text-align: right;
}