/*
	v2.2.4, 2018-05-01, tdogan

	Cms4d.Slider5, Standard CSS

	© Tanyel Dogan, alle Rechte vorbehalten
*/


/*=== Controls unselectable machen besonders für touchdevices =====*/
.cms4d_slider5_unsel{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/*Enthaltene IMG immer responsive*/
.cms4d_slider5 img{
	max-width:100%;
	width:auto;
	height:auto;
	/*Blockdarstellung für die meisten Anwendungsfälle passend, um unnötigen Leerraum unter dem IMG zu eliminieren.*/
	display:block;
}

/*=== Container ===*/
.cms4d_slider5, .cms4d_slider5 *{
	box-sizing:border-box;
}
.cms4d_slider5{
	width:100%;
	position:relative;
	clear:both;
	overflow:hidden;
	/*Der Inhalt muss unselectable sein, damit bei Mausgeräten beim Ziehen nicht das Standardverhalten (Textselektion) eintritt.
	Das Mousemove Event wird ja nicht gecancelt.*/
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/*Vorbereitet für zentrierte Anordnung falls kleiner als sein Parent*/
	margin:0 auto;
}
	/*Der Inhaltscontainer mit viewport. Alle zentriert, um gleich für nicht bildschirmfüllende Verwendung die typischste Positionierung zu erhalten.
	Die Controls zur Navigation liegen nicht hierin, sondern bei Standardausgabe sind sie Geschwister von content.
	Die prev/next Cursorbuttons richten sich immer am übergeordneten Hauptcontainer aus.
	Somit ist es z.B. in Kombination mit eingeschränktem content möglich, den Sliderbereich auf eine max-width festzunageln,
	wärend die Cursorbuttons trotzdem immer an den Bildschirmrändern kleben.
	Letztendlich sollten für alle typischen Layoutwünsche ausreichend Hilfcontainer vorhanden sein.*/
	.cms4d_slider5_content{
		width:100%;
		position:relative;
		margin:0 auto;
		/*In einer typischern Verwendung, bei der immer nur die Slides der aktiven Seite sichtbar sein sollen,
		kann entweder hier oder spätestens im viewport der Overflow abgeschnitten werden.
		BEACHTE: prinzipbedingt kann es bei Slidern, die nicht die volle Bildschrimbreite ausfüllen zu Blitzkanten rechts kommen (1px).
		Dies liegt daran, dass der Slider dann ggf. die Hälfte einer ungeraden Decive Viewportbreite einnimmt und deshalb _content oder _viewport
		in der Darstellung auf- oder abgerundete Breiten annehmen. Dies ist ist auch bei verschiedenen Browsern unterschiedlich stark
		und wird funktionsbedingt hingenommen.*/
		overflow:hidden;
		/*WICHTIG: content und die controls müssen einen zIndex erhalten, da ansonsten die slides bei view_blender, die unbedingt eine definierte Stapelreihenfolge benötigen,
		sich vor die Controls stapeln*/
		z-index:100;
	}
		/*Hilfscontainer für Slider mit Spaltenabständen. Dabei wird content_inner um jeweils eine Spaltenbreite mit negativer margin-left über seine
		normerl Breite hinaus gedehnt. Die enthaltenen Spalten haben ebenfalls eine transparente border-left mit der identischen Spaltenbreite.
		Dadruch dass hier der container nach links erweitert wird, verschwindet der SSpaltenabstand der ganz links stehenden Spalte
		immer, so dass der sichtbare Inhalt der ersten und letzte Sspalte jeweils mit dem slider_content bzw. letztendlich dem Satzspiegel übereinstimmen.
		Diese reine CSS Lösung erübrigt JS Berechnungen, ist voll responsive und der Spaltenabstand kann rein über @media nachgesteuert werden.*/
		.cms4d_slider5_content_inner{
			position:relative;
			overflow:hidden;
			/*WICHTIG: hier darf KEINE explizite width gesetzt sein, da sonst der container nict über negative margin erweitert werden kann*/
		}
			.cms4d_slider5_viewport{
				/*Der viewport ist der Bereich, auf dem letztendlich die Maus- bzw. Touchevents entgegengenommen werden.
				Die übergeordneten Containere können zur Positionierung und Dekoration mit in das Erscheinungsbild eingezogen werden.
				Für einen typischen Slider mit voller Bildschirmbreite, sind alle Container 100% breit.*/
				width:100%;
				/*Sobald JavaScript die Kontrole über das DOM Layout des Sliders voll erhält, wird auch dem übergeordneten content_inner eine absolute height in px gesetzt.
				Desweiteren erhält der shifter position:absolute, um die Performance der Animation zu verbessern. 
				Damit der dazwischenliegende viewport dadurch nicht auf 0px zusammenfällt, muss er height:100% erhalten.*/
				height:100%;
				position:relative;
				/*Der overflow wird hier nicht abgeschnitten sondern vom übergeordneten content_inner. Für mehrspaltige Slider wird die Anzhal
				der sichtbaren Slides über die viewport Breite gesteuert, so dass die Slides, die rechts herausragen sichtbar sein müssen.*/
				/*overflow:hidden;*/
			}
				/*Grabcursor nur, wenn mehr als ein Slide vorhanden ist - interactive=true*/
				.cms4d_slider5.cms4d_slider5_interactive .cms4d_slider5_viewport{
					/*grab/grabbing cursor von Firefox, Chrome, Safari und Opera nativ unterstützt, IE nicht. Beim touchstart wird eine Zusatzklasse auf dem slider viewport gesetzt.*/
					cursor:w-resize;
					cursor:-moz-grab;
					cursor:-webkit-grab;
					cursor:grab;
				}
				/*Zusatzklasse zeigt während laufendem swipe grabbing cursor. s. JS*/
				.cms4d_slider5_grabbing{
					cursor:-moz-grabbing !important;
					cursor:-webkit-grabbing !important;
					cursor:grabbing !important;
				}
					/*Der Hauptcontainer für die Slides. Dieser wird bei einem swipe view (Standard) ständig mit dem Positionierungscursor synchronisiert und
					zeigt die möglichst flüssigen Slideranimationen*/
					.cms4d_slider5_shifter{
						width:100%;
						position:relative;
						left:0;
						top:0;
						/*Da der shifter ein flex container ist, werden die .slides automatisch auf gleiche Höhe gestreckt.*/
						display:-webkit-box;
						display:-ms-flexbox;
						display:flex;
					}


/*=== Slides ===*/
.cms4d_slider5 .slide{
	/*Der Shortcut für das Wachstumsverhalten der Items ist
		flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
	In diesem Fall wird flex-shrink=0 gesetzt, was dazu führt, dass items, die nicht mehr in den flex container passen rechts aus dem viewport herausstehen.
	Dies entspricht dem gewünschten Verhalten, dass die Anzahl der Slides, die im Viewport gleichzeitig zu sehen sind >=1 sein kann.
	Wird z.B. für Itemslider verwendet, in denen 2-3 Artikel gleichzeitig zu sehen sein sollen.
	Das Layoutverhalten entspricht einem klassischen display:inline-block mit white-space:nowrap, außer, dass eben nicht der
	typische Leerraum durch Whitespace im Code mit gerendert wird.
	WICHTIG: die .slide_col dienen nur dazu, eine gemeinsame Höhe für alle Slides anzubieten (Standardverhalten bei flex: items werden in der Höhe an das höchste item angeglichen).
	Ansonsten dürfen keine dekotaiven Formate wie z.B. border oder margin/padding gesetz werden, da sonst der IE11 die items in dieser Konstellation zu breit rendert. 
	*/
	-webkit-box-flex:1;
	-ms-flex:1 0 100%;
	flex:1 0 100%;

	/*
		Falls die sichtbaren innenliegenden .slide_content alle gleich hoch sein sollen, MUSS "durchgeflext" werden, um die Höhe der .slide_content Elemente auf ihren parent zu strecken.
		Eine reine height:100% wird z.B. im Safari nicht durchgereicht.
		Sind jedoch die .slide ebenfalls flex, so reichen sie ihre Layouthöhe in die .slide_content durch und diese strecken sich nach flex item Standard.
		Für ein solches Slider Layout müsste dann zusätzlich dies für die .slide Klasse gesetzt werden:
	WIRD standardmäßig verwendet, damit sich die Höhe der gestapelten Layer an die Sliderhöhe anpasst.*/
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;

	/*braucht position relative, damit je nach view auch ein zIndex wirksam werden kann.*/
	position:relative;

	/*WICHTIG: das Slider Control ist so ausgelegt, dass es zunächst auch ohne DOM Manipulationen bzw. JS Ergänzungen zu frühestmöglichen Zeitpunkt
	korrekt im normalen HTML/CSS Layoutfluss gerendert wird. Dazu wird typischweise das/die erste/n Slide/s in der normalen DOM-Reihenfolge sichtbar, während
	die anderen durch height:0px versteckt aber NICHT komplett ausgeblendet werden. Display:none würde nämlich ein Laden der Slide-Inhalte aufhalten, bis sie
	tatsächlich eingeblendet werden.
	Damit die Slides komplett unsichtbar gemacht werden können, muss an dieser Stelle schon overflow hidden stehen, damit die durch flex gestreckten flex items
	ungeachtet ihres tatsächlichen Inhalts auf 0px Höhe reduziert werden können.*/
	overflow:hidden;
	/*standardmäßig versteckt*/
}
	/*Alle bis auf das erste slide item verstecken. Wird später nach erfolgreicher Initialisierung aufgehoben.
	Sollte es in Sonderfällen nötig sein, mit einem anderen Slide zu staren, könnte für eine SSlider Instanz eine Sonderklasse :nth-child(x) überschreiben.*/
	.cms4d_slider5 .slide:nth-child(1){
		height:auto;
	}
		.cms4d_slider5 .slide_content{
			/*Der typisch sichtbare Slideinhalt.
			Hier wird die Layouthöhe an die Layer durchgereicht und somit flex gesetzt*/
			position:relative;
			width:100%;
			float:none;
			clear:both;
			overflow:hidden;

			display:-webkit-box;
			display:-ms-flexbox;
			display:flex;
		}
			/*Layering vorbereiten. Die Layer sind zunächst nach bekanntem Muster durch -100% margin übereinandergestapelt.
			BEACHTE: der Trick geht auch ohne floats, allerdings dehnen sich normale DIV dann nicht mit ihrem Inhalt in der Höhe aus.
			Deshalb wird hier float verwendet, auch wenn dies bei durchgängigem flexbox sowieso neutralisiert wird (als flex item gerendert = float:none).*/
			.cms4d_slider5 .layer{
				width:100%;
				margin-right:-100%;
				position:relative;
				/*float ggf. falls Hintergrundgestaltung sichtbar sein soll. Außerdem erleichtert dies z.B. das Ausklinken
				von Textboxen für kleine Viewports, da durch Setzen nachträgliches aktivieren von clear:both eine layer (typisch layer.static)
				auf jeden Fall in eine neue Zeile unter den typischen Hintergrundbildlayer umbricht.*/
				float:left;
				/*BEACHTE: wg. Safari wird hierr KEINE explizite height:100% gesetzt. Wird nämlich bis zu den layer durchgeflext,
				so erhalten die layer-Elemente als letzte flex items automatisch die Höhe der flexbox layoutkette.
				Ein explizite height:100% hier geht dann nur bei Chrome, Firefox, IE11. Safari will das explizit nicht haben.*/
			}











/*============ View blender, standard ============
Der HTML Aufbau ist identisch mit dem shifter, nur dass hier vereinfacht alle SLides in einem Stapel an der linken oberen Ecke
des Viewports alle an 0/0 positioniert werden. Das setzen der Zusatzklasse erfolgt bei view.Init(), kann aber für Sonderfälle
auch schon direkt auf den entsprechenden Containern in HTML gesetzt sein.
Dies empfiehlt sich i.d.R., damit bei langsamem Laden schon alle Slides korrekt sortiert sind, bis Javascript Einfluss auf den Slider nehmen kann.
*/
.cms4d_slider5_view_blender .slide{
	/*WICHTIG: bei diesem view müssen die Slides alle übereinander gestapelt werden.
	Da über und unterhalb aber flex container sind und auch die .slide flexItems, kann hier nicht mit float gearbeitet werden,
	da dies das innere flex layout vom äußeren abkoppelt und beim Ausmessen des viewport Höhe=0 herauskommen würde.
	Um dennoch alle Slides auf 100% der viewportbreite zu dehnen und durch negative margin
	übereinandferziehen zu können, muss für die slides flex:none gestezt werden.
	Sie werden also in dre Breite nicht durch flex beeinflusst, reichen aber die
	Höhe der inneren Inhalte nach außen an den shifter und viewport durch.*/
	-webkit-box-flex:0;
	-ms-flex:none;
	flex:none;

	width:100%;
	/*übereinander stapeln an 0/0*/
	margin-right:-100%;
	/*Alle Slides bis auf das Erste werden initial ausgeblendet (visibility, NICHT display!)*/
	visibility:hidden;
	opacity:0;
	z-index:0;

	/*Höhensteuerung: typischerweise ist in diesem view nur ein Slide über die volle Breite zu sehen.
	Damit die verborgenen Slides rechts die Messung nicht beeinflussen, wird deren Inhaltscontainer auf eine Höhe von 1 gesetzt (slide hat overflow hidden).
	Dies wird dann jeweils vor dem Einblenden geändert. s. JS
	BEACHTE: da dies das zum Standardverhalten wird, ist für diesen viewtype autoheight=true quasi immer Pflicht.
	Typischerweise wird es auch spätestens benötigt, wenn z.B. Textboxen in Slides vorkommen und diese für kleine viewports
	ausgeklinkt und unter dem Bild angezeigt werden. Deren Höhe variiert typischerweise deutlich.
	Für den view shifter muss die Höhensteuerung komplexer durchgeführt werden.
	WICHTIG: da alle container in einem flex-layout sind, werden sie in der Höhe immer an ihrern parent angepasst.
	Um also die tatsächliche Höhe eines slide_content messen zu können, muss dieser container kurzfristig position:absolute geschaltet sein,
	damit er durch sein Inhalte auseinandergedrückt werden kann, und nicht durch seinen parent gestaucht wird.*/
	height:1px;
}
	/*erstes Slide sofort voll sichtbar*/
	.cms4d_slider5_view_blender .slide:first-child{
		height:auto;
		visibility:visible;
		opacity:1;
		/*Da das erste Slide im DOM normalerweise hinten im Stapel liegt, muss es initial ganz nach vorne geholt werden.*/
		z-index:1000000;
	}











/*============ Cursor und Indexbuttons ==========
Typischerweise sollte der Benutzer erst nach window.load mit dem Slider interagieren können.
Solange eine Sliderinstanz nicht mit Start() gestartet wurde, sollte der Benutzer nicht mit der Slider interagieren.
Dazu wird ein Flag .interactive für jede Instanz verwaltet. Um auch Steuerungscontrols unzugänglich zu machen, sind diese
hier zunächst unsichtbar (visibility:hidden) geschaltet (versteckt sie vor Mausevents).
Typischweise wird window.load für alle Steterungscontrols die Zusatzklasse cms4d_slider5_show gesetzt (s. slider.view.show_controls())
*/

/*Die Cursorbuttons sind typischerweise für Desktop ausgeblendet und werden bei :hover angezeigt.
Um die Sichtbarkeit/Position und Klickbarkeit getrennt steuern zu können, wird hier der eigenlich sichtbare/klickbare Button
in den jeweiligen Positionierungscontainer cbtn_left, cbtn_right verschachtelt.*/
.cms4d_slider5_cbtn{
	/*Die Tasten auf denen click abgefangen wird, sind bewusst größer gehalten, um für touchgeräte eine größere Trefferfläche zu bieten.
	Die jeweilgen sichtbaren Pfeilsymbole können kleiner sein.*/
	width:48px;
	height:48px;
	position:absolute;
	top:50%;
	margin-top:-24px;
	/*Bleibt unsichtbar bis explizit show.*/
	visibility:hidden;
	z-index:200;
}
	/*Der eigentlich klickbare Button*/
	.cms4d_slider5_cbtn_btn{
		position:absolute;
		width:100%;
		height:100%;
		cursor:pointer;
		/*Bleibt zunächst auch unsichtbar und wird in Standardkonstellation genutzt, um die eigentlichen Buttons nur bei :hover einzublenden.
		ACHTUNG. funktioniert mit reinem CSS nicht bei Buttons in externen Containern.*/
		visibility:hidden;
	}
		/*Pfeiltasten standard nur mit CSS*/
		.cms4d_slider5_cbtn_btn:before{
			content:'';
			display:block;
			position:absolute;
			left:50%;
			top:50%;
			/*Linkspfeil*/
			width:0;
			height:0;
			border:12px solid transparent;
			border-right-color:white;
			margin-left:-24px;
			margin-top:-12px;
		}
.cms4d_slider5_cbtn_right{
	right:0;
}
	.cms4d_slider5_cbtn_right .cms4d_slider5_cbtn_btn:before{
		border-color:transparent;
		margin-left:0;
		border-left-color:white;
	}



/*----- Varianten ----
Cursor buttons mit Font Awesome 5 Pro Icon wg. Textshadow. Bei den Pfeilen mit reinem CSS lässt sich kein Schatten in der Pfeilform erzeugen.*/
.cms4d_slider5_cbtn_fa .cms4d_slider5_cbtn_btn:before{
	/*fas fa-chevron-right*/
	content:'\f053';
	font-family:'Font Awesome 5 Pro';
	font-weight:900;

	font-size:32px;
	line-height:34px;
	border:none;
	width:32px;
	height:32px;
	margin-left:-24px;
	margin-top:-16px;
	text-align:center;
	color:white;
	text-shadow:2px 2px 6px rgba(0,0,0,0.4);
}
	.cms4d_slider5_cbtn_fa .cms4d_slider5_cbtn_right .cms4d_slider5_cbtn_btn:before{
		/*fas fa-chevron-left*/
		content:'\f054';
		margin-left:-8px;
	}

.cms4d_slider5_ibtn_container{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:10px;
	text-align:center;
	font-size:1em;
	line-height:1em;
	/*bleibt unsichtbar bis vom view eingeblendet. s.u.*/
	visibility:hidden;
	z-index:300;
}
	/*Analog den Cursobuttons sind auch die klickbaren Indexbuttons nochmals in einem extra Container untergebracht, 
	der die Sichtbarkeit bei :hover getrennt von ..._show ermöglicht.*/
	.cms4d_slider5_ibtn_holder{
		visibility:hidden;
	}
		.cms4d_slider5_ibtn{
			display:inline-block;
			width:16px;
			height:16px;
			border-radius:100px;
			margin:0 4px;
			cursor:pointer;
			border:1px solid white;
			background-color:rgba(0,0,0,0.25);
		}
			.cms4d_slider5_ibtn_on{
				background-color:red;
			}

/*Hilfsklassen, um bei typischer Verwendung von externen Controlcontainern.
Die normalen Cursor und Indexbuttons werden absolute positioniert, was einen externen Controlcontainer in sich
auf Höhe 0 zusammenfallen lassen würde. Die Zusatzklasse schaltet alles Nötige auf "normale" static/relative positionierung um.*/
/*Cursorbuttons*/
.cms4d_slider5_ctrl_static .cms4d_slider5_cbtn{
	position:relative;
	display:inline-block;
	width:auto;
	height:auto;
	top:auto !important;
	bottom:auto;
	left:auto;
	right:auto;
	margin:0;
	padding:0;
	/*ACHTUNG: ggf. vorhandene Transformationen zurücksetzen !*/
	transform:none;
}
	.cms4d_slider5_ctrl_static .cms4d_slider5_cbtn_btn{
		position:relative;
		display:block;
		width:auto;
		height:auto;
	}
		.cms4d_slider5_ctrl_static .cms4d_slider5_cbtn_btn:before{
			position:relative;
			font-size:inherit;
			line-height:normal;
			border:none;
			width:auto;
			height:auto;
			left:auto;
			right:auto;
			margin:auto !important;
			text-align:inherit;
			color:inherit;
			text-shadow:none;

			/*fa-chevron-circle-left*/
			content:'\f137';
		}
			.cms4d_slider5_ctrl_static .cms4d_slider5_cbtn_right{
				margin-left:1em;
			}
			.cms4d_slider5_ctrl_static .cms4d_slider5_cbtn_right .cms4d_slider5_cbtn_btn:before{
				/*fa-chevron-circle-right*/
				content:'\f138';
			}
/*Indexbuttons*/
.cms4d_slider5_ctrl_static .cms4d_slider5_ibtn_container{
	position:relative;
	top:auto;
	bottom:auto;
	left:auto;
	right:auto;
	margin:0;
	padding:0;
	transform:none;
}
/*Allgemein, klickbare verschachtelte Buttons immer sichtbar SOBALD der Slider fehlerfrei gestartet wurde - also nur in Kobination mit ..._show.
...ctrl_show wird typischerweise auf einem externen Controlcontainer gesetzt und gilt dann für alle untergeordneten dynamisch generierten Slider Controls des bestimmten Typs.*/
.cms4d_slider_ctrl_show .cms4d_slider5_show .cms4d_slider5_cbtn_btn,
.cms4d_slider_ctrl_show .cms4d_slider5_show .cms4d_slider5_ibtn_holder{
	visibility:visible;
}



/*----- mehrspaltiger Slider mit variabler Spaltenzahl ------
Typisch für News oder Bilder.
Entgegen der ersten Ansätze kommt es bei ungeradn Sliderbreiten und ungeraden Slidezahlen pro view zu Rundungsfehlern.
Deshalb ist auch für mehrspaltige Slider nur ein Sliden pro Sliderviewbreite vorhanden welches den Shifter immer zu 100% ausfüllt.
Stattdessen wird die Breite des slider viewport relativ zu seinem übergrodenten .content_inner verringert (z.B. 33.333333%, 50%, etc.)
zudem wird der viewport nicht mehr an der Mittelachse des Sliders zentriert, sondern klebt normal links im Slider.
Die Slides werden immer nach rechts hin nebeneinander aufgerheiht, so dass der Slider weiterhin ganz normal aussieht.
Das aktive Slide steht dann eben nicht mehr in der Mitte des Sliders, sondern ganz links.
Spaltenabstände:
Die .slide_content erzeugen jeder für sich einen Spaltenabstand links mittels transparenter border.
Dies würde beim jeweils ersten sichtbaren Slide einen Offset zur linken Kante des Sliders bewirken.
Nach bewährtem Muster wird also zudem noch auf dem, dem shifter übergeordneten content_inner durch negatove margin-left
eine Spaltenbreite nach außen gezogen, so dass der erste sichtbare Spaltenabstand optisch abgeschnitten wird.
WICHTIG: mit abnehmendem Sspaltenabstand müssen also sowohl die borders der .slide_content, als auch mit dem selben Breitenwert die margin-left
von content_inner nachgesteuert werden.
Als typischer Startwert wird hier 3 Spalten mit 40px Spaltenabstand gesetzt.
Das detaillierte Initialisierungs- und Schrumpfungsverhalten wird aber im Projekt CSS im Einzelfall gesteuert (typisch z.B. globale Klasse mcslider),
damit dort nicht unnötig komplizierte Regelüberschreibungen erfolgen müssen.*/
.cms4d_slider5_columns .cms4d_slider5_content_inner{
	/*Um eine Spaltenbreite links erweitern*/
	margin-left:-40px;
}
.cms4d_slider5_columns .cms4d_slider5_viewport{
	/*Typisch dreispaltig*/
	width:33.333333%;
}
.cms4d_slider5_columns .slide_content{
	/*Spaltenabstand durch transparente border - dies sichert den Innenraum des Containers*/
	border-left:40px solid transparent;
}







/*Bei Fehlerfreiheit, bzw. wenn mehr als ein Slide im Slider vorhanden ist, werden typischerweise beim Slider.Start() -> view.Start() werden die Controlcontainer sichtbar gemacht.
Die Zusatzklasse cms4d_slider5_show wird auf jedem Controlcontainer einzeln gesetzt, so dass auch
benutzerdefinierte Controls außerhalb der DOM Hierarchie des Sliders erreicht werden können.
ABER: dies macht die klickbaren Buttons selbst noch nicht zugänglich, da sie typischerweise bei :hover eingeblendet werden.
Dazu kommt noch die :hover Regel auf dem obersten Slide Container.
Das funktioniert allerdings nicht, enn die Controls in extnernen Container gerendert wurden. Die Sichtbarkeit der klickbaren
Buttons wird dann projektspezifisch pro Slider definiert.
Ein typisches Beispiel ist eine Newsslider mit Controls außerhalb des Sliders, wo die klickbaren Buttons explizit immer sichtbar gechaltet
werden sobald ein Slider fehlerfrei initialisiert ist: dann hat der Buttoncontainer die Zusatzklasse ..._show, was per CSS auch die SWichtbarkeit der klickbaren Buttons einschalten kann.*/
/*Bei Erfolg: Buttoncontainer einblenden*/
.cms4d_slider5_cbtn.cms4d_slider5_show,
.cms4d_slider5_ibtn_container.cms4d_slider5_show{
	visibility:visible;
}
/*Standard: bei hover auf dem Slider klickbare Buttons einblenden.
ACHTUNG: auch hier darf dies nur geschehen, wenn der Slider komplett gültig gestart wurde, auf dem Buttoncontainer also
die Zusatzklasse ..._show dynamisch per JS gesetzt wurde.*/
.cms4d_slider5:hover .cms4d_slider5_show .cms4d_slider5_cbtn_btn,
.cms4d_slider5:hover .cms4d_slider5_show .cms4d_slider5_ibtn_holder{
	visibility:visible;
}