/*
CODE:			functionNewMedia fuer Aktion Mensch
REVISION:		0.6
LAST CHANGE:	23.10.01 t.caspers@function.de

CSS nach Typen sortiert. Was wozu gehoert steht im Kommentar davor. 

Getestet und fuer gut befunden in:

Mac: IE5.0, Opera 5.0tp1-3, NN6, Mozilla 0.9.5
Win: IE5.0, IE5.5, IE6, Opera 5, NN6
'x: Konqueror 2.1.1, Opera 5, Lynx 2.8.3, Mozilla 0.9.2 NN6.1

Nicht geeignet fuer NN4.x. (any version, any platform), aber diese
Antiquitaet filtert sich aber durch die @import-Methode in der
aufrufenden HTML-Datei schon von ganz alleine selbsttaetig aus. Toll,
was? Nur dummerwiese versteht der MS IE 5.0/Win auch das @import,
kriegt aber das Box Model, insbes. margins und paddings, doch nicht
richtig hin. Aber auch dafuer gibt's einen Workaround: s. unten bei
#contenttab. Vielen Dank an Tantek Celik vom MS IE 5/Mac-Team fuers
debugging.

Und die IE4.x und kleiner sind auf allen Plattformen sowas von
unterirdisch, das auch die das StyleSheet besser nicht sehen sollten.

iCab so um die 2.5 auf dem Mac tut's noch nicht so dolle, weil CSS ja
noch nicht vollstaendig implementiert ist (weder 1 noch 2, aber 
insbesondere float:). Aber das wird ja sicher noch :-).

Dafuer geht Opera ab ca. 3.5 (mit einem kleinen Workaround, s.u.).

Bitte beachten: wenn CSS-Shorthand (sozusagen CSS in Steno) benutzt wird, 
haltet euch an die richtige Reihenfolge der Deklarationen. Die Browser 
erwarten es nach der Art:

selektor {font: font-style font-variant font-weight font-size/line-height font-family} 

Andere Reihenfolgen fuehren zu unerwuenschten Ergebnissen.

Ansonsten gibt's weitere Erklaerungen bei w3.org/TR/REC-CSS2/
	background: #BEBED1;
*/

/* ---------- tags ---------- */

body	{
	background: #FFFFFF;
	color: #000;
	margin: 0;
	padding: 0;
	}

h1	{
	display: inline;
	color : #000;
	font: bold 1em Arial, Helvetica, sans-serif;
  font-variant:small-caps;
	font-size : 110%;
	line-height: 100%;
	}

h2	{
	display: inline;
	color : 000;
	font: bold 1em Arial, Helvetica, sans-serif;
  font-variant:small-caps;
	font-size : 90%;
	line-height: 100%;
	}

h3	{
	display: inline;
	color : 000;
	font: bold 1em Arial, Helvetica, sans-serif;
	line-height: 100%;
	}

h4	{
	margin: 0;
	color : 000;
	padding: 0;
	padding-top: 1em;
	font: bold .8em Arial, Helvetica, sans-serif;	
	line-height: 150%;
	}

hr	{
	display: none;
	}

p, dl, normtext	{
	margin: 0.4em 0 1em 0;
	font: .75em Arial, Helvetica, sans-serif;
	line-height: 130%;
	}

#ppp	{
	padding: 5px 8px 5px 16px;
	font: .75em Arial, Helvetica, sans-serif;
	line-height: 130%;
	}

li	{
	margin: 0;
	font: .75em Arial, Helvetica, sans-serif;
	line-height: 150%;
	}

dt	{
	font-weight: bold;
	}

address {
	font: normal .7em/120% Geneva, "MS Sans Serif", sans-serif;
	text-align: center;
	margin-top: -1em;
	margin-bottom: 1em;
	}

pre	{
	font: .7em/120% Monaco, "Lucida Console", "Courier New", Courier, monospace;
	color: #333;
	background: #efefef;
	
/*  Angaben zu Abstaenden, Raendern etc. werden in CSS im Uhrzeigersinn geschrieben, 
	beginnend um 12 Uhr. Also Oben (12h), Rechts (3h), Unten (6h), Links (9h) */

	padding: 2px 8px 6px 6px;
	border-top: 0 #000;
	border-right:  0 #000;
	border-bottom: 0 #000;
	border-left: 20px solid #ccc;
	max-width: 80%;
	}

code	{
	font-family: Monaco, "Lucida Console", "Courier New", Courier, monospace;
	font-size: 1em
	}

blockquote	{
	width: 50%;
	float: left;
	color: #000;
	margin: 3px 8px 0 20px;
	padding: 3px 4px 4px 6px;
	font: normal .75em/150% Arial, Helvetica, sans-serif;
	}

img, table	{
	border: 0;
	}

strong	{
	color: #333}

/* ---------- links ---------- */

/* noch was zu den link-Klassen: 
Laut http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes
muessen diese in der Reihenfolge

a:link
a:visited
a:hover
a:active

deklariert werden. 

"Note that the A:hover must be placed after the A:link and A:visited rules, 
since otherwise the cascading rules will hide the 'color' property of the 
A:hover rule. Similarly, because A:active is placed after A:hover, the 
active color will apply when the user both activates and hovers over the A 
element."
*/


a:link	{
	color: #493f52;
	}
a:visited	{
	color: #493f52;
	}
a:hover	{
	color: #000;
	background: #dfdfeb;
	}
a:active	{
	color: #493f52;
	}


#gps a:link {
	color: #fff;
	}
#gps a:visited {
	color: #fff;
	}
#gps a:hover {
	color: #000;
	background: #dfdfeb;
	}
#gps a:active {
	color: #fff;
	}


.funFonts a:link {
	color: #BBFF99;
	}
.funFonts a:visited {
	color: #BBFF99;
	}
.funFonts a:hover {
	color: #000;
	background: #dfdfeb;
	}
.funFonts a:active {
	color: #BBFF99;
	}


a:link.nav	{
  font-size: 120%;
  color: #493f52;
	}
a:visited.nav	{
	color: #493f52;
	}
a:hover.nav	{
	color: #493f52;
	background: #dfdfeb;
	}
a:active.nav	{
	color: #493f52;
	}


a:link.subnav	{
  color: #493f52;
	}
a:visited.subnav	{
	color: #493f52;
	}
a:hover.subnav	{
	color: #000;
	background: #dfdfeb;
	}
a:active.subnav	{
	color: #FFFFFF;
	}

p a:link, dt a:link	{
	color: #493f52;
	}
p a:visited, dt a:visited	{
	color: #493f52;
	}
p a:hover, dt a:hover	{
	color: #000;
	background: #dfdfeb;
	}
p a:active, dt a:active	{
	color: #493f52;
	}


#footer a:link	{
	color: #fff;
	}
#footer a:visited	{
	color: #fff;
	}
#footer a:hover	{
	color: #333;
	background: #dfdfeb;
	}
#footer a:active	{
	color: #fff;
	}


.teaser a:link	{
	color: #493f52;
	}
.teaser a:visited	{
	color: #493f52;
	}
.teaser a:hover	{
	color: #000;
	background: #fff;
	}
.teaser a:active	{
	color: #493f52;
	}


.glossary a:link	{
	text-decoration: none;
	}
.glossary a:visited	{
	text-decoration: none;
	}
.glossary a:hover	{
	color: #000;
	background: #fff;
	}
.glossary a:active	{
	text-decoration: none;
	}

a:hover.imglink	{
	background: none;
	}

/* kleiner rollover-stunt in der rechten navigation. Der Trick an der
Sache ist, dass ein   mit ein paar Dekorationen (Breite, Hoehe,
Hintergrundfarbe) versehen wird und dann auf unsichtbar gesetzt wird
(wichtig: nicht display: none, sondern visibility: hidden, da ansonsten
der Platzhalter kollabieren wuerde) */

a .marker	{
	display: inline;
	height: .4em;
	width: .4em;
	margin-right: .2em;
	background: #857fa5;
	visibility: hidden;
	}

/* Workaround f. NN6, der dummerweise den gesamten Link unterstreicht,
obwohl der Bereich mit dem   auf text-decoration-none gesetzt war
*/

.navbot a	{
	text-decoration: none;
	}

.nav	{
	text-decoration: none;
	}

/* beim druebermausen wird der   dann auf sichtbar gesetzt */

a:hover .marker	{
	visibility: visible;
	text-decoration: none;
	}

/* und beim Klick aendert sich die Hintergrundfarbe */

a:active .marker	{
	background: #c95;
	text-decoration: none;
	}

/* p.navbot:first-line	{ margin-left: -1em;} */

/* ---------- kombi-packungen ---------- */

p+h4, ul+h4	{
	margin-top: 1em;
	}

p+ul	{
	margin-top: -.5em;
	margin-bottom: 0;
	}

/* ---------- klassen ---------- */

.funFonts {
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	width: 95%;
	color: #493f52;
	font: bold .7em Arial, Helvetica, sans-serif;
	text-align: right;
	}

.screen	{
	display: none;
	}

.navhead	{
	background: #c95;
	color: #000;
	width: 91%;
	margin: 10px 0px -10px 0px;
	padding: 2px 1px 1px 1em;
	font: bold .75em Arial, Helvetica, sans-serif;
	}

.navbot	{
	background: #bebed1;
	color: #000;
	width: 91%;
	margin: 10px 0px -10px 0px;
	padding: 2px 1px 1px 1em;
	font: .75em/160% Arial, Helvetica, sans-serif;
	}

.navbotmain	{
	color: #000;
	width: 91%;
	margin: 10px 0px -10px 0px;
	padding: 2px 1px 1px 1em;
	font: .75em/160% Arial, Helvetica, sans-serif;
	}

.teaserhead	{
	background: #FFEEAA;
	color: #000;
	width: 91%;
	margin: 20px 0px 0px 0px;
	padding: 1px 1px 1px 1em;
	font: bold .75em Arial, Helvetica, sans-serif;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	border-bottom: 0px none #000;
	border-left: 1px solid #666;
	}

.teaser	{
	background: #EEFFAA;
	color: #000;
	width: 91%;
	margin: 0px 0px -5px 0px;
	padding: 2px 1px 4px 1em;
	font: .75em/120% Arial, Helvetica, sans-serif;
	border: 1px solid #666;
	}

.datehead	{
	background: #FFEEAA;
	color: #000;
	width: 91%;
	margin: 20px 0px 0px 0px;
	padding: 1px 1px 1px 1em;
	font: normal .6em Arial, Helvetica, sans-serif;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	border-bottom: 0px none #000;
	border-left: 1px solid #666;
	}

.related	{
	width: auto;
	max-width: 100%;
	background: #fff;
	color: #000;
	margin: 3px 8px 10px 0px;
	padding: 4px 4px 4px 10px;
	border: 1px solid #666;
	font: .8em/160% Arial, Helvetica, sans-serif;
	}

.relatedtab	{
	background: #fff;
	color: #000;
	padding: 2px 2px 4px 2px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	border-bottom: 0px none #000;
	border-left: 1px solid #666;
	font: bold .75em/120% Arial, Helvetica, sans-serif;
	text-indent: 0px;

/* -- Erklaerung fuer diesen Quatsch hier s.u. -- */

	margin-bottom: -5px;
	width: 60%;
    voice-family: "\"}\"";
    voice-family: inherit;
	width: auto;
	display: inline;
	margin: 0;
	}
html>body .relatedtab {
	}

.hurz	{
	border: 1px #666 solid;
	max-width: 100%;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 8px;
	margin-top: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	padding-right: 0px;
	padding-top: 10px;
	}


.abstract	{
	margin: .4em 0 .8em 0;
	font: bold 10pt Arial, Helvetica, sans-serif;
	}

.forumlink	{
	margin: .4em 0 .8em 0;
	padding: 3px;
	font: bold .75em/130% Arial, Helvetica, sans-serif;
	background: #CCFF99;	
	}

.hrdots	{
	background: #BBFF99 url(/img/dots.gif) repeat-x;
	height: 2px;
	font-size: 1px;
	line-height: 1px;
	margin: 0;
	padding: 0;
	}

.glossary	{
	text-decoration: none;
	border-top: 0px #000;
	border-right: 0px #000;
	border-bottom: 1px dotted #000;
	border-left: 0px #000;
	cursor: help;
	}

.fixFloat {
	float: none;
	clear: both;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	font-size; 0px;
	line-height: 0px;
	}

/* ---------- id's ---------- */

#hpmt	{
	display: inline;
	color : #000;
	font: bold 1em Arial, Helvetica, sans-serif;
  font-variant:small-caps;
	font-size : 90%;
	line-height: 100%;}

#masthead	{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 25px;
	height: 260px;
	z-index: 2;
	}

#wrapper	{
	text-decoration: none;
	background: #FFFFFF;
	color: #000;
	float: left;
	width: 100%;
	padding-top: 10px;
	}

#contenttab	{
	background: #c95;
	border: 1px solid #666;
	padding: 2px;
	margin: 0 0 -1px 35px;

/*	MSIE 5.0/Win kommt mit width: auto nicht klar, daher hier 
	erstmal eine Anweisung in Prozenten ( = prozentual zum 
	Eltern-Element, also dem div id="wrapper", der die linke 
	Spalte definiert). Nicht schoen aber effektiv.  Zum kucken 
	ob's klappt kann man hier auch eine Farbe definieren (color: 
	#f0f), die man danach wieder auf schwarz zuruecksetzt. Wenn 
	es dann in IE5 rosa wird, funktioniert der Workaround */

	width: 60%;
	overflow: visible;

/* und jetzt denkt dieser Browser, die Deklaration waere hier zu Ende */

    voice-family: "\"}\"";

/* und fuer die anderen die Aufklaerung, dass es noch weitergeht */

    voice-family: inherit;

/* und jetzt der korrekte Wert. */

	width: auto;
	display: inline;
	}

/* -- anlaesslich der ersten internationalen "seid lieb zu Opera"-Wochen -- */

html>body #contenttab	{
	width: auto;
	display: inline;
	}

/* -- ab hier wieder ganz normal ohne Workarounds -- */

#content	{
	text-decoration: none;
	background: #FFFFFF;
	color: #000;
	float: left;
	width: 77%;
  margin: 30px 50px 20px 0px;
	padding: 30px 10px 1em 20px;
	border: 1px solid #666;
  top: 10px;
  left: 120px;
  position: absolute;
	}

#datefield	{
  left: 10px;
  top: 395px;
	width: 22%;
  position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	}

#navigator	{
	text-decoration: none;
  left: 10px;
  top: 40px;
	width: 22%;
  position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	}

#navigatorbild	{
  top: -10px;
  left: -10px;
	margin: 0;
	z-index: -1;
	}

#help	{
	background: #FFFFFF;
	color: #000;
	width: 35%;
	height: 5%;
  position: absolute;
  left: 10px;
  top: 10px;
	font: bold 1.1em Arial, Helvetica, sans-serif;
	padding: 1px 1px -4 1em;
	border: 1px solid #666;
}

#whereami	{
	background: #FFEEAA;
	color: #000;
	width: 35%;
	height: 5%;
  position: absolute;
  top: 10px;
  right: 0px;
  float: right;
	font: bold 0.8em Arial, Helvetica, sans-serif;
  margin: 0px 20px 0px 10px;
	padding: 1px 15px 0px 1em;
	border: 1px solid #666;
  text-align: right;
}

#banner	{
	float: right;
	margin: 10px 5px 5px 5px;
	}

#logo	{
	background: #bebed1;
	color: #fff;
	text-align: right;
	width: 95%;
	margin: 0;
	}

#gps	{
	background: #9a9ab7;
	color: #fff;
	margin: 0;
	padding: 2px 2px 2px 2px;
	font: bold .75em Arial, Helvetica, sans-serif;
	}

#footer	{
	background: #FFFFFF;
	color: #000;
	margin: 0px -8px 30px -8px;
	padding: 2px 2px 2px 2px;
	text-align: center;
	font: normal .6em/120% Tahoma, Arial, Helvetica, sans-serif;
	}

#whodunit	{
	color: #fff;
	font: bold .75em/130% Arial, Helvetica, sans-serif;
	width: 95%;
	margin: 20px 0;
	}

#bottomnav	{
	margin: 0;
	padding: 20px 2px 2px 2px;
	font-weight: bold;
	text-align: center;
	}

#bottomnav img 	{
	vertical-align: middle;
	}


/* ---------- nur fuer formulare ---------- */

legend, input, textarea	{
	color: #000;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 130%}

label	{
	cursor: pointer;
	}

legend	{
	font-size: .75em;
	background: #FFEEAA;
	}

fieldset	{
	border: 1px #666 solid;
	background: #CCFF99;
	}

input, textarea	{ background: #eee;
	margin: .4em;
	}

input:focus, textarea:focus	{
	font: .75em/130% Arial, Helvetica, sans-serif;
	color: #000;
	background: #fff;
	}

.acc	{
	font-weight: bold;
	color: #444;
	}

.form	{
	background: #ebebf2;
	}

/* ---------- gilt nur fuer zum beim drucken tun ---------- */

@media print {
h4	{
	page-break-after: avoid;
	page-break-inside: avoid;
	}
blockquote	{
	page-break-inside: avoid;
	}
ul, ol, dl	{
	page-break-before: avoid;
	}
}

/* ---------- allgemeiner krempel, nicht beachten ---------- */

:focus	{
	outline: 1px dotted invert;
	}

/* -- und nochwas fuer Opera -- */

html>body, html>body div, html>body p, html>body th, html>body td, html>body li
	{
	font-family: Arial, Helvetica, sans-serif
	}

html>body .imglink	{
	background: none
	}