/* === allgemeine Maße des Layouts === */
body {
 min-width:791px;
 width:100%;
}


#container {
  padding-left: 131px;		/* #left gesamtbreite */
  padding-right: 190px;		/* #right gesamtbreite + #center padding */
  /* === zentriertes layout === */
  margin-left:auto;
  margin-right:auto;
  width:469px;
  /* === zentriertes layout === */
  *position:relative;
}



#container .column {
  position:relative;
  float: left;
}



#center {
  padding: 0px 0px 0px 20px;	/* #center padding */
  width: 481px;			/* breite #center */
}
/* die version für die männlein (für die standortseiten) */
.standorte #center {
  padding:0px 63px 0px 20px;	/* #center padding */
  width:417px;
}
/* die version für breite bilder rechts und schmaleren fließtext */
.schmale_breite #center {
  width:419px; /* 62px schmaler als normal (220-158) */
}



#container #left {
  width: 130px;			/* #left width */
  padding: 0px;			/* #left padding */
  right: 149px;			/* #left gesamtbreite + #center padding */
  margin-left: -483px;		/* breite #center */
  margin-top:-1px;
  *position:relative;
}
/* die version für die männlein (für die standortseiten) */
.standorte #container #left {
  margin-left: -482px;           /* breite #center */
}
/* die version mit schmalem fließtext */
.schmale_breite #container #left {
  margin-left: -421px;           /* breite #center */
}



#container #right {
  width: 158px;                  /* #right width */
  padding:5em 0px 0px 0px;       /* #right padding */
  margin-right: -413px;          /* - #right fullwidth + #center padding */
  text-align:right;
}
/* die version für die männlein (für die standortseiten) */
.standorte #container #right {
  width: 158px;                  /* #right width */
  margin-right: -251px;          /* - #right gesamtbreite + #center padding */
  padding:5em 0px 0px 0px;       /* #right padding */
}
/* die version mit schmalem fließtext */
.schmale_breite #container #right {
  width: 220px;                  /* #right width */
  margin-right: -313px;          /* - #right gesamtbreite + #center padding */
  padding:5em 0px 0px 0px;       /* #right padding */
}


#header {
  height:138px;
  min-width:791px;
  /* === zentriertes layout === */
  margin-left:auto;
  margin-right:auto;
  /* script für IE um eine mindestbreite zu erreichen
     denn wenn das fenster unter 800px breit ist,
     soll der inhalt ja am linken rand ausgerrichtet werden
     und nicht mehr zentriert
  */
  width:expression(document.body.clientWidth <= 791 ? "791px" : "100%");
  /* === zentriertes layout === */
}


#footer {
  width:100%;
  clear: both;
  /* === zentriertes layout === */
  margin-left:auto;
  margin-right:auto;
  width:expression(document.body.clientWidth <= 791 ? "791px" : "100%" );
  /* === zentriertes layout === */
}



/* IE Workaround (ka durch welchen Bug das nötig ist, habs nur durch Probieren herausgefunden */
#left {  _left: -149px; }				/* right fullwidth */
body.standorte #left {  _left: -149px; }	/* right fullwidth */

/* Code, damit alle spalten (menü, inhalt und bilderleiste rechts)
immer bis zum "boden" der seite reichen, auch wenn sie weniger
inhalt haben*/

#container #left {
  /* alle spalten sehr weit nach unten ausdehnen */
  padding-bottom: 10063px;  /* X + padding-bottom */
  /* aber die untergrenze für nachfogende elemente wieder
  nach oben schieben, so das der footer nicht nach
  unten verschoben wird */
  margin-bottom: -10000px;  /* X */
}

#container {
  /* die überlangen spalten aber nich komplett anzeigen */
  overflow: hidden;
}

#footer {
	position: relative;
	/* für den IE: hiermit wird der IE veranlasst den footer immer bis zuseitenende auszudehen,
	um bei sehr kurzen seiten die graue box zu überdecken. normalerweise ist die seite nach dem
	footer zu ende, aber der IE ignoritert das leider. "expression" is ein in CSS eingebetteted
	Javascript-Stück, was nur vom IE ausgewertet wird*/
	_height:expression(document.body.offsetHeight - this.offsetTop - 1);
}




/* === Farbliche Gestaltung, und nicht-layout-betreffende maße === */
body {
 background:white;
 margin:0;
 padding:0;
 font-family:Verdana, Helvetica, Arial, sans-serif;
 font-size:11px;
 height:100%;
}
html {
  background:white;
}



#header {
 background:url(pic/header_bg.jpg) no-repeat center top;
 border-bottom:1px solid #CCC;
}
#header div#logo {
 position:relative;
 top:5px;
 left:50%;
 padding-left:44px;
 width:200px;
}
#header div#logo h1 {
 padding:0;
 padding-left:7px;
 margin:0;
 margin-top:2px;
 color:#222;
 font-weight:normal;
 font-size:12px;
 line-height:14px;
 letter-spacing:1px;
 font-family:"Times New Roman", Times, serif;
 white-space:pre;
}
#header #rote_linie {
 height:1px;
 font-size:1px;
 overflow:hidden;
 margin-bottom:-1px;  /* ist gleich die höhe der linie (damit nichts nach unten verschoben wird) */
 width:100%;
 position:relative;
 top:120px;
 left:0;
 background:red url(pic/header_rote_linie_luecke.png) no-repeat 50% 0px;
}



#left {
 border-right:1px solid #CCC;
 overflow:hidden;
}

/* === Das Menü === */
#left ul {
  margin:0;
  padding:0;
  padding-left:21px;
  padding-top:32px;
  margin-bottom:11px;
  list-style-type:none;
  list-style-image:url();
  font-family:Verdana, Helvetica, Arial, sans-serif;
  font-size:11px;
  width:85px;
  background-repeat:repeat-y;
}
#left ul li {
  display:block;
  margin:0;
  padding:0;
}
#left ul li.menu_aktiviert a {
  background-color:#7ADA6F;
  color:#333;
}
#left ul li a {
  display:block;
  margin:0;
  padding:3px 0 3px 5px;
  min-height:15px;
  _height:15px;
  width:104px;
  color:#777;
  text-decoration:none;
}
#left ul li ul li a {
  padding-left:13px;
}



/* die männlein im menü müssen in ein 0px-großen DIV gepackt werden,
so kann man erreichen, da sie über den menüpunkt hinausstehen, ohne
abgeschnitten zu werden (das geht im IE aber nicht) */
#left ul li span.standorticon {
  display:block;
  *display:inline-block;
  _display:none;
  font-size:0px;
  height:0px;
  width:0px;
  overflow:show;
  position:relative;
  left:74px;
  top:-32px;
}
/* hier werden die männlein verschieden stark eingerückt */
#left ul li span.halle {
	left:40px;
	*left:0px;
}
#left ul li span.merseburg {
	left:67px;
	*left:15px;
}
#left ul li span.magdeburg {
	left:78px;
	*left:0px;
}


/* === Das Menü links === */

/* untermenüs werden normalerweise nicht angezeigt */
#left ul li ul {
  display:none;
}
/* untermenü für den aktivierten link anzeigen */
#left ul li.menu_aktiviert ul {
  display:block;
  margin:0;
  padding:0;
  width:109px;
  border:none;
}
/* style/hintergrundfarbe für den aktiven link */
#left ul li.menu_aktiviert a {
  font-weight:bold;
}
#left ul li.menu_aktiviert ul li a {
  background-color:#CCEFC5;
  font-weight:normal;
}
/* hintergrundfarbe für das untermenü des aktiven links */
#left ul li ul li.menu_aktiviert a {
  background-color:#ABE29E;
}

/* hier die individuellen bilder für jede menüsektion (mit dem schriftzügen) */
#left ul#menu_idee { background-image:url("pic/menu_idee.png"); }
#left ul#menu_idee.menu_aktiviert { background-image:url("pic/menu_idee_aktiviert.png"); }

#left ul#menu_standorte { background-image:url("pic/menu_standorte.png"); }
#left ul#menu_standorte.menu_aktiviert { background-image:url("pic/menu_standorte_aktiviert.png"); }

#left ul#menu_themen { background-image:url("pic/menu_themen.png");}
#left ul#menu_themen.menu_aktiviert { background-image:url("pic/menu_themen_aktiviert.png"); }

#left ul#menu_traeger { background-image:url("pic/menu_traeger.png"); }
#left ul#menu_traeger.menu_aktiviert { background-image:url("pic/menu_traeger_aktiviert.png"); }
/* ======================================== */

/* === ENDE:MENÜ === */




/* der "wo-bin-ich"-text, über der überschrift */
#center #pfad {
 font-size:10px;
 line-height:10px;
 color:#CCC;
 margin:0;
 padding:0;
}



/* die artikel-überschrift */
#center h1 {
 color:#007F00;
 font-family:Verdana, Arial, sans-serif;
 font-size:17px;
 line-height:23px;
 font-weight:normal;
}

/* der artikel-fließtext */
#center #fliesstext {
	background-color:#F3F3F3;
	padding:11px;
	font-size:12px;
	line-height:140%;
	margin-right:13px;

	min-height:390px;
	_height:400px;
	/* künstliche ausdehnung, damit die hintergrundfarbe
	immer bis zum boden geht */
	padding-bottom:10020px;
	margin-bottom:-10000px;
	/* "sinnlose" angabe, ohne die der IE den block aber
	nicht vollständig anzeigen würde (bug) */
	position:relative;
}
/* mindesthöhe für den Fließtext bei "Standorte" (Männlein, Menühöhe, wenig Text) */
body.standorte #center #fliesstext {
	min-height:457px;
	_height:467px;
}




/* spezielle farben für die standortseiten */
#center.magdeburg h1 { color:#F90; }
#center.magdeburg #fliesstext { background-color:#FFF5E1;}
div.magdeburg { background:url('pic/figur_gelb.png') no-repeat right bottom;
}

#center.merseburg h1 { color:#3A53A4;}
#center.merseburg #fliesstext { background-color:#EDF2F8;}
div.merseburg { background:url('pic/figur_blau.png') no-repeat right bottom;
 /* extra angaben für merseburg, weil das sich das layout dort
 von den andren standorten unterscheidet */
 width:477px !important;
 margin-right:-60px !important;
}

#center.halle h1 { color:#B11;}
#center.halle #fliesstext { background-color:#FBF0E0; }
div.halle { background:url('pic/kleine_rote_7.png') no-repeat right bottom;
 width:477px !important;
 margin-right:-60px !important;
}

#center.impressum h1 { color:#007F00; }
#center.impressum #fliesstext { background-color:#F3F3F3;}
div.impressum { background:url('pic/familie_lokal_3.gif') no-repeat right bottom;
}


/* === die rechte spalte === */
/* das foto (rechtbündig) */
#right .right_foto {
 float:right;
 clear:both;
 text-align:right;
}
/* der text unter dem foto */
#right .right_text {
 float:right;
 width:100%;
 /* die die breite sich auf so vielen seiten unterscheidet
 sollten einzelne abweichungen direkt in der HTML definiert
 werden, direkt dort wo der text steht */
 clear:both;
 margin-top:1.0em;
 padding-bottom:3em;
 position:relative;
 text-align:left;
}
/* Klasse für rechtbündige Bildunterschriften */
#right .right_text_rechtsbuendig {
 text-align:right;
}



/* === der footer === */
#footer {
 border-top:1px solid #CCC; /* die graue linie die den footer vom rest trennt */
 background-color:white;
}
/* der (c) 2006 imbusch-schriftzug */
#footer p#copyright {
 position:relative;
 left:50%;
 top:0;
 margin:5px;
 margin-left:-391px;
 font-size:9px;
 color:#CCC;
 padding:0;
 width:200px;
}
/* die kleine linkleiste im footer */
#footer p#menu_unten {
 position:relative;
 left:50%;
 text-align:right;
 top:-20px;
 width:394px;
 font-size:11px;
 color:#CCC;
 margin:0 2px 7px 0px;
 padding:0;
}


/* Seitenanfang-Link (wird im Footer definiert,
der Logik wegen, und weil er sich so
leicht an der grauen linie ausrichten lässt) */
#footer p#menu_unten a#link_seitenanfang {
 display:block;
 position:relative;
 bottom:6.0ex;
 *bottom:3.0em;
 right:0;
 margin-left:auto;
 text-align:right;
 /*padding-right:18px;*/
 /*background:url(pic/pfeil_oben.png) no-repeat bottom right;*/
 height:14px;
 width:40%;
}



/* === Farben für links und Hover-Links === */

/* normale links; gilt für alle, soweit nicht anderweitig angegeben */
a:link    { color:#007F00; }
a:visited { color:#005F00; }
a:hover   { color:#093; }

/* Klasse für grauen link, der nur bei Hover grün wird */
a.blass:link { color:#999; text-decoration:none; }
a.blass:hover { color:#093; }

/* Buttons und Links die wie Buttons aussehen */
button, a.button {
  display:block;
  text-align:center;
  width:100px;
  margin:0;
  padding:4px;
  background-color:#D8EED6;
  border:1px solid #CCC;
  color:#333 !important;
  text-decoration:none;
  font-size:11px;
}
button {
  padding:1px 4px;
  *padding:0px 4px;
}


/* --- die Hover-farben für die (Haupt-)Menüpunkte */
#left ul li a:hover {
 color:#093;
}
/* die Hover-farbe für die Submenüs der aktiven Menüpunkte */
#left ul li.menu_aktiviert ul li a:hover {
 background-color:#CCEFC5;
}
/* die Hover-farbe für die aktiven Menüpunkte */
#left ul li.menu_aktiviert a:hover,
#left ul li.menu_aktiviert ul li.menu_aktiviert a:hover {
 background-color:#B3E4A7;
}
/* === die kleinen Dreiecke für das Menü */
#left ul li.menu_aktiviert ul li a:hover {
 background-image:url(pic/dreieck_rot.png);
 background-repeat:no-repeat;
 background-position:5px center;
}
/* ===================================== */


/* --- Stil und Hoverfarben für die Links im Footer */
/* "design-imbusch" link */
#footer p#copyright a:link,
#footer p#copyright a:visited {
 text-decoration:none;
 color:#CCC;
}
#footer p#copyright a:hover {
 /* hat keine hover-eigenschaften */
}

/* Links unten rechts */
#footer p#menu_unten a:link,
#footer p#menu_unten a:visited {
 text-decoration:none;
 color:#666;
}
#footer p#menu_unten a:hover {
 color:#093;
}


/* --- Stil und Farben für die Links in der "wo-bin-ich"-Leiste */
#center #pfad a:link,
#center #pfad a:visited {
 text-decoration:none;
 color:#CCC;
}
#center #pfad a:hover {
 text-decoration:underline;
 color:#093;
}

/* ======================================= */



/* standardwerte für häufig verwendete Tags */
h1 {
 padding:0;
 margin:10px 0 12px 0;
}

p {
 margin:12px 1px;
 padding:0;
 /* diese "sinnlose" Angabe ist nötig, um
 den Kursiven-Text-Bug im IE zu umgehen */
 padding-right:2px;
 margin-right:-2px;
}

input, textarea, button {
  border:1px solid #CCC;
}
input, textarea {
  background-color:white;
}

}

/* q = zitat (für die grünen text im fließtext zb) */
q {
	font-style:italic;
	color:#060;
}
q::before, q::after {
	content:"";
}

/* angaben, die nötig sind, damit die <HR> in allen browsern 1px-hoch und grau ist */
hr {
 border:none;
 border-top:1px solid #CCC;
 margin:0 12px;
 height:0;
 margin-bottom:1.7em;
 margin-top:0.5em;
 *margin-bottom:0em;
 *margin-top:-0em;
}

img {
 border-width:0px;
 margin:0;
 padding:0;
 display:block;
}


/* Angaben für die Metapherwerkstatt */

ul#metapherwerkstatt_liste {
  margin:0;
  padding:0;
  border:1px solid #CCC;
  border-bottom:0px solid #DDD;
  background-color:white;
  margin-bottom:18px;
}

a#adminlogin {
  color:#E3E3E3;
  text-decoration:none;
  font-size:smaller;
  display:block;
  width:10em;
  margin-bottom:20px;
}

a#metapherwerkstatt_zurueck {
  display:block;
  margin-top:150px;
  margin-bottom:1cm;
  text-decoration:none;
}

ul#metapherwerkstatt_liste li {
  list-style:none;
  display:block;
  margin:0px;
  padding:25px 15px 10px 25px;
  border-bottom:1px solid #DDD;
}
ul#metapherwerkstatt_liste li.col1 {
  color:#007F00;
}
ul#metapherwerkstatt_liste li.col2 {
  color:#900;
}
ul#metapherwerkstatt_liste li span.metapherwerkstatt_zeit {
  display:block;
  /*
  float:right;
  margin-top:-3ex;
  margin-right:-2ex;
  */
  font-size:75%;

  color:#AAA;
  width:100%;
  text-align:right;
}

fieldset#metapherwerkstatt_formular_rahmen {
  background:#D8EED6;
  border:1px solid #CCC;
  padding:40px 20px 20px;
  margin:0;
  *margin-top:-19px;
}
form#metapherwerkstatt_formular textarea {
  width:367px;
  height:155px;
  padding:16px;
  font-family:Verdana, Helvetica, Arial, sans-serif;
  font-size:11px;
  line-height:19px;
}
form#metapherwerkstatt_formular button {
  float:right;
  width:23%;
  margin-top:22px;
  margin-bottom:20px;
}
form#metapherwerkstatt_formular div#mathecaptcha {
  margin-top:22px;
  float:left;
  width:22%;
}
form#metapherwerkstatt_formular div#mathcaptcha_text {
  margin-top:19px;
  float:left;
  font-size:76%;
  line-height:130%;
  width:55%;
  color:#666;
}

form#metapherwerkstatt_adminlogin_formular {
  width:50%;
  margin:auto;
  margin-top:21%;
}
form#metapherwerkstatt_adminlogin_formular input  { float:left;  }
form#metapherwerkstatt_adminlogin_formular button { float:right; }


/* Fix für den KHTML */
form#metapherwerkstatt_formular::after {
  display:block;
  clear:both;
  content:" ";
}


/* Hier werden alternative Style sheets für alte Browser eingebunden, die ein vereinfachtes Layout enthalten. Dies geschieht über absichtlich extrem exotische CSS-Angaben, die nur ganz bestimmte Browser verstehen. */

/* Fallback-Stylesheet für IE:Mac Version 5 */
/*\*//*/
#container {
	width:660px;
}
#container #left {
	position:normal;
	width:150px;
	margin-left:-645px
}
#container #center {
	position:normal;
	width:446px;
	margin-left:150px;
}
#container #right {
	position:normal;
	width:150px;
}

.standorte #container #left {
	position:normal;
	width:150px;
	margin-left:-645px
}
.standorte #container #center {
	position:normal;
	width:306px;
	margin-left:150px;
}
.standorte #container #right {
	position:normal;
	width:150px;
}
/**/


/* Fallback-Stylesheet für IE (Windows) Version 5.0 und 5.5 */
@media tty {
i{content:"\";/*" "*/}} @import 'style_fallback.css'; /*";}
}/* */