/*
	--- NICHT animiertes DropTab Menu ---
	17.08.2009, dogan

	©2009 Tanyel Dogan, alle Rechte vorbehalten

	Müsste noch weiter ausgebaut werden. Damit das Control den darunterliegenden Text nicht verdeckt
	müsste jedes einzelne Tab ausmaskiert werden. Der overflow-Container müsste beim Ausfahren
	nach unten ebenfalls in der Höhe mitwachsen.
*/

/*========== FlipTab Menu ==========*/
.cms4d_droptab{
	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;
	margin-top:-38px;
}
.cms4d_droptab .tab_pos{
	/*Nur für NS7, um Position der untergeordneten absoluten Elemente festzunaglen*/
	position:relative;
}
.cms4d_droptab .tab_list{
	position:absolute;
	left:0px;
	/*optisch in page_container zentrieren*/
	left:107px;
}
.cms4d_droptab ul{
	margin:0;
	padding:0;
	list-style:none;
}
.cms4d_droptab li{
	margin:0;
	padding:0;
	display:inline;
}
.cms4d_droptab .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_droptab .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;
	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_droptab .tab_gelb .tab_but{
		background-color:rgb(250,192,0);
		background-image:url(images-et/tab-but-gelb.gif);
	}
	.cms4d_droptab .tab_blau .tab_but{
		background-color:rgb(59,128,193);
		background-image:url(images-et/tab-but-blau.gif);
	}
	.cms4d_droptab .tab_gruen .tab_but{
		background-color:rgb(36,119,4);
		background-image:url(images-et/tab-but-gruen.gif);
	}
	.cms4d_droptab .tab_drot .tab_but{
		background-color:rgb(175,41,47);
		background-image:url(images-et/tab-but-drot.gif);
	}

.cms4d_droptab .tab_cont{
	/*Dieser Container dient nur als Positionsanker für tab_clip bzw. tab_body, damit diese wiederum
	absolut nach oben/unten positioiert werden können.*/
	position:absolute;
	/*nach links rücken, so dass an beiden Seiten untern den Registern der tab_cont zu gleichen Teilen über steht.*/
	left:-27px;
	/*Um die Höher der Reiter nach unten positionieren*/
	top:37px;
}
/*Beschneidungscontainer für tab_body
Für das Einblenden per CSS erhält tab_clip zunächst keine height und kein overflow:hidden.
Dies wird später im JS-Control gesetzt.
*/
.cms4d_droptab .tab_clip{
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
}
.cms4d_droptab .tab_body{
	display:block;
	position:absolute;
	/*Im Ruhezustand und bei CSS-Einblendung ohne hover*/
	top:-4000px;
	width:780px;
	border:10px solid white;
	border-top:none;
	background-color:white;
/*optischer Abschluss nach oben*/
background-image:url(images-et/tab-top-bg.gif);
background-repeat:repeat-x;
background-position:left top;
}
	.cms4d_droptab .tab_content{
		width:760px;
		/*BEACHTE: der untere Randabstand kommt von der letzten Reihe der Bildboxen*/
		padding:10px 10px 0px 10px;
		float:left;
		clear:both;
	}
	/*Farbige border/Hintergrundfarbe je nach Farbklasse auf oberstem LI dieses Tabs*/
	.cms4d_droptab .tab_gelb .tab_body{
		border-color:rgb(250,192,0);
	}
		.cms4d_droptab .tab_gelb .tab_content{
			/*background-color:rgb(254,246,217);*/
		}
	.cms4d_droptab .tab_blau .tab_body{
		border-color:rgb(59,128,193);
	}
		.cms4d_droptab .tab_blau .tab_content{
			/*background-color:rgb(235,242,249);*/
		}
	.cms4d_droptab .tab_gruen .tab_body{
		border-color:rgb(36,119,4);
	}
		.cms4d_droptab .tab_gruen .tab_content{
			/*background-color:rgb(239,247,232);*/
		}
	.cms4d_droptab .tab_drot .tab_body{
		border-color:rgb(175,41,47);
	}
		.cms4d_droptab .tab_drot .tab_content{
			/*background-color:rgb(247,233,234);*/
		}

/*--- 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_droptab .tab_hide .tab_cont{
	display:none;
}
.cms4d_droptab .tab_hide:hover .tab_cont{
	display:block;
}
.cms4d_droptab .tab_hide:hover .tab_but{
}
.cms4d_droptab .tab_hide:hover .tab_body{
	/*direkt unterhalb des tab_but*/
	top:0px;
}