/*********************************************************************/
/*                                                                   */
/*          Stylesheet für Text-Bild-Inhaltselemente (.ti)            */
/*                       Autor: Andrea Ertel                          */
/*        copyright 2008 Sunbeam GmbH www.sunbeam-berlin.de          */
/*                                                                   */
/*********************************************************************/


/* Bilder werden in ul.imgs platziert - Aufzählungspunkte werden ausgeschaltet */
#content #inhalt .ti ul.img	{
	list-style-type: none;
	/* Überschreibt die Definitionen für #content #inhalt ul.img aus dem vhb.css */
	margin: 0;
	max-width: none;
}


/* Container um das gesamte Bild-Text-Element */
.ti	{
	/*padding: 0.5em;*/
	margin-bottom: 0.5em;
}

/* Bildunterschrift - ACHTUNG: Wert der Bildbreite entweder als Marker im Template hardcodieren */
/*(style für die breite der Bildunterschrift), wenn er variabel sein soll oder im CSS fix setzen */
/* Möglichkeit recherchieren Variable Werte ins CSS zuzuweisen */
.img-caption	{
	display: block;
}

/** Bilder rechts im Text **/
/* Bild-Klasse für rechtsausgerichtetes Bild */
#content #inhalt .img-right ul.img{
	float: right;
	margin: 0 0 0 0.5em;
}
/* Text-Klasse für rechtsausgerichtetes Bild */
.img-right div	{
	/* margin-right: 210px;  Bildbreite + 10 px Abstand */
}


/* Bild-Klasse für rechtsausgerichtetes Bild im Text */
#content #inhalt .img-right-in-text ul.img	{
	float: right;
	margin: 0 0 0em 1.5em; /* 27.02.08 ae + sa */
}


/* Bild-Klasse für linksausgerichtetes Bild im Text */
#content #inhalt .img-left-in-text ul.img	{
	float: left;
	margin: 0 0.5em 0 0;
}


/** Bilder links im Text **/
/* Bild-Klasse für linksausgerichtetes Bild */
#content #inhalt .img-left ul.img	{
	float: left;
	margin: 0 0.5em 0 0;
}
/* Text-Klasse für rechtsausgerichtetes Bild */
.img-left div	{
	/* margin-left: 210px;  Bildbreite + 10 px Abstand */ 
}

/* Damit das DIV um die ul.img der Bilder nicht eingerückt wird */
.img-right div.img-col	{
	margin-right: 0;
}

/* Damit das DIV um die ul.img der Bilder nicht eingerückt wird */
.img-left div.img-col	{
	margin-left: 0;
}

/* mehrere Bilder in einer Reihe nebeneinander */
#content #inhalt .img-row ul.img	{
	
}
/* einzelne Bilder floaten nebeneinander */
.ti li	{

}

/* einzelne Bilder floaten nebeneinander... */
.img-row li,
.img-above-left li,
.img-above-center li,
.img-above-right li,
.img-below-left li,
.img-below-center li,
.img-below-right li	{
	display: inline;
}

/* ... Listenpunkte im Text jedoch nicht */
.img-row .text li,
.img-above-left .text li,
.img-above-center .text li,
.img-above-right .text li,
.img-below-left .text li,
.img-below-center .text li,
.img-below-right .text li	{
	display: list-item;
}

.img-col li	{
	display: block;
}
/* Text-Klasse für Bilderreihe über Text */
.img-row div	{
	clear: left;
}

/* Bild mittig über Text */

#content #inhalt .img-above-center ul.img,
#content #inhalt .img-below-center ul.img	{
	text-align: center;
	max-width: 67em;
}

.img-above-center .text	{
	margin-top: 10px;
	max-width: 67em;
}
/* mehrere Bilder mittig über Text */
/* Container um die ul.img mit den Bildern */
.img-center .img-row	 {
	text-align: center;
}

#content #inhalt .img-center ul.img	 {
	display: inline; /* ul.img geht nicht über die gesamte Breite, sondern nur um die Bilder (Problem im Firefox) */
}

.img-center	li {
	display: inline; /* LI geht nicht über die gesamte Breite, sondern nur um ein Bild (Problem im Firefox) */
	height: 1%; /* sorgt dafür das Bilder im IE6 lückenlos nebeneinander angezeigt werden */
}

.img-row .img-caption	{

}

/* Bild rechtsausgerichtet über Text */
#content #inhalt .img-above-right ul.img,
#content #inhalt .img-below-right ul.img	{
	text-align: right;	
}

/* Bild linkssausgerichtet über Text ist die defaul.imgt-Ausgabe und benötigt keine Klassen */


/* Clearer */
/* wenn clearer aktiv floaten Texte (aus verschiedenen Inhaltselementen) nicht neben mehreren untereinander angeordenten Bildern, eine Weiche wäre optimal für ein zusätzliche Klasse des div.text */
/*.text:after	{
	content: ".";
	display: block;
	height: 0;
	line-height: 0;
	clear: both;
	visibility: hidden;
}
*/
/* Container um das gesamte Bild-Text-Element */
/* wird für den Clearer im IE6 benötigt 
.ti	{
	display: inline-block; 
}
*/


#inhalt .text h4	{
	margin: 0;
}