body, html {
	font-family: Arial, Verdana, Helevetica, sans-serif;
	/*  font-size: 		hier scheinbar keine Angabe oder 100% einsetzen, da hier der Browserstandard hergenommen wird */
	background:  #222;
	color: 			 #C0C0C0;
	margin: 		 0;
	padding: 		 0;
	border: 		 0;
}
body {
	font-size: 	15px;  /* am 2.9.2018 von 14 auf 15 erhöht, auch die line-height in Folge von 1.4 auf 1.5 erhöht */
	font-size: 	0.9375rem; /* 0.875rem */
}

/*****************  Globale Fonteinstellungen **************/
/* Info: Textgröße in rem ermitteln -> Pixel / Webbrowser-Basis 
  Webbrowser-Basis ist normalerweise 16 Pixel
  Beispiel: 15 Pixel / 16 Pixel = 0.9375rem, 14px=0.875rem, 13px=0.8125rem, 12px=0.75rem, 11px=0.6875rem, 10px=0.625rem 
*/
.font_xx-small {
	font-size: 	xx-small;
}
.font_small {
	font-size:	small;
}
.font_hell {
	color: 			white;
}
.font_dunkel {
	color: 			#C0C0C0;
}


/* ================  Aussehen der Links bestimmen  ======================================== */
a:active  {color:#FFFF99; text-decoration:none;}
a:link    {color:#FFFF99; text-decoration:none;} 
a:visited {color:#FFCC99; text-decoration:none;}
a:hover   {color:#FFFF00; text-decoration:none;} 

a.grau:active  {color:#C0C0C0; text-decoration:none;}
a.grau:link    {color:#C0C0C0; text-decoration:none;} 
a.grau:visited {color:#C0C0C0; text-decoration:none;}
a.grau:hover   {color:#FFFF00; text-decoration:none;} 

a.weiss:active  {color:#FFFFFF; text-decoration:none;}
a.weiss:link    {color:#FFFFFF; text-decoration:none;} 
a.weiss:visited {color:#FFFFFF; text-decoration:none;}
a.weiss:hover   {color:#FFFF00; text-decoration:none;} 

a.foruminfo:active  {color:#F0F0F0; text-decoration:none;}
a.foruminfo:link    {color:#F0F0F0; text-decoration:none;} 
a.foruminfo:visited {color:#F0F0F0; text-decoration:none;}
a.foruminfo:hover 	{color:#FFFF00; text-decoration:none;}

/* linkes Menue */
a.menue_l:active  {color:#C0C0C0; text-decoration:none;}
a.menue_l:link    {color:#C0C0C0; text-decoration:none;} 
a.menue_l:visited {color:#C0C0C0; text-decoration:none;}
a.menue_l:hover   {color:#FFFFFF; text-decoration:none; font-weight:bold; background-color: #990000; } /* Nicht bei Netscape */

/*  wird wohl nicht mehr benutzt 
a.menue_r:active  {color:#FFFF99; text-decoration:none; background-color:#000000;}
a.menue_r:link    {color:#FFFF99; text-decoration:none; background-color:#000000;} 
a.menue_r:visited {color:#FFCC99; text-decoration:none; background-color:#000000;}
a.menue_r:hover   {color:#FFFF00; text-decoration:none; font-weight:bold; background-color:#000000;} 
*/

a.menue_small {  									/* um Links kleiner anzuzeigen */
	font-size: 10px;  							/* für ältere Browser */	
	font-size: 0.625rem; 
}


/* ================  Liste Typ 1 Formatierung ======================== */
/* Basiert auf Tabellenform */
.liste_typ1 table {
	width: 100%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	border: none;
  border-spacing: 0px;
}

 /* .liste_typ1 td  -->  siehe auch Responsive 1-Spaltig */
 
 /* die td_x können mit weiteren Klassen z.B. bzgl. Breite angepasst werden (siehe Abschnitte unten) */
.liste_typ1	td:nth-child(1) {
	text-align: left;
	width: 10%;
	height: 24px;
}
.liste_typ1	td:nth-child(2) {
	text-align: left;
	width: 60%;
	height: 24px;
}
.liste_typ1	td:nth-child(3) {
	text-align: left;
	width: 30%;
	height: 24px;
}

.liste_typ1_zwischentitel {
	border-top-style: dashed;
	border-top-width: 1px;
	font-weight: bold;
}
.liste_typ1_titel {
	background-image: url(/gifs/topcell.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 15px; 
	font-size: 0.9375rem; 
	font-weight: bold;
  color: white;
}
.liste_typ1 a:active  {color:white; text-decoration:none; }
.liste_typ1 a:link    {color:white; text-decoration:none; } 
.liste_typ1 a:visited {color:white; text-decoration:none; }
.liste_typ1 a:hover   {color:#C0C0C0; text-decoration:none; font-weight:bold; } 


/* ================  Aussehen der Fussnoten bestimmen  ======================================== */
	/* 
	* Inline footnotes Referencen
	* 1. Inkrementiere (erhöhe um 1) den counter bei jedem neuen Verweis
	* 2. Links normalisieren, damit sie als regulärer Text erscheinen */

	a[aria-describedby="footnote-label"]
	{
		counter-increment: footnotes; /* 1 */
		text-decoration: none; /* 2 */
		color: inherit; /* 2 */
		cursor: default; /* 2 */
		outline: none; /* 2 */
	}

	/**
	* Anmerkungsziffern
	* 1. aktuellen Wert des counters anzeigen (z.B. `[1]`)
	* 2. Text wird hochgestellt
	* 3. Textgrösse verkleinert (da sie ja hochgestellt ist)
	* 4. kleine Verschiebung vom Text weg
	* 5. Aufheben der Linknormalisierung, damit die Zahl als Link erkennbar wird
	*/
	a[aria-describedby="footnote-label"]::after
	{
		content: '[' counter(footnotes) ']'; /* 1 */
		vertical-align: super; /* 2 */
		font-size: 0.7em; /* 3 */
		margin-left: 2px; /* 4 */
		color: #FFFF99;  /* 5 */
		/* text-decoration: underline; */ /* 5 */
		cursor: pointer; /* 5 */
	}

	/* Resetting the default focused styles on the number */
	a[aria-describedby="footnote-label"]:focus::after
	{
		outline: thin dotted;
		outline-offset: 2px;
	}



/*****************  Globale Bilderseinstellungen **************/
img {
	border: 0;  /* Neu 01.2017 alle Bilder grundsätzlich ohne Rand. Damit kann das border=0 im html entfallen, da mittlerweile ungültig */
}


/******* INPUT Eingaben mit X und Haken erweitern ********/
/* Überprüfung von Eingaben (INPUT), wenn Wert gültig/ungültig wird, wenn direkt nach einem INPUT ein <span class="validity"></span>
folgt, entweder ein rotes X oder ein grüner Haken über CSS eingefügt (Nachbarselektor e+f) */
input:invalid+span.validity:after {
    content: "\002717";       /*  ein besonderes X als Zeichen für Ungültig */
    padding-left: 5px;
    color: red;
    font-weight: bold;
}

input:valid+span.validity:after {
    content: "\002713";       /*  ein Haken (check) als Zeichen für Gültig */
    padding-left: 5px;
    color: green;
    font-weight: bold;
}



/* Die  th.hio, th.hio_l, th.hio_l_b sollten nur im main Teil benutzt werden, somit können responsive design Dinge nicht andere Elemente beeinflussen */
/* _l bedeutet LINKS formatiert, _b bedeutet BIG also große Schrift  */
.menue_l_headline, .menue_r_headline, .menue_l_headline_mobile, .menue_r_headline_mobile,
p.headline_hio, p.headline_l_hio, .headline_l_b_hio,  
 th.menue_l, th.menue_r,
 th.hio, th.hio_l, th.hio_l_b { 
	height: 18px;	
	background-image: url(/gifs/topcell.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  font-family: Verdana, Arial, Helevetica, sans-serif;
	color: #c0c0c0;
  font-size:   13px;  /* für ältere Browser */
	font-size:   0.8125rem; 
	font-weight: normal;
	text-align:  center;
	vertical-align: middle;  /* wirkt leider nur bei Tabellen */
	margin: 0;
}

.menue_l_headline, .menue_r_headline, .menue_l_headline_mobile, .menue_r_headline_mobile {
	margin:	2px 0 2px 0;	  /* Rand oben und unten */
}

p.headline_l_hio, .headline_l_b_hio,
 th.hio_l, th.hio_l_b {     /* Text links */
	text-align:  left;
}

.headline_l_b_hio,
 th.hio_l_b {     /* Text links und sehr große Schrift */
	height: 		28px;	
	font-size:  16px;  /* für ältere Browser */
	font-size:  1rem;
	line-height: 24px; /* richtet Text vertikal aus */
}

.youtube_560 {
	width: 100%;
	max-width: 560px;
	/* height: 100%; es funktioniert am besten ohne Höheneinstellung, auch auto bringt nur 150px hohe Videos*/
}

.google_maps_500 {
	border: 0;
	width: 100%;
	max-width: 500px;	
}

.mobile_only {
	display: none;
}	

.no_block_content {
	display: inline;  /* z.B. für erzwungene DIV durch Schema.org auszeichnungen */
}

/***************** Seitenüberschriften der HIO Seiten **************/
.page_title_hio {
	font-size: 16px;
	font-size: 1rem; 
	font-weight: normal;
	color:			white;
}



/* ================  Cookie Infobox ======================== */
#cookieNotice 	{
		position: relative;
		background-color: #c0c0c0;
		border-bottom: solid 1px #a0a0a0;
		padding: 10px;
		text-align: center;
		color: black;
}
	
#cookieNotice a 	{
		color: black;
		text-decoration: underline;
}
	
#cookieNoticeCloser {
		position: absolute;
		right: 10px;
		width: 15px;
		height: 15px;
		cursor: pointer;
}



/* =================  Impressum, Datenschutzerklärung, Disclaimer, Banner, Suche, Merchandise, Countdown Formatierung =========================== */
.impressum, .datenschutzerklaerung, .disclaimer, .banner, .suche, .merchandise, .cse-branding-form {
	width: 100%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	border: none;
  text-align: left;
  line-height: 1.5;
  	/* automatische Silbentrennung */
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
} 
.banner {
	text-align: center;
}
.banner img {
	width: 100%;
	max-width: 468px;
	height: auto;
}
.suche_eingabe {
	max-width: 60%;
}
.merchandise_img {
	width: 100%;
	text-align: center;
}
.merchandise_img img {
	width: initial;
	height: auto;
	max-width: 100%;
}
.merchandise h3 {
	color: white;
	text-align: center;
}
.merchandise_ausverkauft {
	color: white;
	font-weight: bolder;
	text-shadow: red 2px 3px;
}

.countdown_counter {
	float: left;
	text-align: left;
	font-size: 11px;
	font-size: 0.6875rem;
	margin-right: 10px;
}
.countdown_description {
	color: #808080;
}
.countdown_link {
	float: right;
	text-align: right;
	font-size: 11px;
	font-size: 0.6875rem;
}


/* ================  Intern Basic ============================== */
/* für interne Seiten */
.intern_basic {
	width: 95%;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.intern_basic_hinweistext {
	text-align: justify;
}
.intern_basic_warntext {
	color: red;
	font-weight: bold;
}
.intern_basic_labeltext {
	color: white;
	font-weight: bold;
}
.intern_basic_feld_infotext {
	font-size: 13px;
	font-size: 0.8125rem;
}
.intern_basic input, .intern_basic select, .intern_basic textarea {
  margin-top: 4px;
  max-width: 100%;
}


/* ================  Metalinfo Formatierung ======================== */
.metalinfo {
	width: 100%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	border: none;
  text-align: justify;
  line-height: 1.5;
  counter-reset: footnotes;    /* für Fussnoten */
}
.metalinfo_hio_logo {
	margin-bottom: 15px;
	text-align: center;
}
.metalinfo_sprungleiste {
	width: 100%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;	
}
.metalinfo_headline {
	margin-bottom: 20px;
	font-size: 16px;
	font-size: 1rem; 
	font-weight: bold;
	color: red;
	text-align: center;
}
.metalinfo_headline_small {
	margin-top: 20px;
	color: red;
	text-align: center;
}
.metalinfo_weitere_bands, .metalinfo_weitere_alben {
	margin-bottom: 15px;
	font-weight: bold;
	text-align: center;
}
.metalinfo_genre {     /* siehe auch Responsive 1-Spaltig */
	margin-top: 25px;
	margin-bottom: 25px;
	text-align: center;
}
.metalinfo_bandfotos {
	text-align: center;
}
.metalinfo figure {     /* siehe auch Responsive 1-Spaltig */
	display: inline-block;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 7px;
	margin-right: 7px;
}
.metalinfo figcaption {
	text-align: center;
	background: #1E262E;
}
.metalinfo_verfasser {
	margin-top: 35px;
	font-size:	13px;
	font-size: 0.8125rem;
	text-align: center;
	color: #666666;
}


/* ================  Bandinfo Liste Formatierung ======================== */
.liste_bands	td:nth-child(2) {
	width: 50%;
}
.liste_bands	td:nth-child(3) {
	width: 40%;
}


/* ================  Interview-Liste Formatierung ======================== */
.interview_list_logo {	/* siehe auch Responsive 1-Spaltig */
	width: 100%;
	max-width: 600px;
	height: auto;
}


/* ================  Konzert-Liste Formatierung ======================== */
.concert_list table {   /* siehe auch Responsive 720px und Responsive 1-Spaltig - 360px */
	width: 100%;
	border: none;
  border-spacing: 1px;
  text-align: left;
}
.concert_list th {
  text-align:  center;
  color: 			 white;
  height: 25px;
}
.concert_list tr {
  background-color: #3B434B;
  min-height: 12px;
}
td.concert_list_info {
  background-color: #3B434B;
  padding: 5px;
  min-height: 12px;
} 
.concert_list tr:nth-of-type(odd) {
	background-color: #1E262E;
}
.concert_list	th:nth-child(1), .concert_list td:nth-child(1) {
	width: 33%;
	min-width: 33%;
	padding-left: 5px;
  padding-right: 5px;
}
.concert_list	th:nth-child(2), .concert_list td:nth-child(2) {
	width: 33%;
	padding-left: 5px;
  padding-right: 5px;
}
.concert_list	th:nth-child(3), .concert_list td:nth-child(3) {
	width: 34%;
	padding-left: 5px;
  padding-right: 5px;
}


/* ================  Einzel - Bandinfo Formatierung ================= */
.bandinfo,  .bandinfo table {
	width: 100%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	border: none;
  border-spacing: 0px;
  text-align: justify;
  line-height: 1.5;
  counter-reset: footnotes;    /* für Fussnoten */
}
.bandinfo_titel, .bandinfo_titel_text, th.bandinfo_titel {     /* siehe auch Responsive 1-Spaltig */
	margin-bottom: 10px; 
	font-size: 16px;
	font-size: 1rem; 
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	color:			white;
}
.bandinfo_titel_text {
	text-transform: none;
}
.bandinfo_text {
	margin-bottom: 20px;    /* Abstand zwischen den Blöcken */
}
.bandinfo_detail {
	margin-bottom: 10px;    /* Abstand zwischen den Blöcken */
}
.bandinfo_detail_titel {
	margin: 0px;
	font-size: 15px;
	font-size: 0.9375rem;
	font-weight: bold;
	text-align: left;
	color: white;
}
.bandinfo_detail_text {
	text-align: left;
}
.bandinfo img {     /* siehe auch Responsive 1-Spaltig */
	margin-top: 2px;
	margin-left: 5px;
	margin-right: 5px;
}
.bandinfo_verfasser {
	font-size:	13px;
	font-size: 0.8125rem;
	color: #666666;
}
.bandinfo figure {     /* siehe auch Responsive 1-Spaltig */
	float: left;
	display: inline;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 7px;
	margin-right: 7px;
}
.bandinfo figure:nth-of-type(odd) {
	float: left;
	margin-left: 1px;
}
.bandinfo figure:nth-of-type(even) {
	float: right;
	margin-right: 1px;
}
.bandinfo figcaption {
	text-align: center;
	background: #1E262E;
}
/* Links siehe auch unter   @media screen and (max-width: 440px) */
.bandinfo	a:active  {color:#FF0000; text-decoration:none; }
.bandinfo a:link    {color:#FF0000; text-decoration:none; } 
.bandinfo a:visited {color:#FF0000; text-decoration:none; }
.bandinfo	a:hover   {color:#FFC0C0; text-decoration:none; font-weight:bold; }

/*  Bei den Link-Listen unten die Standard Link Farben verwenden */
.bandinfo aside a:active  {color:#FFFF99; text-decoration:none;}
.bandinfo aside a:link    {color:#FFFF99; text-decoration:none;} 
.bandinfo aside a:visited {color:#FFCC99; text-decoration:none;}
.bandinfo aside a:hover   {color:#FFFF00; text-decoration:none; font-weight: normal;} 


/* ============  Giginfo Formatierung (Path of Death, ...) ============= */
.giginfo {
	width: 100%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	border: none;
  line-height: 1.5;
  counter-reset: footnotes;    /* für Fussnoten */
}
.giginfo_logo {
	width: 100%;
	max-width: 480px;
	height: auto;
}
.giginfo_img {
	/*   siehe auch Responsive 1-Spaltig */ 
}
.giginfo_kopf {
	color: white;
	text-align: center;	
}
.giginfo_menue {
	margin-top: 10px;
	margin-bottom: 10px;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #808080;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;	
}
.giginfo_highlight {
	color: white;
}
.giginfo_bandname {
	color: white;
	font-weight: bold;
}
.giginfo_verfasser {
	font-size:	13px;
	font-size: 0.8125rem;
	color: #666666;
}
.giginfo_segment_titel {
	margin-top: 15px;
	margin-bottom: 10px;
	min-height: 30px;
	line-height: 30px;
	font-size: 16px;
	font-size: 1rem;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
		background-image: url(/gifs/topcell.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
	color: #FF0000;
}
.giginfo_vorwort {
	text-align: justify;	
	font-family: Comic Sans MS;
}
.giginfo_news, .giginfo_tickets, .giginfo_vorverkauf, .giginfo_merchandise, .giginfo_anreise {
	text-align: justify;
}
.giginfo_running_order {
	text-align: left;
}
.giginfo_flyer {
	text-align: center;	
}
img.giginfo_flyer_img {
	width: 100%;
	max-width: 600px;
	height: auto;
}
.giginfo_trennlinie {
	margin: 10px 0px; 
	text-align: center;
}
.giginfo_trennlinie_img {     /* siehe auch Responsive 1-Spaltig */
	margin: 0;
	width: 100%;
	max-width: 400px;
	height: auto;
}
.giginfo_footer {
	font-size:	13px;
	font-size: 0.8125rem;
	text-align: center;
	color: #808080;
}
/* Links siehe auch unter   @media screen and (max-width: 440px) */
.giginfo a:active  {color:#FF0000; text-decoration:none; }
.giginfo a:link    {color:#FF0000; text-decoration:none; } 
.giginfo a:visited {color:#FF0000; text-decoration:none; }
.giginfo a:hover   {color:#FFC0C0; text-decoration:none; font-weight:bold; }


/* ================  Einzel - Interview Formatierung ======================== */
.interview {
	width: 99%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;
  counter-reset: footnotes;    /* für Fussnoten */
}
.interview_fussnoten {
	font-size: 	12px;
	font-size: 	0.75rem; 
  text-align: left;	
  border-top: 1px solid #808080;
  padding-top: 5px;
}
.interview_weitere_links_oben {
  border-top: 1px solid #808080;
  border-bottom: 1px solid #808080;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;	
}
.interview_kopf {
  color: white;
	text-align: center;	
}
.headline_highlight {
  font-weight: bold;
}
.interview_vorwort {
	border-bottom: 1px solid #808080;
  padding-bottom: 20px;
  margin-bottom: 7px;
	text-align: justify;
	font-style: normal;
	font-size: 	16px;
	font-size: 	1rem;
	line-height: 1.5;
}
.interview_text {
	text-align: justify;	
}
.interview figure {     /* siehe auch Responsive 1-Spaltig */
	float: left;
	display: inline;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 7px;
	margin-right: 7px;
}
.interview figure:nth-of-type(odd) {
	float: right;
	margin-right: 1px;
}
.interview figure:nth-of-type(even) {
	float: left;
	margin-left: 1px;
}
.interview figcaption {
	text-align: center;
	background: #1E262E;
}
.interview img {     /* siehe auch Responsive 1-Spaltig */
	margin-left: 2px;
	margin-left: 4px;
	margin-right: 4px;
}
.interview figure img {     /* siehe auch Responsive 1-Spaltig */
	margin: 0;		/*  Fotos im Figure Rahmen mit geringerem Außenabstand  */
}
.interview_title_foto {  /* Erstes Foto im Text (normalerweise das Bandfoto) ausrichten */
	float: right;
}
img.interview_logo {
	width: 100%;
	max-width: 600px;
	height: auto;
	margin: 0;  /* Wichtig: Nach img platzieren, da hier margin 4px gesetzt*/
}
.interview hr {
	height: 1px;
	border: 0;
	background: #808080;
}
.interview_infolinks {
	border-top: 1px solid #808080;
  border-bottom: 1px solid #808080;
  padding-top: 10px;
  padding-bottom: 10px;
	font-size:	13px;
	font-size: 0.8125rem;
	color: #808080;
}
.interview_hio_name {
	font-weight: bold;
}
.interview_partner {
	padding-bottom: 15px;
	color: white;
}
.interview_partner_name {
	font-weight: bold;
}
.interview_verfasser {
	font-size:	13px;
	font-size: 0.8125rem;
	color: #808080;
}
.interview_verfasser_datum {
	font-size:	13px;
	font-size: 0.8125rem;
	color:	#808080;
}

/* ================  Konzertbericht Formatierung ================= */
.konzertbericht {
	width: 99%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;
  counter-reset: footnotes;    /* für Fussnoten */
}
.konzertbericht_fussnoten {
	font-size: 	12px;
	font-size: 	0.75rem; 
  text-align: left;	
  border-top: 1px solid #808080;
  padding-top: 5px;
}
.konzertbericht_weitere_links_oben {
  text-align: center;	
}
.konzertbericht_weitere_links_unten {
  text-align: left;	
  border-top: 1px solid #808080;
  padding-top: 5px;
}
.konzertbericht_kopf {
  color: white;
	text-align: center;	
}
.konzertbericht_einleitung {
	text-align: justify;
	font-style: normal;
	font-size: 	16px;
	font-size: 	1rem;
	line-height: 1.5;
}
.konzertbericht_text {
	text-align: justify;	
}
.konzertbericht_bandname {
	font-weight: bold;	
}
.konzertbericht table {
	width: 100%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	border: none;
  border-spacing: 0px;
  text-align: justify;
  line-height: 1.5;
}
.konzertbericht ul {
	margin: 0;
	border: 0;
	padding: 0;
	text-align: left;
	list-style-type: none;
	list-style-position: inside;
}
.konzertbericht li::before {
	content: "✪"; /* Insert content that looks like bullets */
	padding-right: 8px;
}
.konzertbericht figure {     /* siehe auch Responsive 1-Spaltig */
	float: left;
	display: inline;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 7px;
	margin-right: 7px;
}
.konzertbericht figure:nth-of-type(odd) {
	float: right;
	margin-right: 1px;
}
.konzertbericht figure:nth-of-type(even) {
	float: left;
	margin-left: 1px;
}
.konzertbericht figcaption {
text-align: center;
background: #1E262E;
}
.konzertbericht img {     /* siehe auch Responsive 1-Spaltig */
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 4px;
	margin-right: 4px;
}
.konzertbericht figure img {     /* siehe auch Responsive 1-Spaltig */
	margin: 0px;		/*  Fotos im Figure Rahmen mit geringerem Außenabstand  */
	display: block;    /* damit wird kein unschöner Abstand zwischen Bild und figcaption angezeigt */	
}
img.konzertbericht_logo {
	width: 100%;
	max-width: 640px;
	height: auto;
	margin: 0;  /* Wichtig: Nach img platzieren, da hier margin 4px gesetzt*/
}
img.konzertbericht_img_voll {   /* über ganze Tabellenbreite */
	width: 100%;
	height: auto;
	margin: 0;  /* Wichtig: Nach img platzieren, da hier margin 4px gesetzt*/
}
.konzertbericht hr {
	height: 1px;
	border: 0;
	background: #808080;
}
.konzertbericht_titel_inline {
	font-size: 	16px;
	font-size: 	1rem;
	font-weight: bold;
	color: white;
}
.konzertbericht_verfasser {
	font-size:	13px;
	font-size: 0.8125rem;
	color: #808080;
}
.konzertbericht_verfasser_datum {
	font-size:	13px;
	font-size: 0.8125rem;
	color:	#808080;
}



/* ================  Artikel Formatierung ================= */
/* ist weitgehend wie Konzertbericht formatiert */
.artikel {
	width: 99%;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;	/* automatische Silbentrennung */
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
  counter-reset: footnotes;    /* für Fussnoten */
}
.artikel_fussnoten {
	font-size: 	12px;
	font-size: 	0.75rem; 
  text-align: left;	
  border-top: 1px solid #808080;
  padding-top: 5px;
}
.artikel_kopf {
	margin-bottom: 5px;
	font-size: 	16px;
	font-size: 	1rem;
  color: white;
	text-align: center;	
}
.artikel_kopf_mittel {
	font-size: 	20px;
	font-size: 	1.25em;
}	
.artikel_kopf_gross {
	font-size: 	22px;
	font-size: 	1.375rem;
	font-weight: bold;
}	
.artikel_text {
	text-align: justify;	
}
.artikel figure {     /* siehe auch Responsive 1-Spaltig */
	float: left;
	display: inline;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 7px;
	margin-right: 7px;
}
.artikel figure:nth-of-type(odd) {
	float: right;
	margin-right: 1px;
}
.artikel figure:nth-of-type(even) {
	float: left;
	margin-left: 1px;
}
.artikel figcaption {
text-align: center;
background: #1E262E;
}
.artikel img {     /* siehe auch Responsive 1-Spaltig */
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 4px;
	margin-right: 4px;
}
.artikel figure img {     /* siehe auch Responsive 1-Spaltig */
	margin: 0;		/*  Fotos im Figure Rahmen mit geringerem Außenabstand  */
	display: block;    /* damit wird kein unschöner Abstand zwischen Bild und figcaption angezeigt */	
}
img.artikel_logo {
	width: 100%;
	max-width: 640px;
	height: auto;
	margin: 0;  /* Wichtig: Nach img platzieren, da hier margin 4px gesetzt*/
}
img.artikel_img_voll {   /* über ganze Tabellenbreite */
	width: 100%;
	height: auto;
	margin: 0;  /* Wichtig: Nach img platzieren, da hier margin 4px gesetzt*/
}
.artikel hr {
	height: 1px;
	border: 0;
	background: #808080;
}
.artikel_titel_inline {
	font-size: 	16px;
	font-size: 	1rem;
	font-weight: bold;
	color: white;
}
.artikel_verfasser {
	font-size:	13px;
	font-size: 0.8125rem;
	color: #808080;
}
.artikel_verfasser_datum {
	font-size:	13px;
	font-size: 0.8125rem;
	color:	#808080;
}



/* ================  CD Review New ================= */
.cd_review_new_vorschau {
	width: 132px;
}



/* ======== Poll Minianzeige im Menüe rechts Formatierung ========= */
a:active.poll  {
	color: #FFFF99;
	text-decoration: none;
}
a:link.poll    {
	color: #FFFF99;
	text-decoration: none;
}
a:visited.poll {
	color: #FFCC99;
	text-decoration: none;
}
a:hover.poll   {
	color: #FFFF00;
	text-decoration: none;
}
 
table.poll_mini {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-size: 0.625rem; 
	background-color: #000000;
	color: #C0C0C0;
	padding-bottom: 2px; 
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  border: 0px;
  border-spacing: 1px;
  width: 168px;
}
	  
td.poll_left, td.poll_right, td.poll_header, .poll_info {
	/* Wichtig für Bildergalerie, denn diese überschreibt (im Moment) die Standards */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-size: 0.625rem; 
	background-color: #000000;
	color: #C0C0C0;	
}
td.poll_left {
	text-align: right;
}
td.poll_odd, td.poll_even { /* Anzeige der Balken */
 padding: 0px;
 padding-bottom: 2px;
 font-size: 5px;  /* bestimmt letztlich die Zeilenhöhe der Zelle */
}
td.poll_font_option {   /*  Optionen zur Auswahl */
	font-size: 10px;
	font-size: 0.625rem;
	text-align: left;
}
th.poll_header { 
	font-size: 10px;
	font-size: 0.625rem;
	color:#FFFFFF;
	text-align: center;
}
th.poll_info, td.poll_info {   /*  Anzeige der Frage */
	color: #FFFFFF;
	background-color: #000000;
	font-size: 11px;
	font-size: 0.6875rem;
	text-align: center;
}  



/* ======== Externe News Abfrage (z.B. bei cd-review.php) ========= */
.ext_news_info, .ext_news_infofeld, .ext_forum_info, .ext_forum_infofeld {
	display: table-cell;
	width: 100px;
	/* min-height: 18px;
	font-size: 12px;
	font-size:   0.75rem;  */
	font-weight: normal;
	vertical-align: top;
	text-align : left;
	padding-bottom: 2px;
	padding-left: 3px;
	padding-right: 5px;
	padding-top: 5px;
	line-height: 1.5;
}

.ext_news_infofeld, .ext_forum_infofeld {
	width: auto;
	width: 100%;
}
.ext_news_list_row, .ext_forum_list_row {
	display: table-row;
	background-color: #1E262E;	
}
.ext_news_list .ext_news_list_row:nth-child(odd), .ext_forum_list .ext_forum_list_row:nth-child(odd) {
	background-color: #3B434B;
}
.ext_news_more, .ext_forum_more {
	width: 100%;
	background-color: #07141C;
	line-height: 2.0;
}

/* ======== Externe Forum Abfrage (z.B. bei cd-review.php) ========= */
/* Einstellung sind gleich Externe News Abfrage (oben)  */



/****************************************************************************************************/
/* ============= Grundeinstellungen für Seitenlayout und Menüleiste links und rechts  ============= */

.menue_l_headline_mobile, .menue_r_headline_mobile {
	display: none;					/* In der mehrspaltigen Darstellung ausgeblendet */
}

/****** rechte Seitenleiste ******/
.frame_hio_statistik, .frame_forum_user, .frame_forum_statistik, .frame_forum_beitraege, .frame_forum_termine, .frame_zufallsbild, .frame_keywords,
.frame_abstimmung, .frame_supported_events_header, .frame_supported_event, .frame_facebook_button, .frame_copyright_1, .frame_copyright_2 {
	width: 170px;
	font-family: Arial, Verdana, Helevetica, sans-serif;  /* zusätzlich zu body da z.B. von Bildergalerie überschrieben */
	color: #c0c0c0;
	font-size: 10px;  							/* für ältere Browser */
	font-size: 0.625rem;
	text-align: left;
}
.frame_forum_user, .frame_forum_statistik, .frame_forum_beitraege, .frame_forum_termine, .frame_abstimmung {
	border-bottom: #808080 1px solid;
}
.frame_forum_user, .frame_forum_statistik, .frame_forum_beitraege, .frame_forum_termine {
	font-family: Verdana,Arial,Helvetica,sans-serif;  /* Hier zuerst Verdana, ist besser für 10px */
}
.frame_forum_beitraege ul, .frame_forum_termine ul {
	display: inline;
	margin: 0;
	border: 0;
	padding: 0;
	list-style-type: none;
	list-style-position: inside;
	text-align: left;
}
.frame_forum_beitraege li {
	font-family: Verdana,Arial,Helvetica,sans-serif;  /* Hier zuerst Verdana, ist besser für 10px */
	color: #f0f0f0;
	font-size: 10px;  							/* für ältere Browser */
	font-size: 0.625rem;
}
.frame_forum_beitraege ul li:before {
	content: ' • ';   				/* eigenes Zeichen für die Aufzählung im Menü */
}
.frame_forum_termine ul, .frame_forum_termine li {
	font-family: Verdana,Arial,Helvetica,sans-serif;  /* Hier zuerst Verdana, ist besser für 10px */
	color: #f0f0f0;
	font-size: 10px;  							/* für ältere Browser */
	font-size: 0.625rem;
}
.frame_hio_statistik, .frame_copyright_1, .frame_facebook_button {
	text-align: right;
}
.frame_copyright_1 {
	text-align: center;
}
.frame_zufallsbild, .frame_abstimmung, .frame_copyright_2, .frame_supported_event, .frame_keywords {
	text-align: center;
}
.frame_facebook_button  {
	height: 20px;   /* war mit echtem Button 30px  */
	margin-top: 5px;
	font-size: 11px;
	font-size: 0.6875rem;
}
.frame_facebook_button a:active  { color: #FFFFFF; text-decoration: none; }
.frame_facebook_button a:link    { color: #FFFFFF; text-decoration: none; }
.frame_facebook_button a:visited { color: #FFFFFF; text-decoration: none; }
.frame_facebook_button a:hover   { color: #FFFF00; text-decoration: none; } 

.frame_copyright_1, .frame_zusatzinfo_mobile {
	display: none;
}
.frame_copyright_1, .frame_copyright_2 {
	height: 40px;
	vertical-align: bottom;
}
.frame_forum_statistik, .frame_interview_2, .frame_band_des_monats_2 {
	display: none;					/* In der mehrspaltigen Darstellung ausgeblendet */
}
.frame_zufallsbild img {
	width: 100%;
	max-width: 170px;
}
/********** Keywords (Schlüsselwörter) im der Menüleiste **************/
.menue_keywords_fonttyp_1 {
	font-size: 10px;
	font-size: 0.625rem;
}
.menue_keywords_fonttyp_2 {
	font-size: 13px;
	font-size: 0.8125rem;
}
.menue_keywords_fonttyp_3 {
	font-size: 16px;
	font-size: 1rem;
}
a.menue_keywords:active  {
	color: #F0F0F0;
	text-decoration: none;
}
a.menue_keywords:link    {
	color: #F0F0F0;
	text-decoration: none;
}
a.menue_keywords:visited {
	color: #F0F0F0;
	text-decoration: none;
}
a.menue_keywords:hover 	 {
	color: #FFFF00;
	text-decoration: none;
	font-weight: normal;
}


/****** linke Seitenleiste ******/
.frame_wichtig, .frame_interview_1, .frame_interview_2, .frame_zusatzinfo, .frame_zusatzinfo_mobile, .frame_band_des_monats_1, .frame_band_des_monats_2 {
	width: 132px;
	font-family: Arial, Verdana, Helevetica, sans-serif;
	font-size: 13px;  							/* für ältere Browser */
	font-size: 0.8125rem;
	text-align: center;
	color: #c0c0c0;
}

.frame_interview_2, .frame_band_des_monats_2 {
	width: 170px;
}
.frame_interview_1 ul, .frame_interview_2 ul {
	margin: 0;
	border: 0;
	padding: 0;
	list-style-type: none;
	list-style-position: inside;
	text-align: center;
}
.frame_interview_1 ul li, .frame_interview_2 ul li {
	margin: 4px 0px;
}
.frame_wichtig a {
	color: #FF0000 !important;
	text-decoration: none !important;
}

#main_menue ul {
	margin: 0;
	border: 0;
	padding: 0;
	list-style-type: none;
	list-style-position: inside;
	text-align: left;
}

#main_menue li {
	font-family: Arial, Verdana, Helevetica, sans-serif;
	font-size: 13px;  		/* für ältere Browser */
	font-size: 0.8125rem;
}

#main_menue ul li:before {
	content: '::';   				/* eigenes Zeichen für die Aufzählung im Menü */
	color: #c0c0c0;
}

/********** CD Review im der Menüleiste **************/
.cd_review {
	float: left;
	margin: 0px;
	border: 0px;
	padding: 0px;
	margin-bottom: 8px;
	width: 132px;
	text-align: center;
	font-size: small;
	color: #c0c0c0;
}

img.cd_review {
	float: none;
	width: 110px;
	margin: 0px;   /* 24.11.2024 */
	transform: scale(1);
}

img.cd_review:hover {
	transform: scale(1.08);
	transition: all 0.2s linear;
}

.cd_review_wertung {
	font-size: xx-small;
}







/************===================== Ab hier Einstellungen für responsive Design ===================***************/


/****************************************************************************************************/
/**************            Nutzung von Flex Boxen für PC Formate (3-Spaltig)            *************/

#mainnav {								/* komplette linke Menüspalte */
    flex: 0 0 132px;
}

#sidebar {								/* komplette rechte Infospalte */
    flex: 0 0 170px;
}

/* der Tag <main> scheint bei IE (bis 11) nicht unterstützt zu werden, deshalb hier als id-selector angelegt */
main, #main {
  flex: 			1;
	padding:  	0px 4px;
	overflow: 	auto;    		/* bei hidden wird alles knallhart abgeschnitten, evtl. die bessre Lösung */
	/* overflow: 	hidden;	 */
	text-align: center;
}

.clear { clear: both; }

#wrapper {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	flex-direction: -webkit-row;
	flex-direction: -ms-row;
	flex-direction: row;	
	margin: 4px 4px;
	background: #000;
	min-width:  320px;
}





/****************************************************************************************************/
/*******   Spezifische Bildschirmgrößenanpassungen   ************************************************/

/*****   PC Formate ***************/

/*  Bis maximal 1366pixel Standard-Bildschirmbreite wird die Breite maximal benutzt wenn größer, dann wird
    die Anzeige in der Breite eingeschränkt, damit die Anzeige nicht zu breit und Texte zu sehr in die
    Breite gehen, Anzeige wird horizontal zentriert */
@media screen and (min-width: 1367px) {   
	#wrapper {
		max-width:	1366px; 
		width: 			100%;
		margin: 		4px auto;
	}
}


/*****   Mobile Formate ***************/

/* Tablett, iPad etc.  */
@media screen and (width: 980px) {   
	#wrapper {
		max-width:	980px;  
		width: 			980px;
		margin: 		0;
	}
	main, #main {
	  width: 			670px;
  }
}


/****************************************************************************************************/
/************      ab hier nur noch 2-Spaltig + beenden des Flex Box Modus      *********************/
@media screen and (max-width: 910px) {  	
	#mainnav {								/* komplette linke Menüspalte */
    flex: 		none;
	  float:   	left;
	  margin:  	0;
	  border:  	0;
	  padding: 	0;
	  width:   	132px;
	}

	#sidebar {								/* komplette rechte Infospalte */
    flex: 		none;
	  float: 		none;
	  width:    100%;
	  overflow: hidden;   		/* zu breite inhalte abschneiden */
	}

	/* der Tag <main> scheint bei IE (bis 11) nicht unterstützt zu werden, deshalb hier als id-selector angelegt */
	main, #main {
		flex: 		none;
	  float:    left;
	  border:   0;
	  padding:  0 0 0 0;
		width: 		668px;
	}

	#wrapper {
		display: 		block;
		margin:     1px;
		padding:    0;
		border:     0;	
		overflow:   auto;   
	}
	
	
  /***** Infos aus Seitenleiste neu darstellen *****/
	.frame_forum_statistik {
		display:	block;			/* Statistik nur im mobile Modus sichtbar machen */
		border-bottom:	0;
	}
	.frame_hio_statistik, .frame_forum_info, .frame_forum_beitraege, .frame_forum_termine, .frame_zufallsbild, .frame_abstimmung, .frame_supported_event {
		float: 		left;
		display:	block;
		height: 	280px;
		margin: 	0px 6px 0px 0px;
		font-size: 	11px;  							/* für ältere Browser */	
		font-size: 	0.6875rem; 
	}
	.frame_forum_statistik, .frame_forum_beitraege, .frame_forum_termine, .frame_abstimmung {
		border-bottom:	0;
	}
	.frame_abstimmung {
		height: auto;			/* bis ca. 500 pixel */
	}
	.frame_supported_events_header {
		display: none;
	}
	.frame_copyright_1 {
		display: block;
	}
	.frame_copyright_2 {
		display: none;
	}
	.frame_keywords {
		width: 		100%;
		height: 	auto;
		clear: 		left;			/* hiermit wird das Element (und das Nachfolgende Interview) in eine neue "Zeile" gesetzt */
	}
	.menue_r_headline_mobile {
		display: 	block;
	}
	td.foruminfo, .frame_forum_user, .frame_forum_statistik {										/* Schrift auf mobilen Geräten vergrößern */
		font-size: 	11px;  							/* für ältere Browser */	
		font-size: 	0.6875rem;  
	}
	td.foruminfo {										/* Zeilenabstand auf mobilen Geräten vergrößern */
		height: 25px;  
	}
	.frame_forum_termine ul li {
		height: 25px;
	}
	img.hio_logo, .hio_logo img {
		width: 	100%;
		height: auto;
		max-width: 577px;
	}
	img.pod_logo {
		width: 	100%;
		height: auto;
		max-width: 480px;
	}
	
	/* ================  Konzertbericht Formatierung ================= */
	.konzertbericht {
		margin-left: auto;
		margin-right: 0;
	}

	/* ================  Artikel Formatierung ================= */
	.artikel {
		margin-left: auto;
		margin-right: 0;
	}
}



@media screen and (min-width: 816px) and (max-width: 910px) {  
	#wrapper {
		max-width:	800px;		/*  -16 für Scrollbalken */
		width: 			800px;
	}
	main, #main {
	  width: 			664px;   	/* wrapper - 132 (nav) - 4 padding main */
  }
}

@media screen and (min-width: 720px) and (max-width: 815px) {   
	#wrapper {
		max-width:	704px;		/*  -16 für Scrollbalken */
		width: 			704px;
	}
	main, #main {
	  width: 			568px;   /* wrapper - 132 (nav) - 4 padding main */
  }
}

@media screen and (min-width: 700px) and (max-width: 719px) {   
	#wrapper {
		max-width: 	684px;		/*  -16 für Scrollbalken */
		width: 			684px;
	}
	main, #main {
	  width: 			548px;   /* wrapper - 132 (nav) - 4 padding main */
  }
}


/****** Tablett, feste Bildschirmgrößen ******/

/* Samsung Galaxy Tab etc.  */
@media screen and (width: 800px) {   
	#wrapper {
		max-width: 	800px;  
		width: 			800px;
	}
	main, #main {
	  width: 			664px;
  }
}

/* Apple iPad 1 - 4, HTC etc.  */
@media screen and (width: 768px) {   
	#wrapper {
		max-width: 	768px;  
		width: 			768px;
	}
	main, #main {
	  width: 			632px;	/* wrapper - 132 (nav) - 4 padding main */
  }
}



@media screen and (min-width: 640px) and (max-width: 699px) {   
	#wrapper {
		max-width: 	624px;		/*  -16 für Scrollbalken */
		width: 			624px;
	}
	main, #main {
	  width: 			488px;
  }
}



@media screen and (max-width: 720px) {

	/* ================  Konzert-Liste Formatierung ======================== */
	.concert_list table, .concert_list tbody {
		display: block;
	}
	.concert_list th {
		padding-left: 2px;
		padding-right: 2px;
		font-weight: normal;
	}
	.concert_list td {
		padding-left: 2px;
		padding-right: 2px;
		vertical-align: top;
		/* hiermit versuche ich die langen Wörter in den Griff zu bekommen */
		-ms-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	.concert_list	th:nth-child(2), .concert_list td:nth-child(2) {
		width: 40%;
	}
	.concert_list	th:nth-child(3), .concert_list td:nth-child(3) {
		width: 27%;
	}
}


/****************************************************************************************************/
/***************************** ab hier nur noch 1-Spaltig *******************************************/
@media screen and (max-width: 639px) {  
	#wrapper {
		max-width: 	639px;
		/* width: 			100%;      am 11.2.2017 entfernt, da der Text am rechten Rand immer etwas (Margin)abgeschnitten wurde*/ 
	}
	main, #main {
	  width: 			100%;
  }
	#mainnav {							/* linke Menüspalte komplett oben über den Bildschirm verbreitern*/
	  width:    	100%;
	}
	#main_menue {
    border-bottom-style: dotted;
    border-bottom-width: thin;
	  font-size: 15px;  		/* für ältere Browser */
	  font-size: 1rem;
	}
	#main_menue li {
    display: inline;			/* Menüpunkte jetzt nebeneinander darstellen */
    font-size: 15px;  		/* für ältere Browser */
	  font-size: 1rem;

	}
	a.menue_small {  				/* um Links kleiner anzuzeigen */
		font-size: 14px;  		/* für ältere Browser */	
		font-size: 0.9rem; 
	}
	a.menue_l:hover   {    	/* Menülinks nicht mehr fett machen, da es stören kann wenn die Schrift breiter wird */
		font-weight:normal;
	}
	.menue_l_headline {    /* Überschriften auch über die gesamte Breite anzeigen */
	  width: 100%;
	}
	.frame_wichtig, .frame_cd_reviews {
		float: 		left;
	}
	.frame_wichtig {
		margin: 	0px 6px 0px 0px;
	}
	.frame_zusatzinfo_mobile {
		width: auto;
		display: table-cell;   /* erstellt einen Block der nicht teilweise unter den Frame Wichtig rutscht (wie z.B. mit Block */
		text-align: left;
		-ms-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	.frame_abstimmung {
		clear: 	left;			/* hiermit wird das Element (und das Nachfolgende Interview) in eine neue "Zeile" gesetzt */
	}
	.frame_interview_2, .frame_band_des_monats_2 {
		float: 		left;
		display:	block;
		margin: 	0px 6px 0px 0px;
	}
	.frame_interview_2 {
	  height: 	auto;	
	}
	.frame_interview_1, .frame_band_des_monats_1, .frame_zusatzinfo {
		display: 	none;		
	}
	.frame_zufallsbild img {
		/* Auf Framehöhe - 2 Zeilen Text einschränken.
		   Könnte zu leichten Verzerrungen führen, da scheinbar die Breite aktuell nicht angepasst verkleinert wird.
		   Später mal nach besseren CSS Einstellungen forschen  */
		max-height: 230px;
	}
	.menue_l_headline_mobile {
		display: 	block;
	}
	.hio_logo {
		display: 	none;
	}
	.no_mobile {
		display: 	none;
	}
	.mobile_only {
		display: block;
	}	
	
	/*  Seitenüberschriften + Bandinfo-Titel der HIO Seiten */
	p.page_title_hio, .bandinfo_titel, th.bandinfo_titel { 
		min-height: 18px;
		height: 		auto;	  /* Für 2-zeilige Fälle */
		background-image: url(/gifs/topcell.jpg);
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	  font-family: Verdana, Arial, Helevetica, sans-serif;
	  font-size:   13px;  /* für ältere Browser */
		font-size:   0.8125rem; 
		font-weight: normal;
		text-align:  center;
		text-transform: none;    /* Uppercase bei Bandinfo wieder abschalten */
	}

	.cd_review {						/* Review Element */
		width:   	20%;
		margin-bottom: 5px;  /* in waagerechter Ansicht etwas kleiner machen */
	}
	.cd_review_nr5 {
		 display: none;     /* Reviews je nach Auflösung ausblenden, Achtung Zählung beginnt bei 0 */
  } 
	img.cd_review {
		width:   	90px;
	}

	/* ================  Countdown Formatierung ====================== */	
	.countdown_counter {
 		margin-top: 10px;
 		margin-bottom: 8px;
 	}
	.countdown_link {
 		margin-top: 10px;
 		margin-bottom: 8px;
	}


	/* =================  Liste Typ 1 Formatierung ====================== */	
	.liste_typ1 td {
		padding-bottom: 5px;   /* erhöhter Abstand, damit sauber auswählbar (Google) */
	}
	
	
	/* ================  Metalinfo Formatierung =========================== */
	.metalinfo {
		-ms-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	.metalinfo figure {
		max-width: 			45%;
		height: auto;
	}
	.metalinfo figure img {		/*  Fotos im umfassenden Rahmen  */
		width: 			99%;
		height: auto;
	}
	.metalinfo_genre img {
		max-width: 100%;
		height: auto;
	}
	
	/* ================  Bandinfo Formatierung =========================== */
	.bandinfo {
		-ms-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	.bandinfo img {
		width: 60%;
		height: auto;
	}
		img.bandinfo_img_p {		/* Fotos im Portrait Format schmäler darstellen (beeinflusst die Höhe) */
		width: 40%;
		height: auto;
	}
	.bandinfo figure {
		width: 60%;
		height: auto;
	}
	.bandinfo figure img {		/*  Fotos im umfassenden Rahmen  */
		width: 100%;
		height: auto;
	}
	figure.bandinfo_img_p {		/* Fotos im Portrait Format schmäler darstellen (beeinflusst die Höhe) */
		width: 40%;
		height: auto;
	}
	
	
	/* ==========  Giginfo Formatierung (Path of Death, ...) ============= */
	.giginfo {
		-ms-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	img.giginfo_img {
		width: 60%;
		max-width: 300px;
		height: auto;
	}
	img.giginfo_trennlinie_img {    /*  hier das globale .bandinfo img "überschreiben"  */
		width: 100%;
		max-width: 400px;
		height: auto;
	}
	

	/* =================  Interview Formatierung =========================== */
	.interview {
		-ms-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	img.interview_img {
		width: 			60%;
		height: auto;
	}
	img.interview_img_p {   /* Fotos im Portrait Format schmäler darstellen (beeinflusst die Höhe) */
		width: 			40%;
		height: auto;
	}
	.interview figure {
		width: 			60%;
		height: auto;
	}
	.interview figure img {		/*  Fotos im umfassenden Rahmen  */
		width: 			100%;
		height: auto;
	}
	figure.interview_img_p {   /* Fotos im Portrait Format schmäler darstellen (beeinflusst die Höhe) */
		width: 			40%;
		height: auto;
	}
	
	/* ================  Konzert-Liste Formatierung ======================== */
	.concert_list	th:nth-child(1), .concert_list td:nth-child(1) {
		min-width: 32%;
		width: 32%;
		padding-left: 0px;
		padding-right: 0px;
	}
	.concert_list	th:nth-child(2), .concert_list td:nth-child(2) {
		padding-left: 0px;
		padding-right: 0px;
	}
	.concert_list	th:nth-child(3), .concert_list td:nth-child(3) {
		min-width: 28%;
		width: 28%;
		padding-left: 0px;
		padding-right: 0px;
	}

	/* =================  Konzertbericht Formatierung ====================== */
	.konzertbericht {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		-ms-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	img.konzertbericht_img {		/*  Fotos generell  */
		width: 			60%;
		height: auto;
	}
	img.konzertbericht_img_p {   /* Fotos im Portrait Format schmäler darstellen (beeinflusst die Höhe) */
		width: 			40%;
		height: auto;
	}
	.konzertbericht figure {
		width: 			60%;
		height: auto;
	}
	.konzertbericht figure img {		/*  Fotos im umfassenden Rahmen  */
		width: 			100%;
		height: auto;
	}
	figure.konzertbericht_img_p {   /* Fotos im Portrait Format schmäler darstellen (beeinflusst die Höhe) */
		width: 			40%;
		height: auto;
	}


	/* =================  Artikel Formatierung ====================== */
	.artikel {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		-ms-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	img.artikel_img {		/*  Fotos generell  */
		width: 			60%;
		height: auto;
	}
	img.artikel_img_p {   /* Fotos im Portrait Format schmäler darstellen (beeinflusst die Höhe) */
		width: 			40%;
		height: auto;
	}
	.artikel figure {
		width: 			60%;
		height: auto;
	}
	.artikel figure img {		/*  Fotos im umfassenden Rahmen  */
		width: 			100%;
		height: auto;
	}
	figure.artikel_img_p {   /* Fotos im Portrait Format schmäler darstellen (beeinflusst die Höhe) */
		width: 			40%;
		height: auto;
	}	
}


@media screen and (max-width: 510px) {
	/* Sobald weniger als 3 Frames nebeneinander dargestellt werden können, höhe auf min. schrumpfen  */
	.frame_hio_statistik, .frame_copyright_1, .frame_copyright_2, .frame_forum_info, .frame_forum_beitraege, .frame_forum_termine, .frame_zufallsbild, .frame_abstimmung, .frame_band_des_monats_1, .frame_band_des_monats_2 {
		height: auto;
		padding-bottom: 5px;
	}
}


@media screen and (max-width: 440px) {
	.cd_review {								/* Review Element */
		width:   		25%;
	}
	/* Reviews je nach Auflösung ausblenden, Achtung Zählung beginnt bei 0 */
	.cd_review_nr4 { display: none; }
	.cd_review_nr5 { display: none; }
	
	/* ================  Countdown Formatierung ====================== */	
	.countdown_counter {
 		margin-bottom: 0px;
 		width: 100%;
 		text-align: center;
 	}
	.countdown_link {
		float: left;
 		margin-top: 8px;
 		margin-bottom: 8px;
 		width: 100%;
 		text-align: center;
	}

	/* ================  Bandinfo Formatierung =========================== */
	.bandinfo {
		/* hiermit versuche ich die überlangen weblinks der Bands in den Griff zu bekommen */
		/* und auch die Bandbeschreibungen neben den Bildern etc. Jetzt sauberer Textfluss */
		-ms-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
		/* font-size: 	xx-small;  */
	}
	.bandinfo object {
		display: none;     /* Youtube und co. erst mal ausblenden */	
	}

	/* ==========  Giginfo Formatierung (Path of Death, ...) ============= */
	img.giginfo_trennlinie_img {
		display: none;
	}

	/* ================  Konzert-Liste Formatierung ======================== */
	/* Tabelle "auflösen" und Spalten jetzt untereinander darstellen */
	.concert_list	th:nth-child(1), .concert_list td:nth-child(1) {
		display: block;
		width: 100%;
		padding-left: 5px;
		padding-right: 5px;
		color: white;
	}
	.concert_list	th:nth-child(2), .concert_list td:nth-child(2) {
		display: block;
		width: 100%;
		padding-left: 5px;
		padding-right: 5px;
		border-top: thin dotted gray;
		border-bottom: thin dotted gray;
	}
	.concert_list	th:nth-child(3), .concert_list td:nth-child(3) {
		display: block;
		width: 100%;
		padding-left: 5px;
		padding-right: 5px;
		border-bottom: 10px solid black;
	}

}



@media screen and (max-width: 360px) {
	.cd_review {								/* Review Element */
		width:   		33%;
	}
	/* Reviews je nach Auflösung ausblenden, Achtung Zählung beginnt bei 0 */
	.cd_review_nr3 { display: none; }
	.cd_review_nr4 { display: none; }
	.cd_review_nr5 { display: none; }
}



@media screen and (max-width: 351px) {    /* 2 x 170 + 2 x 6 Rand  */
	.frame_hio_statistik, .frame_forum_info, .frame_forum_beitraege, .frame_forum_termine, .frame_zufallsbild, .frame_abstimmung {
		margin: 	0;
	}
}


/*******************************************************************************/
/*******   Druckeinstellungen   ************************************************/

@media print {             /* beim Drucken die Seitenspalten ausblenden */
	#mainnav {								
    display: none;
	}
	#sidebar {								
    display: none;
	}
}