/* CSS - styleWork - Alleen de documenten van het Documenten Archief MONNICKENDAM.WORK*/
/* 2024-07-09 10:18 uur */

@font-face 	{ font-family: optima_font, optima ; src: local(optima.ttc), url('../fonts/optima.ttc') format('opentype'); }
@font-face 	{ font-family: verdana_font; src: local(verdana.ttf), url('../fonts/verdana.ttf') format('opentype'); }*/
@font-face 	{ font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); }

/* * { box-sizing: border-box; } */
body			{ font-family: optima_font, "optima" ; background-color: #FFF; }
.SITE			{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; align-content: flex-start; width: 100%; height: max-content;  margin: auto; }

.KOPcolumn	{ position: sticky; top: 0px; display: flex; flex-direction: column;  width: 100%; height: max-content; z-index: 4; margin: auto; }
.KOPregel1	{ position: sticky; top: 0px; display: flex; width: 100%; font-size: 14px; color: #fff; justify-content: flex-start; flex-wrap: wrap;  background-color: #D2FFFE;  }
.KOP		{ display: flex; flex-direction: column; justify-content: center;  align-content: center; align-items: center; flex-wrap: wrap; width: 100%; height: 150px; border: 1px solid #000; }
.KOPtxt		{ display: flex; flex-direction: row; justify-content: center;  font-size: 14px; color: #ffffff;  width: 100%; height: max-content;  flex-wrap: wrap; background-color: #D2FFFE; padding: 5px; }

.contIndex	{ display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center; margin: auto; }

/*   Dit is een blanco block om de 'fixed position' van de kop te kunnen maken en de resultaat container op de goed plek te krijgen*/
.blancoBlok	{ width: 100px; height: 150px; background-color:#FCF ; }

.MENUcont	{ display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; width: 100%; height: max-content; margin: auto; text-align: center; padding: 5px;  background-color: #D2FFFE; }
.MENUregel1	{ display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center; font-size: 12px; flex-wrap: wrap; width: 100%; height: max-content; margin: auto;  background-color: #D2FFFE; }
.MENUregel2	{ display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center; font-size: 12px; flex-wrap: wrap; width: 100%; height: max-content; margin: auto;  background-color: #D2FFFE; }
.MENUpix	{ display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; gap: 10px; width: 100%; height: max-content; margin: auto; background-color: #D2FFFE; }
.MENUtxt		{ display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; gap: 10px; width: 100%; height: max-content; margin: auto; background-color: #D2FFFE; }
.menuItem	{ display: flex; width: 150px; height: 40px; font-size: 14px; font-weight: lighter; padding: 5px; }

.RESULT		{ display: flex; flex-direction: row; justify-content: space-evenly; align-content: flex-start; flex-wrap: wrap; width: 95%; height: max-content;  margin:auto; gap: 5px; padding: 5px; background-color: #fff; }
.RESULTgrijs	{ display: flex; flex-direction: row; justify-content: flex-start; align-content: flex-start; flex-wrap: wrap; width: 99%; height: 100%;  margin:auto; gap: 5px; padding: 5px; background-color: #ededed; }

/* voor alleen tekst weergave */
.TXTcont		{ display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; width: 99%; height: max-content; margin: auto; border-top: 1px solid #ddd; }
.TXTitem1	{ width:  99%; height: max-content; font-size: 14px; line-height: 16px; color:#000; padding: 5px; }
.TXTitem2	{ width: 50px; height: max-content; font-size: 14px; line-height: 16px; color:#000; padding: 5px; }
.TXTitem3	{ width:200px; height: max-content; font-size: 14px; line-height: 16px; color:#000; padding: 5px; background-color: #D2FFFE; }
.imgFitTXT  { object-fit: contain; width: 40px; height: 40px; margin: auto; text-align: center; }

.TXTenIMGenTXT	{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 180px; height: 330px; background-color: #ededed; margin: 3px;  border-radius: 1em; }
.IMG				{ width: 160px; height: 170px; margin: auto;  border-radius: 1em; }
.imgFit     			{ object-fit: contain; width: 150px; height: 150px; }
.TXT1			{ width: 160px; height:  70px; font-size: 12px; line-height: 14px; color:#000; padding: 10px; overflow: hidden; background-color: #ededed;  border-radius: 1em; }
.TXT2				{ width: 160px; height: 100px; font-size: 12px; line-height: 14px; color:#000; padding: 10px; overflow: hidden; background-color: #ededed;  border-radius: 1em; }

.archief		{ width: 400px; height: 100%; background-color: #ededed; }

.DETAILS			{ display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; width: 99%; height: max-content;  margin:auto; gap: 5px; padding: 10px;  background-color: #fff; z-index: 0; }
.detailsTXT		{ width: 90%; height: max-content; font-size: 12px; line-height: 14px; color: #000; padding: 10px; }
.detailsIMG		{ display: flex; flex: 1 1 auto; margin: auto; }
.detailsPIXfit{ object-fit: contain; width: 99%; margin:auto; }
.detailsRESULT	{width: 100px; height: max-content; }
.detailsIMG2		{ position: absolute: left: 5px; display: flex; flex: 1 1 auto; margin: auto; width 100%; z-index: 0; overflow: hidden; }

.resultaten	{ width: 100%; height: max-content; text-align: center; padding: 5px; font-size: 14px; }

.backbutton1	{ width: 100px; height: 30px; color: #093; }

.FOOTER		{ width: 745px; height: 55px; }

p			{ font-size: 12px; font-weight: normal; line-height:  12px; color: #000000; text-align:   left; }
p1		{ font-size: 10px; font-weight: normal; line-height:  12px; color: #000000; text-align:   left; }


h			{ font-size: 14px; font-weight: normal; line-height:  14px; color: #000000; text-align:   left; }
h.bold		{ font-size: 14px; font-weight:   bold; line-height:  14px; color: #111111; text-align:   left; }
h1			{ font-size: 18px; font-weight: normal; line-height:  20px; color: #000000; text-align:   left; }
h2			{ font-size: 24px; font-weight: normal; line-height:  24px; color: #000000; text-align: center; }
/* lijn element */
hr				{ color: #ededed;  height: 0,5px; }

/***************************TABELLEN***tr  en td ******************************/
/* table elementen Verwijderd element: table-layout: fixed; voor de table */
table		{ vertical-align: top; width: 100%; background-color: #ffffff; text-align: left; }
table.archief	{ vertical-align: top; background-color: #fff; }

tr					{ font-size: 12px; font-weight: normal; line-height: 12px; vertical-align: top; text-align:  left; }
tr.center		{ font-size: 12px; font-weight: normal; line-height: 12px; vertical-align: top; text-align:  center; }
tr.search		{ font-size: 12px; font-weight: normal; line-height: 14px; vertical-align: top; text-align:center; background-color: #fff; color: #fff; height: 50px; }
tr.archief	{ font-size: 12px; font-weight: normal; line-height: 16px; vertical-align: top; text-align: left; padding: 5px; background-color:#fff; }
tr.archief1	{ font-size: 12px; font-weight: normal; line-height: 14px; vertical-align: top; text-align: left; overflow: auto; }
tr.maxHeight { height: max-content; }

td			{ font-size: 12px; font-weight: normal; vertical-align: center; text-align:  left; line-height: 14px; }
td.right		{ font-size: 12px; font-weight: normal; vertical-align: center; text-align: right; }
.left		{ font-size: 12px; font-weight: normal; vertical-align: center; text-align:  left; border: 1px solid #ededed; }
.left2		{ font-size: 12px; font-weight: normal; float:  left; height: 90px; overflow: scroll; border: 1px solid #ededed; }
td.center		{ font-size: 12px; font-weight: normal; vertical-align: center; text-align:center; border: 1px solid #ededed; }
td.centerMiddel{ font-size: 12px; font-weight:   bold; vertical-align: middle; text-align:center; border: 1px solid #ededed; }

td.afbeelding	{ text-align: center; font-size: 9px; }
td.archief	{ font-size: 12px; font-weight: normal; line-height: 14px; vertical-align: top; text-align:   left; padding: 2px; }
td.archief2	{ font-size: 12px; font-weight: normal; line-height: 14px; vertical-align: top; text-align: center;  }
td.archief3	{ font-size: 12px; font-weight: normal; line-height: 14px; vertical-align: top; text-align: left;  overflow: hidden; }
.archief4		{ width: 1000px; height: 120px; float: left; font-size:12px; line-height: 14px; text-align: left; background-color: #ffffff; padding: 2px ; overflow: auto; }

td.gray		{ background-color: #ededed; font-size: 9px; }
td.white		{ background-color: #fff; font-size: 9px; }

.opmerkingen	{ width: 50px; font-size: 12px; line-height: 14px; text-align: left; }
.f			{ width: 154px; height: 230px; float: left; text-align: left; back ground-color: #ededed; padding: 12px 12px 12px 12px; over flow: hidden; border: 3px solid white; }
.f2			{ width: 200px; height: 300px; float: left; font-size: 9px; line-height: 12px; text-align: left; background-color: #ffffff; overflow: hidden; border: 3px solid white; padding: 12px 12px 12px 12px; }
.fArchiefPIX	{ width: 120px; height: 250px; float: left; text-align: left; background-color: #ffffff; padding: 5px 10px 10px 10px; overflow: hidden; border: 1px solid #ededed; }
.fArchiefPIX2	{ width: 140px; height: 250px; float: left; font-size:10px; line-height: 12px; text-align: left; background-color: #ffffff; padding: 2px ; overflow: hidden; }
.k			{ border: 3px solid white; float: left; height: 215px; width: 158px; text-align: center; background-color: #ededed; padding: 10px 10px 10px 10px; overflow: hidden; }

a			{ color: #444; text-decoration: none; }
a:href		{ color: #444; font-size: 12px; line-height: 14px; text-decoration: none; }
a:link		{ color: #444; font-size: 12px; line-height: 14px; text-decoration: none; }
a:visited		{ color: #444; font-size: 12px; line-height: 14px; text-decoration: none; }
/* dit is de active van het menu*/
a.active		{ color: #fff; font-size: 14px; line-height: 14px; text-decoration: none; background-color: #99ccff; display: block; display: inline;  }
a.home		{ font-size: 12px; line-height: 14px; text-decoration: none; text-align: left; } 
a:hover		{ color: #03F; font-size: 12px; line-height: 14px; text-decoration: none; } 
a.menu		{ color: #666; font-size: 12px; line-height: 14px; text-decoration: none; text-align: center; }

.shadow {  
  -moz-box-shadow: 5px 5px 5px #999; /* Firefox/Mozilla */  
  -webkit-box-shadow: 5px 5px 5px #999; /*Safari/Chrome */  
  box-shadow: 10px 10px 10px #999; /* Opera & hoe het zou moeten */  
  /* Voor IE 8 */  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999')";  
  /* Voor IE 5.5 - 7 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999'); } 

.shadow1 {
/*	margin: 40px;*/
	background-color: rgb(255,255,255); /* Needed for IEs */
	-moz-box-shadow: 5px 5px 15px rgba(10,10,10,0.4);
	-webkit-box-shadow: 5px 5px 15px rgba(10,10,10,0.4);
	box-shadow: 5px 5px 15px rgba(10,10,10,0.4);
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1; }

.shadow2 {
/*	margin: 40px;*/
	background-color: rgb(255,255,255); /* Needed for IEs */
	-moz-box-shadow: 5px 5px 5px rgba(5,5,5,0.2);
	-webkit-box-shadow: 5px 5px 5px rgba(5,5,5,0.2);
	box-shadow: 5px 5px 5px rgba(4,4,4,0.1);
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1; }

.shadow3 .content {
	position: relative; /* This protects the inner element from being blurred */
	padding: 100px;
	background-color: #DDD; }