/* baseline font sizes in CSS: 100% = 1 em ~= 16px ~= 14pt  */
/* adaptive 320 480 760 960 1200 1600px*/


/* padding+borders incl in total size*/
*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box; 
}

body{
	height: 100%;
	min-height: 100vh; /* viewpoint height*/
	background-image: url("../gifs/bg_wall_double.jpg");
	background-position: center;
	background-size: 100% auto;
	background-attachment: fixed;
	background-color: rgb(189,203,188);
}
:focus {
  outline: 0;
}
.clearfix::after{
	content: "";
	clear: both;
	display: table;
}

div.containerBox{
	margin: auto;
	RRRpadding: 0em 1em 1em 1em;
	width: 100%;
	max-width: 50em; /* 800px */
	height: 100%;
	min-height: 100vh;
	background-color: rgb(220,220,180);
	background-image: url("../gifs/bg48x48.jpg");
	background-size: 3em 3em;
	background-repeat: repeat;
	background-attachment: fixed;
	border-left: 1em solid rgb(220,220,180);
	border-right: 1em solid rgb(220,220,180);

}

div.topMenu{	
	position: sticky;
	position: -webkit-sticky; /*safari*/
	top: 0;
	background-color: rgb(0,0,0);
	border-style: none;
	padding: 0.2em;
	text-align: center;
}
div.topMenu li{
	display: inline;
}
div.topMenu a{
  text-decoration: none;
  font-family: 'Voltaire'; 
	color: #ffffff; 
	font-size: 1.5em;
	text-decoration: none; 
	font-weight: normal;
}
div.topMenu a:link{
  text-decoration: none;
}
div.topMenu a:visited{
  text-decoration: none;
}
div.topMenu a:hover{
  text-decoration: underline;
}
div.topMenu a:active{
  text-decoration: none;
}

div.logo{
	/* height: 12.5em; lejaa responsive */
	background-repeat: no-repeat;
	/* background-image lejaa responsive */
	background-position: center;
	border: 3px solid rgb(189,203,188);
}
div.titleBox{
	background-color: rgb(220,220,180);
	background-image: url("../gifs/px_blue.gif");
	background-size: 95% 0.1em;
	background-repeat: no-repeat;
	background-position: center;
	padding: 0.2em;
	text-align: center;
}
.titleText{
	background-color: rgb(220,220,180);
	padding-left: 1em;
	padding-right: 1em;
	font-family: 'Voltaire'; 
	color: #000000; 
	font-size: 1.5em;
	text-decoration: none; 
	font-weight: normal; 
}

div.contentBox{ 
	/* padding: 1em 1em 3em 1em; lejaa responsive */
	text-align: left;
	border: 3px solid rgb(189,203,188);
	font-family: 'Yrsa','Times'; 
	color: #000000; 
	font-size: 1.2em;
	line-height: 1.5em;
	text-decoration: none; 
	font-weight: normal; 
}
div.contentBox a{
  color: #000000;
  font-size: 1em;
}
div.contentBox a:link{
  text-decoration: none;
}
div.contentBox a:visited{
  text-decoration: none;
}
div.contentBox a:hover{
  text-decoration: underline;
}
div.contentBox a:active{
  text-decoration: none;
}

div.bildMenu{ 
	float: left;
	height: 100%;
	padding-bottom: 3em;
}
div.bildMenu li{ 
	list-style-type: none;
	
}

div.bildThumbsContainer{
	border: 0px solid green;
}

div.footerBox{
	position: fixed;
	bottom: 0;
	width: 100%;
	max-width: 50em; /* 800px */
	background-color: rgb(232,227,197);
	background-image: url("../gifs/bg.jpg");
	margin-left: -1em;
	padding-left: 1em;
	padding-right: 1em;
	float: left;
}




@media(orientation:landscape) {
	#galleryContainer{
		
		
	}
}



/* Laptops, Desktops (1024px and up) */
@media only screen and (min-width: 64em) {
	div.contentBox{ 
		padding: 1em 6em 3em 6em;
	}
	div.logo{
		height: 18em;
		background-image: url("../gifs/logo_540x270_fon.png");
	}
}

/* Tablets, Ipads (portrait), mobile */ 
@media only screen and (max-width: 63em) {
	div.containerBox{
		max-width: 40em; /* 640px */
	}
	div.contentBox{ 
		padding: 1em 1em 3em 1em;
	}
	div.footerBox{
		max-width: 40em; /* 640px */
	}
	div.logo{
		height: 12.5em;
		background-image: url("../gifs/logo_320x160_fon.png");
	}
}

/* RRR mobile */ 
@media only screen and (max-width: 60em) {
	div.topMenu{	
		padding: 0.1em;
	}
	div.topMenu a{
		font-size: 1.0em;
	}
	div.logo{
		height: 12.5em;
		background-image: url("../gifs/logo_300x150_fon.png");
	}
}