﻿
body {
    text-align: center;
    background-image: url("../bilder/hintergrund.jpg");
    height: 900px; 
    background-attachment: fixed;
    font-family: Arial, sans-serif;
    }
    
  * {
    margin: 0;
    padding: 0;
    list-style:none;
    border:none;
    outline:none;
    }
    
seite, header, navilinks, content, footer {
	display: block;
	}
	
#seite {
/*	background-color: red; */
	width: 1200px;       
	height: auto;
	margin: 0 auto;
	margin-top: 10px;
	border: 5px;
/*	border-color: red;
	border-width: 5px;
	border-style: solid; */
	text-align: left;
	background-image: url("../bilder/vsh0_105.gif");
	}
	
	
#header_links {
	background-color: #9966FF; 
	background-image: url("../bilder/hausansicht_1.jpg"); 
	width: 400px;
	height: 267px;
	margin: 0 auto;
	opacity: 1;
	float:left;
	}
	
#header_rechts {
	background-color: #996600; 
	background-image: url("../bilder/header4.jpg");
	width: 798px;
	height: 267px;
	margin: 0 auto;
	opacity: 1;
	float:right;
	}
	
#header h1 {
	text-align: center;
	padding-top: 50px;
	font-family:  Arial;
	font-weight: bold;
	font-size: 60pt;
	color: green;
	opacity: 1.0;
	}	

#header p{
	padding-top: 20px;
	}
	
#lauftext {
	background-image: url("../bilder/vsh0_105.gif");
	font-family: Comic Sans Ms;
	font-size:24px;
	line-height:26px;
	float:left;
		}

#seiten_titel {
	padding:10px;
	width:1200px;
	height:120px;
/*	background-color:white; */
	float:left; 
	}

#braedcrumb {
	margin-bottom: 10px;
	padding-left: 30px;
	padding-top: 10px;
	width:1170px;
	height:30px;
	background-color: #800000;
	color: white;
	float:left;
	}

	
#navi_links {
/*	background-color: green; */
	width: 200px;
	height:auto;
	float:left;
	}
	
#content {
/*	background-color: orange; */
	width:480px;
	height:auto;
	float:right;
	}

#content_1 {
/*	background-color: orange; */
	width:980px;
	height:auto;
	float:right;
	}
		
#content_1 p {
	padding:5px;
	}	

		table.w {
		margin-left:auto;
		margin-right:auto;
		width:720px;
		}


		table.n {
		margin-left:auto;
		margin-right:auto;
		width:850px;
		}

		table.z {
		margin-left:auto;
		margin-right:auto;
		width:750px;
		}

		table.x {
/*		margin-left:auto;
		margin-right:auto;*/
		width:1000px;
		}

        table {
      	margin-left:auto;
      	margin-right:auto;
        width:950px;
      }
      td {
      	padding-left:10px;
        border:0px solid;
        overflow:hidden;
/*        vertical-align:top; */
      }

		
	
/* Galerie Container */
#gal {
 margin:0px auto;
 margin-bottom:20px;
 margin-left:20px;
 position:relative; 
 width:500px;  /* Gesamtbreite = dt(img(400px) + dd(200px )  */
 height:333px;
 background:url(bilder/bild1.jpg) no-repeat 0 0 #333;
 overflow:hidden;
 box-shadow:10px 10px 10px #000;
 float:left;
}

#gal dl {
 width:3000px; /* Gesamtbreite = 6 x 500px (siehe #gal width) */
 position:relative;
 -webkit-animation: slider 25s infinite ;
 -o-animation: slider 25s infinite;
 -moz-animation: slider 25s infinite;
 -ms-animation: slider 25s infinite;
 animation: slider 25s infinite;
}

#gal br {
 display:none;
}

#gal dt  {
 position:relative;
 display:block;
 float:left;
}
/*
#gal dd {
 padding:10px;
 float:left;
 width:180px;
 height:330px;
 background:blue;
 color:#fff;
}
*/

/* Bildbreite 1200px */
#gal img {
 width: 500px;
 float:left;
}

/* Animation für Slider, wobei 5% für die Übergänge und ca 15% für Wartezeit */

@-webkit-keyframes slider {
 0% { left:0;opacity:0 }  /* Erstes Bild einblenden */
 5%, 10%, 100%	{ left: 0px;opacity:1; }
 15%, 25% { left: -500px;opacity:1; }
 30%, 40% { left: -1000px;opacity:1; }
 45%, 55% { left: -1500px;opacity:1; }
 60%, 70% { left: -2000px;opacity:1 }
 75%, 85% { left: -2500px;opacity:1 }
 90%, 100% { left: -2500px ;opacity:1; } /* letztes Bild ausblenden */
}

@-o-keyframes slider {
 0% { left:0;opacity:0 }  /* Erstes Bild einblenden */
 5%, 10%, 100%	{ left: 0px;opacity:1; }
 15%, 25% { left: -500px;opacity:1; }
 30%, 40% { left: -1000px;opacity:1; }
 45%, 55% { left: -1500px;opacity:1; }
 60%, 70% { left: -2000px;opacity:1 }
 75%, 85% { left: -2500px;opacity:1 }
 90%, 100% { left: -2500px ;opacity:1; } /* letztes Bild ausblenden */
}

@-moz-keyframes slider {
 0% { left:0;opacity:0 }  /* Erstes Bild einblenden */
 5%, 10%, 100%	{ left: 0px;opacity:1; }
 15%, 25% { left: -500px;opacity:1; }
 30%, 40% { left: -1000px;opacity:1; }
 45%, 55% { left: -1500px;opacity:1; }
 60%, 70% { left: -2000px;opacity:1 }
 75%, 85% { left: -2500px;opacity:1 }
 90%, 100% { left: -2500px ;opacity:1; } /* letztes Bild ausblenden */
}

@-ms-keyframes slider {
 0% { left:0;opacity:0 }  /* Erstes Bild einblenden */
 5%, 10%, 100%	{ left: 0px;opacity:1; }
 15%, 25% { left: -500px;opacity:1; }
 30%, 40% { left: -1000px;opacity:1; }
 45%, 55% { left: -1500px;opacity:1; }
 60%, 70% { left: -2000px;opacity:1 }
 75%, 85% { left: -2500px;opacity:1 } 
 90%, 100% { left: -2500px ;opacity:1; } /* letztes Bild ausblenden */
}

@keyframes slider {
 0% { left:0;opacity:0 }  /* Erstes Bild einblenden */
 5%, 10%, 100%	{ left: 0px;opacity:1; }
 15%, 25% { left: -500px;opacity:1; }
 30%, 40% { left: -1000px;opacity:1; }
 45%, 55% { left: -1500px;opacity:1; }
 60%, 70% { left: -2000px;opacity:1 }
 75%, 85% { left: -2500px;opacity:1 } 
 90% , 100% { left: -2500px ;opacity:1; } /* letztes Bild ausblenden */
}

#gal #navi_gal {
 position:absolute;
 top:10px;
 left:10px;
 width:20px;
 height:20px;
 z-index:99;
}

#gal #navi_gal li {
 position:relative;
}

#gal #navi_gal a {
 padding:10px;
 position:absolute;
 display:none;
 color:#000;
 text-decoration: none;
 font-weight: bold;
}

#gal #navi_gal #s:before {
 content:"";
 position:absolute;
 width:0;
 height:0;
 border:20px solid transparent;
 border-right-style: none;
 border-left-color: #fff;
 opacity:.6;
}

#gal #navi_gal #p:before {
 content:"";
 position:absolute;
 width:10px;
 height:40px;
 border-left:10px solid #fff;
 border-right:10px solid #fff;
 opacity:.6;
}

#gal #start:target ~ dl {
 -o-animation-play-state: running; 
 -webkit-animation-play-state: running; 
 -moz-animation-play-state: running; 
 -ms-animation-play-state: running; 
 animation-play-state: running; 
}

#gal #pause:target ~ dl {
 -o-animation-play-state: paused;
 -webkit-animation-play-state: paused;
 -moz-animation-play-state: paused;
 -ms-animation-play-state: paused;
 animation-play-state: paused;
}
#gal #pause:target ~ #navi_gal #p { display:none;  }
#gal #pause:target ~ #navi_gal #s { display:block; }

#gal #start:target ~ #navi_gal #s { display:none;  }
#gal:hover #navi_gal #p { display:block;}

/*
#bc	{
	height:350px;
	width:1200px;
	background-image:url(../fotos/tennisanlage.jpg);
	border-bottom: 5px solid #ff9900; 
	}
*/	
	
	
	
	
#content h1 {
	text-align: center;
	padding-top: 20px;
	padding-left: 10px;
	font-family: Arial;
	font-weight: bold;
	font-size: 24pt;
	}

#content h2 {
	padding-top: 20px;
	font-family: Arial;
	font-weight: bold;
	font-size: 18pt;
	}

#content h3 {
	font-family: Arial;
	font-weight: bold;
	font-size: 14pt;
	padding-left:20px;
	}

#content p {
 	margin-left:5px;
 	padding:20px;
 	text-align:justify;
 	line-height:20px;
 	overflow:hidden;
	}
	
#content ul {
	padding-left: 370px;
	}
#content li {
	margin-left: -350px;
	}
#content table {
	border-collapse:collapse;
 	border:5px solid #ffffff;
 	margin:0 auto;
 	margin-top: 20px;	
	}

#content table td {
	border-collapse:collapse;
	border:5px solid #ffffff;
	}

/* style für Bildederreigen */
	
	dt , dl , dd {
 	padding:0;
 	margin:0;
	}

	dt a , dt img {
 	display:block;
	}

	dl {
 	margin:0px;
 	position:relative;
 	width:200px;
	}

	dd a {
 	margin:0;
 	padding:5px;
 	position:absolute;
 	left:-99999px;
 	bottom:0;
 	color:#fff;
 	text-align:center;
 	text-decoration:none;
	}

	dl:hover dd a , dl dd a:focus {
 	left:0;
 	right:0;
 	outline: none; 
 	background:rgba(0 , 0 , 0 , .3);
	}
/* Ende style für Bilderreigen */


	
#footer a {
		color:#ffffff;
		}
		
#footer p {
	padding-top:30px;
	padding-left:30px;
		}
		
#footer {
	background-color: #800000;
	height:150px;
	width: 100%;
	clear:both;
	}