/* (c) 2011-2016: schafpro.de */


@font-face {
    font-family: 'Kuhjunge';
    src: url('../schriftarten/kuhjunge.eot');
    src: url('../schriftarten/kuhjunge.eot?#iefix') format('embedded-opentype'),
         url('../schriftarten/kuhjunge.woff') format('woff'),
         url('../schriftarten/kuhjunge.ttf') format('truetype'),
         url('../schriftarten/kuhjunge.svg#BlackHawk') format('svg');
    font-weight: normal;
    font-style: normal;
	}
@font-face {
    font-family: 'Normal';
    src: url('../schriftarten/normal.eot');
    src: url('../schriftarten/normal.eot?#iefix') format('embedded-opentype'),
         url('../schriftarten/normal.woff') format('woff'),
         url('../schriftarten/normal.ttf') format('truetype'),
         url('../schriftarten/normal.svg#KameronRegular') format('svg');
    font-weight: normal;
    font-style: normal;
	}

* {
	padding: 0; margin: 0; vertical-align: top;	border-width: 0; border-style: none;
	color: #FCD690; font-family: Normal, Kameron, 'Palatino Linotype', 'Times New Roman', serif;
	cursor: default;
	}

body { background-color: #000; overflow-x: hidden; }

p, ul, ol, table, h2, a, input, button { text-align: left; font-size: 12pt; line-height: 1.2; }

/* Überschriften */
h1 { display: table; margin: 10pt; margin-top: 16pt; margin-bottom: 28pt; }
h1 span { 
	display: table-cell; 
	font-family: Kuhjunge, BlackHawk, 'Palatino Linotype', 'Times New Roman', serif; font-size: 24pt; color: #A27243; font-weight: normal;
	text-transform: uppercase; letter-spacing: 0.25em; line-height: 24pt; text-align: center; white-space: nowrap;
	}
.h1_links, .h1_rechts {
    width: 50%; 
    border-bottom: 1px solid #A27243;
	}
.h1_mitte {
    display: inline-block; 
    position: relative; 
    top: 0.5em; 
    padding: 0 0.5em; 
	}
h2, td.zwischenueberschrift { margin: 10pt; margin-top: 16pt; margin-bottom: -8pt; color: #FDEED0; font-weight: normal; text-transform: uppercase; letter-spacing: 0.1em; }
td.zwischenueberschrift { padding-top: 16pt; padding-bottom: 6pt; }

p { margin: 10pt; text-align: justify; }

/* Tabellen */
table { line-height: 16pt; color: #FDEED0; margin-left: 10pt; margin-top: 10pt; width: 94%; border-spacing: 0; }
th, .datum { color: #FDEED0; font-weight: normal; text-align: right; overflow: visible; width: 0; padding-right: 4pt; }
/*tr.hinterlegt > th, tr.hinterlegt > td { background-color: #0F0D08; }*/
th:first-child { border-bottom-left-radius: 3pt; }
tbody td:last-child { border-bottom-right-radius: 3pt; }

/* Verweise */
a {
	text-decoration: none; color: #A27243;
	transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;
	}
a:hover { text-decoration: none; color: #FDEED0; }
.kein_drueberfahren:hover { color: #FCD690; } .kein_drueberfahren.grau:hover { color: #88695A; }
a, a *  { cursor: pointer; }


/* Listen */
ul, ol { margin-left: 10pt; margin-right: 10pt; padding-left: 25pt; margin-top: 4pt; }
ul { vertical-align: middle; }
ul.unterliste { margin-top: 0; padding-left: 17pt; }
li { color: #FDEED0; }

/* Trennstriche */
hr { 
	border: none; height: 13px; margin-top: 16pt; margin-bottom: 16pt; 
	background-image: url('../bilder/abschnitt.png'); background-repeat: no-repeat; background-position: center;
	}
hr#strich { height: 0; border-bottom: 1px solid #A27243; margin: 10pt; margin-top: 20pt; background-image: none; }	
hr#summe { height: 4px; border-top: 1px solid #FCD690; border-bottom: 1px solid #FCD690; margin: 10pt; background-image: none; }
	
/* Eingabe */
input, textarea { 
	font-family: Courier, monospace;
	cursor: text; color: #FCD690; background-color: #0F0D08; padding: 1pt; margin-bottom: 2pt;
	transition: border 0.3s ease; -moz-transition: border 0.3s ease; -o-transition: border 0.3s ease; -webkit-transition: border 0.3s ease;
	border-bottom: 1px solid #A27243;
	border-top-left-radius: 3px; -moz-border-top-left-radius: 3px; -khtml-border-top-left-radius: 3px; -webkit-border-top-left-radius: 3px; -o-border-top-left-radius: 3px;
	border-top-right-radius: 3px; -moz-border-top-right-radius: 3px; -khtml-border-top-right-radius: 3px; -webkit-border-top-right-radius: 3px; -o-border-top-right-radius: 3px;
	}
input:focus, textarea:focus { border-bottom: 1px solid #FCD690; } /*
input::selection, textarea::selection { background: #A27243; color: #1E0E0A; } input::-moz-selection { background: #A27243; color: #1E0E0A; } input::-webkit-selection { background: #A27243; color: #1E0E0A; } */
input[type="checkbox"], label { cursor: pointer; }
input[type="radio"], label.klein { cursor: default; }
button { cursor: pointer; color: #A27243; }
select { cursor: pointer; }

.rot { color: #A27243; text-decoration: none; 
	transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;
	}
a.rot:hover, a.rot_an  { color: #FDEED0; text-decoration: none; }
b.rot { 
	font-family: Kuhjunge, BlackHawk, 'Palatino Linotype', 'Times New Roman', serif; font-size: 24pt; color: #A27243; font-weight: normal;
	text-transform: uppercase; letter-spacing: 0.15em; line-height: 24pt;
	}
a.klotz { display: block; text-decoration: none; margin: 10pt; }
.grau { color: #88695A; }
.dunkelgrau { color: #282828; font-weight: normal; }
.klein { font-size: 10pt; font-style: italic; vertical-align: bottom; } .sehr_klein { font-size: 9pt; line-height: 10pt; font-style: italic; vertical-align: bottom; }
.rechts, .rechts *, label.klein { font-size: 9pt; font-style: italic; color: #88695A; text-align: right; vertical-align: bottom; } .nur_rechts { text-align: right; }
.mittig { text-align: center; }
.blocksatz { text-align: justify; }
td.rechts { overflow: visible; padding-right: 3px; }
.abstand_oben { padding-top: 11px; }
.abstand_unten { padding-bottom: 11px; }
.kein_abstand_oben { margin-top: 0; }
.kein_abstand_unten { margin-bottom: 0; }
.zurueck { text-align: center; }
.umfluss_links { float: left; }
.gross { font-size: 13pt; }
.kursiv { font-style: italic; }

img.abschnitt2 { vertical-align: middle; width: 32px; height: 13px; }
	
/* Leinwand */
#leinwand { 
	position: absolute; left: 0; top: 6%; width: 100%; height: 280px; background-repeat: no-repeat; z-index: 999; overflow: hidden;
	box-shadow: 0 6px 12px black; -moz-box-shadow: 0 6px 12px black; -webkit-box-shadow: 0 6px 12px black;
	}
#leinwand_img { width: 1280px; height: 280px; }
.leinwand_unsichtbar { opacity: 0; }
.leinwand_einblenden { 
	opacity: 1;
	animation: einblenden 0.8s ease-in-out; -moz-animation: einblenden 0.8s ease-in-out; -webkit-animation: einblenden 0.8s ease-in-out; -o-animation: einblenden 0.8s ease-in-out;
}
@keyframes einblenden { from { opacity:0; } to { opacity:1; } } @-moz-keyframes einblenden { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes einblenden { from { opacity:0; } to { opacity:1; } } @-o-keyframes einblenden { from { opacity:0; } to { opacity:1; } }


/* Titel */
header { 
	position: fixed; left: 900px; top: 0; width: 500px; height: 200px; z-index: 1000; text-align: center; vertical-align: baseline;
	}
img#papierbild {
	display: block; width: 100%; height: 100%; max-width: 500px; max-height: 200px; left: 0; right: 0; position: absolute; z-index: -1;
	}
div#ueberschrift {
	display: block; margin-top: 8px; height: 80px;
	word-spacing: -16pt; vertical-align: baseline;
	text-align: center; text-decoration: none; text-transform: uppercase;
	line-height: 1; font-size: 80px; font-family: Kuhjunge, BlackHawk, 'Palatino Linotype', 'Times New Roman', serif; color: #443A27; 
	}

/* Auswahl */
nav { margin: 10px; }
a.auswahlverweis { 
	font-size: 14pt; color: #A27243; 
	text-decoration: none; text-shadow: 0 0 1px #A27243; text-transform: uppercase; line-height: 16pt; 
	transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
	}
a.auswahlverweis:hover { color: #7F0000; text-shadow: 0 0 1px #7F0000; }
a#auswahl_an { color: #211C13; text-shadow: 0 0 1px #211C13; }
div#sprachen {}
img.sprache { 
	width: 18px; height: 9px; margin-left: 4px; margin-right: 4px; border-width: 1px; border-style: solid; border-color: transparent;
	border-radius: 1px;	-moz-border-radius: 1px; -khtml-border-radius: 1px; -webkit-border-radius: 1px; -o-border-radius: 1px;
	}
.auswahlliste {
	display: none;
	font-size: 14pt; color: #A27243; text-shadow: 0 0 1px #A27243; text-transform: uppercase; 
	background: transparent; vertical-align: middle; text-align: center;
	margin-left: 2pt; margin-right: 2pt; margin-top: 2pt; margin-bottom: 2pt;
	} select.auswahlliste { height: 24pt; }

/* Inhalt */
main { 
	position: absolute; left: 300px; top: 6%; width: 600px; margin-top: 270px; padding-bottom: 16pt;
	}
img.rahmen { border-width: 1px; border-style: solid; border-color: #A27243; }

/* Info */
div.infobild {
	width: 42%; max-width: 266px;
	float: right; margin: 8pt; margin-top: 0; padding: 8px;
	background-color: #FDEED0; background-image: url('../bilder/fotos/papier.jpg'); 
	background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			-webkit-background-size: cover;
	transform: rotate(8deg) translate(10px,-10px) scale(0.96); 
		-moz-transform: rotate(8deg) translate(10px,-10px) scale(0.96); 
		-webkit-transform: rotate(8deg) translate(10px,-10px) scale(0.96); 
		-o-transform: rotate(8deg) translate(10px,-10px) scale(0.96); 
		-ms-transform: rotate(8deg) translate(10px,-10px) scale(0.96);
	transition: transform 0.7s ease-out; 
		-moz-transition: transform 0.7s ease-out; 
		-o-transition: transform 0.7s ease-out; 
		-webkit-transition: transform 0.7s ease-out;
	}
img.infobild {
	width: 100%;
	border-radius: 4pt; -moz-border-radius: 4pt; -khtml-border-radius: 4pt; -webkit-border-radius: 4pt; -o-border-radius: 4pt;
	}


/* Bands */
.bandrahmen {
	display: inline-block;
	width: 480px;
	border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px;
	}
.bandsepiarahmen {
	width: 480px; height: 160px;
	overflow: hidden;
	border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px;
	}
.bandsepia {
	width: 480px; height: 300px;
	margin-top: -140px;
	transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -webkit-transition: all 0.8s ease;
	border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px;
	}
.bandrahmen:hover .bandsepia {
	opacity: 0; margin-top: 0;
	}
.bandbild {
	position: relative; width: 480px; height: 160px;
	background-position: center bottom; background-repeat: no-repeat;
	transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -webkit-transition: all 0.8s ease;
	border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px;
	}
.bandrahmen:hover .bandbild {
	background-position: center top;
	}
/*.bandname { color: #A27243; transition: color 0.3s ease; -moz-transition: color 0.3s ease; -o-transition: color 0.3s ease; -webkit-transition: color 0.3s ease; }
	a.bandrahmen:hover .bandname { color: #FDEED0; }*/
.bandname { margin-bottom: 28pt; }

/* Referenzen */
div.spalte { float: left; width: 33%; }

/* Diskografie */
div.cdhuelle {
	perspective: 1000;
		-moz-perspective: 1000;
		-webkit-perspective: 1000;
	margin: 10pt; 
	float: left;
	}
div.cdhuelle:hover div.cd, div.cdhuelle.hover div.cd {
	transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
		filter: FlipH;
		-ms-filter: "FlipH";
	}
div.cdhuelle, div.cd, img.cd_vorne, img.cd_hinten { width: 128px; height: 128px; }
div.cd {
	border: 1px solid #A27243;
	transition: 0.6s; transform-style: preserve-3d;
		-moz-transition: 0.6s; -moz-transform-style: preserve-3d;
		-webkit-transition: 0.6s; -webkit-transform-style: preserve-3d;
	position: relative;
	}
img.cd_vorne, img.cd_hinten {
	position: absolute; top: 0; left: 0; 
	backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}
img.cd_vorne { z-index: 2; }
img.cd_hinten { 
	transform: rotateY(180deg); 
		-moz-transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
	}

ol.cd { padding: 0; margin-left: 180px; margin-top: 10pt; } 
p.cd { margin-left: 150px; line-height: 1.1; font-style: normal; }
img#siimage { 
	width: 120px; height: 90px; margin-right: 6px;
	border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px;
	}
img.hoerprobe { 
	width: 18px; height: 18px;
	transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;
	}
	img.hoerprobe:hover { 
		cursor: pointer;
		filter: brightness(270%);
	}

/* Konzerte */
p.anstehend { line-height: 13pt; text-align: center; }
span.hinweis {
	position: absolute; margin-left: -4pt; margin-top: -4pt; max-width: 180px;
	color: #A27243; font-size: 13pt; font-weight: bold; text-transform: uppercase; text-shadow: 0 0 1px black;
	border-top: 1px solid #A27243; border-bottom: 1px solid #A27243;
	transform: rotate(25deg); -moz-transform: rotate(25deg); -o-transform: rotate(25deg); -webkit-transform: rotate(25deg); -ms-transform: rotate(25deg);
	}
/*div#kartenkasten { text-align: right; margin-left: 10pt; margin-right: 10pt; } div#kartenkasten > a { font-size: 10pt; }
div#karte {
	height: 200px;
	border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px;
	transition: height 0.75s ease; -moz-transition: height 0.75s ease; -o-transition: height 0.75s ease; -webkit-transition: height 0.75s ease;
	}
div.karte_gross { height: 400px !important; }*/


/* Videos */
a.video { height: 90px; white-space: nowrap; }
a.video span { display: inline-block; vertical-align: bottom; }
span.video, img.video { 
	width: 120px; height: 90px; 
	border-radius: 4pt; -moz-border-radius: 4pt; -khtml-border-radius: 4pt; -webkit-border-radius: 4pt; -o-border-radius: 4pt;
	}
img.video { 
	opacity: 0; 
	transition: opacity 0.3s ease;
		-moz-transition: opacity 0.3s ease;
		-o-transition: opacity 0.3s ease;
		-webkit-transition: opacity 0.3s ease; 
	}
	a.video:hover img.video { opacity: 1; }
span.video { 
	margin-left: 2pt; margin-right: 4pt; display: inline-block; 
	box-shadow: inset 0 0 5px black; 
		-moz-box-shadow: inset 0 0 5px black; 
		-webkit-box-shadow: inset 0 0 5px black;
	}
a.video:hover span.rot { color: #FDEED0; }

iframe.guckkasten { width: 580px; height: 330px; margin-left: 10px; }
/*div.guckkasten { text-align: center; height: 350px; }*/

/* Fotos */
img.foto, a.foto { border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; }
img.foto { transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } 
	img.foto:hover  { opacity: 0; }
a.foto { margin: 12px; display: inline-block; }
div#fotorahmen {
	position: absolute; z-index: 1001; left: 50%; top: 50%;
	padding: 18px; border-style: solid; border-width: 1px; border-color: black;
	background-color: #FDEED0; background-image: url('../bilder/fotos/papier.jpg');
	box-shadow: 0 0 10px black; -moz-box-shadow: 0 0 10px black; -webkit-box-shadow: 0 0 10px black;
	max-width: 100%; max-height: 100%;
	}
img#foto { 
	border-radius: 8pt; -moz-border-radius: 8pt; -khtml-border-radius: 8pt; -webkit-border-radius: 8pt; -o-border-radius: 8pt; 
	max-width: 100%; max-height: 100%; 
	}
a.fotoknopf { color: #FDEED0; opacity: 0; text-decoration: none; font-size: 48px; position: absolute; z-index: 1002; width: 74px; padding: 12px; margin-top: -12px; text-align: center; 
	transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out;
	}
a.fotoknopf:hover { text-decoration: none; opacity: 1; text-shadow: 0 0 2px #A27243; }
a.fotoknopf:first-child { padding-left: 18px; padding-right: 6px;  } a.fotoknopf:first-child:hover { padding-left: 6px; padding-right: 18px; }
a.fotoknopf:last-child { padding-left: 6px; padding-right: 18px; } a.fotoknopf:last-child:hover { padding-left: 18px; padding-right: 6px; }
a#dunkel { 
	display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: black; z-index: 1000; 
	opacity: 0.7; -moz-opacity: 0.7; -khtml-opacity: 0.7;
	}
#fotograph { 
	position: absolute; bottom: 1px; right: 18px;
	color: #88695A; font-size: 10pt; text-shadow: #685046 0 0 1px;
	}

/* Presse */
div.artikel1, div.artikel2 { margin-bottom: 25pt; }
div.artikel1 { margin-right: 20%; }
div.artikel2 { margin-left: 20%; }
p.artikel { margin-bottom: 0; }
.artikelschmuck { color: #88695A; font-style: italic; }
.anf { color: #FDEED0; }

/* Unterricht */
img#unterricht { 
	width: 90%; max-width: 480px;
	}

/* Kontakt */
img.kontaktdaten { margin-left: 1px; margin-top: 2px; }

::selection { background-color: #3B1D13; color: #FCD690; } 
	::-moz-selection { background-color: #3B1D13; color: #FCD690; } ::-webkit-selection { background-color: #3B1D13; color: #FCD690; }