@font-face { 
   font-family: 'goodtime';
   src: url('../fonts/goodtime.woff') format('woff'); 
		font-weight: normal; font-style: normal;}
		/*url('fonts/goodtime.ttf') format('truetype'),*/

body {
	/*border: 1px solid;	*/
	border-color: blue;
	max-width: 60em;
	height: 99%;
	margin: 1em auto;
	background: #000000;
	color: #FFFFFF;
	font-family: Arial;
	font-size: 1.2em;
	display: flex;
	flex-flow: row wrap;
}

html {
	/*border: 1px solid;	*/
	border-color: yellow;
	/*height: 90%;*/
}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */

/* Allgemeine Styles */
#dvNavrahmen { padding: 10px; margin: 0px;	flex: 1 1 100%;	background: black; height: 10%;	}
#dvContent {   padding: 10px; margin: 10px;	flex: 1 1 100%;	background: black; height: 90%; }
#dvTeaser{	   padding: 10px; margin: 0px;	flex: 1 1 100%;	background: black; padding: 0; display: flex; flex-flow: row wrap; }
#dvTeaser *{	flex: 1 1 0%; justify-content: flex-start; margin: 10px;}
.dvTeaserContent {	padding: 10px;	margin: 5px; flex: 1 1 100%;	background: #222;	text-align: center;}

header,
nav,
nav a,
div,
footer {
	/*border: 1px solid;*/
	padding: 10px;
	margin: 0px;
	flex: 1 1 100%;
}

#rgpic {
	/*border: 1px solid;*/
	padding: 0px;
	width: 100%;
	height: auto;
	flex: 1 1 100%;	
}

#content  {
	/*border: 1px solid;*/
	padding: 0px;
	width: 100%;
	height: 100%;
	/*flex: 1 100%;	*/
}

nav,
nav ul,
nav li {
	margin: 0;
	padding: 0;
	border: none;
/*	padding-left: 0px;*/
/*	padding-right: 7px;*/
}

nav ul {
	background: #222; /*grey;*/
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

nav li {
	list-style-type: none;
	margin: 1px; /* notwendig bei vertikaler Anordnung */
/*	flex: 1 1 100%;*/
}

nav li[aria-current] a {
	background-color: grey;
	color: black;
}

nav a,
nav span {
	display: inline-block;
	width: 95%;
	background: #222;
	color: white;
	margin: 0;
	text-decoration: underline;
	text-align: center;
}

nav span {
	line-height: 250%;
}

nav a:hover {
	background-color: #CCC;
	color: black;
}

/* nebeneinander bei ausreichender Breite */

@media all and (min-width: 55em) {
	nav ul {
		flex-direction: row;
	}
	nav li {
		margin: 0 10px;
		flex: 1 1 0%;
	}

	#dvContent {   flex: 1 1 100%;}
	#dvTeaser * {  flex: 1 1 0%;	justify-content: flex-start; margin: 2px 20px; }		
	.dvTeaserContent { flex: 1 1 0%;	}
}

h1, h2 {
	font-family: goodtime, Arial;
}

a:link    { text-decoration:underline; color:white; }
a:visited { text-decoration:underline; color:white;  }
a:hover   { text-decoration:none;      color:grey;  }

a.unsichtbar, a.unsichtbar:visited {color: grey}
a.unsichtbar:hover {color: white}
a.unsichtbar {margin:4px;}

#dvText {opacity: 1.0; padding-left: 1em; padding-right: 1em; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; border: transparent; background: #000000; display: flex; flex-flow: row wrap;}

/* Tabellen generell */
.tabletitle  {background-color:#444; padding:6px; margin:2px;}
.tablerow  {background-color:#222; padding:6px; margin:2px;}

/* Start */
#vdStartvid {margin: 0; padding: 0; width: 100%;}
.example_path {
	position: relative;
	overflow: hidden;
	top: -11.5em;
	width: 55%;
	height: 30px;
	border: 1px solid white;
	z-index: 7;
}
.example_path .example_block {
	position: absolute;
	width: 30px;
	height: 30px;
	padding-top: 0px;
	text-align: center;
	color: #fff;
	font-size: 10px;
	white-space: nowrap;
	z-index: 7;
}
/* Band */
/* Songs */
#dvSongs { padding-left: 1em; padding-right: 1em; margin:0px; display: flex; flex-flow: row wrap; justify-content: center; }
#tbSongs { border-collapse:collapse; flex: 1 1 100%; }
#dvRepertoire{text-align: center;}
#mediaplayer {margin: 0; background-color: black; flex: 1 1 100%; }
#media1 {margin: 0; padding: 0; width: 100%;}
#mpcanvas {margin-right: 10px; border-style:solid; border-width:1px; border-color: #808080; padding:3px; float: left; vertical-align: middle;}
#mptime {font-size: 11pt; margin-top:4px; padding:3px; vertical-align: middle;}
#tbTransport{width: 100%; background-color: #222; margin-top: 5px}
/* Bilder */
/* Gaestebuch */
/* Infos */
#tbInfos {     height: 100%; width: 100%; align: center; border: 0; border-spacing: 5px; margin: -5px }
#tbInfos td {   padding: 2pt}
#tbInfos tbody {text-align: left; vertical-align: top; border-spacing: 3px }
/* Termine */
#tbTermine {     height: 100%; width: 100%; align: center; border: 0; border-spacing: 5px; margin: -5px }
#tbTermine td {   padding: 2pt}
#tbTermine tbody {text-align: left; vertical-align: top; border-spacing: 3px }
/* News */
#tbNews {     height: 100%; width: 100%; align: center; border: 0; border-spacing: 5px; margin: -5px }
#tbNews td {   padding: 2pt; vertical-align: top;}
#tbNews tbody {text-align: left; vertical-align: top; border-spacing: 3px }
#tbNews img { float: left; margin-top:3px; margin-bottom:3px; margin-left:20px; margin-right:20px; width: 200px;}

nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
	color: black;
	background-color: grey;
}
/*     submenu navigation links      */

nav .submenu {
	visibility: hidden;
	height: 0;
	z-index: 1000;
}

nav .submenu li {
	display: block;
	/* width: 15em; */
}

/**     Show the submenu on hover, focus     **/

nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu {
	visibility: visible;
	height: auto;
}

nav li:focus-within .submenu {
	visibility: visible;
	height: auto;
}