@charset "utf-8";

/* #####################################################################################################
 * 
 * Layout der TV-Vorlage business_card für Mitarbeiter-Steckbriefe
 *  
 * Alle nachfolgenden Definitionen sind in der Grunddefinition auf das Farbschema itl-grün abgestimmt.
 * Die anderen Bereichfarben müssen an allen relevnaten Stellen immer in Abhängigkeit von der für die
 * einzlenen Bereiche definierten body-Klassen festgelegt werden.
 *
 * #################################################################################################### */



body.produkte, body.techDoku, body.allgemein, body.translation, body.wissen
{ background: url(../img/bggray.png) repeat-x top left fixed; padding: 1em 0;}
 	/* Anpassung des Body-Hintergrunds für Steckbriefe in Seitenzweigen im Farbschma Produkte
	 *
	 * Als Hintergrund wird ein dunkelgraues Verlaufsbild eingesetzt. */


.business_card_box {
	margin: 2em;
	float:left;
	width: 23.8em;
	}  /* div-Container für den eigentlichen Steckbrief
	 	*
	 	* definiert die Abstände des Steckbriefkastens zum Body. Element wird gefloatet, damit beim
		* abgeschalteten JavaScript der Hinweis dazu neben dem Kasten erscheint. der Hinweis wird durch
		* Aufrufparameter abgedeckt. */


.business_card_box .person_data {
	background-image: url(../img/h.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	padding-bottom: 0.5em;
	}  /* div-Container für die persönlichen Daten
	 	*
	 	* definiert die untere Farbige Kante des Kastens (Bild und sichtbare Höhe per pedding) */

.produkte .business_card_box .person_data {
	background-image: url(../img/hx/h_produkte.png);
	} /* Definition des hgBildes für div.person_data abhängig vom Farbschema der body-Klasse
	   *
	   * Wird eingesetzt für die Zuordnung des richtigen hgBildes für die untere Kante des gesamten Elements */

.wissen .business_card_box .person_data {
	background-image: url(../img/h_wissen.png);
	} /* Definition des hgBildes für div.person_data abhängig vom Farbschema der body-Klasse
	   *
	   * Wird eingesetzt für die Zuordnung des richtigen hgBildes für die untere Kante des gesamten Elements */

.translation .business_card_box .person_data {
	background-image: url(../img/h_translation.png);
	} /* Definition des hgBildes für div.person_data abhängig vom Farbschema der body-Klasse
	   *
	   * Wird eingesetzt für die Zuordnung des richtigen hgBildes für die untere Kante des gesamten Elements */

.techDoku .business_card_box .person_data {
	background-image: url(../img/h_techDok.png);
	} /* Definition des hgBildes für div.person_data abhängig vom Farbschema der body-Klasse
	   *
	   * Wird eingesetzt für die Zuordnung des richtigen hgBildes für die untere Kante des gesamten Elements */

.business_card_box .csc-header {
	background-image: none;
	margin: 0;
	} /* Definition des oberen grafischen Randes der Überschrift des Steckbriefs
	   *
	   * notwendige Zurücksetzung aus den Definitionen in ce.css, da hier das Standard-Content-Element
	   * TEXTPIC zum Einsatz kommt. */
	
.business_card_box .person_data .csc-header h1 {
	background-image: url(../img/hx/h1_oben.png);
	background-repeat: repeat-x;
	background-position: left top;
	font-size: 1.3em;
	padding: 0.5em 0 0.5em 0.9em;
	border-left-width: 0.5em;
	border-left-style: solid;
	border-left-color: #00D1A7;
	} /* Definition des oberen grafischen Randes der Überschrift des Steckbriefs
	   *
	   * definiert das hgBild die Rahmung und die Höhe der Überschrift. */

.produkte .business_card_box .person_data h1 {
	border-left-color: #F57851;
	} /* Formatierung des h1-Tags des Titels abhängig vom Farbschema der body-Klasse
	   *
	   * Wird eingesetzt zur Erstellung des linken farbepassenden Border */
	
.techDoku .business_card_box .person_data h1 {
	border-left-color: #00BACD;
	} /* Formatierung des h1-Tags des Titels abhängig vom Farbschema der body-Klasse
	   *
	   * Wird eingesetzt zur Erstellung des linken farbepassenden Border */
	
.wissen .business_card_box .person_data h1 {
	border-left-color: #D4AB32;
	} /* Formatierung des h1-Tags des Titels abhängig vom Farbschema der body-Klasse
	   *
	   * Wird eingesetzt zur Erstellung des linken farbepassenden Border */
	
.translation .business_card_box .person_data h1 {
	border-left-color: #7FD369;
	} /* Formatierung des h1-Tags des Titels abhängig vom Farbschema der body-Klasse
	   *
	   * Wird eingesetzt zur Erstellung des linken farbepassenden Border */

.business_card_box .person_data .csc-textpic-left {
	padding: 5em 0 0 1.8em;
	background-color:#FFF;
	margin: 0;
	} /* Klasse des div-Containers für das gesamte TEXTPIC-Element oben links
	   *
	   * definiert die Abstände des gesamten Elements in .person_data. Die weiße Farbe deckt unter den überschüssigen Anteile
	   * des hg Bildes der unteren Kante. */
	
.business_card_box .person_data .csc-textpic-imagewrap { 
	margin: 0 0 1em 0;
	} /* Klasse des div-Containers für das Bild-Bestandteils des TEXTPIC-Element oben links
	   *
	   * definiert die Abstände des Bildes im Kasten. */

.business_card_box .person_data .csc-textpic-text {
	margin: 0em 0 3em 0;
	} /* Klasse des div-Containers für das Text-Bestandteil des TEXTPIC-Element oben links
	   *
	   * definiert die Abstände des Text-Bestandteils im Kasten. */


.business_card_box .person_data p {
	font-size: 1.2em;
	padding: 0 0.7em 0.5em 0;
	} /* p-Tag des Text-Bestandteils des TEXTPIC-Element oben links
	   *
	   * definiert die Schriftgröße und die Abstände der Paragraphen Text-Bestandteils im Kasten. */
	
.hint {
	margin: 2em 2em 2em 32em;
	background-color:#FFF;
	padding-bottom: 1em;
	} /* Klasse des div-Containers, der als Hinweiskasten für die Klärung JavaScript-Abhängigkeit dieses Fensters dient
	   *
	   * definiert die Abstände des Inhalts und die Hintergrundfarbe im Kasten. Der Große magrin-left sorgt dafür, dass der
	   * Hinweis neben dem gefloateten Steckbrief gut platziert ist. */

	
.hint p {
	font-size: 1.2em;
	margin: 0.5em 0.5em 0.5em 1.5em;
	} /* p-Tag des Hinweiskasten
	   *
	   * definiert die Schriftgröße und die Abstände der Paragraphen. */