/**
 * @project	   www.wings-of-hope.de
 * @copyright  2007, Claus Coviello, www.webseiten-mit-sinn.de
 * @internal   Screenlayout
 * @version    00.02.00
 * @modified   2008-01-28
 */

/*
 * Alle tags auf Null zuruecksetzen und allgemeine
 * Formatierung (projektunabhaengig)
 * */
html, body, div, ul, ol, li, img, form, fieldset, label, table, th, tr, td {
	margin:0;
	padding:0;
	border:0;
}

.skip, p.skip, .print-only {
	position:absolute;
	left:-1000px;
	top:-2000px;
	width:0;
	height:0;
	overflow:hidden;
	display:inline;
}

.spaltenabschluss {
	display: block;
	height: 1px;
	font: 1px/1 sans-serif;
	clear: both;
	/*
		:TODO: Bugfix fuer welchen Browser?
		:TODO: Code ist in Projekttemplate zu uebertragen
	*/	/* color:transparent; */
}

* html a:hover,
* html a:focus {
	/*
		bugfix: IE 5-6
	*/	visibility: visible;
}

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

a {
	color:black;
	text-decoration:underline;
}

.ie-bugfix {
	font-size:1%;
	color:white;
}

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

body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	color: #333;
	font:normal 80%/1.37em Arial, Helvetica, sans-serif;
	background-color: #F4E9D7; /* cremefarben */
	/*
		bugfix IE 5 und 5.5
	*/	text-align: center;
}

#background {
	width: 960px;
	height: 100%;
	margin: 0 auto;
	padding-bottom: 1px;
	overflow: hidden;
	/*
		bugfix NN 7: Wenn das Fenster schmaler als das Layout ist,
		verschwindet die linke Spalte.
	*/	border-left: 1px solid #F4E9D7; /* cremefarben */
}

#background div.outer-container {
	height: 100%;
	border-left: 0px;
	background-color:white;
	background-repeat: repeat-y;
	background-position: 8px 0px;
}

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

#wrapper-sub {
	width: 960px;
	margin: 0px auto;
	/*
		bugfix NN 7: Wenn das Fenster schmaler als das Layout ist,
		verschwindet die linke Spalte.
	*/	border-left: 1px solid #F4E9D7; /* dunkelcremefarben */
	/*
		bugfix IE 5 und 5.5
	*/	text-align: left;
}

#header {
	position:relative;
	height:153px; /* 145px; */
	background-color: white;
	/*
		bugfix: IE 5-6
	*/	overflow:visible !important; /* normale Einstellung */
		overflow:hidden; /* IE-Einstellung */
}

.outer-container {
	width: auto;
	padding-left:155px; /* 151px; */
	border-right: 230px solid #FBF4EC; /* hellcremefarben */
	background: white url("../_img/menue/hintergrund-hellblau.gif") repeat-y 8px 0px;
}

#inner-container {
	margin: 0;
	width: 100%;
}

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

#layout-right {
	z-index: 11;
	position: relative;
	float: left;
	width:230px;
	margin-left: 9px;
	margin-right:-230px;
	overflow: hidden;
}

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

#layout-center #seitenraender {
	margin:0px 29px 4em 25px;
	border-top:1px solid #BBB; /* hellgrau */
}


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


/**
 * Fusszeile mit Adresse
 */
#footer {
	z-index:100;
	position:fixed;
	bottom:0px;
	left:0px;
	width:100%;
	color:white;
	font-weight:bold;
	font-size:0.9em;
	line-height:1.5em;
	background-color:#F8981D; /* orange */
	/*
		Bugfix: IE 5-6
	*/	display: block !important;
		display:none;
}

#footer span.trennzeichen {
	padding:0 8px;
	color:#F8981D; /* orange */
	background:url("../_img/trennzeichen_punkt-weiss.gif") no-repeat 50% 50%;
}

#footer a {
	color:white;
	text-decoration:underline;
}

#footer a:hover,
#footer a:focus {
	color:#444; /* dunkelgrau */
}


/**
 * linke Spalte Hintergrundfarben (default: hellblau)
 */
body.rot div.outer-container {
	background-image:url("../_img/menue/hintergrund-rot.gif");
}

body.cobalt div.outer-container {
	background-image:url("../_img/menue/hintergrund-cobalt.gif");
}

body.magenta div.outer-container {
	background-image:url("../_img/menue/hintergrund-magenta.gif");
}

body.orange div.outer-container {
	background-image:url("../_img/menue/hintergrund-orange.gif");
}

body.gelb div.outer-container {
	background-image:url("../_img/menue/hintergrund-gelb.gif");
}

body.gruen div.outer-container {
	background-image:url("../_img/menue/hintergrund-gruen.gif");
}

body.tuerkiesblau div.outer-container {
	background-image:url("../_img/menue/hintergrund-tuerkiesblau.gif");
}


/**
 * Kopfbereich des Layouts
 */
#header #logo-woh {
	position:absolute;
	top:19px;
	right:269px;
}

#header #layout-maedchen {
	position:absolute;
	top:0px;
	left:0px;
	margin:0 0 0 8px;
	padding:0;
}

#header #schrift-kinder {
	position:absolute;
	top:23px;
	right:27px;
}


/**
 * Brotkrumenpfad
 */
#wo-bin-ich {
	position: absolute;
	bottom: 4px;
	left:179px; /* 175px; */
	margin: 0;
	padding: 0;
	font-size: 0.95em;
	line-height: 1.15em;
	color: #888; /* grau */
}

#wo-bin-ich p {
	margin: 0;
	padding: 0;
}

#wo-bin-ich a {
	text-decoration: underline;
	color: #888; /* grau */
}

#wo-bin-ich a:hover,
#wo-bin-ich a:focus {
	color:black;
}

#wo-bin-ich .trennzeichen,
#wo-bin-ich .trennzeichen-0,
#wo-bin-ich .trennzeichen-1,
#wo-bin-ich .trennzeichen-2 {
	margin: 0;
	padding: 0 2px 0 0;
}


/**
 * Aufbau sekundaere Navigation
 */
#subnavi {
	margin:0 0 0 149px; /* 0px 0px 0px 145px; */
	font-size:0.9em;
	line-height:1.1em;
}

#subnavi ul {
	margin:0;
	padding:0 50px 0 0;
	float:left;
	background:url("../_img/menue/kopfleiste_hellblau.jpg") no-repeat right bottom;
}

body.rot #subnavi ul {
	background-image:url("../_img/menue/kopfleiste_rot.jpg");
}

body.cobalt #subnavi ul {
	background-image:url("../_img/menue/kopfleiste_cobalt.jpg");
}

body.magenta #subnavi ul {
	background-image:url("../_img/menue/kopfleiste_magenta.jpg");
}

body.gelb #subnavi ul {
	background-image:url("../_img/menue/kopfleiste_gelb.jpg");
}

body.orange #subnavi ul {
	background-image:url("../_img/menue/kopfleiste_orange.jpg");
}

body.gruen #subnavi ul {
	background-image:url("../_img/menue/kopfleiste_gruen.jpg");
}

body.tuerkiesblau #subnavi ul {
	background-image:url("../_img/menue/kopfleiste_tuerkiesblau.jpg");
}

#subnavi ul li {
	display:inline;
}

#subnavi ul li a,
#subnavi ul li strong {
	position:relative;
	float:left;
	padding:2px 5px 1px 5px;
	color:white;
	font-weight:normal;
	text-decoration:none;
	border-left:1px solid white;
	border-bottom:2px solid white;
}

#subnavi ul li a:hover,
#subnavi ul li a:focus,
#subnavi ul li strong {
	color:black;
	border-bottom:2px solid orange;
}


/**
 * Aufbau Hauptmenue
 */
#navi {
	width:155px; /* 151px; */
	margin:0;
	padding:20px 0 0 0;
	font-size:1.25em;
	/*
		bugfix: IE 7
	*/	position: relative;
}

#navi ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	font: bold 0.75em/1.6em Arial, Helvetica, sans-serif;
}

#navi ul ul {
	margin:0px;
	text-align: right;
	font-size: 0.9em;
	line-height: 1.7em;
}

#navi li {
	position: relative;
	margin: 5px 0px;
	padding: 0px;
	/*
		bugfix: IE 5-6
	*/	width:155px; /* 151px; */
	/*
		bugfix: IE 5
	*/	padding-left: 14px;
		padding-left/**/: 0px;
}

#navi ul ul li {
	margin: 2px 0px;
	/*
		bugfix: IE 5
	*/	padding-right: 21px;
		padding-right/**/: 0px;
}

#navi a,
#navi strong {
	display: block;
	text-decoration: none;
}

#navi span.text {
	margin-left: 8px;
	padding: 0px 4px;
}

#navi ul ul  span.text {
	margin-right: 5px;
	padding: 0px 4px;
}

#navi a:hover span.text,
#navi a:focus span.text,
#navi a.aktiv span.text,
#navi strong span.text {
	color:white;
	border-style: solid;
	border-width: 2px 2px 2px 0px;
}

#navi ul ul a:hover span.text,
#navi ul ul a:focus span.text,
#navi ul ul a.aktiv span.text,
#navi ul ul strong span.text {
	border-width: 2px 0px 2px 2px;
}

#navi span.marker {
	position:absolute;
	left: 0px;
	width: 100%;
}

#navi a:hover span.marker span,
#navi a:focus span.marker span,
#navi a.aktiv span.marker span,
#navi strong span.marker span {
	border-left: 8px solid #F8981D; /* orange */
}

#navi ul ul a:hover span.marker span,
#navi ul ul a:focus span.marker span,
#navi ul ul a.aktiv span.marker span,
#navi ul ul strong span.marker span {
	border: 0px;
	border-right: 5px solid #F8981D; /* orange */
}

/**
 * Schriftfarben im Hauptmenue sind je 70% schwarz auf Hintergrundfarbe
 */
body.hellblau #navi a,
body.hellblau #spenden-button a:hover {
	color:#1F3443;
}

body.rot #navi a,
body.rot #spenden-button a:hover {
	color:#3B120E;
}

body.cobalt #navi a,
body.cobalt #spenden-button a:hover {
	color:#1D2B37;
}

body.magenta #navi a,
body.magenta #spenden-button a:hover {
	color:#3B1117;
}

body.gelb #navi a,
body.gelb #spenden-button a:hover {
	color:#4B3708;
}

body.orange #navi a,
body.orange #spenden-button a:hover {
	color:#412000;
}

body.gruen #navi a,
body.gruen #spenden-button a:hover {
	color:#292700;
}

body.tuerkiesblau #navi a,
body.tuerkiesblau #spenden-button a:hover {
	color:#152D30;
}


/**
 * Farben im Hauptmenue
 */
body.hellblau #navi a:hover span.text,
body.hellblau #navi a:focus span.text,
body.hellblau #navi a.aktiv span.text,
body.hellblau #navi strong span.text {
	background-color:#67AEE0; /* hellblau */
	border-color:#AACAD9;
}

body.rot #navi a:hover span.text,
body.rot #navi a:focus span.text,
body.rot #navi a.aktiv span.text,
body.rot #navi strong span.text {
	background-color:#C43E2F; /* rot */
	border-color:#E29F96;
}

body.cobalt #navi a:hover span.text,
body.cobalt #navi a:focus span.text,
body.cobalt #navi a.aktiv span.text,
body.cobalt #navi strong span.text {
	background-color:#6090BA; /* cobalt */
	border-color:#AACAD9;
}

body.magenta #navi a:hover span.text,
body.magenta #navi a:focus span.text,
body.magenta #navi a.aktiv span.text,
body.magenta #navi strong span.text {
	background-color:#C7384C; /* magenta */
	border-color:#E39BA5;
}

body.gelb #navi a:hover span.text,
body.gelb #navi a:focus span.text,
body.gelb #navi a.aktiv span.text,
body.gelb #navi strong span.text {
	background-color:#FDBA1B; /* gelb */
	border-color:#FEDD8D;
}

body.orange #navi a:hover span.text,
body.orange #navi a:focus span.text,
body.orange #navi a.aktiv span.text,
body.orange #navi strong span.text {
	background-color:#DA6B00; /* orange */
	border-color:#EDB581;
}

body.gruen #navi a:hover span.text,
body.gruen #navi a:focus span.text,
body.gruen #navi a.aktiv span.text,
body.gruen #navi strong span.text {
	background-color:#888200; /* gelb */
	border-color:#C4C181;
}

body.tuerkiesblau #navi a:hover span.text,
body.tuerkiesblau #navi a:focus span.text,
body.tuerkiesblau #navi a.aktiv span.text,
body.tuerkiesblau #navi strong span.text {
	background-color:#4597A2; /* tuerkisblau */
	border-color:#A2CBD1;
}

#spenden-button {
	margin:50px 6px 3.5em 0px;
	background:url("../_img/menue/spenden-button_aktiv.gif") no-repeat left top;
	/*
		bugfix: IE 6-7
	*/	height:47px;
	/*
		bugfix: IE 5
		Spendenbutton wird im IE 5 nicht angezeigt
	*/	display: none; /* IE-Wert */
	display/**/: block; /* normaler Wert */
}

#spenden-button a {
	display:block;
	height:47px;
	color:white;
	font-weight:bold;
	text-decoration:none;
}

#spenden-button img {
	float:left;
	display:block;
	width:55px;
	height:47px;
	border:0px;
}

#spenden-button .text {
	display:block;
	margin-left:64px;
	padding-top:0.35em;
}

* html a:hover {
	visibility:visible;
}

#spenden-button a:hover img,
#spenden-button a:focus img {
	visibility:hidden;
}



/**
 * Allgemeine Textformatierungen
 */
h1,
.h1-style {
	margin:21px 0 0.9em 0;
	padding:0;
	color:black;
	font-size:1.5em;
	line-height:1.4em;
	font-weight:normal;
}

.h1-style {
	margin-top:1.7em;
	margin-bottom:0.4em;
}

h2,
.h2-style {
	margin:1.05em 0 0.8em 0;
	padding:0;
	color:#444;
	font-size:1.22em;
	line-height:1.4em;
	font-weight:bold;
}

h3,
.h3-style {
	margin:1.2em 0 0.4em 0;
	padding:0;
	color:#444;
	font-size:1.0em;
	line-height:1.4em;
	font-weight:bold;
}

h3.artikel {
	margin-top:1.7em;
	margin-bottom:0.1em;
}

h3 .normal {
	color:black;
	font-weight:normal;
}

p {
	margin:0 0 0.7em 0;
	padding:0;
}

strong {
	font-weight:bold;
}

.quotes-fr { /* doppelte spitze anfuehrungszeichen */
	font-weight:bold;
	font-size:1.4em;
	line-height:0.6em;
	color:#F8981D;   /* orange */
}


/**
 * mittlere Spalte
 */
#layout-center a {
	color:#528AB3;   /* hellblau, leicht abgetoent, Originalton: #67AEE0; */
	font-weight:bold;
	text-decoration:none;
}

#layout-center a:hover,
#layout-center a:focus {
	color:#F8981D;   /* orange */
}

#layout-center blockquote {
	margin:0 1em 0 2em;
	padding:0;
	font-style:italic;
}

#layout-center hr {
	margin:38px 0 15px;
	padding:0;
	border:1px solid #BBB;
	border-width:1px 0 0 0;
	background-color:white;
}

#layout-center ul {
	margin:1.3em 0 0.8em 3px;
	padding:0;
	list-style-type:none;
}

#layout-center ul li {
	margin:0 0 0.4em 0;
	padding:0 0 0 14px;
	background:url("../_img/listenzeichen-hellblau.gif") no-repeat 2px 0.4em;
	/*
		IE-bugfix
	*/	position:relative;
}

#layout-center ol {
	margin:1.3em 0 0.8em 1.7em;
	padding:0;
	list-style-type:decimal;
	list-style-position:inside;
}

#layout-center ol li {
	margin:0 0 0.5em 0;
	padding:0;
	text-indent:-1.4em;
}

#layout-center ol li ul {
	margin-top:0.5em;
	margin-left:0;
	list-style-type:none;
	list-style-position:outside;
}

#layout-center ol li ul li {
	padding-left:14px;
	text-indent:0;
	background:url("../_img/listenzeichen-hellblau.gif") no-repeat 2px 0.4em;
}

#layout-center ul.no-bullet li,
#layout-center ol li ul.no-bullet li {
	padding-left:1.5em;
	text-indent:-1.5em;
	background:none;
	background-image:none;
}

body.rot #layout-center ul li {
	background-image:url("../_img/listenzeichen-rot.gif");
}

body.cobalt #layout-center ul li {
	background-image:url("../_img/listenzeichen-cobalt.gif");
}

body.magenta #layout-center ul li {
	background-image:url("../_img/listenzeichen-magenta.gif");
}

body.orange #layout-center ul li {
	background-image:url("../_img/listenzeichen-orange.gif");
}

body.gelb #layout-center ul li {
	background-image:url("../_img/listenzeichen-gelb.gif");
}

body.gruen #layout-center ul li {
	background-image:url("../_img/listenzeichen-gruen.gif");
}

body.tuerkiesblau #layout-center ul li {
	background-image:url("../_img/listenzeichen-tuerkiesblau.gif");
}


/* Seite: Kinderbilder */
#layout-center div.kinderbilder {
	margin:40px 0 1em 0;
	text-align:center;
}

#layout-center .kinderbilder img.bild {
	display:block;
	margin:0 auto 18px;
	border:1px solid #90ACC2; /* hellblau */
}

#layout-center .kinderbilder .icon-pfeil {
	padding:0 14px;
}

#layout-center .kinderbilder .text {
	position:relative;
	top:-0.2em;
}


/**
 * Videoeinbettung
 */
#layout-center .flv-film {
	margin-top:33px;
	text-align:center;
}

#layout-center .width320 {
	width:322px;
	margin:0 auto;
	text-align:left;
}

#layout-center .width360 {
	width:362px;
	margin:0 auto;
	text-align:left;
}
#layout-center .width370 {
	width:370px;
	margin:0 auto;
	text-align:left;
}

#layout-center .width380 {
	width:382px;
	margin:0 auto;
	text-align:left;
}

/**
 * Aufbau der Sitemap
 */
#layout-center ul#sitemap {
	margin:0;
	padding:0;
}

#layout-center ul#sitemap a {
	color:#444;
	font-weight:normal;
	text-decoration:none;
}

#layout-center ul#sitemap a:hover,
#layout-center ul#sitemap a:focus {
	color:#F8981D;
	font-weight:bold;
}

#layout-center ul#sitemap li {
	margin:1.3em 0 0 0;
	padding:1em 0 0 0;
	background:none;
	border-top:1px solid #BBB;
}

#layout-center ul#sitemap li, [dummy] {
	border-top-width:1px;
}

#layout-center ul#sitemap li.first,
#layout-center ul#sitemap ul li {
	padding-top:0;
	border-top:0;
}

#layout-center ul#sitemap ul.end {
	/*
		bugfix: IE 6
	*/	position:relative;
		top:-1.5em;
}

#layout-center ul#sitemap li ul {
	margin:0.6em 0 0 0;
	padding:0;
}

#layout-center ul#sitemap ul li {
	margin:0;
	padding:0 0 0 14px;
	background:url("../_img/listenzeichen-subnavi.gif") no-repeat 2px 0.4em;
	/*
		IE-bugfix
	*/	position:relative;
}

#layout-center ul#sitemap ul.hellblau li {
	background-image:url("../_img/listenzeichen-hellblau.gif");
}

#layout-center ul#sitemap ul.rot li {
	background-image:url("../_img/listenzeichen-rot.gif");
}

#layout-center ul#sitemap ul.cobalt li {
	background-image:url("../_img/listenzeichen-cobalt.gif");
}

#layout-center ul#sitemap ul.orange li {
	background-image:url("../_img/listenzeichen-orange.gif");
}

#layout-center ul#sitemap ul.gelb li {
	background-image:url("../_img/listenzeichen-gelb.gif");
}

#layout-center ul#sitemap ul.magenta li {
	background-image:url("../_img/listenzeichen-magenta.gif");
}

#layout-center ul#sitemap ul.gruen li {
	background-image:url("../_img/listenzeichen-gruen.gif");
}

#layout-center ul#sitemap ul.tuerkiesblau li {
	background-image:url("../_img/listenzeichen-tuerkiesblau.gif");
}

#layout-center ul#sitemap ul li a {
	color:#528AB3;
	text-decoration:none;
}


/**
 * rechte Spalte
 */
#layout-right img {
	display:block;
}

#layout-right p {
	font-size:0.9em;
	line-height:1.3em;
	margin:0 0 14px 0;
	padding:0 0 0.1em 0;
	color:#F8981D; /* orange */
	background-color:white;
}

#layout-right #vorschau-kinderbilder {
	padding:0 0 36px 0;
	background-color:white;
}

#layout-right #vorschau-kinderbilder a {
	text-decoration:none;
}

#layout-right #vorschau-kinderbilder img {
	display:inline;
	margin-left:18px;
}

#layout-right #vorschau-kinderbilder img.first {
	margin-left:0;
}

#layout-right #logo-stiftungen {
	margin:35px 2px 1.5em 2px;
	font-size:0.9em;
}

#layout-right #logo-stiftungen a {
	color:black;
	text-decoration:none;
}

#layout-right #logo-stiftungen img {
	display:block;
	margin-bottom:10px;
}

#layout-right .text-schmetterling {
	width:211px;
	margin-top:20px;
	margin-left:8px;
}

/*  Videoeinbettung */
#layout-right div.flv-film {
	margin-top:33px;
	text-align:center;
}

#layout-center .width230 {
	width:230px;
	margin:0 auto;
	text-align:left;
}