/* CSS Document */

/* **********   **********   **********   **********   **********   **********   **********   **********   **********   ********** */
/* **********   **********   **********   **********        Layout Seiten         **********   **********   **********   ********** */
/* **********   **********   **********   **********   **********   **********   **********   **********   **********   ********** */

body {
	font-family: lynda, Helvetica,Arial,sans-serif;				/* Schtiftart */
	font-size: 20px;											/* Schtifgröße */
	color: #000000;												/* Schtiffarbe */
}
a:link {
	color: #0000FF;												/* Verweis Farbe */
	text-decoration: none;										/* Verweis keine Dekoration */
}
a:visited {
	text-decoration: none;										/* besuchter Verweis Dekoration */
	color: #000000;												/* besuchter Verweis Farbe */
}
a:hover {
	text-decoration: underline;									/* Verweis Dekoration bei Übergleiten */
	color: #0000FF;												/* Verweis Farbe bei Übergleiten */
}
a:active {
	text-decoration: none;										/* aktiver Verweis Dekoration */
	color: #00FF00;												/* aktiver Verweis Farbe */
}


@font-face { font-family: 'lynda';											/* Font Lynda einbinden */
             src: url('../font/lynda.ttf') format('truetype'); }
@font-face { font-family: 'stencil';										/* Font Stencil einbinden */
             src: url('../font/stencil.ttf') format('truetype'); }



/* **********   **********   **********   **********   **********   **********   **********   **********   **********   ********** */
/* **********   **********   **********   **********        Layout Index         **********   **********   **********   ********** */
/* **********   **********   **********   **********   **********   **********   **********   **********   **********   ********** */






#Wrapper {
	left:0;
	top:0;
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../lo/bg-wand-schwarz.png);		/* Hintergrundbild */
	background-size: 100% 100%;									/* Hintergrundbild paßt sich der Größe in Höhe und Breite an */
	z-index:1;
}



#Head {
	left:0;
	top:0;
	position: absolute;
	width: 100%;
	height: 10%;
	z-index:2;
}



#Content {
	left:0;
	top:10%;
	position: absolute;
	width: 100%;
	height: 85%;
	background-image: url(../lo/bg-wolf.png);		/* Hintergrundbild */
	background-size: 100% 100%;									/* Hintergrundbild paßt sich der Größe in Höhe und Breite an */
	/*background-color: rgba(255,255,255,0.3);  					/* helles weiß Transparent */
	z-index:1;
}



#Footer {
	left:0;
	top:95%;
	position: absolute;
	width: 100%;
	height: 5%;
	z-index:1;
}



/* **********   **********   **********   **********   **********   **********   **********   **********   **********   ********** */



@media only screen and (max-width: 599px) {
	#WoelfeTermineFrame {
	position:absolute;
	top:0;
	left:0;
	width: 15%;
	height: 100%;
	z-index:1;
	display:none;
}



#InhaltFrame {
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index:1;
}



#SzeneTermineFrame {
	position:absolute;
	top:0;
	left:85%;
	width: 15%;
	height: 100%;
	z-index:1;
	display:none;
}


#AlleTermineFrame {
	position:absolute;
	top:0;
	left:85%;
	width: 15%;
	height: 100%;
	z-index:1;
	display:none;
}
}



@media only screen and (min-width: 600px ) {
#WoelfeTermineFrame {
	position:absolute;
	top:0;
	left:0;
	width: 15%;
	height: 100%;
	z-index:1;
	display:none;
}



#InhaltFrame {
	position:absolute;
	top:0;
	left:0;
	width: 70%;
	height: 100%;
	z-index:1;
}



#SzeneTermineFrame {
	position:absolute;
	top:0;
	left:85%;
	width: 15%;
	height: 100%;
	z-index:1;
	display:none;
}



#AlleTermineFrame {
	position:absolute;
	top:0;
	left:70%;
	width: 30%;
	height: 100%;
	z-index:1;
	display: block;
}
}



@media only screen and (min-width: 980px ) {
#WoelfeTermineFrame {
	position:absolute;
	top:0;
	left:0;
	width: 15%;
	height: 100%;
	z-index:1;
	display:none;
}



#InhaltFrame {
	position:absolute;
	top:0;
	left:0;
	width: 75%;
	height: 100%;
	z-index:1;
}



#SzeneTermineFrame {
	position:absolute;
	top:0;
	left:85%;
	width: 15%;
	height: 100%;
	z-index:1;
	display:none;
}



#AlleTermineFrame {
	position:absolute;
	top:0;
	left:75%;
	width: 25%;
	height: 100%;
	z-index:1;
	display: block;
}
}



@media only screen and (min-width: 1260px ) {
#WoelfeTermineFrame {
	position:absolute;
	top:0;
	left:0;
	width: 20%;
	height: 100%;
	z-index:1;
	display:block;
}



#InhaltFrame {
	position:absolute;
	top:0;
	left:20%;
	width: 60%;
	height: 100%;
	z-index:1;
}



#SzeneTermineFrame {
	position:absolute;
	top:0;
	left:80%;
	width: 20%;
	height: 100%;
	z-index:1;
	display:block;
}



#AlleTermineFrame {
	position:absolute;
	top:0;
	left:85%;
	width: 15%;
	height: 100%;
	z-index:1;
	display:none;
}
}