* {
	margin:0;
	padding:0;
	background:transparent;
	font-family:sans-serif;
	font-size:1.0em;
	line-height:140%;
	color:black;
	box-sizing:border-box;
}

html {

}

body {
	background:rgb(50,50,50);
}

#content {
	margin-top:150px;
	margin-bottom:3em;
	width:100%;
	height:100%;
}

#titleheader {
	position:fixed;
	top:0em;
	left:0em;
	width:100%;
	height:70px;
	background-image:url(images/headpic.png) ;
	background-color:rgb(20,20,20);
	background-repeat:no-repeat;
	/*box-shadow:0px 4px 15px #808080;*/
	border-bottom:solid 1px gray;
}

#titletext {
	width:100%;
	position:absolute;
	top:0px;
	right:0.2em;
	color:Teal;
	font-size:1.3em;
	font-family:serif;
	font-weight:bold;
	letter-spacing:0.3em;
	text-align:right;
	vertical-align:top;
	display:table-cell;
}

#menuline {
	width:100%;
	position:absolute;
	right:0.7em;
	bottom:0.5em;
	color:rgb(200,200,200);
	background:transparent;
	font-size:0.9em;
	font-family:sans-serif;
	text-align:right;
	vertical-align:bottom;
	display:table-cell;
}

#startpageMenubar {
	position:fixed;
	top:70px;
	left:0px;
	width:100%;
	height:40px;
	background:rgb(40,40,40);
	border-bottom:solid 1px gray;
}

#startpageWelcome {
	width:40em;
	min-height:100%;
	background:white;
	opacity:0.8;
	padding:1em;
	border-radius:0.5em;
}

#startpagePictureTitle {
	display:block;
	position:absolute;
	top:10.4em;
	right:2em;
	width:30em;
	height:3.8em;
	background:white;
	opacity:0.8;
	border-radius:0.5em;
}

#hyperLink:hover {
	background:Teal;
	transition:all 0.2s;
}

#hyperLink {
	color:rgb(200,200,200);
	padding:0.3em;
	border-radius:5px;
}

nav {
	box-sizing:border-box;
	float:left;
	width:100%;
	color:lightgray;
	background:rgb(60,60,60);
	font-size:0.8em;
}

nav ul {
	margin: 0;
	padding: 0;
}
 
nav a {
	display:block;
	font-family:sans-serif;
	color:rgb(200,200,200);
	text-decoration:none;
}

nav ul li {
	width:12em;
	height:em;
	position: relative;
	float: left;
	list-style: none;
}
 
nav ul li:hover {
	background:Teal;
	transition:all 0.3s;
}
 
nav ul li a {
	padding: 20px;
}

nav ul ul {
	position: absolute;
	top: -9999px;
	left: -9999px;
	background: #333;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
 
nav ul ul li {
	float: none;
	width:15.6em;
	height:4em;
	padding-left:20px;
	padding-top:1.2em;
	border-bottom: 1px solid #555;
}
 
nav ul ul li a {
	padding: 0px 0px;
}

nav ul li:hover > ul {
	top: 100%;
	left: 0;
}

nav ul ul li:hover > ul {
	top: 0;
	left: 200px;
}

nav ul li.submenu > a:after {
	position: relative;
	float: right;
	content: '';
	margin-left: 0px;
	margin-top: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 0px solid #fff;
	border-bottom: 0px solid transparent;
}

nav ul ul li:last-child {
	border-bottom: none;
}

#menuImageBox {
	width:25em;
	max-height:14em;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
	border: 1px solid #555;
}

#menuImage {
	width:25em;
	height:14em;
	object-fit:cover;
	transition:all 0.3s;
}

#menuOptionsBox {
	width:24em;
	height:14em;
	padding:1em;
	color:rgb(200,200,200);
	line-height:1.75em;
	background: #333;
	border: 1px solid #555;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
	overflow-y:auto;
}

#menuAlbumListBox {
	width:34em;
	height:40.2em;
	padding:0em;
	color:rgb(200,200,200);
	line-height:1.75em;
	background: #333;
	border: 1px solid #555;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
	overflow-y:auto;
}

#menuAlbumPicBox {
	width:5em;
	height:3.2em;
	border:solid 1px DimGray;
	border-radius:0.5em;
	overflow:hidden;
	float:left;
	margin-right:1em;
}

#menuAlbumLine:hover {
	background:Teal;
	transition:all 0.3s;
}

#menuAlbumLine {
	height:4.0em;
	padding:0.25em;
}

#menuAlbumTitle {
	font-size:0.9;
	color:rgb(230,230,230);
}

#menuAlbumNumOfPics {
	color:rgb(150,150,150);
	font-size:0.8;
}


a:link, a:visited {
	background:transparent;
	text-decoration:none;
	color:rgb(200,200,200);
	font-family:sans-serif;
}

a:hover {
	background:transparent;
	text-decoration:underline;
	color:rgb(200,200,200);
	font-family:sans-serif;
	transition:all 0.3s;
}


#bottomline {
	position:fixed;
	left:0em;
	bottom:0em;
	width:100%;
	height:2.0em;
	background-image:linear-gradient(to right,rgb(20,20,20) 0%,white 100%);
	border-top:solid 1px gray;
	/*box-shadow:0px -4px 15px #808080;*/
}

#bottomlinetext {
	color:rgb(200,200,200);
	font-size:0.9em;
	font-family:serif;
	padding:0.3em 0em 0em 0.5em;
}

#startpagepicbox {
	width:25em;
	height:10.5em;
	border:solid 1px black;
	border-radius:0.5em;
	margin-left:1.0em;
	float:left;
	box-shadow:0px 4px 15px #808080;
	overflow:hidden;
}

#startpagerubrikname {
	width:30em;
	margin-left:1.0em;
	float:left;
}

#startpagerubriktitle {
	font-family:serif;
	color:darkblue;
	border-bottom:solid 1px gray;
}

#startpagerubrikdescription {
	font-size:0.9em;
	color:gray;
}

#lightbox {
	width:100%;
	display:grid;
	justify-content:center;
	align-items:center;
	grid-template-columns:repeat(6,14vw);
}

#thumbs {
	width:13vw;
	height:13vw;
	margin:0em 0em 1em 0em;
	border:solid 1px black;
	border-radius:0.6em;
	overflow:hidden;
	background:black;
}

#buttonNextPic {
	z-index:11;
	position:absolute;
	right:5px;
	top:50%;
	opacity:0.1;
	transition: all ease 0.5s;
}

#buttonPrevPic {
	z-index:11;
	position:absolute;
	left:5px;
	top:50%;
	opacity:0.1;
	transition: all ease 0.5s;
}

#buttonPrevPic:hover {
    opacity: 0.7;
    transition: all ease 0.5s;
}

#buttonNextPic:hover {
    opacity: 0.7;
    transition: all ease 0.5s;
}

#PictureFrame {
	position:absolute;
	max-width:100%;
	max-height:100%;
	top:1em;
	bottom:1em;
	left:4em;
	right:4em;
}

#PicInfoContainer {
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	background:transparent;
	display:flex;
	justify-content:center;
	align-items:center;
}

#PicInfoBox {
	width:62em;
	height:35em;
	background:white;
	opacity:0.9;
	border:solid 1px DarkGray;
	border-radius:1em;
	padding:1em;
	font-size:0.8em;
	box-shadow:0px 4px 15px #808080;
}


/* Anzeige für Tablets */
@media only screen and (max-width: 1024px) {
	#PictureFrame {
		position:absolute;
		top:0em;
		bottom:0em;
		left:0em;
		right:0em;
	}

	#startpageWelcome {
		width:100%;
		height:100%;
		background:white;
		opacity:0.8;
		padding:1em;
		border-radius:0.5em;
	}

	nav ul li a {
		padding: 12px;
	}

	nav ul ul li {
		float: none;
		width:12em;
		height:3em;
		padding-left:10px;
		padding-top:0.8em;
		border-bottom: 1px solid #555;
	}
 
	nav ul li {
		width:8em;
		position: relative;
		float: left;
		list-style: none;
	}
	 
	nav ul ul li:hover > ul {
		top: 0;
		left: 12em;
	}

	#menuImageBox {
		width:15em;
		max-height:9em;
	}

	#menuImage {
		width:15em;
		height:9em;
		object-fit:cover;
		transition:all 0.3s;
	}

	#menuOptionsBox {
		width:15em;
		height:10em;
		padding:1em;
		color:rgb(200,200,200);
		line-height:1.75em;
		background: #333;
		border: 1px solid #555;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
		overflow-y:auto;
	}

	#menuAlbumListBox {
		width:26em;
		height:30.2em;
		padding:0em;
		color:rgb(200,200,200);
		line-height:1.70em;
		background: #333;
		border: 1px solid #555;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
		overflow-y:auto;
	}

	#menuAlbumLine {
		height:3.0em;
		padding:0.25em;
	}

	#menuAlbumTitle {
		font-size:0.9em;
		color:rgb(230,230,230);
	}

	#menuAlbumNumOfPics {
		color:rgb(150,150,150);
		font-size:0.8em;
	}

	#menuAlbumPicBox {
		width:4em;
		height:2.4em;
		border:solid 1px DimGray;
		border-radius:0.25em;
		overflow:hidden;
		float:left;
		margin-right:1em;
	}
	
	#startpagePictureTitle {
		display:none;
	}
}


/* Anzeige für Smartphones */
@media only screen and (max-width: 480px) {
	#menuline {
		width:100%;
		position:absolute;
		right:0.0em;
		padding-right:0.3em;
		bottom:0em;
		color:rgb(0,0,0);
		background:rgb(255,255,255);
		opacity:0.85;
		font-size:0.9em;
		font-family:sans-serif;
		text-align:right;
		vertical-align:bottom;
		display:table-cell;
	}

	a:link, a:visited {
		font-family:sans-serif;
	}

	a:hover {
		font-family:sans-serif;
	}
	
	#lightbox {
		width:100%;
		display:grid;
		justify-content:center;
		align-items:center;
		grid-template-columns:repeat(3,32vw);
	}
	
	#thumbs {
		width:30vw;
		height:30vw;
		margin:0em 0em 1em 0em;
		border:solid 1px black;
		border-radius:0.3em;
		overflow:hidden;
	}

	#startpagepicbox {
		width:90%;
		height:12em;
		border:solid 1px black;
		border-radius:0.5em;
		margin-left:1.0em;
		float:left;
		box-shadow:0px 4px 15px #808080;
		overflow:hidden;
	}

	#startpagerubrikname {
		width:90%;
		margin-left:1.0em;
		margin-bottom:1.0em;
		float:left;
	}

	#buttonNextPic {
		z-index:11;
		position:absolute;
		right:5px;
		top:95%;
	}

	#buttonPrevPic {
		z-index:11;
		position:absolute;
		left:5px;
		top:95%;
	}

	#PictureFrame {
		position:absolute;
		top:0em;
		bottom:0em;
		left:0em;
		right:0em;
	}
	
	#startpageWelcome {
		width:100%;
		height:100%;
		background:white;
		opacity:0.8;
		padding:1em;
		border-radius:0.5em;
	}
}