/**
 * @project	    www.shelter-now.org
 * @copyright   2006-2009, Claus Coviello, www.webseiten-mit-sinn.de
 * @version     Screenlayout
 * @version     01.00.01
 * @since       01.00.00
 * @modified    2009-08-07
 */
/*
- moegliche body-class -
	- leer -					kein Eintrag ist auch moeglich
	.projektseite				Textseiten fuer z.B. Projektbeschreibungen und Fliesstext mit einfachen Fotos und Kommentarbox
	.spenden-helfen				erste Seite im Bereich "Spenden & Helfen"
	.bankeinzug					Bankeinzugsformular
	.bankeinzug kontrolle		Bankeinzugsformular, Angaben kontrollieren
	.auswahlseite				breite Textbloecke mit Bild und Anreisser als link fuer Folgeseiten (z.B. Startseite)
	.artikelauswahl				Kombination Vorschaubilder links und Textblock mit Rahmen rechts (Artikel- und Mengenauswahl im Spendentool)
	.spende-abgeschickt			einfach gerahmte Seite mit farbigen Hintergrund fuer Bestaetigungsnachricht
	.ecards						Kombination Vorschaubilder links und Textblock mit Rahmen rechts (eCard-System)
	.pressefotos				Kombination Vorschaubilder links und Textblock mit Rahmen rechts (Pressefotos)
	.newsletter					Kombination Text links und gerahmter Textblock rechts

*/


/* Alle tags auf Null zuruecksetzen */
html, body, div, em, a, span, ul, ol, li, img, form, fieldset, label, table, th, tr, td {
	margin:0;
	padding:0;
	color:black;
	line-height:1.25em;
	font-family:Arial, Helvetica, sans-serif;
	font-style:normal;
	border:0;
}

.links {
	float:left;
}

.rechts {
	float:right;
}

a {
	color:#27160F;
	text-decoration:none;
}

a.unterstrichen {
	text-decoration:underline;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
p a:hover {
	text-decoration:underline;
}

h1 {
	margin:0 0 0.6em 0;
	padding:0;
	color:#4D2B1D;
	font-size:1.5em;
	line-height:1.4em;
	font-weight:normal;
}

h2 {
	margin:1.6em 20px 0.7em 0px;
	padding:0;
	color:#4D2B1D;
	font-size:1.15em;
	line-height:1.4em;
	font-weight:bold;
}

h2 .normal {
	font-weight:normal;
	font-size:0.8em;
}

h3 {
	margin:1.6em 20px 0.7em 0px;
	padding:0;
	color:#4D2B1D;
	font-size:1em;
	line-height:1.4em;
	font-weight:bold;
}

h4 {
	margin:0.8em 20px 0.1em 0;
	padding:0;
	color:#4D2B1D;
	font-size:1em;
	line-height:1.3em;
	font-weight:bold;
}

p {
	margin:0 20px 0.8em 2px;
	padding:0;
}

strong {
	font-weight:bold;
}

ul {
	margin:1.3em 0 0.8em 10px;
	padding:0;
	list-style-type:none;
}

li {
	/*
		IE-bugfix
	*/	position:relative;
	margin:0 0 0.5em;
	padding:0 0 0 17px;
}

.skip, .print-only {
	display:none;
}

.anmerkung-programmierer {
	color:red;
	font-weight:normal;
	font-style:italic;
	font-size:0.9em;
}


/* Aufbau 3-spaltiges Grundlayout */
html, body {
	height: 100%;
}

body {
	color:#27160F;
	/*
		IE-Fehler: Die Schriftgroesse muss in Prozent angegeben werden.
		Mit em kann es im IE (5.0, 5.5, 6.0, 7beta) Probleme geben.
		Bei Aenderung der Schriftgroesse im Browser verschiebt sich der
		Text in der linken Spalte des 3-spaltigen Layouts.
	*/
	font-size:80%;
	background-color:white;
	/*
		bugfix IE 5.x
	*/	text-align:center;
}

#background {
	width:940px;
	height:100%;
	margin:0 auto;
	overflow:hidden;
	background-color: #F9F2E0;
	/*
		bugfix NN 7: Wenn das Fenster schmaler als das Layout ist,
		verschwindet die linke Spalte.
	*/	border-left:1px solid #F9F2E0;
	/*
		IE-bugfix: Dadurch wird durchgaengig die senkrechte Scrollleiste eingeblendet.
	*/	padding-bottom: 1px;
}

#background .subcontainer {
	position:relative;
	width:auto;
	height:100%;
	border-left:144px solid #DDC7AA;
}

#wrapper {
	position: absolute;
	top:0;
	left:0;
	width:100%;
}

#wrapper .subcontainer {
	width:940px;
	margin:0 auto;
	background:#F9F2E0 url("../_img/hauptmenue-hintergrund.gif") no-repeat 0 0;
	/*
		bugfix NN 7: Wenn das Fenster schmaler als das Layout ist,
		verschwindet die linke Spalte.
	*/	border-left:1px solid #F9F2E0;
	/*
		bugfix IE 5.x
	*/	text-align:left;
}

#header {
	position:relative;
	height:185px;
	background-repeat:no-repeat;
	background-position:0 0;
}

.outer-container {
	width:auto;
	padding-left:196px;
	background:url("../_img/hauptmenue-hintergrund-lauf.gif") repeat-y 0 0;
}

#inner-container {
	width:100%;
}

#layout-left {
	z-index:10;
	position:relative;
	float:left;
	width:196px;
	margin-left:-196px;
	margin-right:1px;
	overflow:hidden;
}

#layout-center {
	z-index: 12;
	position: relative;
	float: left;
	width: 100%;
	margin: 0 -8px 0 -2px;
	padding:21px 0 0;
	overflow: hidden;
}

.spaltenabschluss {
	display:block;
	height:1px;
	font:1px /1 sans-serif;
	clear: both;
}

.outer-container > #inner-container {
	/*
		Die Farbe dieser Linie ist an das Layout anzupassen.
		"transparent" funktioniert nicht im IE 7beta.
	*/
	border-bottom: 1px solid #F9F2E0;
}


/**
 * Aufbau Seitenkopf und Motivzuordnung
 */
#header #logo {
	position:absolute;
	top:98px;
	right:20px;
}

#header #slogan {
	position:absolute;
	top:10px;
	left:327px;
	display:block;
/*	width:341px; */ width:365px;
	height:105px;
	background-repeat:no-repeat;
	background-position:0 0;
}


	/* Brotkrumenpfad */
#wo-bin-ich {
	position:relative;
	top:166px;
	left:155px;
	height:22px;
	width:800px;
	color:#2D1E13;
	font-size:0.89em;
	line-height:1.15em;
	background:url("../_img/hintergrund-brotkrumenpfad.gif") no-repeat center left;
}

#wo-bin-ich p {
	padding:10px 0 0 3px;
	position:relative;
	top:-0.5em;
	/*
		IE6-bugfix: Die Deklaration "margin:0" am Anfang des stylesheets genuegt dem IE nicht.
	*/	margin:0;
}

#wo-bin-ich a {
	text-decoration:underline;
	color:#7C574C;
}

#wo-bin-ich .separator-0 {
	/*
		IE5-bugfix: Ausser dem IE 5 blenden alle die Texttrennzeichen ">" aus.
	*/	display/* */:none;
}

#wo-bin-ich .separator-1 {
	margin-right:4px;
	padding:0 8px 0 5px;
	/*
		IE5-bugfix: Hintergrund wird nicht vom IE 5 angezeigt.
	*/	background/* */:url("../_img/icon-brotkrumenpfad-2.gif") no-repeat 100% 50%;
}

#wo-bin-ich .separator-2 {
	padding:0 8px 0 5px;
	/*
		IE5-bugfix: Hintergrund wird nicht vom IE 5 angezeigt.
	*/	background/* */:url("../_img/icon-brotkrumenpfad-1.gif") no-repeat 100% 50%;
}


/* Aufbau Hauptmenue */
#layout-left ul {
	display:block;
	height:405px;
	margin:0;
	padding:0 4px 0 0;
	list-style-type:none;
	border-bottom:3px solid #F9F2E0;
	background:url("../_img/hauptmenue-hintergrund.gif") no-repeat 0 0;
	/*
		bugfix
		Wert fuer IE 5.x
	*/	width:146px;
		voice-family: "\"}\"";
		voice-family: inherit;
	/*
		Wert fuer alle anderen Browser + bugfix
	*/	width:142px;
		} .empty {
}

#layout-left #main-navi li {
	display:block;
	margin:0;
	padding:0;
	font-size:0.95em;
	line-height:1.2em;
	border-top:2px solid #F9F2E0;
}

#layout-left #main-navi li a,
#layout-left #main-navi li strong {
	display:block;
	width:100%;
	padding:1px 0;
	text-decoration:none;
	color:#4B6073;
	font-weight:bold;
	background-color:#F9F2E0; }
	/*
		Wozu dieser Eintrag notwendig ist, liess sich noch nicht klaeren.
	*/	hmtl>body #layout-left #main-navi li a {
		width:auto;
}

#layout-left #main-navi li a span,
#layout-left #main-navi li strong span {
	display:block;
	padding:4px 0 1px 0.8em;
}

#layout-left #main-navi li a.aktiv,
#layout-left #main-navi li a:hover,
#layout-left #main-navi li strong {
	background-color:#F3D671;
}

#layout-left li.abstandhalter {
	margin-bottom:30px;
}

#layout-left #select-language {
    position:absolute;
	top:19em;
	left:10px;
	margin:0;
	padding:0;
}

#layout-left #select-language span {
    display:inline;
	margin:0 7px 0 2px;
	padding:0;
}



#impressum {
	position:absolute;
	top:365px;
	left:0.8em;
}

#impressum a {
	font-size:0.85em;
	text-decoration:none;
	color:#4B6073;
	font-weight:bold;
}

	/* Spenden-button mit rollover-Effekt */
.spenden-button {
	position:absolute;
	top:282px;
	left:96px;
	width:94px;
	height:93px;
	background:url("../_img/spenden-button_1.gif") no-repeat 0 0;
}

.spenden-button a {
	display:block;
	width:94px;
	height:93px;
}

.spenden-button img {
	width:100%;
	height:100%;
	border:0;
}

.spenden-button a:hover img {
	visibility:hidden;
}

* html a:hover {
	/*
		IE-bugfix
	*/	visibility:visible;
}


/* Standardseitenrand */
#seitenraender {
	margin-right:20px;
}


/* mittlere Spalte - besondere Ergaenzungen zu Standardformatierungen */
a .link-einfach {
	color:#C1071A;
	text-decoration:none;
	font-weight:bold;
}

a:hover .link-einfach {
	text-decoration:underline;
	/*
		IE6-bugfix
	*/	color:#C1071A;
}

a .link-mehr {
	padding-right:0.7em;
	color:#C1071A;
	text-decoration:none;
	font-weight:bold;
/*	font-size:0.9em; */
	/*
		IE5-bugfix: Hintergrund wird nicht vom IE 5 angezeigt.
	*/	background/* */:url("../_img/icon-mehr.gif") no-repeat 100% 50%;
	/*
		IE6-bugfix, damit das Hintergrundbild angezeigt wird.
	*/	border-left:1px solid #F8F2E4;
}

a:hover .link-mehr {
	text-decoration:underline;
	/*
		IE6-bugfix
	*/	color:#C1071A;
}

h1.rahmen,
h2.rahmen {
	/*
		IE-bugfix
	*/	width:100%;
	position:relative;
	background:#ECDEC8 url("../_img/rahmen/h1-rahmen-oben-links.gif") no-repeat left top;
}

h1.rahmen .text,
h2.rahmen .text {
	display:block;
	padding:5px 10px 5px 7px;
	background:url("../_img/rahmen/h1-rahmen-oben-rechts.gif") no-repeat right top;
}

h1.rahmen .rahmen-unten,
h2.rahmen .rahmen-unten {
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:10px;
	background:url("../_img/rahmen/h1-rahmen-unten-links.gif") no-repeat left bottom;
}

h1.rahmen .rahmen-unten span,
h2.rahmen .rahmen-unten span {
	display:block;
	float:right;
	width:10px;
	height:10px;
	background:url("../_img/rahmen/h1-rahmen-unten-rechts.gif") no-repeat right bottom;
}

#layout-center li {
	background:url("../_img/listenzeichen.gif") no-repeat 1px 0.3em;
}

.trennlinie {
	display:block;
	height:2px;
	margin:25px 11px;
	padding:0;
	background:url("../_img/trennlinie-waagerecht-rot.gif") repeat-x center left;
}


/*
 * Allgemeine Formatierungen fuer Formulare
 * */
form .buttons {
	margin:0 auto;
	text-align:center;
	/* 
		ACHTUNG: Zu diesem Wert gibt es eine IE-bugfix in 
		einer ausgelagerten CSS-Datei.
	*/	width:22em;
}

form .buttons input.links,
form .buttons input.rechts {
	width:10em;
	margin:0;
	padding:0;
}

.pflichtfeld {
	color:red;
}

.fehler {
	color:red;
}


/**
 * einfacher Rand um Seiteninhalt und farbiger Hintergrund
 * z.B. bei Kontrolle eingegebener Daten im Spendenformular
 */
.rahmen-seite {
	margin:0;
	padding:25px;
	border:1px solid #E4D1B8;
	background-color:#F3E9D2;
}