/*-Anti-Windows Mobile-*/
a{color:#c96}
.ce{text-align:center}
.ju{text-align:justify}
.ri{text-align:right}


#mobi{font-weight:bold;font-size:110%;padding-top:4}


#bw{left:136;width:910;position:absolute}

				.in1,.in3{left:85}.in1{width:177;height:220}
				.cal{left:865}
				.kol{left:885}
				.bit,.bil,.op{left:865}


		#logo{border:5px solid #c96;border-bottom-color:#dca976;padding-top:30;padding-bottom:55;text-shadow: 0.07em 0.07em #333;filter:shadow(color=#333,direction=135,strength=1);border-top-left-radius:5;border-top-right-radius:5;-moz-border-radius-topleft:3;-moz-border-radius-topright:3}/*-border bottom # = aan background #-*/
						.bit,.op,.med,.on,.mas{top:255}
						.bil{top:820}
						.cal{top:985}
						.kol{top:775}
						.in3{bottom:350;width:215;height:120}

		#back{margin:1;width:908}/*-width= #bw min (margin #back x 2)-*/

				#side{height:;width:230;padding-bottom:20;padding-top:20;border-right:0;border-top:0;border-bottom-right-radius:5;border-bottom-left-radius:5;-moz-border-radius-bottomleft:5;-moz-border-radius-bottomright:5}
								.n1{top:231}/*-is afgemeten voor #side met padding-top:20 en #logo padding:30,bottom:55,font h1:38pt*/
								.n3,.n6{top:321}
								.n7,.n8,.in1{top:425}
								.n10,.n12{top:532}

						#mnav{margin-left:10}/*- = (width #side - width #mnav div)/2 -*/
								#mnav div{width:210;border-top:1px solid;border-bottom:0}
										#mnav a{padding-left:6;color:#000}/*-color moet onder "a" blijven om voor override te kunnen zorgen ivm. cascade effect-*/
										#mnav a,#mnav .act,#mnav .act2{border-top:7px solid transparent;border-bottom:7px solid transparent}
										#mnav .act2{border-right-color:transparent}
										#mnav .act,#mnav .act2{padding-left:6}
										#mnav .act li{height:20;background:url(/images/link-icons/icon-button-active.gif) no-repeat}
										#mnav li{padding-left:33;padding-top:1;height:20;background:url(/images/link-icons/icon-button.gif) no-repeat}

				#text{width:435}
								.visi{left:333;width:406}/*-406 is afgemeten voor #text width 435 en #main border:2-*/
				#text2,#cont{width:500}
				#text,#text2,#cont,#contain-main,#contain-main2{padding-left:87;padding-bottom:40;padding-top:20;border:0}
								.visi{top:240}/*-240 is afgemeten voor #text padding-top:20-*/

						#head,#index-head,#chead1,#shead,#mededelingen-head,#prijzen-head,#ontstaan-head{color:#deb887;text-shadow: 0.1em 0.2em #333}/*-mag in principe niet hetzelfde zijn als #main background-*/
						#head,#chead1,#shead{margin:0}
						#mhead{text-align:center}

								#cnav td{border-right:1px solid}
										#cnav .act li{background:url(/images/link-icons/icon-button-active.gif) no-repeat}
										#cnav a,#cnav .act{padding-top:3;padding-bottom:3}
												#cnav li,#cnav .act li{height:20}
												#cnav li{background:url(/images/link-icons/icon-button.gif) no-repeat;padding-top:1;padding-left:20}
												.w97{width:96}.w12{width:119}.w10{width:99}.w177{width:174}

						#main,#index-main,#mededelingen-main,#main3,#main4,#visie-main,#voorb{border:2px inset}
						#main,#index-main,#mededelingen-main,#main3,#main4,#visie-main,#voorb{padding:15;padding-bottom:20;padding-top:20}/*-gewone padding moet boven enkele declaratie komen ivm. cascade effect-*/
						#main4,#voorb{padding-left:14;padding-right:14;margin-right:2}/*-moet samen met margin zelfde als #main padding x2 zijn-*/

								#mail,#afsp{padding:20 40}
										#mail ul{margin:5;margin-left:20;padding-right:10}
												#mail li{margin:5;padding:3}

								#wnav{width:465}/*-465 staat in relatie tot #text2,#cont width:500-*/ /*-"waarom1,2,3" en "waarrek.1,2" navigatie naar vorige & volgende-*/
								#wnav a{border-left:0;padding:0}

								#tnb{text-align:right}


/*-Images-*/
.med,.kot,.vis,.mas,.pri{position:absolute;margin-left:0;margin-right:0;margin-top:0;left:875}.in,.vis,.pri{top:312}.kot{top:250}
.in,.on{position:absolute;margin-left:0;margin-right:0;margin-top:0;left:865}
.in{width:143}.on{width:146;height:354}.in img,.on img{width:139}.bis img{width:auto}.mas1{height:82;width:124}
				.bio,.bio2{left:-177;top:16;width:116}
.med,.vis,.pri{width:114;height:114}
.med,.kot,.mas{margin-top:0}
.noi span,.nof,.noo,.noc,.nok,.not,.bit,.bil,.nov{display:inline-block}

					.noi img{width:auto}

#fnav,#copy,#bott{text-align:center;margin-left:0;padding-left:0;clear:both}

				#fnav{border-top:1px solid #999;border-top-right-radius:10;border-top-left-radius:10;-moz-border-radius-topleft:10;-moz-border-radius-topright:10}
				#fnav{padding-top:10}
						#fnav a,#fnav .act{padding:5}
						#fnav a,#fnav .act{border:5px solid transparent}/*-declareer ik apart omdat ik dit NIET zo gauw zal willen veranderen-*/
						#fnav a,#fnav .act,#fnav h1{font-weight:bold}


/*-om nog aan te passen voor handheld!!??-*/
#algv{padding:40;padding-bottom:60;padding-top:15}


/*-Alleen Main-*/
.nosw{display:none}/*-fotos-*/
.op{width:114;height:114}/*-openingstijden (.gif)-*/
.bio,.bio2,.visi,.bit,.bil,.cat,.cal,.kol,.op{position:absolute}

.p10{padding-left:7}/*-mededelingen-*/
.p18{padding-left:18}/*trucjes*/
.p30{padding-left:30}/*biografie,massagevormen*/

.le,.in3{text-align:left}

						#head,#index-head,#mededelingen-head,#prijzen-head,#ontstaan-head{margin-bottom:35}
						#chead1,#chead2,#shead{margin-bottom:31}
						#chead2{margin-top:31}
						#shead{margin-top:-5}

										#cnav a{display:block}
										#cnav a,#cnav .act{border:6px solid transparent}/*-declareer ik apart omdat ik dit NIET zo gauw zal willen veranderen-*/

								#mail,#afsp,#algv,#visie-main,#voorb{text-align:justify}

.bit,.bil,.bis{border-left:1px solid;border-top:1px solid;border-right:2px outset;border-bottom:2px outset;border-color:#c0c0c0;padding:6;text-align:center;font-style:italic;background:#fff}/*-biografie (fotos) declareer ik apart omdat ik deze niet zo gauw zal willen veranderen-*/
.bit{padding-bottom:8}.bil{padding-bottom:25}.bis{width:190;padding-left:5;padding-right:4;padding-top:7;padding-bottom:20}.b1{border:1px solid #999}/*-gewone padding moet boven enkele declaratie komen ivm. cascade effect-*/

#fnav,#copy,#bott{width:970}/*-om deze mooi gecentreerd te krijgen-*/
#fnav span.info{left:0;bottom:82;height:40;z-index:2;width:933}/*-width:933 is afgemeten voor #fnav 970; bottom aanpassen als ik border aanpas-*/

				#fnav span{font-size:10pt}

				#copy{padding-top:15}

				#bott{padding-top:10}


/*-Span Info-*/
span.info{padding:20;line-height:1.5;font-size:8pt;font-weight:bold}
span.info,#mnav span.info{position:absolute}
#mnav span.info,#fnav span.info{border:2px solid}/*-declareer ik apart omdat ik in de toekomst misschien deze WIL veranderen-*/
:hover span.info,#mnav :hover span.info{display:block}
.in1,.in3,.bio,.bio2,.visi,.b2 img{border:2px}/*-index (.in), ontstaan (.on)-*/
.in1,.in3,.bio,.bio2,.visi{border-style:solid}/*-declareer ik apart omdat ik in de toekomst misschien deze WIL veranderen-*/
.in1,.in3,.bio,.bio2{border-left-style:inset;border-bottom-style:outset}/*-dit werkt alleen als je span.info border: niet hebt gedefinieerd-*/

						#mnav span.info{font-size:9pt;width:110;left:-144;line-height:1.3}/*-width:110 is het smalst EN breedtst wat dit mag worden ivm. de lengte van individuele woordjes EN Firefox+Safari-*/
								#mnav span.fn{font-size:110%}
										.n1{height:286}/*-246 is afgemeten voor een #mnav span.info width:110, font-size:9pt-*/
										.n3,.n6{height:202}
										.n7,.n8{height:160}
										.n10,.n12{height:auto}/*-heeft te maken met hoogte van "trucjes" in Firefox-*/

/*-Hover-*/
a:hover img{border-left:8px solid transparent}
.b2 :hover img{border:4px;opacity:1.0;filter:alpha(opacity=100)} /*-index, ontstaan-*/
.b2 img,.b2 :hover img{border-style:outset}
.wu,#afsp a,#wnav a,.hu:hover,.hu a:hover,#bott :hover{text-decoration:underline}  /*-e-mail, openingstijden-*/
#mnav :hover,#fnav :hover,#bott :hover,#wnav a,:hover,#cnav :hover,#afsp :hover,#tnb :hover,span.info,#mnav span.info{cursor:pointer}

						#mnav :hover li{margin-left:8}
						#mnav :hover span.th{padding-left:4}

								#afsp :hover,#wnav a:hover{text-decoration:none}
/*-------------------------------------------------------Styles die ik gezamenlijk zal willen aanpassen------------------------------------------*/
#mnav :hover,#fnav :hover,#bott :hover,#wnav a,:hover,#cnav :hover,#afsp :hover,#tnb :hover,span.info,#mnav span.info,.in1,.in3,.visi,.bio,.bio2{color:peru}

#mnav .act,#fnav,#bott,#cnav,#cnav .act{color:#634841}

#main,#index-main,#main3,#main4,#visie-main,#voorb,span.info,#mnav span.info,.in1,.in3,.visi,.bio,.bio2,.b2 img,.b2 :hover img,#mededelingen-main{border-color:#dca976}
#mnav :hover,#mnav .act2{border-left-color:#dca976}
#mnav :hover{border-right-color:#dca976}
#cnav :hover,#fnav :hover,#mnav div{border-top-color:#dca976}
#cnav :hover{border-bottom-color:#dca976}

span.info,#mnav span.info,.in1,.in3,.visi,.bio,.bio2{background:#faebd7}
.fc,.cl{color:#faebd7}

#text,#text2,#cont,#mobi,#contain-main,#contain-main2{background:transparent}

#mnav .act{border-left-color:#c0c0c0}
#cnav .act,#fnav .act{border-top-color:#c0c0c0}

/*-van licht naar donker: -*/
/*-#feefd2, #ffebcd (blanchedalmond), #faebd7 (koffiecreme,antiquewhite), #f5deb3 (variant faebd7), #ffe4c4 (rosig,bisque), #deb887 (lichtbruinig,burlywood)-*/
/*-#dca976, #c96, peru-*/
/*-#634841 (chocola variant)-*/

/*-interessante kleuren: #E0DECE + #C9C7B9 (euh, grijsgroeniggeel??) + #EDECE0 (lichtere variant)-*/
/*-.cat{top:255} = cadeautag (.gif), plaats ik alleen als background #fff is (heb dus hoogte niet gechecked)-*/
/*-<script type="text/javascript" src="http://shots.snap.com/ss/9e6d0bbf8ab4534fd1f2acb605287f0b/snap_shots.js"></script>;  class="snap_noshots"-*/

#inre{position:absolute;left:870;top:465;width:220px;background:#dca976}
#infodiv-index,#infodiv-mededelingen{position:absolute;left:820;top:605;width:230px;background:#dca976;text-align:center;border-radius:4;-moz-border-radius:4}
#infodiv-mededelingen{top:500}
#head-infodiv-index{color:#fff;padding:10}
#body-infodiv-index{background:#faebd7;color:#000;padding:5;padding-top:10;border-radius:5;-moz-border-radius:5;border-top:1px solid peru}

#contain-main{width:560;padding-left:95}
#index-head{width:420;padding-left:10;text-shadow: 0.1em 0.2em #333}
#index-main{width:420} /*- 420 is netjes voor safari + firefox-*/
#contain-main2{width:560;padding-left:100}
#mededelingen-head{width:410;padding-left:13;text-shadow: 0.1em 0.2em #333;text-align:center}
#prijzen-head{width:410;padding-left:6;text-shadow: 0.1em 0.2em #333;text-align:center}
#ontstaan-head{width:410;padding-left:5;text-shadow: 0.1em 0.2em #333;text-align:center}
#mededelingen-main,#visie-main{width:410}

#info-onder-side{margin:20;margin-bottom:15;background:#faebd7;color:peru;border: 1px solid #dca976;border-radius:5;-moz-border-radius:5;text-align:center}
.bis{margin-top:20;margin-bottom:15}
#head-info-onder-side{border-bottom:1px solid #dca976;padding-top:10;padding-bottom:10;text-shadow: -0.2em 0.2em #fff}
#body-info-onder-side{padding:10;padding-top:15;padding-bottom:25}
#links{width:100%}

#twitter{position:absolute;left:820;top:810;width:220px;padding:8;padding-right:2;background:#faebd7;border-top:1px solid peru;border-radius:5;-moz-border-radius:5}

.c10{text-shadow: 0.1em 0.2em #fff}
#twitter-mededelingen-head{width:210px;padding:10;background:#dca976;color:#fff;text-align:center;}

.bor{border-radius:10;-moz-border-radius:10}
.bor2{border-radius:5;-moz-border-radius:5}
.bor3{border-radius:5}