/* 220_schatten_und_einrueckung_der_elemente.css */



/**************************************************************************
*
*   Schatten
*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*
*
***************************************************************************/

/* als Einschub ueber der Seite */
#schatten-oben  {
		/* Hintergrundfarbe auf weiss weil gleichzeitig ein weisser Balken über dem Banner erzeugt werden soll */
		/* background-color: #FFF; */
		background-color: #FFFF42;

		background-image: url(schatten/schatten_kopf.gif);
		background-repeat: no-repeat;
		background-position: right top;

}




/* als content wrapper von #seite mit padding right, wie bei den CSS icons */
#schatten-rechts {

		background-image: url(schatten/schatten_inhalt.gif);
		background-repeat: repeat-y;
		background-position: right center;

}


/* als Einschub unter der Seite */
#schatten-unten {
		/* Hintergrundfarbe auf gelb setzen, sonst erscheint ein weisser Balken unterhalb des Schattens. */
		/* gelb krbw */
		/* background: #FAF8CF; */
		background-image: url(schatten/schatten_fuss.gif);
		background-repeat: repeat-x;
		background-position: right top;

}






/**************************************************************************
*
*   Einrückung der Elemente
*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*	 #kopf #logo1/2
*
***************************************************************************/

/* kopf - Rechte Spalte - Einrückung bündig mit dem Rand */
#kopf  {
	margin-right: 23px;
}


/**************************************************************************
*
*   Einrückung der Elemente
*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*	 #horizontal-line1
*
***************************************************************************/
/* einschub und horizontal lines - Einrückung bündig mit dem Rand */
#horizontal-line1 {
	margin-right: 23px;

}

/**************************************************************************
*
*   Einrückung der Elemente
*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*	 #hauptteil
*
***************************************************************************/

/* Hauptteil - Linke Spalte - Abstand von oben */
#hauptteil .spalte1 {
	margin-top: 5px;
}
/* Hauptteil - Linke Spalte - Abstand .spalte1 .spalte2 					*/
/* Um die Inhalte des dreispalters immer übereinander zu halten,  	*/
/* sollten im .spalte2 keine horizontalen Abstände auf der linken		*/
/* Seite gesetzt werden.															*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~	*/
/* Deshalb wird dem Haupttext ein li. und re. Rand verschafft, in		*/
/* dem in einem contenwrapper innerhalb von .spalte1 und .spalte3 	*/
/* die width auf 90% gesetzt wird. 												*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~	*/
/* Die width kann nicht auf .spalte1 und .spalte3 angewendet werden	*/
/* weil hier die width schon für das fluide Layout verwendet wird.	*/
#hauptteil .spalte1 .contentwrapper,
#hauptteil .spalte3 .contentwrapper {
	width:90%;
}

/* Hauptteil - Mittlere Spalte - Abstand .spalte2 .spalte3 				*/
#hauptteil .spalte2 .contentwrapper {
	margin-right: 7%;
}


/* Hauptteil - Rechte Spalte - Abstand von oben */
#hauptteil .spalte3 {
	margin-top: 13px;
}


/* Hauptteil - Rechte Spalte - Rechtsbündigkeit */
/* Für alle contentelemente in dieser Spalte    */
/* E.g.: #box-aktuelles									*/
/* E.g.: .tx-dvssimplenews-pi1						*/
#hauptteil .spalte3 .contentelement {
	margin-right: 10px;
}




/**************************************************************************
*
*   Einrückung der Elemente
*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*	 #fuss
*
***************************************************************************/

/* Rechte Spalte - Fuss - Einrückung bündig mit dem Rand */
/* Hier keine margin-right verwenden!                    */
/* Problem: Der Footer hat das gleiche elastische Layout */
/*          wie das Layout im #hauptteil                 */
/*          und das arbeitet schon mit margins.          */
/* Lösung:  Wie schon im #hauptteil verwende ich ein     */
/*          Wrapper-Element, dem eine Margin zugewiesen  */
/*          werden kann. (Im Kontext #fuss auch noch     */
/*          eine border-top)                             */
#fuss .spalte1-wrapper,
#fuss .spalte2-wrapper,
#fuss .spalte3-wrapper {
	padding-top: 1em;
}

/* Linke Spalte - Fuss - Einrückung von links  */
#fuss .spalte1-wrapper {
	/* margin-left: 10px; */
}



/* Rechte Spalte - Fuss - Dotted line über spalte2+3 im footer */
#fuss .spalte3-wrapper {
	margin-right: 33px;
}