/* =============== Layout Anzeige ======================= 
2008-03-11 neuer Anfang (Vorläufer zimt.css/schr.css)
           + Denken in Containern
	   + dort: Attribute systematisch sortiert halten!
		* Ausgabeart
                * Positionen & Ränder
		* Schriftart, -größe, -ausrichtung
		* Wortabstände
		* Farben
		* Sonst.
	   + body mit sans-serif als Unterlassung 	 
           + erinnere
             alt: file:/dos/e:/lin/ht/birk/test/schr/schr.css
             2005-10-00 cursor url mit einfachen Hochkommas
             2005-10-14 Geht alles sinnvoll nur bei CSS2-Standart
                        Hochkommas um url weggelassen, = Validator mockierte.
             2005-11-13 Anführungszeichen statt Hochkommas! Laut w3org! Münz war ungenau.
             2006-01-17 Problem 3. "a img", da geht bei NS, aber nicht bei IE!
             2006-09-29 font-face abgeschaltet wegen 404-Meldungen
             2007-08-10 Seitenplaungsdirektiven in Dokumetation eingeführt FARBEN
             2007-10-26 doch wieder Teufel-Cursor 
             2007-12-06 ja ja, aber doch bitte überall auch den vollen (absoluten) Pfad (wegen 404)
	     2008-01-13 Problem Tabellenzentrierung gelöst, text-align:center ging ja nicht
	     2008-02-20 Eingabe Monatsziffer nicht linksbündig, sondern zentriert	
*/
/* =============== Geltungshierarchien, Übersicht =========
a) es gilt das DOM = in Containern denken
b) es gilt die Hierarchie der Angabenorte
c) es gilt die Hierarchie der Angabenarten
alles in Mischung! Wer blickt's perfekt? Diverse Buchauthoren/Buchautoren
jedenfalls nicht.

a) DOM = Welche tags dürfen innerhalb welcher tags vorkommen? 
   z.B. Obertag h Untertag i, oder Obertag p Untertag img 

b) Angabenorte 
   0. wenn nichts definiert ist, dann gilt Vorgabe durch HTML
   1. es gilt was extern via CSS-Datei definiert ist
   2. aber Vorrang haben Formatdefinitionen im Header
 
Dies gilt für zentrale Formate
Innerhalb von 1.und 2./3. gilt dann:

c) Angabenarten 
   1. zentrale Formate (body, ...)
   2. Verschachtelungs-Formate 
      = DOM-orientiert, also wenn ein Unter-tag
        NUR DANN ein bestimmtes Format haben soll, 
        wenn es innerhalb einem bestimmten Obertag
        vorkommt. Schwieriger in der Nachvollziehbarkeit als
	Unterklassenformate.OHNE Zwischenpunkt schreiben.
        z.B. Obertag a, dann sollen alle Bilder rechts sein
             a img    text-align:right            
   3. Unterklassen-Formate, tag-spezifisch = class
      + Hierarchie innerhalb
   4. unabhängige Formate = id 
      = Verwendung auf beliebige tags, nicht tagspezifisch 
        Formatangaben addieren sich zu bereits vorhandenen Vorgaben,
        im Konfliktfall haben sie Priorität 
   5. Pseudo-Formate 
      = ähnlich unabhängige Formate, aber eingeschränkt
      5.1. doch tag-zugeordnet, mit Doppelpunkt
           z.B. für <a ...></a> 
                a:link {color:#bbddff;background-color:#000000;}
                a:visited {color:#bbddff;background-color:#000000;}
                a:active {color:#ee0000;background-color:#000000;}
                a:hover { 
                	color: #ff0000; 
                        background-color:#000000;
                        text-decoration: underline; 
                	cursor:url("teufel.cur"),default;  
                }
       5.2. ziemlich tag-unabhängig 
            .achtung {DISPLAY:none;} 
            .printonly {VISIBILITY:visible;}
            .screenonly {VISIBILITY:hidden;}
   6. Schnellformatierung im HTML-Text 
      auch inline-Formatierung genannt = höchste Priorität 
      tag-Parameter style="xyz;" 


=========================================================== */
/* ===== 0. Planungsdokumentation ====  WICHTIG

FARBEN
	 text="       "  
         link="       "  default
        vlink="       "  dito 
        alink="       "  default
      bgcolor="       "  schwarz
aber in Menümatrix invers!


*/ 

/* ===== 1. zentrale Formate ===== */

body	{
        font-family:Helvetica,sans-serif;
	color:#ffffff;  
	background-color:#000000; 	
	/* restliche Farben bei Pseudoformate 5.1. */
	/* text-align:center; */
        }

h1
    	{
	text-align:center;
	}



table	{
	/* Zentrierung einer Tabelle (nur?) mit 
	width + margin-left + margin-right ZUSAMMEN
	text-align:center; zentriert den Text in der Tabelle innen! 
	width:580px; ist kontraproduktiv, da absolut. Bei Rechnung
	nie ganz auf 100% gehen wegen Browser Rundungsreserve */
	width:70%;
	margin-left:14%;
	margin-right:14%;
 	/* border:solid;
	border-width:1px; */
        border-collapse:collapse;
	color:#330033;
	background-color:#ffffff;
	}

th,td	{
	border:solid;
	border-width:1px;
        border-collapse:collapse;
	/* text-align:justify; sieht manchmal zu bescheuert aus */
	}


hr	{
	border-width:1px;
	}

input	
	{
	font-size:+100%;
	}

textarea
	{
	font-family:Helvetica,sans-serif; 
	border:solid;
	border-width:1px;
	/* background-color:#ffffdf; Achtung mach Textcursor fast unsichtbar daher*/
	background-color:#ffffef; /* auch wenn Feld dann gelegentlich weiß statt gelblich ist */
	/* das Problem liegt aber ansich beim dünnen blassen Helevtia-Cursor */
	/* cursor:default; bringt nix */
	/* color:#000000; bringt nix */
	/* padding:3% 3% 3% 3%; macht nur scheinbar breiter ...*/
}


/* ===== 2. Verschachtelungs-Formate ===== */

/* = DOM-orientiert, also wenn ein Unter-tag
   NUR DANN ein bestimmtes Format haben soll, 
   wenn es innerhalb einem bestimmten Obertag
   vorkommt. HNE Zwischenpunkt schreiben.

td ul 	{
	text-align:left;
	}

table img	
	{
	text-align:right;
	}



/* h3-Überschriften in einer Tabelle zenteriert dort */
table h3
	{
	text-align:center;
	}


/* Verweisknopf im Formular, soll aussehen wie input-submit */
form a
	{
	text-decoration:none;
	/* display:block; machte auch neue Zeile! */
	/* width:160; nur für block */
	/* border:1px solid #333333; */
	border:2px outset #A9A9A9;
	padding:2px;
	margin:1px; 
	/* font-family:verdana,arial,helvetica,sans-serif; ohne war besser */
	font-size:16px;
	/* font-weight:bold; */
	/* text-align:center; */
	color:#000000;
	background-color:#B9B9B9;
	vertical-align:+4px;
	}

/* ========== 3. Unterklassen-Formate = class ========== */ 
/* tag-spezifisch mit class="..." auszuweisen */ 

/* 2007-12-06 stillgelegt, da nirgends verwendet 
hr.center {background-position:center;} */

/* Textblock zentral ausgerichtet, kam vor 2007-12-06 bei
/home/ht/mp/mp.shtml:170:<p class="zentral" align="center">
/home/ht/mp/mp.shtml:176:<p class="zentral" align="center" id="logo">
/home/ht/mp/foto06/zg06.htm:88:<p class="zentral" align="center">
/home/ht/mp/mplnk.shtml:27:<p class="zentral" align="center">
/home/ht/mp/ton/frei/mptonf.html:32:<p class="zentral" align="center">
/home/ht/mp/ton/mpton.html:28:<p class="zentral" align="center">
/home/ht/mp/ton/gema/geheim.html:30:<p class="zentral" align="center">
/home/ht/mp/ton/gema/mptong.html:43:<p class="zentral" align="center">
/home/ht/mp/int/mpint.html:39:<p class="zentral" align="center">
/home/ht/mp/int/geheim.html:27:<p class="zentral" align="center">
/home/ht/mp/mpkon.html:24:<p class="zentral" align="center">
/home/ht/mp/mpemail.html:26:<p class="zentral" align="center">
p.zentral {
	background-position:center;
	text-align:center;	
	}
*/

form.Menue,ul.Menue /* nur für die Formular-Texteingabe linksbündig */
	{
	text-align:left;
        width:70%;
	margin-left:14%;
	margin-right:14%;
	}
/*
a.validator
	{
	background-position:right;
	text-align:right;	
	}
*/

/* 2007-12-06 stillgelegt, war ursprünglich für technische Bildchen
unten rechts vorgesehen
p.rechts {
	background-position:right;
	text-align:right;	
	}
*/

 
/* ========== 4. unabhängige Formate = id ========== */
/* Verwendung auf beliebige tags, nicht tagspezifisch */
/* Formatangaben addieren sich zu bereits vorhandenen Vorgaben,
   im Konfliktfall haben sie Priorität */

#validator
	{
	/* background-position:right; 2008-02-27 weg */
	text-align:right;	
	float:left; 
	/* margin-left:85%; */
	}


#zaehl {
	color:#660000;
        background-color:#000000;
        font-family:Impact,sans-serif;
        letter-spacing:2pt;
	word-spacing:4pt;
        font-variant:small-caps;
        font-style:normal;
	font-size:20px
	}


/* ===== 5. Pseudo-Formate ===== */
/* ähnlich unabhängige Formate, aber eingeschränkt, */

   
/* ===== 5.1. doch tag-zugeordnet ===== */
/* mit Doppelpunkt */
/* ----- für <a ...></a> ----- */
/* 2008-01-11 mal alles stillgelegt */
/*
a:link {color:#bbddff;background-color:#000000;}
a:visited {color:#bbddff;background-color:#000000;}
a:active {color:#ee0000;background-color:#000000;}
a:hover { 
	color: #ff0000; 
        background-color:#000000;
        text-decoration: underline;
	cursor:url("teufel.cur"),default;  bis 2007-12-06 
        cursor:url("http://www.megapolis.name/gem/teufel.cur"),default;        
	}
*/

/* ===== 5.2. ziemlich tag-unabhängig ===== 
		* Ausgabeart       
                * Positionen & Ränder
		* Schriftart, -größe, -ausrichtung
		* Wortabstände
		* Farben
		* Sonst.

   ----- 5.2.1. für Ausgabearten ----- */
.achtung {DISPLAY:none;} 
.printonly {VISIBILITY:visible;}
.screenonly {VISIBILITY:hidden;}

/* ----- 5.2.2. Positionen & Ränder ----- */

/* ----- 5.2.3. Schriftart, -größe, -ausrichtung ---- */
/* ---------- 5.2.3.0. browserintegrierte Schriftartnamen-typen ---------- */
/* Vorgabe = Voreinstellung des jeweilgen Browsers */

/*
.Vorgabe {color:#ffffff;}

.Geneva {font-family:Geneva;color:#ffffff;} 
.Impact {font-family:Impact;color:#ffffff;} 
.Helvetica{font-family:Helvetica;color:#ffffff;} 
.Courier {font-family:Courier;color:#ffffff;} 
*/

/* eher allgemeine Schfttypen 
.ncsb {font-family:"new century schoolbook";color:#ffffff;} 
.csb {font-family:"century schoolbook";color:#ffffff;} 
.Times {font-family:Times;color:#ffffff;} 
*/

/* ---------- 5.2.3.1. generische Schrifttypen ---------- */
/* ---------- 5.2.3.1.1. definiert via generischer Klasse ---------- */
.monospace 
	{
        font-family:monospace;
	color:#ffffff;
	background-color:#000000;
	} 

.sans-serif 
       	{
	font-family:sans-serif;
	color:#ffffff;
	background-color:#000000;
	} 
/*
.serif {font-family:serif;color:#ffffff;background-color:#000000;} 
.cursive {font-family:cursive;color:#ffffff;background-color:#000000;} 
.fantasy {font-family:fantasy;color:#ffffff;background-color:#000000;} 
*/

/* ---------- 5.2.3.2. Schriftvariante = font-variant ---------- 
   Kapitälchen 2007-12-10 ersatzlos weggefallen, da optisch Bockmist */

/* ---------- 5.2.3.3. Schriftgröße ---------- 
.grel150{font-size:150%;color:#ffffff;background-color:#000000;}
.gabs20{font-size:20pt;color:#ffffff;background-color:#000000;}
  ---------- 5.2.3.4. Schriftgewicht ---------- 
.fett{font-weight:bold;color:#ffffff;background-color:#000000;}
*/


/* ---------- 5.2.3.4. geladene Schrifttypen ---------- */
/* ----- ZUNÄCHST generischer Schrifttyp als Ersatzlösung für IE ----- */
/*
.Impacttest
	{
	font-family:Impact,sans-serif;
	color:#ffffff;
        background-color:#000000;
        letter-spacing:4pt;
        word-spacing:4pt
	}
*/
/* ---------- 5.2.3.4.1. aus eigenem Webspace ---------- */
/*
@font-face 
	{
	font-family:sfsq-ttf;
        src:url("sfsq.ttf")format("truetype");
        }
.sfsq-ttf 
	{
        font-family:sfsq-ttf,sans-serif;
        color:#ffffff;
	background-color:#000000;	
        }  
*/

/* ----- 5.2.4. Abstände ---- */
/* ---------- 5.2.4.1. Wortabstand ---------- */
.wab1em
	{
	word-spacing:1em;
	color:#ffffff;
	background-color:#000000;
	}

.wab4pt
	{
	word-spacing:4pt;
	color:#ffffff;
	background-color:#000000;
	}

.wab3pt
	{word-spacing:3pt;
	color:#ffffff;
	background-color:#000000;
	}

/* ---------- 5.2.4.2.Zeichenabstand ---------- */
.zab1em
	{
	letter-spacing:1em;
	color:#ffffff;
	background-color:#000000;
	}

.zab4pt
	{
	letter-spacing:4pt;
	color:#ffffff;
	background-color:#000000;
	}

/* ----- 5.2.5. Farben ----- */
/* ----- 5.2.6. Sonst. ----- */


/* ===== 6. Schnellformatierung im HTML-Text ===== */
/* auch inline-Formatierung genannt = höchste Priorität */
/* tag-Parameter style="xyz;" */



