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

body  {
	margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auff&uuml;llung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
	padding: 0;
	text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
	color: #333333;
	background-image: url(../bilder/pattern.gif);
	background-repeat: repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
}


.seite #container {
	position: relative; /* Durch Hinzuf&uuml;gen von position: relative können Sie die beiden Randleisten im Verh&auml;ltnis zu diesem Container positionieren. */
	width: 1000px;  /* Mit einer Breite, die 20 Pixel unter der vollen Breite von 800 Pixel liegt, können Sie dem Browser-Chrome Rechnung tragen und gleichzeitig eine horizontale Bildlaufleiste vermeiden. */
	background: #FFFFFF;
	margin: 0 auto; /* Durch automatische R&auml;nder (in Verbindung mit einer Breite) wird die Seite zentriert. */
	text-align: left;
} 

/* Tipps f&uuml;r absolut positionierte Randleisten mit Kopf- und Fu&szlig;zeile:
1. F&uuml;r absolut positionierte (AP) Elemente m&uuml;ssen Sie einen oberen (top) und einen seitlichen (right oder left) Positionswert angeben. Wenn der Wert f&uuml;r top fehlt, beginnt das AP-Element standardm&auml;&szlig;ig direkt nach dem letzten Element in der Quellenabfolge der Seite. Wenn also die Randleisten in der Quellenabfolge des Dokuments die ersten Elemente im #container sind, erscheinen sie ganz oben im #container, auch wenn f&uuml;r sie kein top-Wert angegeben wurde. Falls sie aber sp&auml;ter in der Quellenabfolge an eine andere Stelle verschoben werden sollten, benötigen sie einen top-Wert, damit sie an der gew&uuml;nschten Position stehen.
2. Absolut positionierte (AP) Elemente werden aus dem Dokumentfluss herausgenommen. Dies bedeutet, dass den benachbarten Elementen ihre Existenz unbekannt ist und dass sie nicht ber&uuml;cksichtigt werden, wenn diese Elemente den ihnen zugedachten Platz auf der Seite einnehmen. Ein AP-div sollte daher nur als Randspalte eingesetzt werden, wenn Sie sicher sind, dass das mittlere #mainContent-div immer die grö&szlig;te Inhaltsmenge hat. Sollte eine der Randleisten eine grö&szlig;ere Inhaltsmenge aufweisen, w&uuml;rde diese Randleiste uneingeschr&auml;nkt &uuml;ber das Ende des &uuml;bergeordneten div sowie in diesem Fall auch &uuml;ber das Ende der Fu&szlig;zeile hinauslaufen.
3. Sofern die oben genannten Bedingungen erf&uuml;llt sind, können Sie mit absolut positionierten Randleisten die Quellenabfolge in Dokumenten auf einfache Weise steuern.
4. Bei einer &Auml;nderung der Quellenabfolge sollte der top-Wert mit der Höhe der &uuml;berschrift &uuml;bereinstimmen, weil dadurch die Spalten und die &uuml;berschrift visuell einheitlicher wirken.
*/
.seite #header { 
	height: 360px; /* Wenn Sie die Quellenabfolge der Spalten &auml;ndern, sollten Sie f&uuml;r die &uuml;berschrift eine Höhe angeben, damit Sie den Spalten einen spezifischen top-Wert zuweisen können. */
	padding: 0 10px 0 20px;  /* Diese Auff&uuml;llung entspricht der linksb&uuml;ndigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die Auff&uuml;llung entfernen. */
	background-image: url(../bilder/templates/template_1.jpg);
	background-repeat: no-repeat;
} 

#kontakt {
	margin: 250px 500px;
}

.seite #header h1 {
	margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abst&auml;nde zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
	padding: 10px 0; /* Durch die Verwendung der Auff&uuml;llung anstelle von R&auml;ndern l&auml;sst sich gew&auml;hrleisten, dass das Element die Kanten des div nicht ber&uuml;hrt. */
}





.seite #sidebar1 {
	position: absolute;
	top: 380px;
	left: 0;
	width: 330px; /* Die tats&auml;chliche Breite dieses div umfasst in standardgerechten Browsern bzw. im Standardmodus von Internet Explorer au&szlig;er der Breite auch die Auff&uuml;llung und den Rahmen. */
	padding: 15px 10px 15px 20px; /* Mit der Auff&uuml;llung wird gew&auml;hrleistet, dass der Inhalt des div die Kanten nicht ber&uuml;hrt. */
	margin: 0 0 15px 0;
}

.seite #sidebar1 a {
	font-size: 12px;
	text-decoration:none;
	color: #FFFFFF;
	padding: 3px 5px 3px 5px;
	background-color: #FFFFFF;
	
	

}



.seite #sidebar1 a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #FFFFFF;
	

}



.seite #sidebar2 {
	position: absolute;
	top: 380px;
	right: 0;
	width: 250px; /* Die tats&auml;chliche Breite dieses div umfasst in standardgerechten Browsern bzw. im Standardmodus von Internet Explorer au&szlig;er der Breite auch die Auff&uuml;llung und den Rahmen. */
	padding: 15px 10px 15px 20px; /* Mit der Auff&uuml;llung wird gew&auml;hrleistet, dass der Inhalt des div die Kanten nicht ber&uuml;hrt. */
	z-index: 1;
}

.seite #sidebar2 h3{
	padding: 0 0 15px 0; /* Mit der Auff&uuml;llung wird gew&auml;hrleistet, dass der Inhalt des div die Kanten nicht ber&uuml;hrt. */
	color: #f8b334;
}

dl {
	font-weight: bold;
}

dt {
	font-weight: normal;
	padding: 0 0 0 20px;
	background-image: url(../bilder/dtL.gif);
	background-repeat:no-repeat;
	background-position: inherit;
}

dd {
	font-weight: normal;
	

}
/*-------------------------------------------------------Inhalte --------------------------------------------------------------*/
.seite #mainContent {
	position: relative;
	margin: 20px 280px 0px 360px; /* Der rechte und der linke Rand dieses div-Elements erstellen die beiden &auml;u&szlig;eren Spalten an den Seitenr&auml;ndern. Der Spaltenbereich bleibt unabh&auml;ngig von der Inhaltsmenge der Randleisten-divs immer gleich. */
	padding: 15px 10px; /* padding (Auff&uuml;llung) bezeichnet den Innenabstand und margin (Rand) den Au&szlig;enabstand der div -Box. */
}


.seite #mainContent a {
	font-size: 12px;
	text-decoration:none;
	color: #FFFFFF;
	padding: 3px 5px 3px 5px;
	background-color: #FFFFFF;
	
	

}



.seite #mainContent a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #FFFFFF;
	

}
.seite #footer {
	padding: 0 10px 0 20px; /* Diese Auff&uuml;llung entspricht der linksb&uuml;ndigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
	background:#FFFFFF;
	border-top: 1px solid #a7a19f;
	position: relative;
	width: 970px;
	margin: 10px auto; /* Durch automatische R&auml;nder (in Verbindung mit einer Breite) wird die Seite zentriert. */
	text-align: left;


} 
.seite #footer p {
	margin: 0; /* Wenn Sie die R&auml;nder des ersten Elements in der Fu&szlig;zeile auf 0 einstellen, können Sie unerwartete Abst&auml;nde zwischen divs vermeiden. */
	padding: 10px 0px; /* Durch die Verwendung der Auff&uuml;llung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
	color: #a7a19f;
	font-size: 9px;
	line-height: 14px;
	
}

.seite #footer a {
	padding: 0 5px 2px 5px; /* Diese Auff&uuml;llung entspricht der linksb&uuml;ndigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
	text-decoration: none;
	color: #a7a19f;
	font-weight: bold;
} 


.seite #footer a:hover {
	color: #a7a19f;
	font-weight: bold;
	border-bottom: 1px solid #f8b334;
	
	
} 


.fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts flie&szlig;en lassen. Das floatende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links flie&szlig;en lassen. */
	float: left;
	margin-right: 8px;
}

</style>[if IE 5]>
<style type="text/css"> 
/* F&uuml;gen Sie CSS-Box-Modell-Korrekturen f&uuml;r IE 5* in diesen bedingten Kommentar ein. */
.seite #sidebar1 { width: 350px; }
.seite #sidebar2 { width: 250px; }
</style>
<![endif]

