/*
	17.08.2009, dogan

	©2009 Tanyel Dogan, alle Rechte vorbehalten

	für animiertes Fliptab Menu

*/

/*========== FlipTab Menu ==========*/
.cms4d_fliptab{
	float:left;
	clear:both;
	position:relative;
	z-index:2000000;
	/*ACHTUNG: NS7 beschneidet den overflow nur dann richtig, wenn bereits hier overflow:hidden gesetzt ist.
	Ausserdem muss dazu die Verschiebung über negative margin-bottom gesetzt werden nicht über negativen top Wert*/
	width:960px;
	height:460px;
/*height:800px;*/
	margin-top:-460px;
	overflow:hidden;
}
.cms4d_fliptab .tab_pos{
	/*Nur für NS7, um Position der untergeordneten absoluten Elemente festzunaglen*/
	position:relative;
}
.cms4d_fliptab .tab_list{
	position:absolute;
	left:0px;
	/*Die gesamte Liste wird so weit nach untern gesetzt, dass nur noch die Reiter zu sehen sind*/
	top:423px;
	/*Optimalerweise wäre hier ein padding angebracht, dass die floatenden Reiter nach rechts drückt.
	Dies führt jedoch in IE6 zu Layoutproblemen. Darum wird die gesamte Liste mit allen Inhalten nach rechts gerückt.
	Damit dann die Inhaltsboxen jedoch wieder relativ ganz links stehen muss tab_cont um den selben Betrag
	negativ nach links gesetzt werden. s.u. tab_cont*/
	margin-left:107px;
}
.cms4d_fliptab ul{
	margin:0;
	padding:0;
	list-style:none;
}
.cms4d_fliptab li{
	margin:0;
	padding:0;
	display:inline;
}
.cms4d_fliptab .tab_li{
	float:left;
	/*Damit bei Überstreichen der Buttons durch die Zwischenräume kein Flackern entsteht wird
	ein padding gesetzt. Die Leeräume werden dann als Teil des LI-Elements bei hover ausgewertet.
	Damit dies in allen Browsern funktioniert muss für IE und Opera ein transparentes Hintergrundbild gesetzt werden.
	Für FF und NS würde background-color:transparent ausreichen.*/
	padding-right:6px;
	background-image:url(images-et/blank.gif);
}
.cms4d_fliptab .tab_but{
	border:1px solid white;
	border-bottom:none;
	color:white;
	background-color:rgb(96,174,32);
	/*CSS Schriftskalierung umgehen*/
	font-size:14px;
	font-weight:bold;
	float:left;
	height:27px;
	/*padding:9px 10px 0 10px;*/
		width:180px;
		text-align:center;
		padding-top:9px;
	cursor:default;
	position:relative;
	/*Buttons sollen im Stapel über den Inhaltscontainer liegen*/
	z-index:2000;
	background-repeat:repeat-x;
	cursor:pointer;
}
	/*Farbige buttons
	BEACHTE: die Farbe wird auf dem obersten LI-Element gesetzt, so dass sie sowohl die Farbe der
	Buttons als auch ggf. eine farbige Border in tab_body steuert.*/
	.cms4d_fliptab .tab_gelb .tab_but{
		background-color:rgb(250,192,0);
		background-image:url(images-et/tab-but-gelb.gif);
	}
	.cms4d_fliptab .tab_blau .tab_but{
		background-color:rgb(59,128,193);
		background-image:url(images-et/tab-but-blau.gif);
	}
	.cms4d_fliptab .tab_gruen .tab_but{
		background-color:rgb(36,119,4);
		background-image:url(images-et/tab-but-gruen.gif);
	}
	.cms4d_fliptab .tab_drot .tab_but{
		background-color:rgb(175,41,47);
		background-image:url(images-et/tab-but-drot.gif);
	}

.cms4d_fliptab .tab_cont{
	/*Dieser Container dient nur als Positionsanker für tab_body, damit dieser wiederum
	absolut nach oben positinoiert werden kann. D.h. Ausgangspounkt für die
	Animation ist, dass die Oberkante von tab_body direkt an die Unterkante eines Reiters stösst.*/
	position:absolute;
	/*Da die gesamte tab_list nach rechts gerückt ist, um die Register in der Seite mittig anzuordnen,
	müssen die bodys um den gleichen margin-Wert dementsprechend negativ nach links gerückt werden (s.o. tab_list).*/
	left:-107px;
	/*Um die Höher der Reiter nach unten positionieren*/
	top:37px;
}
.cms4d_fliptab .tab_body{
	display:block;
	position:absolute;
	left:80px;
	/*BEACHTE: der Tab wird oberhalb aber hinter den Buttons angezeigt.
	Die Animation geht i.d.R. in negative Y-Richtung.*/
	top:0px;
	width:780px;
	height:420px;
	border:10px solid white;
	border-bottom:none;
	background-color:white;
/*optischer Abschluss nach unten, um das Weiss des Tab vom Seitenhintergrund darunter zu trennen*/
background-image:url(images-et/tab-bottom-bg.gif);
background-repeat:repeat-x;
background-position:left bottom;
}
	/*Farbige border je nach Farbklasse auf oberstem LI dieses Tabs*/
	.cms4d_fliptab .tab_gelb .tab_body{
		border-color:rgb(250,192,0);
	}
	.cms4d_fliptab .tab_blau .tab_body{
		border-color:rgb(59,128,193);
	}
	.cms4d_fliptab .tab_gruen .tab_body{
		border-color:rgb(36,119,4);
	}
	.cms4d_fliptab .tab_drot .tab_body{
		border-color:rgb(175,41,47);
	}
		.cms4d_fliptab .tab_content{
			width:760px;
			padding:10px;
			float:left;
			clear:both;
		}

/*--- Einblenden/Positionieren über CSS hover ---
Alle Tab-Inhalte sind per CSS unsichtbar. Nur bei Mouseover werden sie eingeblendet und nach oben positioniert.
Da sie im DOM nach dem ersten Tab stehen überdecken sie dessen Inhalt.
Ist JS aktiv wird die Klasse tab_hide gelöscht, so dass das Einblenden
nicht mehr automatisch bei CSS:hover durchgeführt wird, sondern vom JS Control.*/
.cms4d_fliptab .tab_hide .tab_cont{
	/*display:none;*/
}
.cms4d_fliptab .tab_hide:hover .tab_cont{
	display:block;
}
.cms4d_fliptab .tab_hide:hover .tab_but{
	/*ACHTUNG: obwohl tab_but position:relative hat wird dies vom IE7 nicht richtig angewandt.
	Deshalb wird hier für alle Browser margin-top statt nur top gesetzt.*/
	margin-top:-420px;
	/*Da jetzt der Tab seine Position im float-Layout verlässt würden die anderen Buttons rechts an seine
	position floaten. Deshalb wird im Gegenzug auch margin-bottom um den gleichen positiven Wert erhöht, so dass
	unterhalb der Raum dicht bleibt.*/
	margin-bottom:420px;
}
.cms4d_fliptab .tab_hide:hover .tab_body{
	/*CSS-Position ohne JS direkt oberhalb der Reiter*/
	top:-420px;
}