@charset "utf-8";
/* CSS Document */



body,td,th {margin: 0; padding:0;  line-height: 1.5em; font-family: Raleway, Geneva, Arial, Helvetica, sans-serif; font-size: 14px;}
/*body { background: url(../img/background.png) fixed;}*/

h1 { font-size: 1.1em; line-height: 1.7em; font-weight: normal; margin: 0; }
h2 { font-size: 0.9em; line-height: 1.2em; font-weight: normal; margin: 0; }
h3 { font-size: 0.9em; line-height: 1.2em; font-weight: normal; margin: 0; }
p {margin: 0; font-size: 1em; line-height: 1.3em;}
li {margin: 0.5em 0 0.5em 1.5em; font-size: 1em;}
ul {margin: 0; padding: 0;}

#menu-left li, #menu-right li{list-style: none;}
.menu-big{font-size: 1.2em; line-height: 1.5em; margin: 0;}
.menu-small{font-size: 0.9em; line-height: 1.2em; margin: 0;}

a {text-decoration: none;}
a:hover { text-decoration: underline;}

.download {position: relative; top: 2px;}

/*menu active*/

#vorschau #vorschau_active a, 
#ww_aktuelles #aktuelles_active a, 
#termine_nachl #termine_nachl_active a,
#projekte #projekte_active a,
#philosophie #philosophie_active a,
#werner #werner_active a,
#gerlinde #gerlinde_active a,
#kontakt #kontakt_active a,
#ksp_workshops #ksp_workshops_active a,
#ksp_philosophie #ksp_philosophie_active a,
#ksp_links #ksp_links_active a,
#ww_links #ww_links_active a,
#ksp_partner #ksp_partner_active a,
#ksp_fotos #ksp_fotos_active a,
#ww_fotos #ww_fotos_active a,
#ksp_kontakt #ksp_kontakt_active a
 {text-decoration: underline;}

#index{ margin: 30px auto 0;}
#index #left{float: left; text-align: right; color: #17498b; right: 48%; width: 46%; position: relative; margin-left: 2%;}
#index #right {float: right; text-align: left; color: #B62E42; left: 48%; width: 46%; position: relative; margin-right: 2%;}

#page{/*max-width: 768px; */margin: 20px auto 0; position: relative;}
#page #left { position: fixed; float: left; text-align: right; color: #17498b; width: 180px;}
#page #menu-left{ margin-top: 50px;}
#page #menu-left a{color: #17498b;}
#page #center{ margin-left: 220px; width: 328px; padding-bottom: 30px; }
#page #center img{max-width: 328px;}
.youtube iframe { width: 328px; height: 184px; }
#page #right {position: fixed; top: 20px; margin-left: 588px; text-align: left; color: #B62E42; width: 180px;  background: transparent;}
#page #menu-right {margin-top: 50px; }
#page #menu-right a{color: #B62E42;}
/*#page #center #content{padding-top: 5px;}*/
.terminfeld{
	/*background: url(../img/30.png);*/
    border: 1px solid #acbfd8;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #ccc;
    padding: 10px;
	margin-bottom: 10px;
}

.terminfeld { background: rgba(0,80,255,0.05);}
.rot .terminfeld { background: rgba(255,80,0,0.05);}
.rot .terminfeld{ border: 1px solid rgba(182,46,66,0.4);}

.backtotop {
    bottom: 5px;
    height: 20px;
    position: relative;
    left: 0;
    width: 22px;
}
.gallery { margin: 0;}
.gallery img, .youtube iframe{ border: 3px solid #FFFFFF;
	box-shadow: 0 0 2px #777777;
	-moz-box-shadow: 0 0 2px #777777;
	-webkit-box-shadow: 0 0 2px #777777;
    }


#left a, #left a:visited{color: #17498b;}
#right a, #right a:visited{color: #B62E42;}
#index #left p, #index #right p{font-size: 0.9em; line-height: 1.4rem;}

#index #left h1, #index #right h1{opacity: 0;}
#index #aktuell {text-align: center; clear: both; color: #666; margin: 0 2% 2% 2%;}
#index #aktuell a { color: #666}


#left-low{float: left; text-align: right; color: #17498b; width: 48%; margin-top: 58px; opacity: 0;}
#left-low a, #left-low a:visited{color: #17498b;}
#right-low {float: right; text-align: left; color: #B62E42; width: 48%; margin-top: 58px; opacity: 0;}
#right-low a, #right-low a:visited{color: #B62E42;}
#left-low p, #right-low p{font-size: 0.7em; }

#bottom{height: 40px;}
#footer{ background: url(../img/background.png); bottom: 0; height: 25px; position: fixed; right: 0; width: 100%; bottom: 10px; position: fixed; right: 0; bottom: 0;}
#footer p{ color: #bbbbbb; font-size: 0.8em; margin-right: 20px; text-align: right; margin-top: 5px;}
#footer a{ color: #bbbbbb;}

.spacer_01 {height: 70px;}
.menulink {font-size: 1.3em;}
.blau{ color: #17498b;}
.blau a{ color: #17498b;}
.rot{ color:#B62E42;}
.rot a{ color:#B62E42;}
.right-align {text-align: right;}
.active{text-decoration: underline;}
.hr-blau{ border-width: 0 0 1px; color: #17498b; margin: 40px 0 20px;}
.hr-rot{ border-width: 0 0 1px; color: #B62E42; margin: 40px 0 20px;}



.header-facebook{
	position: absolute;
	top: 0;
	right: 0;
}
#ksp_kontakt .header-facebook, #ksp_links .header-facebook, #ksp_fotos .header-facebook, #ksp_philosophie .header-facebook, #ksp_workshops .header-facebook {
	right: auto;
}
.header-facebook a:hover{
	text-decoration: none;
}
.header-facebook i, .index-facebook i{
	font-size: 1.1em;
	line-height: 1.7em;
	padding-right: 0.1em;
}
.index-facebook{
	padding-top: 1em;
}


@media screen and (min-width: 0px) {
	#page #center-top {height: 180px; position: relative;}
	#page {margin: 0; min-width: 320px;}
	.menu-big{ display: inline-block;}
	#page #left{text-align: left; width: auto; height: 110px; margin-left: 10px; z-index: 1; padding-top: 10px; position: absolute;}
	#page #menu-left, #page #menu-right { margin-top: 10px; margin-bottom: 10px;}
	#page #center{ width: auto; margin-left: 0; left: 10px; right: 10px; top: 260px; position: absolute;}
	#page #center img {max-width: 270px;}
	.youtube iframe { width: 270px; height: 152px; }
	#page #right{ margin-left: 10px; top: 150px; z-index: 1; width: auto; position: absolute;}
	.menu-small{display: none;}

	#index .terminfeld { width: calc(100% - 20px);}

	}
@media screen and (min-width: 480px) {	
	#page #center-top {height: auto;}
	#page #center img {max-width: 400px;}
	.youtube iframe { width: 400px; height: 225px; }
	.terminfeld{padding: 10px 20px;}
	#index .terminfeld { width: calc(100% - 40px);}

}

@media screen and (min-width: 768px) {




	#page {margin: 20px auto 0;}
	.menu-big{ display: block;}
	#page #left{text-align: right; width: 16%; left: 2%; height: auto; margin-left: 0; padding-top: 0; position: fixed;}
	#page #menu-left, #page #menu-right { margin-top: 50px; margin-bottom: 0; }
	/*#page{max-width: 768px;}*/
	#page #center {width: 60%; margin: 0 auto; position: static;}
	#page #center img {max-width: 298px;}
	.youtube iframe { width: 298px; height: 167px; }
	#page #right { right: 2%; width: 16%; top: 20px; position: fixed;}	
	.menu-small{display: block;}
	#footer{ background: none;}
	.terminfeld{padding: 10px 10px;}
	#index .terminfeld { width: calc(50% - 40px); margin: 0 auto;}

}

@media screen and (min-width: 800px) {

	#page #center img {max-width: 290px;}
	.youtube iframe { width: 290px; height: 163px; }
	/*.gallery img {margin: 0 20px 15px;}*/
}
@media screen and (min-width: 1024px) {

	h1 { font-size: 1.4em; line-height: 1.7em; }
	h2 { font-size: 0.9em; line-height: 1.2em; }
	h3 { font-size: 0.9em; line-height: 1.2em; }
	p {font-size: 1em; line-height: 1.5em;}
	li {font-size: 1em;}

	.header-facebook i, .index-facebook i{
		font-size: 1.4em;
		line-height: 1.7em;
	}

	.menu-big{font-size: 1.4em; line-height: 1.7em;}
	.menu-small{font-size: 0.9em; line-height: 1.2em;}

	#index #left p, #index #right p{font-size: 0.9em; line-height: 1.6rem;}
	#left-low p, #right-low p{font-size: 0.7em; }
	#footer p{ font-size: 0.8em; }
	.menulink {font-size: 1.6em; }

	#page #center img {max-width: 528px;}
	.youtube iframe { width: 528px; height: 297px; }
	.terminfeld{padding: 10px 20px;}
	/*.gallery img { margin: 0 3px 9px;}*/
}

@media screen and (min-width: 1260px) {
	#page #center img {max-width: 710px;}
	.youtube iframe { width: 710px; height: 399px; }
	.gallery img { margin: 0px 0 3px; }
}
@media screen and (max-height: 700px) {
	.menu-small{display: none;}
}
