/* CSS Document */
/* CSS Template FotoGrafik Bernd Respondek */
/* CSS von Stefan Steinbach */

/* --------------------------------------------------------------------------------------------------------*/
/*Der universal Selektor "*" das html und body-Tag sind für die allgemeinen Seiteneigenschaften zuständig*/
* {
	margin: 0px;
	padding: 0px;
}
html, body {
	height: 100%;
}
/*Im body-Tag änderst du die Hauptschriftart/größe und Hintergrundfarbe*/ 
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: 140%;
	font-weight: normal;
	font-variant: normal;
	color: #CCCCCC;
	background-color: #000000;
	text-align: center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center top;
}
/*Die a-Tags sind die Links mit ihren verschiedenen Zuständen, hier änderst du ihre Farbe und andere Attribute*/
a, a:link, a:active, a:visited {
	color: #FFF;
	text-decoration: none;
	font-weight: normal;
}
/*Hier ist der over Effekt für die Links */
a:hover {
	color: #FFFFFF;
}
/*Hier fangen die Überschriften an-------------------------------------------------------------------------------------------*/
h1 {
	font-weight: bold;
	color: #FFFFFF;
	padding-bottom: 5px;
	font-size: 16px;
	font-style: normal;
	line-height: 140%;
}
h2 {
	font-style: normal;
	line-height: 140%;
}
h3 {}
h4 {}
h5 {}
h6 {}
/*Ende Überschriften----------------------------------------------------------------------------------------------------------*/

/*Die strong Eingenschaft ist zuständig für die Textstellen die Fett formatiert sind*/
strong {
	font-weight: bold;
	color: #FFFFFF;
}
/*Das em Tag ist für die kursive Schrift zuständig*/
em {
	font-weight: normal;
	color: #FFFFFF;
}
/*Das berühmte Absatz-Tag das bekommst du ja mit der Eingabe Taste:)*/
p {
	font-size: 12px;
	font-style: normal;
	line-height: 120%;
	color: #FFFFFF;
	padding-top: 5px;
	padding-bottom: 5px;
}
/*Hier gibst du alle Eigenschaft an was die Bilder haben sollen, z.B. ohne Rand oder alle Bilder rechts oder linksbündig*/
img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
/*Das hr Element ist für eine einfache Linie zuständig die von links nach rechts geht um die Farbe zu ändern einfach die color Eigenschaft ändern für die Größe einfach die Höhe ändern und einen Hintergrund anlegen*/
hr {
	color: #F90;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	height: 2px;
	background-color: #F90;
}
/*Das Tabelen Tag ist die ganze Tabelle hier legst du die grundlegenden Eigenschaften an, wie Farbe der Schrift und den Rahmen*/
table {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	margin: 0px;
}
/*Mit dem tr Tag richtest du die Inhalte in den einzelnen Zellen aus unter Block*/
tr {
	text-align: left;
	vertical-align: top;
}
/*Das td Tag änder die umrandung der einzelnen Zellen bei Rahmen*/
td {
	border: thin dashed #3366FF;
}
#container {
	background-color: #000000;
	text-align: left;
	min-height: 100%;
	height: auto!important;
	height: 100%;
	width: 990px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 50px;
}
#header {
	height: 200px;
	width: 100%;
	background-color: #CCCCCC;
}
#head-text {
	position: absolute;
	z-index: 10;
	height: 180px;
	width: 180px;
	color: #FFF;
	padding-top: 10px;
	padding-left: 5px;
}

#content {
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #F93;
}
#nav {
	background-color: #999;
	float: left;
	height: auto;
	width: 145px;
	padding-top: 10px;
}
#nav ul {
	list-style-type: none;
}
#nav li {
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	padding-left: 10px;
}
/*Das li:hover ist für den over zuständig mit dem over Bild Effekt*/
#nav li:hover {
	background-attachment: scroll;
	background-image: url(../bilder/h_h_navi_over.png);
	background-repeat: no-repeat;
	background-position: right center;
}
/*Hier veränderst du die Farbe für die Navigationspunkte in der Navi die eine andere Hintergrundfarbe erhalten sollen*/
#nav .color {
	background-color: #F90;
}
#nav a, #nav a:link, #nav a:active, #nav a:visited {
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
}
#nav a:hover {
	color: #333;
}
#main_content {
	float: left;
	margin-left: 10px;
	padding-top: 10px;
}
#advertising {
	float: right;
	width: 170px;
	padding-top: 10px;
	font-size: 9px;
	background-color: #666;
}
#footer {
	clear: both;
	height: 20px;
	width: 990px;
	margin-right: auto;
	margin-left: auto;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #F90;
	font-size: 10pt;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #FFFFFF;
	text-align: center;
	background-color: #000000;
}


/*Diese Eigenschaften heben die Float Umgebung wieder auf und setzten einen Punkt nach dem Content damit der Hauptdiv/Container bis unten geht-------*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}


* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/*-------------------------------------------------------------------------------------------------------------------------------------------------------*/