/* Eigentlich braucht man für den .body keine eigene Klasse zu generieren, da man diesen direkt über CSS ansprechen kann. 
Sicherer ist aber diese Methode, da vielleicht - und sei es nur im Admin-Bereich - Seiten auftauchen, deren Body anders gestaltet sein soll.
Ohne zusätzlichen Namen für die Bodyklasse müsste man in diesem Fall unterschiedliche Stylesheets anlegen */
	.body_funandjoy_frontend 
		{
		background-image: url('site_elements/background_site.jpg'); 
		background-position: center top; 
		background-repeat:no-repeat; 
		background-color: #f7760d; 
		background-attachment:fixed; 
		font-family: arial, helvetica, sans-serif;
		}

/* Diese Klasse bezieht sich auf die komplette Tabelle (also eigentlich auf die ganze website) - momentan wichtig wegen der Blume  */
.tabelle_fundandjoy {}

/* MENUE-BEREICH ========================================================================================*/

	/* Headermenue (Home | Impressum | Sitemap */		
	
		.container_headermenue_zelle 
			{
			text-align:right; 
			padding: 25px 45px 0px 0px; 
			color: #ffffff; 
			font-size: 12px; 
			text-decoration: none
			}
		
		.headermenue {text-decoration: none}
		
		a.headermenue:link 		{color: white}	
		a.headermenue:visited 		{color: white}		
		a.headermenue:hover 		{color: red}	
		a.headermenue:active 		{color: white}	


	/* Die Klassen "menuepunkt_aktiv" und "menuepunkt_inaktiv" beziehen sich auf die Tabellenzellen, in denen die Hauptnavigation untergebracht ist.
	Der Tausch der beiden Klassen bei einem Hover wird innerhalb der Seite durch Javascript erledigt  */ 
 		.menuepunkt_aktiv {background-image: url('site_elements/background_menue_aktiv.gif'); padding: 5px 0px 5px 15px;}
  		.menuepunkt_inaktiv {background-image: url('site_elements/background_menue.gif'); padding: 5px 0px 5px 15px;}
  		
	/* Die Klassen "menuepunkt_aktiv_doppel" und "menuepunkt_inaktiv_doppel" beziehen sich auf die Tabellenzellen, in denen die Hauptnavigation untergebracht ist.
	Der Tausch der beiden Klassen bei einem Hover wird innerhalb der Seite durch Javascript erledigt, diese Klassen sind ausschlie?lich f?r Doppelzeilige Men?punkte  */ 
 		.menuepunkt_aktiv_doppel {background-image: url('site_elements/background_menue_aktiv_doppel.gif'); padding: 5px 0px 5px 15px;}
  		.menuepunkt_inaktiv_doppel {background-image: url('site_elements/background_menue_doppel.gif'); padding: 5px 0px 5px 15px;}

	/* Die Klasse für die Haupnavigation ist so aufgebaut, dass die Merkmale, die bei allen Linkzuständen gleich sind,
	in der eigentlichen Klasse definiert sind. In den Zuständen :link, :visited, :hover, :active sind jeweile nur die Unterschiede aufgenommen  */

		a.hauptnavigation 
			{
			text-align: left;
			font-family: arial, helvetica, sans-serif;
			font-size: 12px; 
			text-decoration: none; 
			font-weight: normal;
			margin: 0px 0px 0px 0px;
			display: block;
			width: 100%
			}

			a.hauptnavigation:link 		{color: black}	
			a.hauptnavigation:visited 	{color: black}	
			a.hauptnavigation:hover 	{color: white}
			a.hauptnavigation:active 	{color: black}
			
			
	/* Die Klasse für die Sekundär ist so aufgebaut, dass die Merkmale, die bei allen Linkzuständen gleich sind,
	in der eigentlichen Klasse definiert sind. In den Zuständen :link, :visited, :hover, :active sind jeweile nur die Unterschiede aufgenommen  */

		a.subnavigation 
			{
			text-align: left;
			font-family: arial, helvetica, sans-serif;
			font-size: 12px; 
			text-decoration: none; 
			font-weight: normal;
			margin: 0px 0px 0px 15px;
			display: block;
			width: 100%
			}

			a.subnavigation:link 		{color: red}	
			a.subnavigation:visited 	{color: red}	
			a.subnavigation:hover 		{color: white}
			a.subnavigation:active 		{color: red}


/* CONTENT-BEREICH ========================================================================================*/
	
	/* Der Fliesstext befindet sich in der Zelle ".content_zelle_inhalt" */ 
		.content_leiste_oben {background-image: url('site_elements/content_leisten_oben.png');}
		.content_zelle_inhalt {background-image: url('site_elements/background_content.gif');  padding: 5px 15px 5px 15px;}

	/* Die eigentliche Übersicht ist absichtlich als H1 definiert um es Google und Co leichter zu machen.  */
		h1 {font-size: 24px; margin: 5px 0px 0px 15px; color: white; font-weight: normal; font-weight: bold;}
		h2 {font-size: 14px; color: red; font-weight: bold;}
		h3 {font-size: 12px; color: black; 	font-weight: normal; margin: 0px 0px 0px 0px;}
		h4 {font-size: 12px; color: black; 	font-weight: normal; margin: 5px 10px 5px 10px;}
		h5 {font-size: 10px; color: black; 	font-weight: normal; margin: 0px 0px 0px 0px;}
		
		a:link 	{color: red; text-decoration: none;}	
		a:visited 	{color: red; text-decoration: none;}	
		a:hover 	{color: red; text-decoration: underline;}
		a:active 	{color: red; text-decoration: none;}
		
		.infobox {padding: 5px 15px 5px 15px;}

	/* Farbhintergrund der Tabellen  */
		.tab_color_1 {background-color: #ffb87a;};
		.tab_color_2 {background-color: #ff9e4a;};