@charset "utf-8";

body {
	color: #000000;
	font: 85%/1.5 Verdana, Geneva, sans-serif;
/*	line-height: 1.6em; */
	padding: 0px;
	margin: 0px;
}

/* ~~ Element-/Tag-Selektoren ~~ */

ul, ol, dl {
	/* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffuellung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken koennen Sie die gewuenschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass die hier eingegebenen Werte hierarchisch auf die .nav-Liste angewendet werden, sofern Sie keinen spezifischeren Selektor festlegen. */
	padding: 0px;
	margin: 0px;
}

#webfont {
	color: #003399;
	font-family: TitilliumBdBold, sans-serif;
	font-size: 30px;
	font-weight: bold;
	line-height: 1.10;
/*	text-shadow: 1px 1px 1px #38546a, 2px 2px 1px #38546a, 3px 3px 1px #38546a, 4px 4px 1px #f4a200, 5px 5px 1px #f4a200, 6px 6px 1px #f4a200;
	text-shadow: 1px 1px 1px #38546a, 2px 2px 1px #f4a200; */
	text-shadow: 2px 2px 1px #38546a, 3px 3px 1px #f4a200;
	padding-top: 45px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 0px;
}
h1 {
	color: #003399;
	text-shadow: 1px 1px 1px #000000;
	line-height: 1.25;
	padding-top: 45px;
	/*Durch Hinzufuegen der Auffuellung zu den Seiten der Elemente innerhalb der div-Tags anstelle der div-Tags selbst entfallen jegliche Box-Modell-Berechnungen. Alternativ kann auch ein verschachteltes div-Tag mit seitlicher Auffuellung verwendet werden. */
	padding-left: 10px;
	padding-right: 10px;
	/* Durch Verschieben des oberen Rands wird das Problem behoben, dass Raender aus dem zugehoerigen div-Tag geraten koennen. Der uebrig gebliebene untere Rand haelt ihn getrennt von allen folgenden Elementen. */
	margin-top: 0px;
}
.h1 {
	padding-left: 15px;
}
h2, h3, h4, h5, h6, p {
	/* Durch Hinzufuegen der Auffuellung zu den Seiten der Elemente innerhalb der div-Tags anstelle der div-Tags selbst entfallen jegliche Box-Modell-Berechnungen. Alternativ kann auch ein verschachteltes div-Tag mit seitlicher Auffuellung verwendet werden. */
	padding-left: 15px;
	padding-right: 15px;
	/* Durch Verschieben des oberen Rands wird das Problem behoben, dass Raender aus dem zugehoerigen div-Tag geraten koennen. Der uebrig gebliebene untere Rand haelt ihn getrennt von allen folgenden Elementen. */
	margin-top: 0px;
}
.h2 {
	padding-left: 30px;
}
.h3 {
	padding-left: 45px;
}

/* Dieser Selektor rueckt die Definitionsliste nach rechts ein. */
dl {
	padding-left: 15px;
}
/* Dieser Selektor weist dem definierten Term der Definitionsliste ein abweichendes Font-Attribut zu. */
dt {
	font-weight: bold;
}
/* Dieser Selektor weist dem Ausdruck des definierten Terms (dt) der Definitionsliste zusaetzlichen Abstand nach unten zu. */
dd {
	padding-bottom: 25px;
}
/* Dieser Selektor skaliert die Bilder fuer die responsible Darstellung. */
.responsive {
	max-width: 100%;
/*	height: auto; */
	max-height: 100%;
}
.responsive img {
	max-width: 100%;
/*	height: auto; */
	max-height: 100%;
}
/* Dieser Selektor entfernt den standardmaeszigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */
a img {
	border: none;
}

/* ~~ Die Reihenfolge der Stildefinitionen fuer die Hyperlinks der Site, einschlieszlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
/* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */
a:link {
	text-decoration: underline;
}
/* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */
a:visited {
	text-decoration: underline;
}
/* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
a:hover, a:active, a:focus {
	text-decoration: none;
}

#more_1st, #more_2nd {
	color: #003399;
	font-weight: bold;
}
.bg_p_40 {
	height: 40px;
	background-color: #f5f5f5;
	box-shadow: 3px 6px 9px #808080;
}
.bottom_p_15 {
	padding-bottom: 15px;
}
.bottom_p_20 {
	padding-bottom: 20px;
}
.bottom_p_30 {
	padding-bottom: 30px;
}
.bottom_p_40 {
	padding-bottom: 40px;
}
.bottom_p_45 {
	padding-bottom: 45px;
}
.bottom_p_60 {
	padding-bottom: 60px;
}
.bottom_p_100 {
	padding-bottom: 100px;
}
.bottom_p_120 {
	padding-bottom: 120px;
}
.bottom_p_133 {
	padding-bottom: 133px;
}
.bottom_p_145 {
	padding-bottom: 145px;
}
.bottom_p_150 {
	padding-bottom: 150px;
}
.bottom_p_155 {
	padding-bottom: 155px;
}
.bottom_p_425 {
	padding-bottom: 425px;
}
.bottom_p_470 {
	padding-bottom: 470px;
}
.bottom_p_300 {
	padding-bottom: 300px;
}
.bottom_p_500 {
	padding-bottom: 500px;
}
.bottom_p_755 {
	padding-bottom: 755px;
}
.bottom_p_850 {
	padding-bottom: 850px;
}
.top_h2_45 {
	padding-top: 45px;
}
.top_p_33 {
	padding-top: 33px;
}
.top_p_40 {
	padding-top: 40px;
}
.top_p_45 {
	padding-top: 45px;
}
.top_p_60 {
	padding-top: 60px;
}
.top_p_105 {
	padding-top: 105px;
}
.top_p_236 {
	padding-top: 236px;
}

/* ~~ Dieser Container mit fester Breite umschlieszt alle anderen div-Tags. ~~ */
.container {
	width: 960px;
	/* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. */
	margin: 0 auto;
}

/* ~~ Fuer die Kopfzeile wird keine Breite angegeben. Sie erstreckt sich ueber die gesamte Breite des Layouts. Sie enthaelt einen Bild-Platzhalter, der durch Ihr eigenes, mit Hyperlink versehenes Logo ersetzt werden sollte. ~~ */
.header {
	height: 120px;
	padding-top: 0px;
	padding-left: 0px;
	position: absolute;
	z-index: 5;
}

#navigation {
	width: 960px;
	height: 34px;
	padding-top: 125px;
	padding-left: 0px;
	position: absolute;
	z-index: 20;
}

/* ~~ Dies sind die Spalten fuer das Layout. ~~

1) Eine Auffuellung wird nur oben und/oder unten in den div-Tags positioniert. Die Elemente innerhalb dieser div-Tags verfuegen ueber eine seitliche Auffuellung. Dadurch muessen Sie keine Box-Modell-Berechnungen durchfuehren. Zu beachten: Wenn Sie dem div-Tag eine seitliche Auffuellung oder einen Rahmen hinzufuegen, werden diese zu der festgelegten Breite addiert und ergeben die *gesamte* Breite. Sie koennen auch die Auffuellung fuer das Element im div-Tag entfernen und ein zweites div-Tag ohne Breite und mit der gewuenschten Auffuellung im ersten div-Tag einfuegen.

2) Fuer die Spalten wurde kein Rand angegeben, da es sich um flieszende Spalten handelt. Wenn Sie unbedingt einen Rand hinzufuegen moechten, platzieren Sie ihn nicht auf der Seite in Flussrichtung (z. B. ein rechter Rand in einem div-Tag, das so festgelegt ist, dass das Element nach rechts flieszt). In vielen Faellen kann stattdessen eine Auffuellung verwendet werden. Bei div-Tags, bei denen diese Regel gebrochen werden muss, sollten Sie der Regel des div-Tags eine display:inline-Deklaration hinzufuegen, um das Problem zu umgehen, dass in einigen Versionen von Internet Explorer der Rand doppelt angezeigt wird.

3) Da Klassen in einem Dokument mehrmals verwendet werden koennen (und zudem auf ein Element mehrere Klassen angewendet werden koennen), wurden den Spalten Klassennamen statt IDs zugewiesen. Beispielsweise koennen zwei div-Tags fuer eine Seitenleiste bei Bedarf gestapelt werden. Diese div-Tags koennen problemlos in IDs geaendert werden, solange Sie sie nur einmal pro Dokument verwenden.

4) Wenn Sie die Navigation auf der rechten statt auf der linken Seite platzieren moechten, lassen Sie diese Spalten einfach in die andere Richtung flieszen (alle nach rechts anstatt alle nach links). Die Spalten werden dann in umgekehrter Reihenfolge dargestellt. Die div-Tags in der HTML-Quelle muessen nicht verschoben werden.

.spalte_1 {
	float: left;
	width: 240px;
	height: 768px;
	padding-top: 125px;
	padding-bottom: 10px;
	background-color: #ffefbf;
}
.spalte_2 {
	float: left;
	width: 240px;
	height: 768px;
	padding: 10px 0px;
	padding-top: 125px;
}
.spalte_3 {
	float: left;
	width: 240px;
	height: 768px;
	padding-top: 125px;
	padding-bottom: 10px;
	background-color: #ffefbf;
}
.spalte_4 {
	float: right;
	width: 240px;
	height: 768px;
	padding: 10px 0px;
	padding-top: 125px;
}
*/

/* ~~ Dieser gruppierte Selektor gibt die Listen im .spalte_x-Bereich an. ~~ */
.spalte_x ul, .spalte_x ol {
	/* Diese Auffuellung setzt die rechte Auffuellung in der obigen Regel fuer Ueberschriften und Absaetze fort. Die Auffuellung wurde unten fuer den Abstand zwischen anderen Elementen in den Listen und links fuer den Einzug platziert. Sie koennen die Werte nach Bedarf aendern. */
	padding: 0 15px 15px 40px;
}

#disc {
	list-style-type: disc;
}

.comments {
	font: 80%/1.5 Verdana, Geneva, sans-serif;
}
.signatur {
	color: #333333;
	font: 75%/1.5 Verdana, Geneva, sans-serif;
	font-style: italic;
	text-align: right;
}

/* ~~ Stile fuer die Fuszzeile ~~ */
.footer {
	height: 34px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
/*	border-top-style: solid;
	border-top-color: #ffffff;
	border-top: 4px;
	border-bottom-style: solid;
	border-bottom-color: #d7d7d7;
	border-bottom: 5px; */
	/* Hiermit erhaelt IE6 die Eigenschaft hasLayout, damit die clear-Anweisung korrekt ausgefuehrt wird. */
	position: relative;
	/* Diese clear-Eigenschaft bewirkt, dass .container das Ende der flieszenden Spalten erkennt und ihren Inhalt aufnimmt. */
	clear: both;
}
#copyright {
	float: right;
	font-size: x-small;
	font-weight: bold;
	margin-top: 12px;
}
#copyright img {
	vertical-align: middle;
}
/* ~~ Verschiedene float/clear-Klassen ~~ */
/* Mit dieser Klasse koennen Sie ein Element auf der Seite nach rechts flieszen lassen. Das flieszende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
#social {
	width: 164px;
	height: 34px;
	margin-top: 0px;
	margin-left: 5px;
	position: absolute;
	z-index: 10;
}
#logo_twitter {
	width: 30px;
	height: 30px;
	margin-top: 2px;
	margin-left: 0px;
	margin-bottom: 0px;
	position: absolute;
}
#logo_linkedin {
	width: 39px;
	height: 30px;
	margin-top: 2px;
	margin-left: 35px;
	margin-bottom: 0px;
	position: absolute;
}
#logo_xing {
	width: 85px;
	height: 23px;
	margin-top: 9px;
	margin-left: 79px;
	margin-bottom: 0px;
	position: absolute;
}
.follower {
	font: 90%/1.5 Verdana, Geneva, sans-serif;
	width: 30px;
	height: 4px;
	margin-top: 32px;
	margin-left: 90px;
	margin-bottom: 0px;
	position: absolute;
}

.fltrt {
	float: right;
	margin-left: 8px;
}
/* Mit dieser Klasse koennen Sie ein Element auf der Seite nach links flieszen lassen. Das flieszende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
.fltlft {
	float: left;
	margin-right: 8px;
}
/* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten flieszenden div-Tag (im .container) platziert werden, wenn .footer entfernt oder aus dem .container herausgenommen wird. */
.clearfloat {
	clear: both;
	height: 0px;
	font-size: 1px;
	line-height: 0px;
}
/* Mit clearfix wird das Umflieszen der Elemente, fuer welche float gesetzt wurde, wieder "aufgeloest" und die folgenden HTML-Elemente verhalten sich damit im normalen Elementfluss. */
/* Die Klasse clearfix wird im Gegensatz zum clearfloat-div nicht ans Ende, sondern im oeffnendem Tag des gefloateten Elements angegeben. Der durch die clearfix-CSS-Regel generierte Punkt wird nun hinter dem gefloateten Element erzeugt und loest vergleichbar zum clearfloat-div das Flieszverhalten hinter dem gefloateten Element auf. */
.clearfix:after {
	content: ".";
	clear: both;
	height: 0px;
	display: block;
	visibility: hidden;
}
/* Unterstuetzung fuer HTML 5 - Legt fuer die neuen HTML 5-Tags die Eigenschaft "display: block" fest, damit die Tags in den Browsern korrekt dargestellt werden. */
header, section, footer, aside, article, figure {
	display: block;
}