/*
	v1.2.0, 22.10.2013, dogan

	CSS für Cms4d.SlideShow 2

	©2013 Tanyel Dogan, alle Rechte vorbehalten
*/

/*====== Bildwechsler =====*/
.cms4d_imageblender_2{
	position:relative;
	width:100%;
	/*height:270px;*/
/*übernimmt immer die Höhe des übergeordneten Containers (typisch "top_img_container"), dessen width/height
//über das CSS des jeweiligen Projekt-Layouts gesteuert wird.*/
height:100%;
	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;
		/*Typischerweise wird das Hintergrundbild, falls das erste aus der Liste als Hintergrund gesetz wird, nicht wiederholt*/
		background-position:left top;
		background-repeat:no-repeat;
		/*nur für neue Browser. Das Hintergrundbild soll sich in der Breite an den Container anpassen - fluid layout.
		ABER: würde dies hier schon eingestellt, so könnte es sein, dass der Hintergrund z.B. in der Desktopversion
		jetzt schon ungewollt an einen zu kleinen Container angepasst wird. Deshalb erfolgt die Definition
		dieses Verhaltens im allgemeinen Stylesheet des Projektes ab dem Breakpoint, ab dem ein fluid Layout das
		freie Skalieren des Bildwechsler zulässt. s.d. z.B. Breakpoint < 960px*/
		/*background-size:100% auto;*/
	}
		.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:-30px;
		z-index:20;
		/*Wird spätestens beim ersten Bildwechsel über JS eingeblendet*/
		display:none;
	}
		.cms4d_ib2_cbut{
			width:40px;
			height:60px;
			position:absolute;
			left:0px;
			top:0px;
			overflow:hidden;
			cursor:pointer;
			background-repeat:no-repeat;
			background-position:left center;
			background-image:url(cms4d-cshifter-cursor-l-34x40-pfeil-weiss.png);
/*alle ab IE9*/
border-top-right-radius:10px;
border-bottom-right-radius:10px;
background-color:rgba(0,0,0,0.5);
opacity:1;
		}
			.cms4d_ib2_cbut_right{
				left:auto;
				right:0px;
				background-position:right center;
				background-image:url(cms4d-cshifter-cursor-r-34x40-pfeil-weiss.png);
border-radius:0;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
			}
	.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:100%;
		margin-top:-30px;
		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;*/
text-align:center;
		}
			.cms4d_ib2_ibut{
				width:14px;
				height:14px;
				padding:3px;
				display:inline-block;
				cursor:pointer;
			}
				.cms4d_ib2_ibut > span{
					width:12px;
					height:12px;
					display:block;
					border-radius:20px;
					border:1px solid white;
					background-color:black;
					/*rgba() wird vom IE8 ignoriert, dieser verwendet die vorherige Farbangabe*/
					background-color:rgba(0,0,0,0.5);
				}
			.cms4d_ib2_ibut_on{
			}
				.cms4d_ib2_ibut_on > span{
					background-color:rgb(225,0,30);
				}

/*---- 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;
	}