/*=======================================================================
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.

Rand um das Layout:

td.navi-left
td.container
td.zwischenbalken-links
td.zwischenbalken-rechts

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




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

	a:link {									/* Unbesuchte 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: Verdana, Arial, Helvetica, sans-serif;
	/* background-image: url(../images/bg-image.gif);
	background-repeat: repeat-x; */
	background-color: #EEEEEE;  /* 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; */
	} 

/*=======================================================================
Alle fettgedruckten Zeichen ( b) sollen in der Farbe X dargestellt werden 
=======================================================================*/

* b {
	color: #193477;
	}


/*=======================================================================
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 px.
=======================================================================*/

	td.container { 
	width:770px;								  /* Ausschliesslich keine Angabe "width: ;" (wenn ganze Bildschirmbreite) oder beliebige Pixel */
	vertical-align: top;
	background-color: #ffffff; /*#339966 = grün */
	background-image:url(../images/XXXXX.gif);
	background-position:right;
	background-repeat:repeat-y;
	border-left: 	1px solid gray;					/* Rand links */
	border-right: 	1px solid gray;				/* Rand rechts */
	border-bottom: 	1px solid gray				/* Rand unten */
	}


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

Wann wird "table.content bzw. width" gebraucht? "width" wird dann bebraucht, 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
enststeht 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: 0px; /*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 */
	}
	
	td.spalte-rechts {
	font-size:13px;
	height: 400px;
	vertical-align: top;
	padding: 10px;
	border: 1px solid;
	border-color: #B3B3B3; 		 /*#ededed */ 
	background-color: #FFCCCC; /* #FEF9D4  Hintergrund Gelb */
	}


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

	table.box1-bgc {
	border: 1px solid;
	border-color: #B3B3B3; 		 /*#ededed */ 
	width: 100%;
	background-color: #D7EBFF /* #FEF9D4  Hintergrund Gelb */
	}
	
	td.box1-bgc {							
	padding: 10px								/* Abstand zum Tabellenrand */
	}
	
	
	table.box1-trans {
	border: 1px solid;
	border-color: #B3B3B3;  		/*#ededed */ 
	width: 100%;
	}
	
	table.box2 {
	border: 3px dashed;			/* solid dashed dotted */
	border-color: #193477;		/*#d32c2c; */
	background-color: #d7ebff;
	padding-top:10px;
	padding-left:10px;
	padding-right: 10px;
	padding-bottom:0px;
	width:100%; 
	}
	
	table.box3 {
	border: 2px dashed;			/* solid dashed dotted */
	border-color: #193477;		/*#d32c2c; */
	background-color: #d7ebff;
	padding-top:10px;
	padding-left:10px;
	padding-right: 10px;
	padding-bottom:0px;
	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 */
	}

/*=======================================================================
TESTIMONIAL

Beispiel: Mehrere TESTIMONIAL in der gleichen Tabelle mit Foto links und Testimonial rechts - oder
nur Testimonial ohne Foto (= eine Box/Zelle)

Vorgehen: "Transparente" Tabelle ohne CSS erstellen. Die Zellen dann mit nachstehenden Befehlen steuern.
=======================================================================*/	

/* Foto in linker Box/Zelle, Testimonial in rechter Box/Zelle */

	td.testim-box-rechts {
	font-family: Arial, Helvetica;
	font-size: 12px;
	vertical-align: top;
	border-top: 1px solid;
	border-left: 0px solid;
	border-right:1px solid;
	border-bottom: 1px solid;
	border-color:#666666;
	padding: 10px; /* Abstand zum Rand 10 px*/
	background-color: #D7EBFF
	}
	
	td.testim-box-links {
	width: 150px;
	vertical-align: top;
	text-align: center;
	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: #D7EBFF; /* rot cd2626, grau e3e3e3 Hintergrund der Zelle Navi */
	}
	
/* ohne Foto - nur Testimonial (=eine Box/Zelle) */

	td.testim-box {
	font-family: Arial, Helvetica;
	font-size: 12px;
	vertical-align: top;
	border-top: 2px dashed;
	border-left: 2px dashed;
	border-right:2px dashed;
	border-bottom: 2px dashed;
	border-color:#193477;
	padding: 10px; /* Abstand zum Rand 10 px*/
	background-color: #D7EBFF
	}
	
/*=======================================================================
TESTIMONIAL im "normalen" Websitetext
=======================================================================*/
	
	.testim-im-normalen-text  { 
	font-size: 20px;
	font-weight:normal;
	font-style:italic;
	text-align: center;
	font-family: Times, Verdana,Arial, Helvetica;
	}


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

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


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

	table.inhaltsverzeichnis {
	width: 100%;
	border: 1px solid;
	}
	
	td.inhaltsverzeichnis {
	border: 1px solid;
	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 {
	width:190px;
	height:15px;
	background-color:#D1E1FA;	/* #4767A8; */
	border-top: 0px;
	border-left: 	0px solid red;							/*0px dotted #ffc519; */
	border-bottom: 0px 									/* 1px dotted #ffc519; */
	}
	
	td.zwischenbalken-rechts {
	width:580px;
	background-color:#D1E1FA;
	border-top: 0px;
	border-right: 0px solid gray;							/*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:#ffffff;
	/* 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: 15px;
	margin-top: 15px;								/*Abstand zum Rand */
	background-color: #fdfbec;
	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 dt.navi-left muss in der Datei "main" im Bereich "Navigation links" erfolgen.
=======================================================================*/

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

	td.navi-left { 
	width:160px; 
	border-left: 	1px solid gray;
	border-bottom: 	1px solid gray;
	background-color: #D1E1FA;
	padding-top:0px;							/* Padding legt den Abstand zwischen dem Inhalt und den Rändern (border) fest - Top = Abstand bis Header */
	padding-right:15px;
	padding-left:15px;
	padding-bottom:4px;
	}
	
	td.naviheader-left {
	height:20px;
	background-color: #5770B2;					 /* #4767A8;  #ffc519 Hintergrund Naviheader */
	color:#ffffff; 								/* Schrift Naviheader */
	font-weight:bold;	
	font-size:12px;
	padding-left:5px;	
	}

/* 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:4px;
	padding-right:0px;
	padding-bottom:4px;
	padding-left:5px;
	background-color: #EEEEEE; 					/* Hintergrund der einzelnen Navikasten */
	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:verdana, arial, helvetica, sans-serif;
	font-size:11px;
	color:#333333;								/* Schriftfarbe */
	text-decoration:none;						/* underline */
	}
	
	a.navi-left:hover {
	background-color:#808fac;					/* Farbe der Hintergrundbox, wenn Cursor über Link ist */
	color:#ffffff;  								/* Schriftfarbe, wenn Cursor über Link ist */
	font-weight: bold;
	}


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

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

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

	h1, h2, h3, h4, h5, h6  {
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	}
	
	h1 {
	color: #193477; /*#04416D dunkel Blau - etwas stärker Dunkel #193477*/
	font-size: 24px
	}
	
	h2 {
	color: #193477;
	font-size: 18px;  /* 16 */
	}
	
	h3 {
	font-family: arial, helvetica;
	color: #193477; 
	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-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	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 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;
	}
	
/*=======================================================================
 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_arrow_blue6.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: 30px; 							/* Abstand Aufzählungszeichen bis Text */
	width: 100%;
	}

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

	font.copy {
	font-family: Arial, Helvetica;
	font-size:10px;
	color:#000000;
	}
	
/*=======================================================================
Schrift aktuelles Datum
========================================================================*/	

	font.date {
	// font-family: verdana, Arial, Helvetica;
	font-size:14px;
	}
	

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

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

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

/*Kasten Bestellung (Paypal Button links und Abbildung Cocer rechts

Vorgehen: "Transparente" Tabelle ohne CSS erstellen. Die Zellen dann mit nachstehenden Befehlen steuern.
=======================================================================*/	

	td.bestellung-box-links {
	width: 50%;
	vertical-align: top;
	text-align: center;
	border-top: 3px dashed;
	border-left: 3px dashed;
	border-right:0px dashed;
	border-bottom: 3px dashed;
	border-color: #193477; /* 333333 666666 #B3B3B3 */
	padding: 0px; /* Abstand zum Rand 10 px*/
	background-color: #fff
	}
	
	td.bestellung-box-rechts {
	width: 50%;
	vertical-align: top;
	text-align: center;
	border-top: 3px dashed;
	border-left: 0px dashed;
	border-right:3px dashed;
	border-bottom: 3px dashed;
	border-color: #193477; /* 333333 666666 #B3B3B3 */
	padding: 0px; /* Abstand zum Rand 10 px*/
	background-color: fff
	}