/*global*/

	body			{	font: 14px 'Open Sans';
						text-align: left; 
					}
					
input[type="radio"] {	margin-left:0px;
					}
					
/*Formatiert eine Tabellenzelle*/
	.td_standard	{	padding:5px;
						vertical-align:top;
						text-align:left;
					}

	.link_button, .button
					{	font: 14px 'Open Sans';
						text-decoration: none;
						padding: 8px 14px 8px 14px;
						border:none;
						-moz-border-radius:3px;
						-webkit-border-radius:3px; 
						-khtml-border-radius:3px;
						border-radius:3px; 
					}
					
	.button			{	width:auto;
					}

	hr				{	display:none;
					}
	.filter_rahmen{
		float:none;
		clear:both;
	}		
	.seitenbox_rahmen
					{	float:right;
						width:400px;
					}
	.seitenbox_bild_rahmen, .seitenbox_bild
					{	width:100%;						
					}
	.seitenbox_download_header
					{	background-color: #172E74;
						color: #FFFFFF; 
						padding:5px;
					}
	.seitenbox_download_body
					{ 	padding:5px;
						border:1px solid #172E74;
						margin-bottom:5px;
					}
	.seitenbox_termine_header, .seitenbox_socialmedia_header
					{	background-color: #172E74;
						color: #FFFFFF; 
						padding:5px;
					}
	.seitenbox_termine_body, .seitenbox_socialmedia_body
					{ 	padding:5px;
						border:1px solid #172E74;
						margin-bottom:5px;
					}

	.seitenbox_termine_body_zeile
					{	height:40px;margin-top:10px;
						
					}
	.seitenbox_termine_body_zelle
					{	float:left;
						margin-right:10px;
					}
	#seitenbox_termine_body_zelle_termin{
		width:80px;
	}
	#seitenbox_termine_body_zelle_ort{
		width:100px;
	}
	#seitenbox_termine_body_zelle_anmelden{
		width:170px;
	}		
/*ADMINSEITE STYLES BEGINN */
	.adminseite_inhalt	
					{	margin-top:20px;
					}

	div.adminseite_menu_unterpunkt 
					{	font-family: verdana, arial, sans-serif;
						font-size: 14px;
						font-weight: bold;
						color: #172E74;
						position: relative;
						left: 15px;
						padding: 3px;
						cursor: pointer;
					}

	span.adminseite_menu_submenu 
					{	font-family: verdana, arial, sans-serif;
						font-size: 14px;
						font-weight: bold;
						color: #172E74;
						padding: 3px;
						border-style: solid;
						border-width: 1px;
						border-color: #172E74;
					}

	.adminseite_eingabefeld
					{	background-color: #fff;
						border: 1px solid #E1E1E1;
						font-size: 14px;
						font:'Open Sans';
						padding: 5px 5px 5px 5px;
					}

/*ADMINSEITE STYLES ENDE */


/* BILDUNGSHISTORIE STYLES BEGINN */
	.alternierende_zeile
					{	background-color: #EEEEEE; 
					}
	
/* BILDUNGSHISTORIE STYLES ENDE	*/

/*TREEVIEW STYLES BEGINN */

	.treeview_rahmen{	margin:auto;
						max-width:1200px;
					}
					
	input[name="volltextsuche"], select[name="filter1"], 
	select[name="filter2"], select[name="filter3"]
					{ width:240px;
					}
					
	/*Formatierung der Themenbereich Zeile in der Treeview*/
	.thbereich 		{	background-color: #0A2366; 
						color: #FFFFFF; 
						height:18px; 
						font-size:12px; 
						text-align:left;
						cursor: pointer;
					}
	/*left ist die Spalte mit Plus/Minus und Right die Beschriftung. 
	  Die CSS Klassen sind um unterschiedliche Formatierungen wie Runde Ecken außen zu machen. 
	  Oder unterschiedliche Innenabstände usw. */
	.thbereich_left	{
		padding-left:10px;
	}
	.thbereich_right{}
	
	/*Formatierung der Thema Zeile in der Treeview*/
	.thema			{ 	background-color: #0062C8; 
						color: #FFFFFF; 
						height:18px; 
						font-size:12px; 
						text-align:left;
						cursor: pointer;
					}
	/*left ist die Spalte mit Plus/Minus und Right die Beschriftung. 
	  Die CSS Klassen sind um unterschiedliche Formatierungen wie Runde Ecken außen zu machen. 
	  Oder unterschiedliche Innenabstände usw. */
	.thema_left		{}
	.thema_right	{}
	
	
	.themenbild		{	float:right;
					}
	/*Die "Grundeinstellung" einer Terminspalte in der Treeview */	
	.treeview_spalte
					{	float:left;
						width:120px;
						margin:5px;
					}
					
	.treeview_trainer_bild
					{	float:right;
						width:50px;
						margin-top:-8px;
					}
					
	.div_rahmen_treeview_termine
					{	display:table;
						width:100%;
						margin-left:10px;
					}
					
	.bAmpel			{	width:20px;
						height:30px;
						border: 1px solid #F8F8F8;
					}
	.bAmpel_weiss	{	width:18px;
						height:4px;
						border:1px solid #F8F8F8;
						background-color:#F8F8F8;
					}
	.bAmpel_gruen	{	width:18px;
						height:4px;
						border:1px solid #F8F8F8;
						background-color:#01A03C;
					}
	.bAmpel_gelb	{	width:18px;
						height:4px;
						border:1px solid #F8F8F8;
						background-color:#F5F000;
					}
	.bAmpel_rot		{	width:18px;
						height:4px;
						border:1px solid #F8F8F8;
						background-color:#DC2F21;
					}
					
	/*Formatierung und Abstände der Filter und Volltextsuchen Tabelle*/
	.filter_table	{ 	margin-left: 0px;
						margin-bottom: 10px;
						padding: 0px;
					}
	/*Falls diese abweichend von der Klasse feldbez sein soll */
	.feldbez_filter	{}
					
/*TREEVIEW STYLES ENDE	*/

/*  ALLE TEXTE UND EINGABEFELDER BEGINN	*/
	
	/*stark verkleinerter Text, z.B. für Fußnoten, usw.*/
	.feldbez		{	font:14px 'Open Sans';
						font-weight: bold; 
					}
	.feldbezXL		{	font:16px 'Open Sans';
						font-weight: bold; 
					}
					
	.textstandard, .feldinhalt
					{	font:14px 'Open Sans';
					}
					
	.eingabefeld	{	background-color: #fff;
						border: 1px solid #E1E1E1;
						font-size: 14px;
						width:240px;
						font:14px 'Open Sans';
						font-weight:bold;
						color: #878787;
						margin: 0px 0px 3px 0px;
						padding: 10px 10px 10px 10px;
						box-sizing:border-box;
						border-radius: 3px;
					}
					
	.textwinzig		{	font-size: 75%;
					}

	/*roter fetter Text, für Warn-Hinweise*/
	.textrot		{	font-weight:normal;
						font:14px 'Open Sans';
						color:red;
					}
					
	/*Überschrift 1*/
	h1				{	font-size: 200%;
					}

	/*Überschrift 2*/
	h2				{	font-size: 150%;
					}

	/*Überschrift 3*/
	h3				{	font-size: 125%;
					}	

	.rechtsbuendig	{	text-align: right;
					}

	.zentriert		{	text-align: center;
					}
					
/* ALLE TEXTE UND EINGABEFELDER ENDE*/
				
/* ANMELDEMASKE BEGINN*/

	/*Rasterzeile und Rasterzelle geben sind dazu da um beim responsiven Design die Anmeldemaske in "Blöcke" zu unterteile die dann sinnvoll umbrechen. 
	  Das rasterzelle div ist hierbei im rasterzeile div.
	*/
	.rasterzeile 	{	clear: both;
					}

	.rasterzelle 	{	float: left;
					}
					
	/*Anmeldung Confirm*/
	.div_rahmen		{	display:table;
						width:100%;
					}
					
	/*Die Anmeldeinfos haben ein 2-spaltigen Design. div_label ist die Bezeichnungsspalte und div_anzeige enthält den Inhalt*/
	.div_label		{	float:left;
						width:120px;
						clear:left;
						margin:10px;
						font-weight:bold;	
					}
	.div_anzeige	{	float:left;
						clear:right;
						margin:10px;
						max-width:600px;
						margin-right:30px;
					}
	/*Das div am_abstandsblock ist in dem responsiven Spaltendesign um einen Abstand zwischen "Zeilen" zu erzeugen*/
	.am_abstandsblock
					{
						width:100%;
						float:left;
						clear:both;
						margin-top:20px;
						margin-bottom:20px;
					}
	/*Geht wie der Abstandsblock über die gesamte Breite. 
	  Nur das hierin freier Inhalt steht der nicht zum 2-spaltigen Format gehört. 
	  Wie Hinweistexte oder Ankreuzfelder mit Text. */
	.div_freitext
					{
						width:100%;
						float:left;
						clear:both;
						margin:10px;
						margin-right:30px;
					}
	/*Die chk Klassen dienen einem einheitlichen Aufbau von Ankreuzfeldern wie AGB's 
		Es ist der Rahmen und darin kommt erst die checkbox und dann das label*/
	.div_chk_rahmen
					{	display:table;
					}
	.div_chk_checkbox
					{	display:table-cell;
					}
	.div_chk_label
					{	display:table-cell;
					}
					
	.captcha_rahmen	{ 	margin-top:30px;
						margin-bottom:30px;
						margin-left:10px;
					}
	.captcha_eingabe_div
					{ 	vertical-align:middle;						
					}

	/*Enthält die Beschriftungen der Eingabefelder wie "Anrede" oder "Nachname" */
	.div_label_eingabefeld
					{	float:left;
						width:130px;
						clear:left;
						margin:5px;
						margin-left:10px;
						height:35px;
						font-weight:bold;	
						padding-top:10px;
					}
					
	.div_anzeige_eingabefeld
					{	float:left;
						clear:right;
						margin:5px;
						margin-left:10px;
						height:35px;
						max-width:600px;
					}

@media screen and (min-width:550px){
	#div_anzeige	{	clear:right;
					}
}
@media screen and (max-width:549px){
	#div_anzeige	{	clear:both;
					}
}

	/*Auf der Genehmigungsseite der Text, der über allem steht*/
	.am_genehmigung_kopftext
					{	margin-top:10px;
						margin-bottom:10px;
						margin-left:3px;
					}
					
	.am_genehmigen_liste_header
					{	padding-left:5px;
						padding-right:5px;
					}
	.am_genehmigen_liste_item
					{	padding-left:5px;
						padding-right:5px;
						vertical-align:top;
					}
	/*Die sind alle 3 auf der anmeldung_confirm Seite und Sorgen für ein einheitliches zentriertes Layout.
	  Aufgrund von unterschiedlichem Aufbau der 3, sind diese nachfolgend noch unterschiedlich mit padding eingerückt,
	  damit alles in einer Flucht steht*/
	.am_confirm_meldungen, .am_confirm_body, .am_confirm_inhalt 
					{	margin:auto;
						max-width:1200px;
						clear:both;
					}
	
	.am_confirm_meldungen
					{	padding-left:20px;
					}	
						
	.am_confirm_inhalt
					{	padding-left:20px;
						margin-top:20px;
					}			

/* ANMELDEMASKE ENDE*/
/* TRAINERKALENDER BEGINN*/
	table#kalender 	{	background-color:#ffffff; 
						empty-cells:show;
					}
	table#kalender td 	
					{	width:130px; 
						height:90px; 
						text-align:right;
						font-size:10pt;			
						color:#172E74;
						border: 1px solid #172E74;
						vertical-align:top;
						border-radius:5px; /* CSS3 */	
					}
	table#kalender td.tage 
					{	width:130px; 
						vertical-align:middle;
						height:30px; 
						text-align:center;
						font-size:14px;				
						background-color:#E3E9FF; 	
						
						color:#172E74;
						border: none;
					}
	table#kalender td.kopf 
					{	background-color: #172E74; 
						color: #FFFFFF; 
						width:130px; 
						height:30px; 
						text-align:center;
						font-size:18px;		
						vertical-align:middle;
					}
					
	div#VeDetails_content	
					{	padding:20px; 	
						background-color:#E3E9FF; 
						border:1px solid #BBCCFF; 
						color:black; 
						border-radius:5px; /* CSS3 */	
					}
					
/*TRAINERKALENDER ENDE*/

/*PORTALSEITE BEGINN*/
/*Hier wird es etwas verwirrend. Da alles den Präfix "sidebar" hat aber nicht unbedingt nur dort verwendet wird.
	Der sidebar_kopf wird in den Details und der Anmeldeseite verwendet.*/
	.sidebar_kopf	
					{	width:100%;
					}
					
	.sidebar_kopf_grafik
					{	margin:0px;
						padding:0px;
					}
					
	.sidebar_kopf_grafik_img
					{	margin:0px;
						padding:0px;
						width:100%;
					}
					
	.sidebar_kopf_uberschrift
					{	width:100%;
						text-align:center;
						color: #172E74; 
						font-family:'Open Sans';
						margin:10px;
						font-size:24px;
						display:none;
					}
	/*Der sidebar_body_thema wird für die Themendetails der Kartenansicht verwendet*/
	.sidebar_body_thema
					{	width:70%;
						margin-left:auto;
						margin-right:auto;
						border:1px solid #CCCCCC;						
					}
						
	.sidebar_body_thema_content
					{	margin-left:10px;
						margin-right:10px;
						margin-top:20px;
						margin-bottom:20px;
					}
	.sidebar_body_thema_content_footer{
		width:100%;
	}
	.sidebar_body_thema_titel
					{	color:#172E74;
						font-size:24px;
					}
	.sidebar_body_thema_untertitel
					{	color:#172E74;
					}
	.sidebar_body_thema_thbild
					{	width:300px;
						float:right;	
						margin-left:10px;
						margin-bottom:10px;
					}
					
	/*Der sidebar_body_termine wird für die Termindarstellung der sidebar und der Kartenansicht verwendet*/
	.sidebar_body_termine
					{	margin-top:10px;
						padding:0px;	
						display:inline-block;
						width:100%;
						
					}	
	.sidebar_body_termine_rahmen
					{	width:70%;
						margin-left:auto;
						margin-right:auto;
					}
	.sidebar_rahmen
					{ 	width:auto;
					}
					
	.sidebar_body_termine_spalte
					{	float:left;
						width:150px;
						margin:5px;
						vertical-align:top;
					}
					
					
	.sidebar_body_termine_zeile
					{	border-left:1px solid #CCCCCC;
						border-right:1px solid #CCCCCC;
						border-bottom:1px solid #CCCCCC;
						width:100%;
						float:left;
						clear:both;
						height:auto;
					}
					
	.sidebar_body_termine_headerzeile
					{	border:1px solid #CCCCCC;
						width:100%;
						float:left;
						clear:both;
						color:#172E74;
						font-size:16px;
						font-family:'Open Sans';
						font-weight:bold;	
						background-color:#EFEFEF;	
						height:30px;
					}
					
	.sidebar_body_termine_zeile_alternierend
					{	background-color:#EFEFEF;
					}
	/*Die portal_navigation ist generell für Schaltflächen in der "seitenkopf.php" und wird auch für den Loginbereich verwendet*/
	.portal_rahmen, .portal_navigation
					{	width:100%;
					}
					
	.portal_rahmen
					{	display:block;
						clear:both;
					}				
					
					
	.portal_navigation_menu
					{	width:100%;
						height:55px;
						display:table;
					}
					
	.portal_navigation_menu_buttons
					{	display:table-cell;
						height:55px;
						text-align:right;
						vertical-align:middle;
					}
					
	/*Der portal_kopf ist analog zum sidebar_kopf wird aber in der Kartenansicht verwendet */	
	.portal_kopf	
					{	width:100%;
						border:none;
					}
					
	.portal_kopf_grafik_img
					{	width:100%;
						border:none;
						margin:0px;
						padding:0px;
						display:block;
					}
						
	.portal_kopf_grafik
					{	margin:0px;
						padding:0px;
						position:relative;
					}	
	.portal_kopf_uberschrift
					{	font-family:'Open Sans';
						margin:0px;
					}	
					
	.portal_navigation_uberschrift
					{	width:100%;
						background-color:#172E74;
						background-image:url('./images/logo_overlay.png');
						background-repeat:no-repeat;
						padding-top:17px;
						padding-bottom:17px;
						text-align:center;
						font-size:24px;
						font-weight:bold;
						color:white;
						font-family:'Open Sans';
					}
					
	.navigation_button
					{	margin-right:40px;
					}
					
	.navigation_button_active
					{	color:#6495ed;						
					}
					

	.portal_kopf_uberschrift_content
					{	margin-left:100px;
						margin-right:100px;
					}
	.portal_kopf_uberschrift_content_ueberschrift	
					{	color:#172E74;
						font-size:24px;
						font-family:'Open Sans';
					}			
					
	.portal_content
					{	display:flex;
						flex-wrap:wrap;
						justify-content:center;
						width:90%;
						margin-left:auto;
						margin-right:auto;
					}
	.portal_filter
					{	width:90%;
						margin-left:auto;
						margin-right:auto;
					}
					
	.portal_content_uberschrift				
					{	padding-top:75px;
						width:100%;
						text-align:center;
						color:#172E74;
						font-size:24px;
						clear:both;
						font-family:'Open Sans';
					}			
	
	.portal_karte	{	/*float:left;*/
						width:300px;
						height:300px;
						margin:20px;
					}
	.portal_karte_img
					{	width:100%;
						float:left;
						clear:both;
					}
	.portal_karte_url
					{	border:none;							
					}				
	.portal_karte_titel
					{	font-size:24px;
						color:#636A6F;
						width:288px;
						padding:5px;
						padding-top:10px;
						float:left;
						clear:both;
						text-align:center;
						min-height:70px;
						border-left:1px solid #CCCCCC;
						border-bottom:1px solid #CCCCCC;
						border-right:1px solid #CCCCCC;
					}
	.portal_karte_titel:hover
					{	border-left:1px solid #172E74;
						border-bottom:1px solid #172E74;
						border-right:1px solid #172E74;
					}
					
	.portal_karte_bildmitbildunterschrift{
		clear:both;
		float:none;
		width:288px;
		height:200px;
		position: relative;
	}
	.portal_karte_bildmitbildunterschrift img{
		width:288px;
		height:200px;
		display:block;		
	}
	
	.portal_karte_bildmitbildunterschrift div{
		display: table;
		position:absolute;
		bottom:0;
		font-size: 20px;
		color:white;
		width:100%;
		text-align:center;
		min-height:70px;
		background-color: rgba(0, 0, 0, 0.5)
	}
	
	.portal_karte_bildmitbildunterschrift span{
		display: table-cell;
		vertical-align: middle;

	}
	.portal_karte_bildmitbildunterschrift span:hover{
		background-color: rgba(0, 0, 0, 0.8)
	}
	
	.portal_karte_v3
	{	
		width: 300px; 
		height: 200px;
		margin:20px;
		display: inline-block;
		position: relative;
		overflow: hidden;
		box-shadow: 5px 5px 5px black;
	}
	
	.portal_karte_v3_child
	{	
		width: 100%;
		height: 100%;
		background-color: black; /* fallback color */
		background-position: center;
		background-size: cover;
		transform: scale(1.01);
	}
	.portal_karte_v3:hover .portal_karte_v3_child,
	.portal_karte_v3:focus .portal_karte_v3_child 
	{
		transform: scale(1.1);
		transition: all .5s;
	}
	
	.portal_karte_v3_child::before {
	  content: "";
	  display: none;
	  height: 100%;
	  width: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	}

	.portal_karte_v3:hover .portal_karte_v3_child:before,
	.portal_karte_v3:focus .portal_karte_v3_child:before {
	  display: block;
	}
	.portal_karte_v3_url
					{	border:none;							
					}
	
	.portal_karte_v3_titel
	{
		display: table;
		position:absolute;
		padding-left:10px;
		padding-right:10px;
		bottom:0px;
		border:0px;
		font-size: 20px;
		color:white;
		width:93%;
		text-align:center;
		min-height:70px;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.sidebar_trainer_bild
					{	float:right;
						width:50px;
					}	
/*PORTALSEITE ENDE*/

/*VEDETAILSEITE BEGINN*/

	.vedetails_rahmen
					{	margin:auto;		
						width:70%;
						margin-bottom:10px;
						padding-bottom:15px;
						max-width:1200px;
					}	
					
	.details_header
					{	margin-left:10px;
						margin-right:10px;
						margin-top:20px;
						margin-bottom:20px;
					}	
	.details_header_titel
					{	font-size:24px;
						color:#172E74;
						font-family:'Open Sans';
						font-weight:bold;
					}
	.details_header_thbild
					{	margin-left:10px;
						margin-bottom:10px;
						width:300px;
						float:right;
					}
					
	.bAmpel_details	{	float:right;
						margin-top:-10px;
						padding-left:5px;
						width:20px;
						height:30px;
						border: 1px solid #F8F8F8;
					}
	.details_trainer_bild
					{	float:right;
						width:50px;
						margin-left:20px;
					}
	.seitenkopf_zelle
					{	float:right;
					}
	
/*VEDETAILSEITE ENDE*/