/* Standard-CSS für www.farina-neuhaeuser.de */

/* Wichtige Farben
Name Farbe 01 BG					= #e9e7e7
Name Farbe 02.1 Schrift dunkel		= #303030
Name Farbe 02.2 Schrift hell		= #666666
Name Farbe 02.3 Schrift heller		= #999
Name Farbe 03.1 (undercover-dunkel)	= #a6b784
Name Farbe 03.2 (undercover-hell)	= #d6dec6
Name Farbe 04.1 (kampstraße-dunkel)	= #aab5be
Name Farbe 04.2 (kampstraße-hell)	= #d6dce1
Name Farbe 05.1 (visitors-dunkel)	= #b2c3cf
Name Farbe 05.2 (visitors-hell)		= #d9e1e7
Name Farbe 06.1 (hofbogen-dunkel)	= #519533
Name Farbe 06.2 (hofbogen-hell)		= #f0f3e7
Name Farbe 06.3 (hofbogen-grau)		= #f0f3e7
*/

/* Hier werden alle html-Tags auf "Null" gesetzt und eine Standard-Schriftart vergeben.
Schriftart im Header des Quelltextes an erster Stelle verlinkt (google webfints). Mulials Standardschrift, Open Sans falls es die nicht geibt und Sans Serif für den Notfall. Pontano+Sans für NAVI. Grundsätzliche Schriftgröße ist 13, Schriftfarbe (color) ein dunkelgrau.*/
* {
	font-family: Open Sans, Muli, Sans Serif;
	padding: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 0;
	font-size: 13px;
	line-height: 18px;
	color: #303030;
	font-weight: normal;
}

/* Hier allgemeingueltige Formatierungen */

/* Alle Links, die nicht im content oder in der Navi etc. anders formatiert werden sind wie folgt festgelegt. für intenrnet-explorer müssen extra textdecoration none und border none angegeben werden. sonst macht er das automatisch. */
a:link {
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
/* Wurde ein Link bereits besucht soll er trotzdem nicht anders erscheinen, also nur keine textdecoration etc. */
a:visited {
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
/* Beim drüber scrollen (hover) und beim Anklicken (active) ändert der Link seine Farbe: */
a:hover {
	color: #999;
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
a:active {
	color: #666666;
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

/* text-align center ist nur für den internet exploerer 5 und 5.5. dieser kann den wrapper nicht über margin auto zentrieren. Damit aber nicht alle divtag im wrapper zentriert werden muss im wrapper text align left vermerkt werden. */
body {
	background-color: #e9e7e7;
	text-align: center;
}




/* Sektionsweite Formatierungen */

/* Der Wrapper ist 980 px breit, sodass der Schatten noch gezeigt wird. Die Positionierung wird auf relative gesetzt, sodass er immer in der Mitte des Bildschirms liegt. auto margin sorgt dafür, dass der wrapper endet, wenn der inhalt endet. Mit text-align left wird die center einstellung des bodys (s.o.) wieder beendet.  */
#wrapper {
	width: 980px;
	text-align: left;
	/* [disabled]background-color: #939; */
	margin: auto;
}
/* colleft extra eingebaut, damit der Internet Explorer die Formatierung der Seite versteht. so können die einzelnen teile in colleft ohne positionierung sondern nur über paddings angeordnet werden. iexplorer versteht hier tlw auch keine höhenangaben der divtags. Daher wurde beim logo mit paddings gearbeitet. damit es für andere browser trotzdem noch passt wurde die höhenangaben abzüglich der paddings angepasst. iexplorer ignoriert das anscheinend einfach. Der zindex gibt an dass das colleft bei schmalen browsern und horizontalem scrollbalken hinter dem sontent verschwindet da dieser einen höheren zindex hat. Der zindex gibt also an wie weit vorne oder hinten ein element steht. es funktioniert aber nur wenn auch sonst eine angabe bei der positionierung angegeben ist. hier zb position fixed. */
#wrapper #colleft  {
	/* [disabled]background-color: #0C0; */
	float: left;
	width: 200px;
	position: fixed;
	z-index: 100;
}
/* Da der Wrapper 980 px breit ist, muss die gesamte linke Spalte (also Logo, Navi und Kontakt) mit margin left 10 px versehen werden, sodass der Inhalt wieder, wie geplant, auf 960 px Breite angezeigt wird. Die Position ist fixed, da die linke Spalte nicht mitscrollen soll. Top gibt den Abstand zur oberen Kante des Wrappers an. */
#wrapper #colleft #logo{
	font-family: Pontano Sans, Open Sans, Sans Serif;
	height: 36px;
	width: 180px;
	margin-left: 10px;
	/* [disabled]background-color: #F00; */
	background-image: url(../bilder/logo3.jpg);
	padding-top: 50px;
	padding-bottom: 45px;
}
/* Im Logo gibt es 2 Überschriften, beides links, da Vor- und nachname gleiclang sein sollen. Über Schriftgröße und letter spacing werden die Wörter aneinander angepasst. Die lineheight von h2 macht den Abstand zur oberen Zeile. Bei h1 sind lineheight und schriftgröße gleich, damit das Logo wirklich an der oberen Kante anfängt. */
#wrapper #colleft #logo h1 a{
	font-size: 13px;
	color: #000;
	/* [disabled]background-color: #0F0; */
	line-height: 16px;
	letter-spacing: 1px;
	font-weight: normal;
}
#wrapper #colleft #logo h2 a{
	font-size: 16px;
	color: #000;
	letter-spacing: 1px;
	/* [disabled]background-color: #CF9; */
	line-height: 20px;
	font-weight: normal;
}
/* Da der Wrapper 980 px breit ist, muss die gesamte linke Spalte (also Logo, Navi und Kontakt) mit margin left 10 px versehen werden, sodass der Inhalt wieder, wie geplant, auf 960 px breite angezeigt wird. Die Position ist fixed, da die linke Spalte nicht mitscrollen soll. Top gibt den Abstand zur oberen Kante des Wrappers an. */
#wrapper #colleft #navi{
	width: 165px;
	height: 300px;
	/* [disabled]background-color: #0CC; */
	margin-left: 10px;
	margin-bottom: 100px;
}
/* Diese Formatierung sorgt dafür, dass die gesamte Liste der Links keine Auflistungspunkte hat. Navi Nav1 li sind die Listenpunkte der Übernavigation also die Punkte Projekte und Person. Die Unternavigation, also die einzelnen Projekte, sind dann Unterpunkte vom Listenpunkt Projekte. */
#wrapper #colleft #navi #nav1 li{
	list-style-type:none;
	/* [disabled]background-color: #FCF; */
}
/* Über display block wird der weiße Hintergrundkasten für jeden Link, also a, einzeln aktiviert, die vertikale positionierung der Schrift habe ich über line-height eingestellt. Alle Einstellungen können nachher im header an- oder abgewählt werden, sodass der link entsprechend dem wo man ist, auch markiert ist oder nicht. Lineheight sorgt für den Abstand zwischen den einzelnen Listenpunkten. */
#wrapper #colleft #navi #nav1 li a{
	font-family: Pontano Sans, Open Sans, Sans Serif;
	background-color: #fdfdfd;
	display: block;
	height: 34px;
	width: 157px;
	font-size: 20px;
	padding-left: 8px;
	line-height: 36px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	border-bottom-color: #FFF;
	margin-bottom: 0px;
	letter-spacing: 1px;
}
/* Hier die Formatierungen für die gesamte Liste der Unternavigation. Das marginleft sorgt daür, dass sie eingerückt ist. Top und bottom regeln den abstand zu den Listenpunkten der Übernavigation. Letterspacing zieht die Buchstaben auseinander. */
#wrapper #colleft #navi #nav1 li #nav2a{
	/* [disabled]background-color: #FF3; */
	margin-left: 20px;
	margin-bottom: 12px;
	padding-top: 6px;
	letter-spacing: 1px;
}
/* Über display block wird der weiße Hintergrundkasten für jeden Link, also a, einzeln aktiviert, die vertikale positionierung der schrift habe ich über line-height eingestellt. Alle Einstellungen können nachher im header an- oder abgewählt werden, sodass der link entsprechend dem wo man ist, auch markiert ist oder nicht. Margin bottom sorgt für den Abstand zwischen den einzelnen Listenpunkten. */
#wrapper #colleft #navi #nav1 li #nav2a li a{
	font-family: Pontano Sans, Open Sans, Sans Serif;
	background-color: #fdfdfd;
	display: block;
	font-size: 13px;
	height: 21px;
	width: 140px;
	letter-spacing: 1px;
	line-height: 22px;
	margin-bottom: 4px;
	padding-left: 5px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
/* Da der Wrapper 980 px breit ist, muss die gesamte linke Spalte (also Logo, Navi und Kontakt) mit margin left 10 px versehen werden, sodass der Inhalt wieder, wie geplant, auf 960 px breite angezeigt wird. Die Position ist fixed, da die linke Spalte nicht mitscrollen soll. Top gibt den Abstand zur oberen Kante des Wrappers an. */
#wrapper #colleft #contact{
	width: 160px;
	/* [disabled]background-color: #FF9; */
	margin-left: 10px;
	height: 31px;
}
/* Da der Kontakt heller geschrieben werden soll, muss der Link (a) entsprechend formatiert werden (color) und auch hover und active muss neu definiert werden (auch wenn die Farbe gleich bleibt), da sonst die am Anfang des Dokumentes für alle links festgesetzten Regeln gelten. Die farbe des links kann auf der impressumseite selbst anders anzeigen, indem man die im quelltext angelegt farbe der ID im header an- oder abwählt. */
#wrapper #colleft #contact a{
	font-family: Pontano Sans, Open Sans, Sans Serif;
	color: #999;
}
#wrapper #colleft #contact a:hover {
	color: #303030;
	text-decoration: none;
}
#wrapper #colleft #contact a:active {
	color: #303030;
	text-decoration: none;
}


/* Der content ist der gesamte weiße Bereich in dem die Inhalte, also die Projekte etc. gezeigt werden. Die Posotion ist relative, da die seite gescrollt wird und ihre Größe Abhängig vom Inhalt ist. Um trotzdem eine Mindestgröße (die der linken Spalte) herzustellen, verwendet man minheight. Die breite wird über width festelegt und der abstand zum linken rand des wrappers über marginleft. Marginbottom führt dazu dass unterhalb der weißen fläche noch ein rest hintergrundfarbe zu sehen ist, sodass man wirklich weiß, der Inhalt ist vorbei.
Der zindex gibt an dass der content bei schmalen browsern und horizontalem scrollbalken sich vor den colleft schiebt da dieser einen niedrigeren zindex hat. Der zindex gibt also an wie weit vorne oder hinten ein element steht. Es funktioniert aber nur wenn auch sonst eine angabe bei der positionierung angegeben ist. Hier zb position relative. 
Die untersten drei Punkite sind da um den Schatten der weißen Fläche zu erzeugen. Man muss bei allen drei Punkten immer das gleiche eintragen. Die erste und zweite Zahl definieren den Abstand und den Winkel. Der dritte Punkt sagt wie breit der Schatten werden soll und der letzte die Farbe. Dazu gibt es auch ein von Ralf bereitgestelltes tutorial. */
#wrapper #content {
	background-color: #FFF;
	width: 740px;
	min-height:550px;
	margin-left: 230px;
	margin-bottom: 30px;
	-webkit-box-shadow: 0px 0px 6px #626161;
	-moz-box-shadow: 0px 0px 6px #626161;
	box-shadow: 0px 0px 6px #626161;
	z-index: 200;
	position: relative;
}
/* Überschrift h1 ist die gesamtüberschrift der Seite im header. Fontweight muss immer extra auf normal gestellt werden da der Internetexplorer sie sont automatisch fett macht. */
#wrapper #content h1  {
	font-size: 26px;
	letter-spacing: 1px;
	padding-bottom: 10px;
	font-weight: normal;
}
/* Überschrift h2 ist für die Titel der einzelnen Texte. Die Lineheight wurde af die schriftgröße angepasst damit eine überschrift wenn sie neben einem bild floatet auch wirklich oben an der gleichen kant eist wie das bil dund nicht 2 pixel darunter. */
#wrapper #content h2 {
	font-size: 16px;
	letter-spacing: 1px;
	padding-bottom: 15px;
	font-weight: normal;
	line-height: 16px;
}
/* Überschrift h3 ist für Seite Impressum auf der noch Unterüberschriften gebraucht werden. */
#wrapper #content  h3 {
	padding-bottom: 2px;
	font-size: 13px;
	letter-spacing: 1px;
	padding-top: 8px;
	font-weight: normal;
}
/* Überschrift h4 ist für der Untertitel im header. */
#wrapper #content  h4 {
	font-size: 12px;
	font-weight: normal;
}

/* Jeder ganz normale Inhaltsabsatz bekommt ein padding bottom von 8px. */
#wrapper #content  p {
	padding-bottom: 8px;
}



#wrapper #content ul li {
	margin-bottom: 5px;
	list-style-type: none;
}
#wrapper #content table {
	padding-top: 0px;
}

/* Hier werden die einzelnen Punkte in der Tabelle formatiert. */
#wrapper #content table tr td {
	padding-bottom: 3px;
	vertical-align: top;
}

/* Diese Angabe war nur wegen des Internetexplorers nötig, de sonst auf der indexseite den bildern einen Rahmen gibt. Allgemein allen links die funktion border none zuzuwiesen hat er nicht erkannt. */
#wrapper #content a img  {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}






/* Klassenweise Formatierungen */

/* Hier die Formatierung der untereinander folgenden Inhaltsblöcke in Form von Klassen. Header und Startbild sind immer gleich. Danach Kann man zwischen Abschnitt Farbe, Vollbild und zwischen A und B wählen. Je nachdem ob ein neues Thema beginnt etc. verändert sich der Abstand. Paddingleft und right sind immer auf 40px gestellt, sodass ein Innenabstand zur weißen Fläche gewährleistet wird. Nur die Klasse Vollbild ist eine Ausnahme. Es wurde versucht über die nun folgenden Klassen möglichst viele Variationen der Anrodnung des Inhalts abzudecken. Ausnahmen müssen dann in den Quelltext geschrieben werden (über style). */


/* Der Header beinhaltet Überschrift und Unterüberschrift. Das paddingtop wurde so festegelegt, dass der Inhalt des contents auf einer Höhe mit dem Logo beginnt. Das marginbottom wiederum wurde so gewählt, dass da auf den header folgende Bild auf einer Höhe mit der Navigation ist. */
.header {
	padding-right: 40px;
	padding-left: 40px;
	padding-top: 50px;
	/* [disabled]background-color: #09F; */
	margin-bottom: 35px;
}


/* Abschnitt A ist der Standard Abschnitt, der ein paddingbottom von 60 px hat, d.h. die auf diese klasse folgende Klasse bezieht sich inhaltlich noch darauf, der Abstand ist nicht zu groß. */
.abschnittA {
	padding-right: 40px;
	padding-left: 40px;
	/* [disabled]background-color: #0CF; */
	padding-bottom: 60px;
}
/* Abschnitt B ist der Abschnitt für einen inhaltlichen Themenwechsel, der ein paddingbottom von 90 px hat, d.h. die auf diese klasse folgende Klasse bezieht sich inhaltlich nicht mehr darauf, der Abstand ist groß. */
.abschnittB {
	padding-right: 40px;
	padding-left: 40px;
	/* [disabled]background-color: #FC0; */
	padding-bottom: 90px;
}


/* Die Abschnitte Farbe sind für Inhalte die vor einem farbigem Hintergrund erscheinen sollen. Daher gibt es hier paddings in alle richtungen und ien zusätzliches margin bottom um trotzdem einen weißen Abstand zu den nächsten Klassen zu bekommen. */

/* Der Abschnitt Farbe0 wird dann genommen, wenn danach ein weiterer farbiger Abschnitt folgt, der inhaltlich zum ersten gehört. Es wird also kein weißer Abstand zwischen den beiden Farbflächen erzeugt. */
.abschnitt-farbe-0 {
	padding-top: 60px;
	padding-right: 40px;
	padding-bottom: 60px;
	padding-left: 40px;
}
/* Der Abschnitt FarbeA wird dann genommen, wenn danach eine inhaltlich zum thema gehörende Klasse ohne Farhintergrund folgt. Es wird also ein weißer Abstand von 60px erzeugt. */
.abschnitt-farbe-A {
	padding-top: 60px;
	padding-right: 40px;
	padding-bottom: 60px;
	padding-left: 40px;
	margin-bottom: 60px;
}
/* Der Abschnitt FarbeB wird dann genommen, wenn danach ein neues Thema beginnt. Es wird also ein großer weißer Abstand von 90px erzeugt. */
.abschnitt-farbe-B {
	padding-top: 60px;
	padding-right: 40px;
	padding-bottom: 60px;
	padding-left: 40px;
	margin-bottom: 90px;
}


/* Die Abschnitte Vollbild sind für Bilder in der vollen Breite des contentbereichs. Daher gibt es hier nur ein paddingbottom. Je nachdem ob danach ein neues Thema beginnt oder nicht ist der Abstand 60px (A) oder 90px (B). */
.abschnitt-vollbild-A {
	/* [disabled]background-color: #693; */
	padding-bottom: 60px;
}
.abschnitt-vollbild-B {
	/* [disabled]background-color: #0F0; */
	padding-bottom: 90px;
}


/* Die Abschnitte bildunterschriften sind für diese gedacht. Die Schrift ist etwas kleiner und heller, sodass sie sich zurücknehmen. Je nachdem ob danach ein neues Bild innerhalb der gleichen Klasse kommt (50 > 50px) oder die Unterschrift der letzte Punkt in dieser Klasse ist (0 > 0px) muss sie ein paddingbottom haben oder nicht. */
.bildunterschriften-0 {
	font-size: 11px;
	color: #666666;
	/* [disabled]background-color: #99F; */
	line-height: 15px;
	padding-top: 10px;
}
.bildunterschriften-50 {
	font-size: 11px;
	color: #666666;
	/* [disabled]background-color: #99F; */
	line-height: 15px;
	padding-top: 10px;
	margin-bottom: 50px;
}


/* Diese Klasse kann man nach dem Befehl Floaten einfügen, sodass das Floaten von zum Beispiel eiem Bild innerhalb der jeweiligen Klasse beendet wird und so das padding der Klasse nicht overfloatet wird. */
.clear {
	clear: both;
	height: 0px;
}