/*
	20180405
	oanpast foar testen fan nije minske.php
	- bettere display op mobile devices
	- flexbox layout

	Ideeen
	
	Menu en flagjes
	lytse breedte; flagjes boppe menu
		miskyn is dat te realisearjen mei direction rtl? Wrapped it lofter element
		dan ûnder it rjochter?

	persoans ynformaasje		
		2 elementen; ynformaasje en foto;
		lyts: foto komt boppe de ynfo, nopic net sjen litte op lyts skerm
		
	aktes
		whitespace normal foar lytse skermen (foardat de text wrapped) oars liket
		it net goed omdat nei wrapte uteinen wer in crlf komt 
	
	
	utfiering:
	
	de layout wurd feroare as de vieport wiidte < 640 px
	- menu items wurd yn kolom toant, idem de taal flagjes
	- de pasfoto komt boppe de tekst
	- akte whitespace fan pre-wrapped nei normal
	- nopic wurd net toant
	
	In pear elementen tafoege:
	- .menu komt om de menuitems EN de flagjes
	- .langbar komt om de flagjes
	
	De menu-item spans hawwe in gruttere padding krigen yfm touchscreens
	padding fan A elementen fuorthelle
	alle foto's hawwe in max-width fan 100%, krimpe dus mei de skermbreedte

	yn de btd classes (bernenammen en sa) stiet <br> efter de rigels. Wol dat ferfange troch
	div elementen.	
	
	<div class=clear> fuorthelle
	

		
*/



body{
  margin:0;
  background-color:#aaa;
  font-family: verdana,sans-serif; 
  font-size: 10pt;
}

div.pageex{
 color:#000;
 background-color:#fff;
 max-width:60em;
 margin:auto;
/*
 min-width:640px;
 */
 
}

div.pageex{
 box-shadow: 0px 0px 24px #000;
 -webkit-box-shadow: 0px 0px 24px #000;
}

div.pageex img{
	max-width:100%;
}

div.btk{
 margin: 1.5em 0em 1em 0em;
 border:solid 1px;
 background-color:#ddd;
 border-radius:5px;	
 line-height:1.4;
 font-size:.9em;
 padding:1em;
}

/* foar menu opsjes en flagjes*/
div.menu{
	display:flex;
	flex-wrap:nowrap;
	justify-content:space-between;
}

/* menu opsjes */
div.mnb{

/*
 font-weight:bold;
 font-size:9pt;
*/ 
}

/* taal opsjes */
div.langbar{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	/*
	white-space:nowrap;	
	*/
}

span.mni{
	display:inline-block;
	padding:0.5em 0.8em;
	text-decoration:underline;
	white-space:nowrap;
/*	
	border-radius:5px;
*/	
}

span.mni:hover{


	
	/*
	background-color:#edeae9;
	
	background-color:lightgray;
	
	*/
	
}

div.mpn{
 margin: 14px 20px 4px 20px;
 border:solid 1px;
 border-radius:5px;
 display:none;
 line-height:1.4;
}

div.content{
	padding: 0.5em 1.5em;
	padding-bottom:0em;
   min-height:400px;
}

div.phead{
 margin-top:5px;	
 padding:16px;
 padding-left:30px;
 font-size:2.2em;
 font-weight:bold;
 text-shadow:black 0px 0px 5px;
 border-bottom:solid 1px;
 border-color:#000;
 color:white;
 background-color:#a08040;
 background: linear-gradient(to left, #a08040, #d0a050); 
 background: -webkit-linear-gradient(left, #a08040, #d0a050); 
 background: -moz-linear-gradient(left, #a08040, #d0a050); 
}

H1{
 color:#000;
 background-color:#edeae9;
 border: solid 1px #bbb;
 border-radius:4px;
 margin: 0.5em 0em 0.5em 0em; 	
 font-size:1.4em;
 padding:0.5em 0em 0.5em 1em;
 clear:both;
}

h2.ret{
 cursor:pointer;
}

H2{
 font-size:1.1em;
 border-bottom:solid 2px gray;
 display:inline-block;
 padding:2px 2px 2px 5px;
 min-width:50px;
}
  
h3.foot{
 display:block;
 color:gray;
 text-align:center; 
 padding:5px;
 font-size:.9em;
 border-top:solid 1px;
 border-top-color:gray;
 border-bottom:none;
}

div.main,div.pasfs,div.akte{
 	border: solid 1px #bbb;
}

div.nopic{
 float:right;	
 border-radius:6px;
 width:200px;
 height:150px;
 background-color:#ccc;
 border:solid 1px;
 padding-top:100px;
 text-align:center;
 font: 14pt italic;
}

div.btds{
	display:inline-block;
/*
	min-width:28em;
*/
}

div.hr{
 margin-top:10px;
 margin-bottom:10px;
 border-top:solid 2px #c8c4c0;
 border-bottom:solid 2px #f8f4f0;
}

div.main{
	display:flex;
	flex-wrap:wrap;
	flex-direction:row-reverse;
	align-items:flex-start;
	justify-content:space-between;
	min-height:252px;
	margin-bottom:10px;
	padding:1em;
	border-radius:6px;
	-webkit-border-radius:6px;
	background-color:#edeae9; 
}

img.pasf{
 border-radius:6px;
 width:200px;
 float:right;
 display:block;
 border:solid 1px;
 margin-bottom:1em;
 /*
 height:250px;
 
 */
}

div.btdh{
 font-weight:bold;
}

div.btd{
 margin-left:4px;
 margin-bottom:5px;
}

div.akte,div.contact{
 padding:1em; 
 border-radius: 6px;
 -webkit-border-radius:6px;
 background-color:#edeae9;
 white-space:pre-wrap;
 margin-bottom:1em;
}

div.contact{
 color:#fdfaf9;
 background-color:#888480;   
 font-weight:bold;
 margin-top:20px;
 text-shadow:black 0px 0px 2px;
}

div.krante{
	font-family: times,serif; 
	font-size: 1.2em;
	width:350px;
	margin:10px auto 10px; 
	text-align:justify;
}

img.lingo{
	cursor:pointer;
	margin-left:1em;
	opacity:0.5;
/*
	float:right;
*/	
		
}

img.lingosel{
	margin-left:1em;
	opacity:1;
/*	
	float:right;
*/	

}

img.adf{
 display:block;
 margin:auto;
 margin-top:8px;
 margin-bottom:15px;
}

img.foto, img.artfoto{
 display:block;
 margin:auto;
 margin-top:30px;
 margin-bottom:0px;
 border:solid 1px;
}

img.f300{
 display:block;
 margin-bottom:20px; 
 margin-left:150px;
 border:solid 2px;
}

div.bs300{
 background-color:lightgray;
 width:294px;
 margin-left:152px;
 padding:3px;
 position:absolute;
}

div.byskrift, div.bsfoto, div.bsart{
 background-color:lightgray;
 margin:6px auto 15px auto;
 padding:5px;
 border:solid 1px;
 border-radius:5px;
 text-align:justify;
 font-size:.9em;
}
/*20180405 width wer op 590 px setten*/
div.byskrift{
	max-width:590px;
}

div.bsfoto{
	max-width:35em;
}

div.bsart{
 max-width:30em;
 margin:15px auto 6px auto;
 white-space:pre-wrap;
}

div.sp10{
 height:10px;
}

div.clear{
 clear:both;
}
/* 20180405 margin 1em foar alle kanten fan p*/
p{
 text-align:justify;
 margin:1em;
}

pre{
 margin-left:20px;
}

a{
 font-weight:bold;
 font-size:.9em;
 line-height:1.6;
 
/* 
 padding:2px;
*/ 
}

a.btl{
 font-weight:normal;
}

a.hdref{
/* font-size:9pt;*/
 line-height:1.4; 
}

a:link,a:visited {color:inherit;}
a:hover {color:#e00;}

span.highlight{
  background-color : yellow;
}

table.kadastertable{
	font: inherit;
	margin-top: 0.25em;
}

table.kadastertable th{
	font-weight:normal;
	font-style: italic;
	padding-bottom: 4px;
	border-bottom: solid 1px black;
}
table.kadastertable td{
	padding: 0 6px;
	border: none;
	line-height: 1.05;
}

ol.not, ul.not{
	padding:0;
	margin:0;
	margin-left:1em;
	margin-top:0.2em;
}

ol.not li, div.not{
	width:50ch;
	text-align:justify;
	white-space:normal;
	font-family: serif;
	font-size:1.1em;
}

div.not{
	margin-left:.5em;
	margin-top:0.2em;
}

@media (pointer:coarse), screen and (max-width: 850px) {

body{
	font-size:unset;
}

div.pageex{
	max-width:unset;
	box-shadow: unset;
	-webkit-box-shadow: unset;
}

div.phead{
	margin-top:0;
}
	
a{
	font-size:1em;
	line-height:2;
}


div.akte{
	/*
	white-space:initial;
	*/
}
div.content{
	padding: 0.5em 0.5em;
}	
div.main{
	flex-direction:column;
	justify-content:flex-end;
}


}	

@media screen and (max-width: 640px){
	
div.nopic{display:none}

div.mnb{
	display:flex;
	flex-direction:column;
}

span.mni{
	padding:0.3em 0 0.3em 2em;
}
		
	
div.langbar{
	flex-direction:column;
	justify-content:flex-start;
}	

div.langbar img{
	margin:0.5em 1em;
}
	
}	

@media screen and (max-width: 400px) {

div.content{
	padding: 0.5em 0.1em;
}	
	
div.phead{
	font-size:1.6em;
/*
	padding-left:10px;
*/	
}	
}	
/* dit wurket net (mear?) as it boppeoan stiet, mar hjirre wol
	images wurde soms brutsen fan 1 side nei de folgjende.
*/
@media print{
	div.phead{ text-shadow:initial;}
	div.menu, div.contact {display: none;}
	div.pageex{
		box-shadow: initial;
		-webkit-box-shadow: initial;
	}
}