/*Stylesheet fuer Mandolinen- und Gitarrenorchester Neuweier*/
<style>
* {box-sizing: border-box;}
html {
  width: 100%;  
  height: 100%;
}

body   { 
	background: linear-gradient(#FAFAD2, yellow);
	width: 100%;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
}

.header {
display: grid;
grid-template-columns: auto auto auto auto auto auto auto auto auto auto;

/*  background: #BDB76B;*/
  width:100%;
  height: 4.5em;
/*  text-align: center; */
  border: 0 0 3px 0 double green;
  
}

.hditem1 { grid-area: 1 / 1 / span 1 / span 2;
	text-align: right;
	height: 100%;
    position: relative;
    top;
	}
.hditem2 { grid-area: 1 / 3 / span 1 /span 6;
	text-align: center;
	position: relative;
	top: 0;
/*	height: 100%;*/
	}
.hditem3 { grid-area: 1 / 9 / span 1 / span 2;
	text-align: left;
/*	height: 100%;*/
	}
.einspaltig {
	border: 0;
	margin: 0;
	font-size: 2em;
	font-style: italic;
	font-weight: bold;
}


.item1 { grid-area: addr1; }
.item2 { grid-area: addr2; }
.item3 { grid-area: addr3; }
.item4 { grid-area: addr4; }
.item5 { grid-area: addr5; }
.item6 { grid-area: addr6; }
.item7 { grid-area: addr7; }
.item8 { grid-area: addr8; }
.item9 { grid-area: addr9; }


.nav-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto;
  grid-gap: 0.6em;
  	background-color: #d0cc95;
  padding: 0;
  overflow-x: scroll;
  
}

.nav-container > div {
  background-color:  #d0cc95;
/*  border: 1px solid black;*/
  width: 100%;
  height: 5%;
  text-align: center;
/*  font-size: 1em;*/
}
.main {
	width: 100%;
	max-height: 77%;
	overflow: scroll;
	padding-left: 1em;
}
 
.seitenueberschrift {
  align: center;
}

div.zentrKast {
	display: block;
	max-width: 26em;
	padding: 2em;
	border: 10px double #d0cc95;
}
div.virtKast {
	display: block;
/*	max-width: 26em;*/
	padding: 1em;
/*	border: 10px double #d0cc95;*/
}
div.leerCont {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
}
@media only screen and (max-width: 500px){
div.leerCont {
	display: flex;
	width: 100%;
	direction: columns;

}
}

img.logo {
	display: block;
	width: 4em;
	max-height: auto;
}


.footer {
	background: green linear-gradient(60deg, green, yellow, sienna);	
	color: black;
	height: 3em;
    width: 100%;
}

ul {
  list-style-type: none;
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

ul.a {
  list-style-type: disc;
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

ul.b {
  list-style-type: circle;
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

li.a {
  display: inline;
}
li.b {
  display: none}


p.footcont {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}
span {font-style: italic; color: blue;}
span.a {font-style: italic; color: red;}
span.b {font-style: italic; color: green;}
span.c {font-style: italic; color: black;}

#auslassung {font-style: bold;}
#anrede {text-align: center; font-size: 2em;}
.idx-vsp {margin: 2em; }
.abspann {margin: 2em;}

.dropbox {
/*  display: block;*/
  width: 100%;
  }
}
.dropdown {
display: flex;
direction: column
width: 100%;
}
.drop-row {
   display: flex;
   direction: row;
   width: 100%;
   height: 100%;
}

}
.dropbtn {
/*  display: inline;*/
}
.dropdown-content {
/*    display: none;*/
/*    z-index: 1;*/
}
.butt {
	width: 20%;
}

.dropdown-content a {
    color: black;
    text-decoration: none;
    display: block;
	width: 80%;
	position: relative;
/*	bottom;*/
}

.dropdown-content a:hover {background-color: white;}
.dropdown:hover .dropdown-content {display: block;}
/*.dropdown:hover .dropbtn {background-color: grey;}*/

.repert {
  margin: 30px;
  text-align: center;
}

 iframe {max-width: 560px;}
.ifr-container {
	position: relative;
	width: 100%;
	overflow: scroll;
	padding-top: 56,9;
}
.resp-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border: none;
}
@media only screen and (max-width: 900px){

	.drop-row {
		display: inline;
		width: 100%;
      	height: 100%
	}
	.butt {
	width: 100%;
	}
	.dropdown-content a {
	    color: black;
	    text-decoration: none;
		width: 100%;
	    display: block;
		position: relative;
		bottom;
	}
	
.footer {
	height: 4em;
}
}
@media only screen and (max-width: 500px){

.einspaltig {
	font-size: 1.2em;

}
}
</style>