/*
	v1.0.0, 26.11.2012, dogan

	CSS für Cms4d.SlideShow 2

	©2012 Tanyel Dogan, alle Rechte vorbehalten
*/

/*====== Bildwechsler =====*/
.cms4d_imageblender_2{
	position:relative;
	width:100%;
	height:270px;
	float:left;
	clear:both;
	overflow:hidden;
}
	.cms4d_ib2_layer_container{
		/*ACHTUNG:
		wg. IE8 Transparency Bug MUSS sowohl der layer_container, als auch die layer eine width UND height Angabe haben.
		Ansonsten kann der Filter nicht angewendet werden, und die Bilder ploppen auf sobald 100% erreicht ist.
		Die Größe des zu blendenden Bereiches wird also durch die Laufzeitausdehnung des Elementes bestimmt, welches
		geblendet werden soll. Bei IMG-Elementen steht dies automatisch durch ihre eigene Ausdehnung fest.
		Für andere Elemente muss das eben explizit festgesetzt werden.*/
		width:100%;
		height:100%;
		position:absolute;
		left:0px;
		top:0px;
		z-index:10;
	}
		.cms4d_ib2_layer_container .cms4d_ib2_layer{
			width:100%;
			height:100%;
			position:absolute;
			left:0px;
			top:0px;
			visibility:hidden;
		}
			.cms4d_ib2_layer img{
				position:absolute;
				left:0px;
				top:0px;
			}
	.cms4d_ib2_cbut_container{
		position:absolute;
		width:100%;
		left:0px;
		/*Die Y-Position wird i.d.R. auf 50% der container-Höhe eingestellt. Durch negative margin wird
		Dann die Position um den Betrag der halben Höhe der Cursorbuttons nach oben gezogen. Dadurch stehen die Buttons dann
		optisch verikal in der Mitte.*/
		top:50%;
		margin-top:-20px;
		z-index:20;
		/*Wird spätestens beim ersten Bildwechsel über JS eingeblendet*/
		display:none;
	}
		.cms4d_ib2_cbut_container .cms4d_ib2_cbut{
			width:40px;
			height:40px;
			position:absolute;
			left:0px;
			top:0px;
			overflow:hidden;
			cursor:pointer;
background-color:rgb(204,204,204);
		}
			.cms4d_ib2_cbut_container .cms4d_ib2_cbut_right{
				left:100%;
				margin-left:-40px;
			}
	.cms4d_ib2_ibut_container{
		position:absolute;
		width:100%;
			/*BEACHTE: prinzipiell sind absolut positionierte Element für die Maus unsichtbar, solange sie keine
			Hintergrundfarbe oder Hintergrundbild zugewiesen haben. Im Gegensatz zu den Cursor-Buttons stellt sich bei den
			Index-Buttons aber das Problem, dass zum einen die Anzahl und damit der Raum den sie einnehmen nicht bekannt ist.
			Zum anderen sollen die Buttons auch rechts stehen dürfen. Dies lässt sich in CSS nur durch floating lösen.
			Das hat aber dann zur Folge, dass der ibut_container wegen seines floatenden Inhalts auch dann die
			Mausevents abfängt, wenn er durchsichtig ist. Dadurch könnte der Benutzer in diesen Bereich nicht
			mehr auf den darunter durchscheinende Bildlayer klicken.
			In den neueren Browsern scheint es tatsächlich gültig zu sein, einem DIV die height:0px zuzuweisen.
			Dadurch wirkt zwar der ibut_container als Layout-bestimmend, nimmt aber selbst keinen Raum mehr
			im Layout ein und ist somit unsichtbar für die Maus.*/
			height:0px;
		left:0px;
		top:80%;
		z-index:20;
		/*Wird spätestens beim ersten Bildwechsel über JS eingeblendet*/
		display:none;
	}
		.cms4d_ib2_ibut_container .cms4d_ib2_ibut_inner_container{
			/*Der innere container kann links oder rechts floaten, so dass die Buttons links oder rechts
			über dem Bildwechsler angeordnet werden können.*/
			float:right;
			clear:both;
			padding-right:20px;
			white-space:nowrap;
		}
			.cms4d_ib2_ibut_container .cms4d_ib2_ibut{
				width:20px;
				height:20px;
				float:left;
				overflow:hidden;
				cursor:pointer;
				margin-left:5px;
				border:1px solid white;
				/*Das Setzen einer nicht leeren ungültigen Quelle verhindert, dass beim IE der Mausclick direkt
				durchgeschossen wird, wenn keine background-color angegeben ist.*/
				background-image:url('blank.gif');
			}
				.cms4d_ib2_ibut > span{
					display:block;
					width:100%;
					height:100%;
					background-color:black;
					/*Alle und IE9+*/
					opacity:0.30;
						/*IE8- fallback*/
						/*filter:alpha(opacity=30);*/
				}
			.cms4d_ib2_ibut_container .cms4d_ib2_ibut_on{
				background-color:rgb(255,204,0);
			}
				.cms4d_ib2_ibut_container .cms4d_ib2_ibut_on > span{
					display:none;
				}

/*---- optional, separate Thumbnails ----*/
.cms4d_ib2_tn_container{
	width:100%;
	float:left;
	clear:both;
	position:relative;
}
	.cms4d_ib2_tn_container img{
		float:left;
		border:none;
		cursor:pointer;
	}