@charset "utf-8";
/* CSS Document */
/* If you have set your body tag or a wrapper div with class='wrapper' in your desktop styles.css
   to a specific width then you will want to change it to width: auto;
   You may also have set a min-width in styles.css.  Best to change that to 0px
*/

/* denne udgave til album-menuer er baseret på http://www.w3schools.com/howto/howto_js_topnav.asp Udfordingen har været at få den til at sameksistere med menu_tur.css, således at desk- og laptop viser siden som altid. - Dette indebære slukning af divs både på menu_tur.css og i nærværende css, samt at der igen tændes for ul.topnav, når mobile_albummer_rel2.css tager over ved mindre end 854px. JRJ 7/7 2016. Linjerne 75-87 tilf. 26/7 2020*/
body, #wrap, #wrap2
{
	width: auto;
	/* max-width: 420px; */ /* max_width works with iPhones, but doesn't format well with new Android phones and devices that are wider than 320px */
	min-width: 0px;
	background-image: none; /*nødv. for at undgå spiralryggen*/
	margin: 0px;
	/*background-color: #006633;	/*sikrer grønn baggrundsfarve på responsive menu-sider */
}

/* OBS tilf. til body-selectoren nedenfor den 10/11 2019 for at give luft til siderne på android telefoner. Bemærk: margin virker ikke på telefonen */ 

body {
	margin: 3px;
	padding-left: 8px; /*tilf. 10/11 2019 for at give luft til siderne på android telefoner */
	padding-right: 8px; /*tilf. 10/11 2019 for at give luft til siderne på android telefoner */
	background-color: #ffffcc;
}

#wrap{
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	padding: 0px;
}

#innner{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 3px;
	margin-left: 0px;
	padding: 0px;
}

.rcorners2 { /* css3 selektor, som giver runde hjørner på elementet */
	border-radius: 15px;
	border: 2px solid #73AD21;
	width: auto;
	height: auto;
	margin-bottom: 0px;
	background-color: #FFF;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	margin-top: 5px;
}

img { /*border: none; */
	width: 100%;
	height: auto;} /* sep 2009: Images kan nu bruges som links uden rammer. width tilf. 29/7 2020*/


/* Ved brug af billeder i f.eks. dagbog.html tilpasser følgende class billedstørrelse til håndholdte platforme (i hvert fald Android) */
.billedmarginL img{
	max-width: 100% !important;
	height: auto;
	display: block;
}

.billedmarginL {
	/* Her følger (28/7 2020) resultatet af et stort antal forsøg på at centrere billeder, 
	således at de tilpasses til kolonnebredden - uanset hvad. Årsag: Peder_Johansen.html*/
	position: inherit;
	margin: 1px;
	padding: 0px;
	margin-bottom: 5px;
	width: 95%;
	border: 3px;
}

.billedmarginLcentreret {
	/* Her følger (28/7 2020) resultatet af et stort antal forsøg på at centrere billeder inden for blockquote, 
	således at de tilpasses til kolonnebredden - uanset hvad. Årsag: Anton_Serup.html*/
	position: inherit;
	margin: 1px;
	margin-bottom: 5px;
	width: 95%;
	border: 3px;
}

.billedmarginLcentreretX {
	/* Her følger (28/7 2020) resultatet af et stort antal forsøg på at centrere billeder inden for blockquote, 
	således at de tilpasses til kolonnebredden - uanset hvad. Årsag: Anton_Serup.html*/
	 max-width: 100%;
  height: auto;
}

#main{
	display: none;
	margin: 0px;
	padding: 0px;
	height: 0px;
	width: 0px;
}

#main2{
	display: block !important;
	margin-top: 8px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#main2 img{ /* OBS: Tilpasser menubilledet i responsive. OBS: Undgå .img/class="img"*/
	width:100% !important;
	height:auto;
}


/* følgende fjerner menubilleder o. lign.*/
#forside{
	background-image: none;
	background-color: #ffffcc;
}
#header{
	display: none;
}

.basictab{
	display: none;
}

h2{margin: 0px;}

.home{
	display: none;
}
.rcorners2 table tbody tr td a img {
	display: none;
}/* 6/8 2020 Slukker for nogle ikoner i links langt inde i tabeller i responsive*/

/* OBS Slukker for den lodrette menu ved smal skærmbredde - responsive. box1, box2 og menuLodretRigh tilf. 26/7 2020 */
#navLodret{ 
	display: none;
}

#box1{
	display: none;
}

#box2{
	display: none;	
	}
	
#navLodretRight{
	display: none;
}
/* Tilf. 27/7 2020 for at slukke for tabeller i ancest.riis-johansen brugt som linksamling på visse sider */
.tabelsluk {
	display: none;    
}

.billedsluk {
	display: none;    
}

/* Tilf. 5/8 2020 gør tabeller responsive */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

/* Tilf. 28/7 2020 for at korrigere blockquote i ancest.riis-johansen */
blockquote{
	margin-inline-start: 20px;
    margin-inline-end: 20px;
}

blockquote p {
	padding: 0 0px;
}

blockquote p.em {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-style: italic !important;
	font-size: 11px;
}
blockquote h1 {
	padding: 0 30px;
}

blockquote h2 {
	padding: 0 30px;
}

blockquote h3 {
	padding: 0 30px;
}

blockquote .billedmarginL {
	background-color: #FFFFFF;
	border: 1px solid #cccccc;
	padding: 8px;
	margin-right: 10px; /* giver luft til evt. tekst, der flyder til højre for billedet*/
	display:inline;
	margin-bottom: 5px;
	float: left;
	clear: inherit; /* dec 2008*/
	margin-top: 5px;
	margin-right: auto; /*opr 0.5em */
	margin-left: auto; /* margin-left/right sat til auto 28/7 2020 for at centrere billeder. opr hhv 10px og 30px*/
}

blockquote .billedmarginLcentreret {
	/* Her følger (28/7 2020) resultatet af et stort antal forsøg på at centrere billeder inden for blockquote, 
	således at de tilpasses til kolonnebredden - uanset hvad. Årsag: Anton_Serup.html*/
	position: inherit;
	margin: 1px;
	margin-bottom: 5px;
	width: 95%;
	border: 3px;
}



.ramme {
  height: auto;
  width: auto;
  border: thin solid #FF0000;
}


/* følgende to form-deklarationer gør indlejerede google-kort responsive, dvs. de tilspasser sig automatisk til vinduets bredde. Tilsvarende er tilføjet i spiralryg2.css.
Kilde: http://www.labnol.org/internet/embed-responsive-google-maps/28333/*/

.google-maps {
	position: relative;
	padding-bottom: 75%; /*/ This is the aspect ratio*/
	height: 0;
	overflow: hidden;
	margin-top: 10px;
	margin-bottom: 10px;
    }
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

#container {
	position: relative;
	padding-bottom: 80%; /*ændret fra 71.4%*/
	padding-top: 0px; /*ændret fra 35px*/
	height: 0; /*ændret fra nul*/
	overflow: hidden;
	clear: left; /*OBS - OBS - OBS: Når maps er indsat th for lodret menu, vil denne left-clear flytte kortet ned under menusøjlen på mobile enheder!!!*/
	margin-bottom: 8px;
	margin-top: 8px; 
}
/* 21/7 2016: Følgende løste tilsyneladend problemet med at gøre embedded GPS Visualizer responsive: https://stackoverflow.com/questions/14370115/quick-and-easy-way-to-make-google-maps-iframe-embed-responsive*/
iframe, object, embed{max-width: 100%;}

h2 img { /* ellers forsvinder hom-ikonet også i mobil-versionen*/
	display: block !important;
}

/* følgende tilpasser billedstørrelse til håndholdte platforme (i hvert fald Android) Kilde: https://stackoverflow.com/questions/11736363/responsive-images-with-css*/
.albummer img{
	max-width:100% !important;
	height:auto;
	display:block;
}

.albummer{
	display: block !important; /* "important er nødvendig for at få billedet frem igen i responsive!!!!!*/
	margin-right: 0px;
}


/*herfra specs fra w3school*/

ul.topnav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #003916; /* ændret fra #333;*/
	display: block; /*tilføjet for at vise mobil-menuen igen, efter at der er slukket for den i menu_tur.css*/
}
/* flg. er kommentereu ud den 26/7 2020 for at vise menuen som en lodret liste */
/*ul.topnav li {float: left;}*/

ul.topnav li a {
	display: inline-block;
	color: #f2f2f2; /*ændret fra #f2f2f2; */
	/*text-align: center;*/ /*Udkommenteret den 27/7 2020 aht. bevarelse indrykning i nestede menuer*/
	text-decoration: none;
	transition: 0.3s;
	font-size: 17px;
	padding-top: 5px;
	padding-right: 5px; /*ændret fra 16px*/
	padding-bottom: 5px;
	padding-left: 16px;
	font-family: Verdana, Geneva, sans-serif;
}

ul.topnav li a:hover {background-color: #111;}

ul.topnav li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}

ul.topnav li.icon {display: none;}

/* https://www.w3schools.com/howto/howto_js_topnav_responsive.asp: */
/* When the screen is less than 500 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon)Max bredden afgør, hvornår menuen skifter fra een linje til kolonne visning. */
@media screen and (max-width:500px) {
  /*ul.topnav li:not(:first-child) {display: none;}*/ /*OBS: kommenteret ud for at vise alle menupunkter på tlf. 26/7 2020 */
  ul.topnav li.icon {
	float: right;
	display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) Max bredden afgør, hvornår skriptet kan slå menuændringen til og fra. Det er nok hensigtsmæssigt, at de to media max bredder er sat til samme antal pixel, idet hamburgeren så bliver klikbar, når menuen skifter */
@media screen and (max-width:500px) {
  ul.topnav.responsive {position: relative;} /*Opr  ul.topnav.responsive */
  ul.topnav.responsive li.icon { /*Opr  ul.topnav.responsive */
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li { /*Opr  ul.topnav.responsive */
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a { /*Opr  ul.topnav.responsive */
    display: block;
    text-align: left;
  }

}