/*=======================================================================
Verantwortlich für das Layout in der Breite sind:

td.container
td. navi-left
table.header
table.navi-top

Massgebend für die GESAMT-BREITE der Website ist "td.container" UND "td.navi-left" (und in der "td.navi-left" enthaltene "Buttonwerbung in
Navi links"). Die Gesamtbreite in "td.navi-left" ergibt sich aus den Angaben: width, padding-right, padding-left.

Abschlusslinie unten auf der ganzen  Layout-Breite wird im footer angelegt.   

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




/*=======================================================================
Standard-Links (Links im Text)  
=======================================================================*/

	a:link {									/* Standardfarbe des Links */
	color: blue
	}
	a:visited {								/* Farbe der bereits besuchten Links */
	color: purple
	} 
	a:hover {
	color: blue;
	text-decoration: none
	}
	a:active {								/* Farbe des zuletzt besuchten Links */
	color:  teal /* red, grey */
	}
	
/*=======================================================================
Links Footer und Stichwörter
=======================================================================*/

	a.footer {
	text-decoration: none;
	color:  #808080
	}
	
	a.footer:link {
	color:  #808080
	}
	
	a.footer:visited {
	color:  #808080
	}
	
	a.footer:hover {
	color:  #808080
	}
	

/*=======================================================================
Links im Bereich Copy
=======================================================================*/

	a.copy {
	text-decoration: none;
	color:  #000000;
	}
	
	a.copy:link {
	color:  #000000
	}
	
	a.copy:visited {
	color:  #000000
	}
	
	a.copy:hover {
	color:  #000000
	}
	

/*=======================================================================
Navigations-Bereich oben (Top)
Entwurf: Wenn der ganze linke Bereich (Navigation, Buttonwerbung in Navi links) nicht erwünscht ist, denn
Code wie in der Datei main.htm aufgeführt entfernen.
=======================================================================*/

	table.navi-top {
	width:100%;
	border: 1px solid;
	border-color: red;
	padding: 10px; 								/* Abstand zum Rand 10 px*/
	background-color: green;					/* rot cd2626, grau e3e3e3 Hintergrund der Zelle Navi */
	}


/* Links Navi-Top.  a.navi gibt die Basis-Eigenschaften für a.navi:link, usw. vor 
---------------------------------------------------------------------------*/

	a.navi-top {
	color:  #ffffff;
	font-weight: normal;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica;
	}
	a.navi-top:link {
	color: #ffffff
	}
	a.navi-top:visited {
	color: #ffffff
	}
	a.navi-top:hover {
	color: #ffffff;
	text-decoration: none
	}
	a.navi-top:active {
	color: #ffffff
	}	
	
/*=======================================================================
Generelle Seiteneigenschaften: Hintergrund ausserhalb Layout, Schriften
background-image:url(../images/back.gif); /* Hintergrundbild ausserhalb Template. Wenn kein Bild gewünscht,
sondern nur Farbe, dann: background-color: #000000
=======================================================================*/

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #ffffff; /* grau = #afafaf */
	margin-top:0px;
	text-align:center;							/* Tabelle zentrieren für veraltete Browser*/
	margin-left:auto; margin-right:auto;			/* Tabelle zentrieren */
	/* background-image: url(../images/XXXX.gif); */
	/* background-repeat: repeat-x; */
	} 

/*=======================================================================
Tabelle "main" bestimmt... (noch nicht installiert in main.htm)
=======================================================================*/

table.main {
	border: 0px solid;
	background-color: #ffffff;
	background-image:url(../images/XXXXX.gif);
	background-position:right;
	background-repeat:repeat;
	}


/*=======================================================================
Layout Formatierung (Massgebend für die GESAMT-BREITE der Website ist "td.container" UND "td.navi-left")

td.container betrifft den Bereich "Inhalt", "AdSense" inkl. Hintergrund unterhalb AdSense.

Hinweis: "Buttowerbung in Navi links" gibt die Mindestbreite von "td.navi-left" vor.

BREITE (width). Angabe 100%,wenn das Layout die ganze Bildschirmbreite ausfüllen soll. Ansonsten Eingabe einer
Pixelanzahl.

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

	td.container { 
	width:100%;									 
	vertical-align: top;
	background-color: #ffffff; /*#339966 = grün */
	background-image:url(../images/XXXXX.gif);
	background-position:right;
	background-repeat:repeat-y;
	border-bottom: 1px dotted #008b45; 		/* Rand unten */
	border-right: 1px dotted #008b45;			/* Rand rechts */
	}


/*=======================================================================
Content (Websiteinhalt, d.h. die einzelnen HTM-Dateien) inkl. Spalte rechts

Wann wird "table.content bzw. width" gebraucht? "width" wird dann gebraucht, wenn ich mit einer "Spalte rechts" (td.rechts)  auf der
Seite arbeite. Grund: Abstand der Spalte zum rechten Rand. Durch das prozentuale Verkleinern der Tabelle
entststeht zwischen der Spalte und dem rechten Rand einen Abstand.

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

	table.content {
	width: 95%;
	background-color: #ffffff;
	}

/*td.content ist der Zellenbereich der Tabelle "table.content", wo der Seiteninhalt aufgeführt wird.
"Spalte rechts" gehört nicht dazu
---------------------------------------------------------------------------*/

	td.content {
	width: 100%;
	text-align: left;
	vertical-align: top;
	padding-top: 15px; /*Abstand zum Rand */
	padding-left: 0px;
	padding-right: 30px;
	}
	
/*=======================================================================
Rechte Spalte innerhalb der Tabelle "content"
In einer Zelle von table.content habe ich eine Tabelle eingefügt. Nachstehende Parameter beziehen sich auf
die Tabelle und die Zelle dieser eingefügten Tabelle.
=======================================================================*/

	table.spalte-rechts {
	width: 170px;									/*Breite der Tabelle */
	margin-top: 60px;								/* 15px Abstand zum Rand */

	}
	
	td.spalte-rechts {
	font-size:13px;
	height: 400px;
	vertical-align: top;
	padding: 10px;
	border: 1px solid;
	border-color: #B3B3B3; 		 /*#ededed */ 
	background-color: #EDFBD2; /* #FEF9D4  Hintergrund Gelb */
	}


/*=======================================================================
Content Boxen (Horizontale Boxen innerhalb von Content)
=======================================================================*/

	table.box1-bgc {
	border: 1px solid;
	border-color: #B3B3B3; 		 /*#ededed */ 
	width: 100%;
	background-color: #FFCCCC; /* #FEF9D4  Hintergrund Gelb */
	}
	
	td.box1-bgc {							
	padding: 10px								/* Abstand zum Tabellenrand */
	}
	
	
	table.box1-trans {
	border: 1px solid;
	border-color: #B3B3B3;  		/*#ededed */ 
	width: 100%;
	}

/*=======================================================================
Zellen innerhalb Content-Boxen
=======================================================================*/

	td.bg-zelle-1 {
	background-color: #ededed; 					/* Zellehintergrund grau  #ededed #e8e8e8  #e3e3e3 */
	}
	
	td.vert-balken {
	background-color: #d32c2c;  				/* Zellehintergrund rot  #ff0000 */
	}

/*=======================================================================
Zellen innerhalb Content-Boxen - Beispiel: Mehrere TESTIMONIAL in der gleichen Tabelle mit Foto links
Vorgehen: "Transparente" Tabelle ohne CSS erstellen. Die Zellen dann mit nachstehenden Befehlen steuern.
=======================================================================*/	
	
	td.testim-box-rechts {
	font-family: Arial, Helvetica;
	font-size: 12px;
	border-top: 1px solid;
	border-left: 0px solid;
	border-right:1px solid;
	border-bottom: 1px solid;
	border-color: #666666; /* 333333 666666 #B3B3B3 */
	padding: 10px; /* Abstand zum Rand 10 px*/
	background-color: #EDFBD2; /* rot cd2626, grau e3e3e3 Hintergrund der Zelle Navi */
	}
	
	td.testim-box-links {
	width: 50px;
	border-top: 1px solid;
	border-left: 1px solid;
	border-right:0px solid;
	border-bottom: 1px solid;
	border-color: #666666; /* 333333 666666 #B3B3B3 */
	padding: 10px; /* Abstand zum Rand 10 px*/
	background-color: #EDFBD2; /* rot cd2626, grau e3e3e3 Hintergrund der Zelle Navi */
	}	


/*=======================================================================
Tabelle Zitate (Rahmen mit Hintergrundfarbe)
=======================================================================*/

	table.zitat {
	width: 75%;
	border: 1px solid;
	border-color: gray; /* rot #d32c2c;*/
	background-color: #EDFBD2; /* helles grün C1FFC1 */
	text-align: center;
	}
	
	.zitat {
	font-family: Arial, Helvetica;
	font-size:18px;
	font-weight:normal;
	font-style:italic;
	color: #4E7F2D;				/* #d32c2c; */
	padding: 5px
	}


/*=======================================================================
Tabelle "Inhaltsverzeichnis" (siehe Seminare auf ak)
=======================================================================*/

	table.inhaltsverzeichnis {
	width: 100%;
	border: 	0px solid;
	}
	
	td.inhaltsverzeichnis {
	border: 1px solid;
	border-color: gray; /* gray rot #d32c2c;*/
	padding: 10px
	}

/*=======================================================================
Rahmen/Tabelle "Hier klicken"
=======================================================================*/
	
	table.hier-klicken {
	border: 1px solid;
	border-color: #000000; 
	background-color: #FEF9D4;
	text-align: center;
	width: 450px; /* 380 */
	font-size: 26px;
	}

/*=======================================================================
Zwischenbalken ganze Breite direkt unterhalb Header
=======================================================================*/
	
	td.zwischenbalken-links {
	height:0px;
	background-color:#ffffff;
	border-top: 0px;
	border-left: 	0px;							/*0px dotted #ffc519; */
	border-bottom: 0px 							/* 1px dotted #ffc519; */
	}
	
	td.zwischenbalken-rechts {
	background-color:#ffffff;
	border-top: 0px;
	border-right: 0px;							/*0px dotted #ffc519; */
	border-bottom: 0px 							/* 1px dotted #ffc519; */
	}

/*=======================================================================
Feld "Topwerbung" unterhalb Header bzw. oberhalb Container (Ist der Bereich, wo Content und AdSense
drinnen enthalten sind.
=======================================================================*/
	
	table.topwerbung {
	width:100%;
	background-color:#339966;
	border-bottom: 1px dotted #ffc519;
	}

/*=======================================================================
AdSense (rechte Seite)
Der Abstand vom rechten Rand und zwischen der Tabelle "AdSense" und Websiteinhalt links wird in der Datei
"footer.htm" vorgenommen. Konkret in den zwei Tabellenzellen td. oberhalb der PHP-include-Zeile. Wenn keine
AnSense-Anzeige gewünscht, denn Code wie in der Datei "footer" vermerkt entfernen .
=======================================================================*/
	
	table.adsense {
	width:120px;
	margin-right: 25px;
	margin-top: 60px;								/* 15px Abstand zum Rand */
	background-color: #EDFBD2;
	border: 1px dotted #ffc519;
	}
	
/*=======================================================================
Navigations-Bereich (td.navi-left) links ist nebst "td.container" massgebend für die GESAMT-BREITE der Website

Wenn der ganze linke Breich (Navigation, Buttonwerbung in Navi links) nicht erwünscht ist, denn Code wie in
der Datei main.htm aufgeführt entfernen.

"table.navi-left" (witdh) bestimmt nur die Breite der Navigation, nicht jedoch die GESAMTBREITE der ganzen linken Spalte.
Diese wird durch die Zelle "td.navi-left" bestimmt. Zu dieser Breite  kommen noch die "padding-Anstände" dazu
= Gesambreite der linken Spalte. - Zu beachten ist, dass der Navibutton" eine Mindestbreite von "td.navi-left" vorgibt.

Die Ausrichtung der Elemente im ganzen linken Bereich td.navi-left muss in der Datei "main" im Bereich "Navigation links" erfolgen.
=======================================================================*/

	table.navi-left {
	width: 150px								/* Wenn das Layout eine bestimmte Pixelbreite hat, Eingabe 100%. Wenn ganze Bildschirmbreite, Eingabe von Pixel */
	}

	td.navi-left { 
	width:150px;
	background-color: #B6E074;					/* ORIGINAL Grün#339966; */
	padding-top:23px;							/* 66px Padding legt den Abstand zwischen dem Inhalt und den Rändern (border) fest - Top = Abstand bis Header */
	padding-right:15px;
	padding-left:10px;
	padding-bottom:4px;
	}
	
	td.naviheader-left {
	height:20px;
	background-color: #77A448;					/* Hintergrund Naviheader */
	color:#ffffff; 								/* Schrift Naviheader */
	font-weight:bold;
	font-size:12px;
	padding-left:5px;	
	}
	
	td.abstand-naviheader {						/* Abstand von Naviheader zum jeweils oberen Naviblock */
	height:15px
	}

/* Links navi-left.  a.navi-left gibt die Basis-Eigenschaften für a.navi-left:link, usw. vor
---------------------------------------------------------------------------*/

	a.navi-left {
	display:block;
	margin-right:1px;
	padding-top:2px; /* 4px */
	padding-right:0px;
	padding-bottom: 1px; /* 4px */
	padding-left:5px;
	background-color: #B6E074; 					/*59B38C 66cc99 Hintergrund der einzelnen Navikasten */
	border-bottom: 1px dotted #006633;	
	/* background-image:url(../images/naviteiler.gif); */
	background-repeat:repeat-x;
	background-position:bottom;
	}
	
	a.navi-left:link, a.navi-left:visited, a.navi-left:hover, a.navi-left:active {
	font-family:Arial,Helvetica, sans-serif;
	font-size:12px;
	color: #006633;								/*  Schriftfarbe */
	text-decoration:none;						/* underline */
	font-weight: normal
	}

	a.navi-left:hover {
	background-color:#EDFBD2;					/* Farbe der Hintergrundbox, wenn Cursor über Link ist */
	color:#273F17;  							/* Schriftfarbe, wenn Cursor über Link ist */
	font-weight: normal;
	}

/*=======================================================================
Buttonwerbung in Navi links
=======================================================================*/

	table.navi-left-werbung {
	width:90px;									/* Passend für Buttons 88x31 */
	background-color: #B6E074;
	border: 1px dotted #B6E074;					/* 1px dotted #fef9d4; */
	}

/*=======================================================================
Überschriften
=======================================================================*/		

	h1, h2, h3, h4, h5, h6  {
	font-family: Arial, Helvetica, sans-serif;
	}
	
	h1 {
	color: #4E7F2D;
	font-size: 26px;
	letter-spacing:-0.05em /* Zeichenabstand */
	}
	
	h2 {
	color: #4E7F2D;
	font-size: 18px;  /* 16 */
	}
	
	h3 {
	font-family: arial, helvetica;
	color: rgb(0,0,0); 
	font-size: 16px;
	}
	
	h4 {
	color: rgb(0,0,0);
	}
	
	h5 {
	color: rgb(0,0,0);
	}
	
	h6 {
	color: rgb(0,0,0);
	}

/*=======================================================================
Schrift Normal / jetzt kaufen / zurück
=======================================================================*/

	p { 
	font-size: 16px;
	color: rgb(0,0,0);
	}
	
	.p2 {
	font-size: 10px
	}
	
	.p3 {
	font-size: 15px
	}
	
	.p4 {
	font-size: 28px; color: #ff0000;
	font-weight:bold;
	}
	.p5 {
	font-size: 18px
	}
	
	.p6 {
	font-size: 48px; color: #ff0000
	}
	
	.p7 {
	font-size: 24px
	}
	
	.jetzt-kaufen {
	font-size: 20px;
	color: #d32c2c;
	}
	
	.zurueck {
	font-size: 16px
	}
	
	.schrift-spalte-rechts {
	font-size: 14px
	}
	
/*=======================================================================
Schrift Bestellung
=======================================================================*/

	.b10 {
	font-size: 15px;
	font-weight:bold;
	color: #d32c2c;
	}
	
	.b11 {
	font-size: 13px
	}
	
	.b12 {
	font-size: 18px;
	color: #d32c2c;
	font-weight:normal;
	}
	
	.b13 {
	font-size: 40px;
	color: #ff0000;
	}
	
/*=======================================================================
Testimonials im "normalen" Websitetext
=======================================================================*/
	
	.testim-im-normalen-text  { 
	font-size: 22px;
	font-weight:normal;
	font-style:italic;
	text-align: center;
	font-family: Times, Verdana,Arial, Helvetica;
	}


/*=======================================================================
 Aufzählung
 ul { list-style:none; }  ul li { background:url('bullet.gif') 
=======================================================================*/	

	ul {
	list-style: disc; 								/* list-style-image: url(../images/aufzp.gif) */
	margin-left: 16px; 							/* Abstand linker Rand */
	padding : 0;  								/* Abstand Aufzählungszeichen bis Text */
	font-size: 13px;
	font-family: Verdana, Arial, Helvetica;
	}

	.ul2 {
	list-style: none;
	background:transparent url(../images/aufzp.gif) no-repeat 0px 15%;
	margin-left: 0px; 							/* Abstand linker Rand */
	margin-top: 0px; 							/* Abstand oberer Rand bzw. Text */
	margin-bottom: 10px;						/* Abstand unterer Rand bzw. Text */
	padding-left: 20px; 							/* Abstand Aufzählungszeichen bis Text */
	width: 100%;
	}

/*=======================================================================
Schrift Copyright
========================================================================*/	

	font.copy {
	font-family: Arial, Helvetica;
	font-size:10px;
	color:#000000;
	}

/*======================================================================
Table "Fusszeile"
=======================================================================*/

	table.fusszeile {
	border: 0px solid;
	background-color:  #ffffff; /*#afafaf; */
	text-align:center;							/* Tabelle zentrieren für veraltete Browser*/
	margin-left:auto; margin-right:auto;			/* Tabelle zentrieren */
	font-size: 13px;
	color: #808080; 							/* Schriftfarbe */
	}
	
/*======================================================================
Table Header steuert die Tabelle wo der Header drinnen ist. Hier ist auch das background-images.
=======================================================================*/

	table.header {
	width: 100%;
	height:100%px; 								/* Wenn Header-Grafik Eingabe 100% */
	text-align:left;								/* Ausrichtung Header-Grafik */
	background-image:url(../images/header-bg-repeat.gif);
	background-position:right;
	background-repeat:repeat-x;
	}