/* 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;}
  		
	/* Wie oben die Klasse nur mit dem Zusatz das es dort etwas neues gibt  */ 
 		.menuepunkt_aktiv_neu {background-image: url('site_elements/background_menue_neu_aktiv.gif'); padding: 5px 0px 5px 15px;}
  		.menuepunkt_inaktiv_neu {background-image: url('site_elements/background_menue_neu.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;};

	/* Newskit-Kalender CSS */
		.kalender_headline {	font-family: arial, helvetica, sans-serif;font-size: 12px; color: black; font-weight: bold; margin: 0px 0px 0px 0px;}
		.kalender_eintraege {	font-family: arial, helvetica, sans-serif;font-size: 11px; color: black; font-weight: normal; padding: 0px 9px 0px 9px;}
		.kalender_tag
			{ 
			font-family: arial, helvetica, sans-serif;
			font-size: 18px;
			color: black;
			font-weight: bold;
			padding: 5px 9px 0px 0px;
			}
		.kalender_tag_name
			{ 
			font-family: arial, helvetica, sans-serif;
			font-size: 16px;
			color: black;
			font-weight: bold;
			padding: 5px 0px 0px 9px;
			}
		.kalender_monat
			{ 
			font-family: arial, helvetica, sans-serif;
			font-size: 9px;
			color: black;
			font-weight: normal;
			padding: 0px 9px 0px 0px;
			}