/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	color: #FFFFFF;
	font-family: 'Lato', sans-serif;
	}

/* HTML Tags */
html, body {
	margin: 0; /* äußeren Abstand / Rand auf zurücksetzen */
	padding: 0; /* inneren Abstand zurücksetzen */
	height: 100%; /* Seite soll über volle Höhe gehen */
	}

body {
	background-image: url(../images/bg.jpg);
	background-repeat: repeat-y;
	background-size: 100% auto;
	background-position: top center;
	background-color: #000;
	}

/* Kontainer */
#wrapper {
	width : 80%;
	margin : 0 auto;
	padding: 2% 0 0 0;
}

#kopf {
	width: 100%;
}

/*#kopf table, tr, td {
	border : 1px solid red;
}*/

#kopf table {
	width : 100%;
}
#kopf td {
	vertical-align : top; 
}

#kopf .bild_gustav {
	width : 44%;
}

#kopf .bild_gustav img {
	width : 100%;
}

#kopf .seitenleiste {
	width : 18%;
}

#kopf .seitenleiste {
	vertical-align : bottom;
}

#kopf td img {
	width : 100%;
}

#kopf .spacer_innen {
	width : 3%;
}

#kopf .spacer_aussen {
	width : 12%;
}

#kopf .seitenleiste {
	width : 13%;
}

#kopf .rechts {
	background-color : #000000;
	vertical-align : middle;
}

#kopf .links {
	vertical-align : bottom;
}

#kopf .postit {
	position : relative;
	left : 22%;
	width : 155%;
}
/*#kopf .links {
	background-color : red;
	width: 20%;
	display: block;
	float: left;
}

/*#kopf .bild {
	background-color : green;
	width: 50%;
	display: block;
	float: left;
}

#kopf .bild img {
	width: 100%;
	height: auto;
	display: block;
}

#kopf .rechts {
	background-color : blue;
	float: left;
}

#kopf .social {
	background-color : red;
	width : 70%;
	margin: 0 0 0 5%;
	background-color: #000000;
	display: block;
}

#kopf .postit {
	display: block;
	z-index: 2;
	width: 170%;
	margin: 40% 0px 22% -65%;
	position: relative;
}

.icon {
	margin: 0px auto 0px auto;
	display: block;
	float: none;
}

.icon img,
.postit img {
	width : 100%;
}*/

.titel_gross {
	width: 100%;
	display: block;
	background-color: #000;
	}

.titel_gross img {
	width: 100%;
	height: auto;
	display: block;
	}

#konzerte, #artikel, #filme, #fotos, #kontakt, #fuss {
	width: 100%;
	margin: 0 0 0 auto;
	padding: 7% 0 0 0;
	display: block;
}

/* - Konzert - */
#konzerte .inhalt {
	display: block;
	background: rgb(255, 255, 255); /* Fall-back for browsers that don't support rgba */
    background: rgba(255, 255, 255, .5);
	margin: 2% 0px 0px 0px;
	padding: 0.7em 10% 0.7em 0.5em;
}

#konzerte .inhalt .datum {
	width: 15%;
	padding: 0px 3% 0px 2%;
	float: left;
	display: block;
	text-align: center;
}

#konzerte .inhalt .monat,
#konzerte .inhalt .jahr {
	line-height: 100%;
	text-transform: uppercase;
	text-align: center;
	color: #000000;
	}

#konzerte .inhalt .tag {
	font-size: 3.0em;
	line-height: 1.0em;
	font-weight: bold;
	text-align: center;
	color: #000000;
	}

#konzerte .inhalt .veranstaltung {
	width: 55%;
	float: left;
	display: block;
	}

#konzerte .inhalt .lokal {
	font-size: 2.5em;
	line-height: 1.0em;
	font-weight: bold;
	text-transform: uppercase;
	text-align: left;
	padding-top: 0.4em;
	color: #000000;
	}

#konzerte .inhalt .ort {
	line-height: 100%;
	text-transform: uppercase;
	text-align: left;
	color: #000000;
	}
	
.karten a:link,
.karten a,
.karten .ausverkauft {
	width: 20%;
	float: right;
	display: block;
	background-color: #FFF;
	font-size: 1.3em;
	font-weight: bold;
	border: #000 solid 0.1em;
	color: #000000;
	text-transform: uppercase;
	text-align: center;
	padding: 0.2em 0.3em 0.2em 0.3em;
	margin-top: 1.0em;
	text-decoration: none;
	}

.karten .ausverkauft {
	color : #808080;
	border : #808080 solid 0.1em;
}
.karten a:hover {
	background-color: #000;
	border: #000 solid 0.1em;
	color: #FFFFFF;
	}

/* - Artikel -*/
#artikel .inhalt {
	display: block;
	margin: 3% 0px 0px 0px;
	padding: 0.7em 10% 0.7em 0px;
}

#artikel .inhalt img {
	width: 70%;
	height: auto;
	display: block;
}


/* - Filme - */
#filme .inhalt {
	width: 90%;
	display: block;
	margin: 3% 0px 0px 0px;
	padding: 0.7em 10% 0.7em 0px;
}

.youtube {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* - Fotos - */
#fotos .inhalt {
	width: 88%;
	display: block;
	margin: 3% 10% 0px 0px;
	padding: 1% 1% 1% 1%;
	background-color: #000000;
	color: #000000;
}

/* - Kontakt - */
#kontakt .inhalt {
	margin: 7% 0 0 0;
	padding : 10%;
	background-color: #000000;
}

#kontakt .inhalt img {
	width : 80%;
}

#kontakt .contact-entry {
	width: 70%;
	display: block;
	margin: 3% 10% 0px 0px;
	padding: 10% 10% 10% 10%;
	background-color: #000000;
	}
	
#kontakt .inhalt a,
#kontakt .inhalt p {
 	font-size: 1.2em;
	line-height: 1.5em;
	text-align: center;
	text-transform: uppercase;
 	}
	
#kontakt .inhalt h1 {
 	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.5em;
	text-align: center;
	margin-bottom: 0.5em;
	text-transform: uppercase;
	text-decoration: underline;
 	}
	
#kontakt .inhalt a:link,
#kontakt .inhalt a:visited,
#kontakt .inhalt a:hover {
 	font-size: 1.2em;
	line-height: 1.5em;
	}

#fuss .social {
	width: 15%;
	margin: 0px auto 0px auto;
	padding: 2% 0px 1% 0px;
	background-color: #000;
	display: block;
}

#fuss .social img {
	width : 100%;
}

#fuss .postit {
	display: block;
	z-index: 4;
	width: 170%;
	margin: 40% 0px 22% -65%;
	position: relative;
}

/* Hilfsklassen */
.clear {
	clear: both;
}

/* */
.titel {
	width: auto;
	display: block;
	float: left;
	padding: 0.4em 0.5em 0.4em 0.5em;
	border: #000 solid 0.1em;
	background-color: #000;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.5em;
	line-height: 1.0em;
	color: #FFFFFF;
}

.titel span {
	font-weight: 100;
}

/* weitere ... */
.weitere {
	max-width: 15.0em;
	display: block;
	margin: 1.0em auto 1.0em auto;
}

.weitere a, 
.weitere a:link,
 .weitere a:visited {
	text-align: center;	display: block;
	padding: 0.4em 0.5em 0.4em 0.5em;
	border: #000 solid 0.1em;
	background-color: #000;
	font-weight: normal;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.0em;
	color: #FFFFFF;
}

.weitere a:hover {
	color: #65b7b7;
	text-decoration: none;
}

.weitere span {
	font-weight: 100;
}

.weitere a:hover span {
	font-weight: 100;
	color: #65b7b7;
	text-decoration: none;
}

.weitere a:hover small {
	color: #65b7b7;
	text-decoration: none;
}

#weitere_konzerte, #weitere_artikel, #weitere_fotos, #weitere_filme {
	display : none;
}

#signon {
	display : none;
	width : 20.5em;
	height : 10em;
	background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, .5);
	margin: 0;
	padding: 10px;
}

#signon h2 {
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.5em;
	line-height: 1.0em;
	padding : 5px 0;
	color: #000;
}

#signon p {
	text-transform: uppercase;
	color: #000;
}
#signon a {
	width: 15em;
	display: block;
	background-color: #FFF;
	font-size: 1.3em;
	font-weight: bold;
	border: #000 solid 0.1em;
	color: #000000;
	text-transform: uppercase;
	text-align: center;
	padding: 0.2em 0.3em 0.2em 0.3em;
	margin : 0.5em 0 0 0;
	text-decoration: none;
}

#signon input {
	font-size: 1.3em;
}

#signon label {
	color : #000;
}

#mc_embed_signup{
	clear:left;
}