/*(c) Andreas Behringer (behringer@mediasana.de), mediasana GmbH, Oktober 2007 ff.
/* Diese CSS-Datei gilt für sämtliche Projekte. */


/* SEITENBEREICHE */

body
{	
	margin:0px;
	padding: 0 0 0 5;
	
	font-family: Arial, Helvetica, sans-serif;
}

#container
{	
	position:relative;
	width: 994px;
	margin: 0 0 15 5;
	text-align: left;
	padding: 0 0 0 0;

}

#oben
{
	height: 16px;
	margin: 0 0 10 0;
	padding: 3 0 2 13;
}

#links
{
	width: 180;
	margin-left: 0;
	float: left;
}

#mitte
{	
	text-align: middle;
	width: 590; /* Bei Änderung auch #voll anpassen. */
	margin-left: 22;
}

#unten
{	
	width:592;	
	margin-left: 20;
	margin-bottom: 10;
	font-size: 11;
	clear:both;
}

#rechts
{
	width: 180;
	margin-left: 0; /* Für IE von 20 auf 16 reduziert. */
	float: right;
}


/* ABSÄTZE */

p	{ margin: 0 0 10 0; }
div	{ margin: 0 0 0 0; }

p, div
{
	padding: 0 0 0 0;
	font-size: 12px;
	color: black;
	font-weight: normal;
}

#rechts p
{
	margin: 5 0 3 0;
	font-size: 11px;
}

/* LISTEN */

ul, ol, li
{
	margin: 0 0 10 0;
	padding: 0 0 0 0;
}

ul, ol
{
	/* Beachte die obige Definitionen für ul, ol, li! */
	padding-left: 20; /* Standard: FF=40, IE=0 */
	margin-left: 20; /* Standard: FF=0, IE=40 */
}

/* Keine Einrückung bei der Aufzählung */
#hintergrund ul
{
	margin: 0;
}

li
{
	font-size: 12px;
}


/* FORMULARE */

form
{
margin: 0;
}
	
	
/* VERLINKUNGEN */

/* normal */
a:link,
a:visited,
a:hover,
a:active
{
	color: #003366;
}

/* Elemente (z.B. Buttons), die wie Links aussehen sollen */
#link
{
	text-decoration: underline;
	color: #003366;
	background: 0;
	margin: 0;
	padding: 0;
	border: 0;
	width: 150; /* Breitenbegrenzung tatsächlich notwendig, sonst ist Link breiter als rechter Seitenbereich. max-width reicht im IE nicht aus. */
}


/* ÜBERSCHRIFTEN */

h1
{
	margin: 0 0 10 0;
	padding: 0 0 0 0;
	font-size: 21px;
	color: #003366;
	font-weight: bold;
}

h2
{
	margin: 0 0 10 0;
	padding: 0 0 0 0;
	font-size: 17px;
	color: #003366;
	font-weight: bold;
}

h3
{
	margin: 0 0 10 0;
	padding: 0 0 0 0;
	font-size: 14px;
	color: #356aac;
	font-weight: bold;
}

h4
{
	margin: 0 0 10 0;
	padding: 0 0 0 0;
	font-size: 14px;
	color: #003366;
	font-weight: bold;
}

h5
{
	margin: 0 0 10 0;
	padding: 0 0 0 0;
	font-size: 11px;
	color: #003366;
	font-weight: bold;
}

/* In Autorenübersicht */
#überschrift
{	
	height: 15px;
	width: 275px;
	float: left;
}

/* In Autorenübersicht */
#name
{
	color: #003366;
	font-size: 14px;
	font-weight: bold;
}

#rechts h3 {	margin: 5 0 3 0; }


/* TABELLEN (STANDARD) */

table, tr, td
{
	margin: 0;
	padding: 0;
	font-size: 12px;
	color: black;
	font-weight: normal;
	border-collapse: collapse;
	vertical-align: top;
}

/* Tabellen, die die volle Breite der Seitenmitte nutzen sollen */
#voll { width: 590; }

td, th
{
	text-align: left;
}

#lebensmittel td
{
	vertical-align: middle;
	color: #003366;
	font-weight: bold;
	border-bottom: 1px solid #003366;
}


/* HINTERGRUND */

/* Alle */
#hintergrund1, #hintergrund2, #hintergrund3, #hintergrund4 { background-color: #edf1f4; margin: 0 0 10 0; }
#hintergrund1 table, #hintergrund2 table, #hintergrund3 table,#hintergrund4 table { border-spacing: 0px; }
#hintergrund1 td, #hintergrund2 td, #hintergrund3 td, #hintergrund4 td { padding: 5; vertical-align: top; }
#hintergrund1 th, #hintergrund2 th, #hintergrund3 th, #hintergrund3 th { padding: 5; background-color: #003366; vertical-align: top; color: white; font-weight: bold; }

/* Hintergrund 1 (ohne Gitternetz) */
#hintergrund1 { padding: 5; }
#hintergrund1 table { width: 580; }
#hintergrund1 td { padding: 5; }
#hintergrund1 th { border-bottom: 10px solid #edf1f4; }

/* Hintergrund 2 und 3(mit Gitternetz) */
#hintergrund2, #hintergrund3 { background-color: #edf1f4; }
#hintergrund2 table, #hintergrund3 table { width: 560px; border-right: 1px solid #003366; border-bottom: 1px solid #003366; }
#hintergrund2 td , #hintergrund3 td { border-left: 1px solid #003366; border-top: 1px solid #003366; }
#hintergrund2 th, #hintergrund3 th { border-left: 1px solid #003366; border-top: 1px solid #003366; }

/* Hintergrund 3 (mit Gitternetz) */
#hintergrund3 td { padding-top: 2; padding-bottom: 2; }
#hintergrund3 th .klein { font-size: 11px; color: white; font-weight: normal; }

/* Hintergrund 4 (für die Autorenseite) */
#hintergrund4  { padding: 5; min-height: 273px; }
#hintergrund4 table { width: 550; }
#hintergrund4 td { padding: 5; }
#hintergrund4 th { border-bottom: 10px solid #edf1f4; }

/* Kurztext (für die Autorenseite) */
#kurztext
{
	width: 260px;
	height: 35px;
	margin-bottom: 5px;
}

#kurztext a
{
	font-size:12px;
}
/* ARTIKEL */

#artikel
{
	margin: 20 0 0 0;
}

#artikel table
{
	width: 350;
	margin: 0 20 0 0; /* IE: Wenn Tabelle im Artikel breiter als etwa 520 ist, dann muss margin dort 0 sein, damit der rechte Seitenbereich korrekt dargestellt werden kann. Dies betraf nur 2 Artikel und ist dort nun korrigiert. */
	float: left;
	border: 1px solid #003366;
	vertical-align: top;
}

#artikel td
{
	padding: 5;
	border: 1px solid #003366;
	vertical-align: top;
}

#artikel th
{
	padding: 5;
	background-color: #003366;
	border-left: 1px solid #003366;
	vertical-align: top;
	color: white;
	font-weight: bold;
}


/* TABELLENBESCHRIFTUNG */

#tab1
{
	margin: 25 0 10 0;
	padding: 0;
	font-size: 12px;
	color: #003366;
	font-weight: bold;
}

#tab2
{
	margin: 0 0 10 0;
	padding: 0;
	font-size: 11px;
	color: #003366;
	font-weight: bold;
}


/* BILDER */
#bild
{
	margin: 	0 5 0 0;
	padding: 0;
	border: 1px solid #356aac;
}

#bild2
{	
	width: 	30px;
	height: 	25px;
	margin: 	0 5 0 0;
	padding: 0;
	border: 1px solid #356aac;
}

/* In Autorenseite*/
#bild3
{
	width: 32px; 
	height: 30px;
	margin-right: 10px;
	float: left;
	padding-top: 2px;	
}

/* RAHMEN */
#rahmen
{
	padding: 15;
	border: 1px solid #003366;
}
fieldset
{
	padding: 7 10 10 10; /* für IE anders */
	border: 1px solid #003366;
}

/* LINIEN */
hr
{
	height: 0;
	margin: 5 0 5 0;
	border: 0;
	border-bottom: 1px solid #003366;
}

/* BALKEN-DIAGRAMME */
#balken1
{
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	text-align: right; 
	float: left;
}

#balken2
{
	text-align: right; 
	float: left;
}


/* STANDARD-FARBEN */

#farbe {color: #003366;}
#rahmenfarbe {border-color: #003366;}
#rot {color: #fe0000;}
#orange {color: #fc8f16;} /* mediasana-Orange */
#dunkel, #dunkel div, #dunkel p, #dunkel h4, #dunkel a {background-color: #003366; color: white;}
#mittel {background-color: #356aac;}
#hintergrund {background-color: #edf1f4;}
#grau {background-color: #cccccc; color: black;}

/* Hervorhebung der aktuellen Seite */
#aktuell
{
	color: #fe0000;
}
#menue1ebene1 #aktuell
{
	color: #fe0000;
}
#oben #aktuell
{
	color: #fe0000;
}	
/* BUTTONS UND CHECKBOXES */

/* Button  */
#button
{
	width: auto; /* Damit IE nicht den Button verbreitert. */
	overflow: visible; /* Damit IE nicht den Button verbreitert. Dies funktioniert im IE nur wenn Wert "visible" eingestellt ist. Allerdings wird ungewollter Abstand produziert, wenn mehrere Buttons nebeneinander stehen. */
	margin: 0 0 0 0;
	padding: 0 3 0 3;
	border-width: 1; 
	border-style: outset;
	border-color: #003366;
	background-color: #356aac;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: white;
}

/* Link, der wie ein Button aussehen soll: */
#abutton
{
	width: auto; /* Damit IE nicht den Button verbreitert. */
	overflow: visible; /* Damit IE nicht den Button verbreitert. Dies funktioniert im IE nur wenn Wert "visible" eingestellt ist. Allerdings wird ungewollter Abstand produziert, wenn mehrere Buttons nebeneinander stehen. */
	margin: 0 0 0 0;
	padding: 1 6 1 6;
	border-width: 1; 
	border-style: outset;
	border-color: #003366;
	background-color: #356aac;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: white;
	
}

/* Kleiner Button */
#buttonklein
{
	margin-top: 3;
	padding: 0;
	border-width: 0;
	background-color: #003366;
	font-size: 12px;
	color: white;
}

/* Radio und Checkbox */
#radio, 
#checkbox 
{
	margin-right: 10px;
	vertical-align: top; 
	text-align: left; /* ohne Auswirkung */
}


/* MENÜ 1 (BEREICH LINKS) */

/* Ebene 1 */
#menue1ebene1
{
	padding: 4 0 4 13;
	border-top: 1px solid white;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	
}

/* Ebene 2 */
#menue1ebene2
{
	padding: 4 0 4 13;
	background-color: #edf1f4;
	border-top: 1px solid white;
	font-size: 12px;
	font-weight: bold;
}

/* Ebene 3 */
#menue1ebene3
{
	padding: 4 0 4 33;
	background-color: #edf1f4;
	font-size: 12px;
	font-weight: bold;
}

/* Ebene 1-3: Links */
#menue1ebene1 a { color: white; text-decoration: none; }
#menue1ebene2 a { color: black; text-decoration: none; }
#menue1ebene3 a { color: black; text-decoration: none; }


/* MENÜ 2 (BEREICH RECHTS) */

#menue2
{
	padding: 4 0 4 0;
	font-weight: bold;
}

#menue2 a:link,
#menue2 a:visited,
#menue2 a:hover,
#menue2 a:active
{
	color: #1f1e1e;
	text-decoration: none;
}


/* MENÜ 3 (BEREICH MITTE, SITEMAP) */

#menue3ebene1
{
	padding: 10 10 10 60;
	background-color: #edf1f4;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	color: #003366;
}

#menue3ebene2
{
	padding: 0 10 10 110;
	background-color: #edf1f4;
	font-weight: bold;
	color: #003366;
}

#menue3ebene3
{
	padding: 0 10 10 160;
	background-color: #edf1f4;
	font-weight: normal;
	color: #003366;
}


/* MENÜ 4 (BEREICH MITTE, UNTERSEITEN) */

#menue4
{
	padding: 15 15 15 60;
	background-color: #edf1f4;
	font-size: 14px;
	font-weight: bold;
	color: #003366;
}

#beschreibung
{
	padding-top: 10;
	font-style: italic;
	color: #003366;
}

/* BOXEN */

#box
{
	margin: 0 0 15 0;
	padding: 15;
	background-color: #edf1f4;
	border-top: 5px solid #003366;
	vertical-align: top;
}

#box2
{
	margin: 0 0 15 0;
	padding: 0;
	background-color: #edf1f4;
	border: 1px solid #003366;
	vertical-align: top;
}

#box2 h3
{
	margin: 0 0 0 0;
	padding: 2 10 3 10;
	background-color: #003366;
	color: white;
	font-weight: bold;
	font-style: italic;
}


/* GELBES KÄSTCHEN */

#kaestchen span {
	display: none;
}

#kaestchen:hover span {
	display: inline;
	position: relative;
	top: 5;
	left: 5;
	width: 200px;
	padding: 1 1 1 4;
	border: 1px solid black;
	background: #ffffcc;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: black;
}


/* GLOSSAR */

a#glossar, em {
	text-decoration: none;
	border-bottom: 1px dashed #003366;
}

em {
	font-style: normal;
	color: #003366;
	border-bottom: 1px dashed #003366;
}


/* ERNÄHRUNGSPLAN */

#eplan {
	/*font-size: 11px;*/
	color: black;
	background-color: #FFD587;
	padding: 2 2 2 2 ;
	border: 1px solid #E1E1E1;
}

#eplan_tabelle{
	width: 792px;
	table-layout:fixed;
}

#paket2 td
{
	padding:3px ;
}

/*	Das Div ghost in im normalfall ausgeblendet(opacity: .0). 
	beim Herüberfahren mit der maus wird es jedoch eingeblendet(:hover->opacity: 1.0 */
#ghost{
	margin-top: -2px;
	margin-left: -2px;
	position: absolute;
	width: 104px;
	height: 96px;	
	opacity: 0.3;
	padding-top: 2px;
	padding-left: 2px;
}	

#ghost:hover{	
	opacity: 1.0;
	background-color: #ffcc66;
}

/*die drei folgenden Bilder sind die Icons im Wochenplan, die eingeblendet werden  */
#eplan_bild_unten_links{
	float: left;
	width: 20px;
	height: 20px;
	margin-left: 5px;
	margin-top: -23px;
	border: none;

}

#eplan_bild_mitte{
	width: 20px;
	height: 20px;
	margin-top: -25px;
	margin-left: 38px;
	border: none;
}

#eplan_bild_unten_rechts{
	float: right;
	height: 20px;
	width: 20px;
	margin-top: -23px;
	border: none;
	margin-right: 14px;
	
}

#eplan_p {
	margin: 0;
	padding: 4 0 0 0;
	font-size: 12px;
	font-family: arial;
	height: 90px;
	width: 100px;
	text-align: CENTER;
	overflow: hidden;	
}

.ausserhalb
{
	margin-top:-37px;
	color:white;
	height:16px;
	font-size:12px;
	padding:3 0 2 5;
	background-color:#003366;	
}

#bild_ausserhalb
{
	position:absolute;
	top:-97;	
}	

/*	Überstehender TExt soll nicht angezeigt werden*/
#ghost #eplan_p
{
	overflow: hidden;	
}

#ghost #eplan_p:hover
{
	opacity: 1.0;
}

/* Herausgehobene Zellen (oben, links) */
#eplan2 
{
	background-color: #ffcc66;
	padding: 0;
	color: #ff6600;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	font-style: italic;
	border: 1px solid #E1E1E1;
	vertical-align: middle;
}

/*Getränkeplan */
#eplan_g
{
	position:relative;
	left:-11px;	
	top:0px;
	width:825px;	
}
	
#eplan_g_form
{	
	padding:5 10;
	vertical-align:top;	
}

.eplan_g_tabelle
{	
	position:relative;
	margin-top:0px;
	margin-right:0px;
	width:189; 
	background-color: #edf1f4;		
}
/*
.eplan_g_tabelle td,p,a, .eplan_g_tabelle1 td,p,a
{
	font-size:12px;	
}
*/
.eplan_g_tabelle1
{	
	width: 389px; 
	margin-bottom:5px;
}

.eplan_g_tabelle1 td
{
	padding:0;
}	

.eplan_g_tabelle1 tr
{
	border:1px solid #003366;
	background-color:white;
	
}

#breite
{
	width:400px;	
}	

#b
{
	color:#003366;
}	


.eplan_g_tabelle1 img
{
	border:solid 1px white;
	padding-left:0px;	
}	
	
#background
{	
	position:relative;
	min-height:20px;
	padding:2 0 0 5;
	margin: 3 0 0 0;
	
}

#background a
{	
	padding:0px;
	margin:0px;
	text-decoration:none;
	vertical-align:middle;
}

#background:hover
{
	 background-image: url(../bild/icons/auswahl2.gif);
	 background-repeat: no-repeat;
	 background-position: 0 0;	
	 z-index:150;
}
#background2
{	
	float:left;
	margin: 7 5 0 5;
	height:30px;
	width:25px;
	background-image: url(../bild/icons/down.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}	
#background2:hover
{
	 background-image: url(../bild/icons/down2.png);
	 background-repeat: no-repeat;
	 background-position: 0 0;
}

#background3
{
	text-decoration: none;
}
#background3 p
{
	margin-top:0px;	
	height:25px;
	padding: 6 0 0 0 ;
}	

#background3 p:hover
{
	color:#003366;
	text-decoration: underline;
}	

	
#uberschrift
{	
	position:relative;
	padding:5 5 5 4;	
	background-color: #edf1f4; 
	color:#003366;
	font-size:14px;
	font-weight: bold;
	border-top:10px solid white;
}	

#plus
{
	width:28;
	border:0px;
	
}

.border
{
	border:none;
}

.hover img
{	
	padding:0px;
	margin:0px;
	border:0px;
	
}

.hover:hover
{
	background-color:#edf1f4;	
	background-image: url(../bild/icons/background_white.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}	

.float_right
{
	float:right;	
}	
.float_right h2
{
	color:#003366;	
}	

.float_left
{
	float:left;
}

/*Die folgenden ids sind die der Bilder im Hintergrund*/
#milch
{	
	position:absolute;
	height:95px;
	width:45px;
	top:-10;
	left:145;
	background-image: url(../bild/icons/milch.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#kaffee
{	
	position:absolute;
	height:60px;
	width:71px;
	top:-10;
	left:125;
	background-image: url(../bild/icons/kaffee.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#limo
{	
	position:absolute;
	height:74px;
	width:55px;
	top:-10;
	left:140;
	background-image: url(../bild/icons/wasser.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#apfel
{	
	position:absolute;
	height:95px;
	width:66px;
	top:63;
	left:756;
	background-image: url(../bild/icons/apfel.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#tee
{	
	position:absolute;
	height:55px;
	width:77px;
	top:-15;
	left:125;
	background-image: url(../bild/icons/tee.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#wein
{	
	position:absolute;
	height:90px;
	width:41px;
	top:-10;
	left:145;
	background-image: url(../bild/icons/wein.png);
	background-repeat: no-repeat;
}

#gemuse
{	
	position:absolute;
	height:90px;
	width:47px;
	top:-10;
	left:150;
	background-image: url(../bild/icons/gemuese.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

/* Detailansicht der Rezepte*/
.rezept
{	position:relative;
	width:67%;
	float:left;
	padding:2%;
}

.rezept	p
{
	font-size: 14px;
}

#zutaten
{
	float:left;
	width:50%;
}

#zubereitung
{
	float:right;
	width:50%;
}

#besonderes
{	
	margin-top:10px;
}

.rezept_tabelle tr, th, td
{
	font-size: 12px;
}

/* Nährwert-Übersicht */
.nwueber table
{	
	width: 200px !important;
	background-color: #ffcc66;
	margin-bottom: 6px;
}
.nwueber td, .nwueber th
{
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

/* Nährwert-Details */
.nwdetail table
{	
	width:48% !important;
	margin:15 0 0 0;
	background-color: #ffcc66;
	color:white;
}

/*Die abgerundeten Ecken*/

.ecke
{
	width:20px;
	height:20px;
	position:absolute;
	background-repeat: no-repeat;
	background-position: 0 0;
}

#ecke_links_oben
{
	top:	-2;
	
	left:	-2;
	
	background-image: url(../bild/icons/ecke_links_oben.png);
}

#ecke_rechts_oben
{
	top:	-2;

	
	right:	-2;
	background-image: url(../bild/icons/ecke_rechts_oben.png);
}

#ecke_rechts_unten
{	
	
	bottom:	-2;

	right:	-2;
	background-image: url(../bild/icons/ecke_rechts_unten.png);
}

#ecke_links_unten
{	
	
	bottom:	-2;
	left:	-2;
	
	background-image: url(../bild/icons/ecke_links_unten.png);
}






	/* Menü 1 (= links): */
	.farbe1L {background-color:#d8e5ee}
	.farbe2L {background-color:#d8e5ee}
	.farbe3L {background-color:#d8e5ee}
	.farbe4L {background-color:#d8e5ee}
	.farbe5L {background-color:#d8e5ee}
	.farbe6L {background-color:#d8e5ee}
	/* Menü 2 (= rechts): */
	.farbe1R {background-color:#d8e5ee}
	.farbe2R {background-color:#d8e5ee}
	.farbe3R {background-color:#d8e5ee}
	.farbe4R {background-color:#d8e5ee}
	.farbe5R {background-color:#d8e5ee}
	.farbe6R {background-color:#d8e5ee}
	/* Balken oben: */
	#oben {	background-color:#d8e5ee}
	/* Menü 1 (= links) (abweichend von css.style): */
	#menue1ebene1 {text-transform: none}
	#menue1ebene2 {font-weight: normal}
	#menue1ebene3 {font-weight: normal}
	#menue1ebene1 A {color: black}
	/* Hervorhebung der aktuellen Seite (abweichend von css.style): */
	#aktuell {color: #fe0000}