/* Projekt: Shelter Now Germany e.V.
	(c) Claus Coviello, www.webseiten-mit-sinn.de
	Screenlayout, Vers. 01.00.01
	letzte Aenderung: 2008-12-01


- Schriftgroessen und -farben -
	p	80%

	h1	1.5em
	h2	1.15em
	h3	1.0em


- Farbcodes -
	#27160F		normale Schrift, dunkelbraun
	#C1071A		link, rot
	#FFFFFF		Seitenhintergrund, weiss
	#F9F2E0		Seitenhintergrund innerhalb des Layouts, helle beige
	#DDC7AA		Hauptmenue, Trennlinie rechts zum Inhalts-Bereich, dunkelbraun
	#053865		Hauptmenue, Originalschriftfarbe des Layouts, dunkelblau
	#4B6073		Hauptmenue, leicht aufgehelltes Schriftfarbe entspricht mehr dem Eindruck des Originallayouts, dunkelblau
	#F3D671		Hauptmenue, Hintergrund aktiver Menuepunkt, gelb
	#DDC7AA		Hauptmenue, Hintergrund unterer Bereich, dunkelbraun
	#2D1E13		Brotkrumenpfad, aktiver Seitentitel
	#7C574C		Brotkrumenpfad, verlinkte Seitentitel


	#E4D1B8		Box, Rahmen aussen, dunkles beige
	#F3E9D2		Box, Rahmen innen, mittleres beige
	#F8F2E4		Box, Hintergrund, helles beige
	#F3E9D2		img-Box, Hintergrund in der Box, beige
	#E2CEB4		img-Box, Randfarbe, dunkles beige
	#4D2B1D		rechte Spalte, Textfarbe, dunkelbraun

	#C31323		waagerechte Trennlinie, dunkelrot

- 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:underline; */
	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;
}

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;
	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 .trennzeichen-0 {
	/*
		IE5-bugfix: Ausser dem IE 5 blenden alle die Texttrennzeichen ">" aus.
	*/	display/* */:none;
}


#wo-bin-ich .trennzeichen-1 {
	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%;
}

#wo-bin-ich .trennzeichen-2 {
	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%;
}


/* 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 li.menue {
	display:block;
	margin:0;
	padding:0;
	font-size:0.95em;
	line-height:1.2em;
	border-top:2px solid #F9F2E0;
}

#layout-left li.menue a {
	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 li a {
		width:auto;
}

#layout-left li.menue a span {
	display:block;
	padding:4px 0 1px 0.8em;
}

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

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

#layout-left li.sprache {
	display:inline;
	margin:0 0 0 10px;
	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;
}