/*
( Hilfe -> Ende dieses Textes )
*/



*                 /* Grundeinstellungen */
{ font-size        : 18px;
  font-family      : "Century Gothic",
                     "palatino linotype",
                     "trebuchet ms",
                     "verdana",
                     "georgia",
                     "helvetica",
                     "comic sans ms",
                     "garamond",
                     "tahoma",
                     "sans-serif";

  font-style       : normal;
  font-variant     : normal;
  font-weight      : normal;

  word-spacing     : 0.1em;
  letter-spacing   : 0.03em;

  text-decoration  : none;
  text-transform   : none;

  color            : rgb(102, 153, 102);
  background       : transparent;

  text-indent      : 0em;
  line-height      : 1.3em;
  vertical-align   : baseline;
  text-align       : left;

  margin           : 0em;
  padding          : 0em;
  border           : 0em; }



body              /* Hintergrundfarbe Dokument */
{ background       : url(gruen_bg.gif); }


/* Überschriften */

h1,
h2,
h3,
h4,
h5,
h6
{ padding          : 0.5em 0 0.3em 0; }

h1
{ font-size        : 2.3em; }

h2
{ font-size        : 1.6em; }

h3 
{ font-size        : 1.3em; font-weight: 600; }

h4 
{ font-size        : 1.1em; font-weight: 600; }

h5 
{ font-size        : 1em; }

h6 
{ font-size        : 0.7em; }



p                 /* normaler Textabsatz */
{ padding          : 0.7em 0 0.3em 0; }

p#laotsesspruch
{ text-align       : center;
  font-size        : 0.75em;
  margin-left      : auto;
  margin-right     : auto;
  width            : 20em; }



blockquote        /* Zitatabsatz */
{ padding          : 1em;
  color            : rgb(153, 204, 0); }





/* Verweise */

a                
{ text-decoration  : underline; }

a:hover,
a:active,
a:focus
{ color            : rgb(50, 50, 250);
  text-decoration  : none; }





/* Textauszeichnungen */

em, i            
{ font-style       : italic; }

strong, b
{ font-weight      : bold; }

u
{ text-decoration  : underline; }

big
{ font-size        : 1.2em; }

small
{ font-size        : 0.8em; }




cite              /* Zitat */
{ color            : rgb(153, 204, 0); }



/* Tabellen */
table 
{ border-collapse  : collapse;
  caption-side     : left; }



td,
th                /* Tabellenzelle, Spaltenüberschrift */
{ padding          : 0.3em 0 0.3em 0;
  vertical-align   : top;
  text-align       : left; }



table.ihre_heilpraktikerin td,
th
{ padding          : 0.3em 0 0 0; }



table.ihre_heilpraktikerin td.datum
{ text-align       : right;
  font-weight      : bold;
  width            : 5em;
  padding-right    : 1em; }





ul,
ol                /* Liste (ungeordnet) */
{ margin           : 1em 0 2em 1em;
  padding          : 0 0 0 1em; }



ul               /* Liste (ungeordnet) */
{ list-style-image : url(dot.gif); }



li                /* Listenpunkt (list item) */
{ padding          : 0 0 0 0.3em; }



hr                /* Trennlinie */
{ margin           : 2em 5em 1em 5em;
  color            : rgb(153, 204, 0);
  border-top       : 1px solid rgb(102, 153, 102);
  height           : 1px;
  clear            : both; }





/* 
Es folgen Grundstile für Elemente mit Klassennamen. 
Z.b. wird ein Element wie: 
<div class="xyz">texttexttext</div> 
so angesprochen: 
div.xyz {[stildefinitionen]}
*/
div.container,
div.content,
div.logo,
div#oben,
div#links,
div#mitte,
div#rechts,
div.datum
{ position         : relative;
  top              : 0;
  left             : 0;
  margin           : 0;
  padding          : 0;
  background       : transparent;
  text-align       : left; }



div.bg_document,
div.bg_container,
div.bg_top_container
{ position         : absolute;
  width            : 1150px;
  right            : 0;
  margin           : 0;
  padding          : 0;
  background       : url(licht.jpg) no-repeat; }



div.bg_top_container
{ top              : -5em;
  height           : 625px;
  margin           : 0;
  padding          : 0;
  z-index          : 20; }



div.bg_document,
div.bg_container
{ bottom           : 0;
  height           : 500em;
  background       : url(lichtRepeatY.jpg) repeat-y; }





/* "content" enthält allen Text auf der Seite. */
div.content
{ z-index: 100; }

div.logo {
	position: absolute;
	top: -0.5em;
	left: 4.2em;
	width: 117px;
	height: 188px;
	background: url(logo.gif);
}

/*die folgenden vier Definitionen beschreiben die Anordnungen der Hauptbereiche oben, links, rechts und in der Mitte*/
div#oben {
	text-align: center;
	margin: 3.5em 0 0 0;
}

div#links {
	float: left;
	width: 13em;
	margin: 3.0em 0 0 1em;
	padding: 0 0 0 1em;
}

div#rechts {
	display: none;
	float: right;
	width: 11em;
	margin: 2em 0 0 0;
	padding: 0 1em 0 0;
}

div#mitte {
	margin: 0 4em 0 18em;
	padding: 2em 0 3em 0;
	/*background:white;*/ /*border:1px solid rgb(153,204,0);*/
}

/*Das sind die Blätter, standardmäßig nicht sichtbar. Durch ein javascript werden sie sichtbar gemacht.*/
div#links span.blatt {
	border: 1px solid black;
	width: 1em;
	height: 1em;
	background: url(blatt.gif);
	/*display: none;*/
}

/*Die Pfeile*/
img.up,img.right,img.left,img.down {
	width: 12px;
	height: 12px;
}

img.bild {
	width: 60px;
	height: 60px;
	padding: 0 1em 0 0;
	vertical-align: text-bottom;
}

/*Ich glaube, das wird gar nicht verwendet*/
img.bild_rechts {
	float: right;
}

/* Das ist der Textanker, zu dem gesprungen wird, wenn der User auf den "Nach oben"-Link klickt. */
a.seitenanfang {
	position: relative;
	top: -100em;
}

div#links p {
	margin: 0 0 0.8em 0;
	padding: 0;
}

div#links a {
	text-decoration: none;
	border-bottom: 0px;
	font-weight: bold;
}

div#links img
{ border : 0;
  position: relative;
  top: 0.15em;
  left : 1em; }

div.impressum {
	margin: 1em 0 0 0;
	font-size: 0.8em;
	text-align: center;
}

div.impressum a {
	font-size: 1em;
}

div#oben *
{ text-align: center; }

div#oben
{ text-align: center; }

div#mitte p
{ text-align: left; }






































/*

DOKUMENTATION


Es handelt sich hier um Stildefinitionen nach dem Schema:

element {
	eigenschaft: wert_der_eigenschaft;
}

die Klammern, der Doppelpunkt und das Semikolon sind Plicht.


Beispiele
(zuerst, das, was Du HIER (ausserhalb von Kommentaren!) hineinschreibst,
dann ein Element in einem PRAXISTEXT, auf das es Wirkung hat):




p 
{ font-style : italic; }

... macht die letzten drei 'Hallo' kursiv in ...

<h1>Hallo</h1>
<a href="index.html">Hallo</a>
<p>Hallo</p>
<p class="speziell">Hallo</p>
<p id="speziell">Hallo</p>





p.versteckt
{ display : none; }

... macht das zweite und vierte 'Hallo' unsichtbar in ...

<p>Hallo sichtbar</p>
<p class="versteckt">Hallo</p>
<p>Hallo sichtbar</p>
<p class="versteckt">Hallo</p>

(Es dürfen mehrere Elemente mit dem gleichen 'class'ennamen vorkommen)




p#abstand
{ margin-top : 3em; }

... lässt das dritte 'Hallo' Abstand nehmen in ...

<p>Hallo</p>
<p class="abstand">Hallo</p>
<p id="abstand">Hallo</p>

(Eine 'id' muss dokumentweit einmalig sein)




p cite
{ color : lightgreen; }

... macht alle drei 'Hallo!' hellgrün in ...

<p>Ich zitiere den Autor: <cite>Hallo!</cite></p>
<p id="speziell">Ich zitiere den Autor: <cite>Hallo!</cite></p>
<p class="speziell">Ich zitiere den Autor: <cite>Hallo!</cite></p>





ul#ganz_wichtige_liste_mit_langer_id_die_zum_glueck_nicht_fuer_jeden_punkt_extra_geschrieben_werden_muss li {font-weight:bold;}
ul#ganz_wichtige_liste_mit_langer_id_die_zum_glueck_nicht_fuer_jeden_punkt_extra_geschrieben_werden_muss li.ausnahme {font-weight:normal;}

... markiert alle 'Hallo!' der zweiten Liste fett, ausser das letzte in ...

<ul>
   <li>Hallo</li>
   <li>Hallo</li>
   <li>Hallo</li>
</ul>
<ul id="ganz_wichtige_liste_mit_langer_id_die_zum_glueck_nicht_fuer_jeden_punkt_extra_geschrieben_werden_muss">
   <li>Hallo</li>
   <li>Hallo</li>
   <li>Hallo</li>
   <li>Hallo</li>
   <li>Hallo</li>
   <li>Hallo</li>
   <li>Hallo</li>
   <li>Hallo</li>
   <li class="ausnahme">Hallo</li>
</ul>





p cite
{ color : green; }

p#speziell cite
{ color: lightgreen; } 

... beide Definitionen wirken auf das dritte 'Hallo!',
aber die erste Definition wird von der zweiten
überschrieben in ...

<p>Ich zitiere den Autor: <cite>Hallo!</cite></p>
<p id="speziell">Ich zitiere den Autor: <cite>Hallo!</cite></p>
<p class="speziell">Ich zitiere den Autor: <cite>Hallo!</cite></p>




(Anmerkung zu 'font-family': 
Es folgen alle Grundschriftarten auf Windows Systemen (Zum Kopieren und testen): 
Arial, "Arial Black", "Arial Narrow", "Arial Unicode MS", "Bitstream Vera Sans", "Bitstream Vera Sans Mono", "Bitstream Vera Serif", "Book Antiqua", "Century Gothic", "Comic Sans MS", "Courier New", DIGIFACE, "Franklin Gothic Medium", Garamond, Georgia, Haettenschweiler, Helvetica, Impact, Kartika,"Lucida Console", "Lucida Sans Unicode", "Monotype Corsiva", "MS Sans Serif", "MS Serif", "Palatino Linotype", "Small Fonts", Tahoma, "Times New Roman", "Trebuchet MS", Verdana, Vrinda )

*/
