@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*/
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;
}
/* følgende fjerner menubilleder o. lign.*/
#forside{
	background-image: none;
	background-color: #ffffcc;
}
#header{
	display: none;
}

.basictab{
	display: none;
}

#navcontainer {display:none;} /*tilf 13 april 2022 vedr cykelberetninger 2005-2009*/

h2{margin: 0px;}

.home{
	display: none;
}

#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;
}


#navLodret{ /* OBS Slukker for den lodrette menu ved smal skærmbredde - responsive */
	display: none;
}

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

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

#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;
}

.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;
}

/* 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;
}

/* 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;
}

.billedBoksR img{
	max-width:100% !important;
	height:auto;
	display:block;
}


/*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*/
}

ul.topnav li {float: left;}

ul.topnav li a {
	display: inline-block;
	color: #f2f2f2; /*ændret fra #f2f2f2; */
	text-align: center;
	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;} /*opr. none*/
  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;
  }

}