:root {
	--Dark-color: #135013;
	--BaseFont: "Comic Sans MS";
	--FooterFont: "Calligraphic";
}
@font-face {
  font-family: 'Comic Sans MS';
  src: url("./../font/comic-sans-ms/comici.ttf");
}
html{
    height: 100%;
	font-family: "Comic Sans MS";
	color: #800000;
}	
body{	
	background-color: #C0C0C0;
	background-image:url(./../images/kachel-mauer.gif);
	background-repeat:repeat;
	margin:0;
	height:calc(100% - 40px);
	}
header, footer
{
	height: auto;
	background-image: url('./../images/holz1.jpg');
	margin:40px;
	margin-right:10%;
	margin-left:10%;
	text-align:center;
	border: 6px outset grey;
}
header{
	height: auto;
}
nav{
	width:200px;
	margin: 50px;
	position:fixed; 
	--background-image:url('./../images/kachel-mauer.gif');
}
main
{
	height:calc(100% - 250px);
	overflow: hidden;
}
a {
	text-decoration: none;
}
.bandcontent{
	margin-left :40px;
	margin-right :40px;
	padding-left: 250px; 	
	overflow: auto;
	background-image: url('./../images/exptextb.jpg');	
}
footer
{
	display: none;
	bottom: 30px; 
	left: 0; 
	right: 0; 
	position: fixed;
	margin-bottom:0px;
	color: rgb(53, 27, 0);
	
}	
footer a:link{
	TEXT-DECORATION:none; 
	FONT-WEIGHT:bold; 
	Font-size:small; 
	color: rgb(53, 27, 0);
}
.Efeu{
	width:500px;
	top:0px;
	position:absolute;
	z-index:99;
	visibility:visible;	
}
#Efeu-right{
	left:550px;
	}
#Efeu-left{
	left:-400px;
	}

.Efeu img{
	width:100%
}


#Mittelalterbild1{
	height:185px;
	width:150px;
	left:-370px;
	top:50px;
	position:absolute;
	z-index:99;
	visibility:visible;
	}
#Mittelalterbild2{
	height:185px;
	width:150px;
	left:-170px;
	top:255px;
	position:absolute;
	z-index:99;
	visibility:visible;
	}
#Mittelalterbild3{
	height:185px;
	width:150px;
	left:650px;
	top:50px;
	position:absolute;
	z-index:99;
	visibility:visible;
	}
#Mittelalterbild4{
	height:185px;
	width:150px;
	left:650px;
	top:255px;
	position:absolute;
	z-index:99;
	visibility:visible;
	}
#Ebene2{
	height:1014px;
	width:596px;
	position:relative;
	visibility:visible;
	}
#Ebene1{
	height:1017px;
	width:610px;
	position:relative;
	visibility:visible;
	}
#Mittelalterbilderebene{
	position:relative;
	width:600px;
	height:504px;
	}
#Fackel1{
	height:185px;
	width:150px;
	left:-50px;
	top:0;
	position:absolute;
	z-index:99;
	visibility:visible;
	}
#Fackel2{
	height:185px;
	width:150px;
	left:535px;
	top:0;
	position:absolute;
	z-index:99;
	visibility:visible;
	}
.threecolcont_Tueren{
	width:600px;
	height:500px;
	}
.threecolbox_Tueren{
	width:auto;
	height:500px;
	float:left;
	}
.doorimg{
	width:100%;
	height:100%;
	}
.door{
	width:49%;
	height:100%;
	position:relative;
	display:inline-block;
	}
.door .img-close{
	display:none;
	position:absolute;
	top:0;
	left:0;
	z-index:99;
	}
.door .img-open{
	display:inline;
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	}
.door .img-content{
	display:none;
	position:absolute;
	top:13%;
	width:48%;
	height:75%;
	z-index:99;
	}
.right .img-content{
	left:43%;
	border-top-right-radius: 110px;
}
.left .img-content{
	left:20%;
	border-top-left-radius: 110px;
}
.door:hover .img-close{
	display:inline;
	}
.door:hover .img-content{
	display:inline;
	}
.door:hover .img-open{
	display:none;
	}
.navbutton{
	border:3px solid #800000;
	background-image:url('./../images/holz1.jpg');
	font-size:1.6em;
	font-style:normal;
	font-weight:bold;
	color:#351B00;
	text-align:center;
	margin-top:25px;
	margin-bottom:25px;
	height: 60px;
	vertical-align: inherit;
	}
.navbutton em {
	vertical-align: -webkit-baseline-middle;
}
.navbutton font
{
	color: #351B00;
}
.active font{ 
	color: #800000;
}
.historyyear{
	display: flow-root;
	padding-left:20px; 
	padding-right:20px;
	width:50%;
}
.historyitem{
	border: 1px solid #800000; 
	display:flex;
	margin:1px;
}
.historydescription{
	border: 1px solid #800000; 
	flex: 50%;
	float:left;
	text-align:center;
	margin:1px;
	padding:10px;
}
.historyimage{
	border: 1px solid #800000; 
	flex: 50%;
	float:right;
	text-align:center;
	margin:1px;
	padding:10px;
}
.project{
	display: flow-root;
	padding-left:20px; 
	padding-right:20px;
	margin:20px;
}
.projecttitle{
	float: left;
	width:30%; 
	padding:5px; 
	font-style: italic; 
	font-size: large; 
	text-align: center; 
	border: 5px solid #808080; 
	background-image: url('./../images/holz2_1.jpg');
}
.projectdescription{
	color:black;
	float: right; 
	width:50%; 
	padding:5px;
	text-align: center; 
	 
	font-style: italic; 
	font-size: medium; 
	border: 3px solid #008000; 
	background-image: url('./../images/papier.jpg');
}
.audiodevice{
	display: flow-root;
	padding-left:20px; 
	padding-right:20px;
	margin:20px;
	margin-bottom: 60px;
}
.devicemain{
	width: 55%;
	float:left;
}
.deviceheader{
	color: #008000; 
	text-align: center; 
	font-size: x-large; 
	font-style: italic; 
	font-weight: bold;
}
.devicefooter{
	text-align:center;
}
.devicedescription{
	width: 40%;
	float:right;
	font-weight: normal;
	font-size: small;
}
.deviceimages{
	text-align: center;
}
.deviceimages img{
	width: 150px;
	height: 150px;
	padding:10px;
}
.deviceimages .mc{
	width: 200px;
	height: 150px;
	padding:10px;
	
}
header h1,h2,h3,h4,h5,h6{
	letter-spacing:0.5em;
}