/* #### - CSslider css below - #### */

#CSslider-outer { max-width:980px; margin:auto; position:relative; padding-left:50px; padding-right:50px; padding-bottom:10px; } /* change padding to move arrows */
#CSslider { display:block; overflow:hidden; border:0px solid #ccc; height:110px; }
#CSslider-outer .slide-check { position:absolute; left:-9999px }

#CSslider .slides { width:1000% } /* #### (slides x 100) #### */
#CSslider .slides > div { width:10%; /* #### (100 / slides) #### */
	float:left; overflow:hidden; position:relative; 
	-webkit-transform:translate3d(0,0,0); /* http://davidwalsh.name/translate3d */
	-webkit-transition:-webkit-transform .5s ease-in-out; transition:transform .5s ease-in-out
	}

#CSslider-outer .pips { position:absolute; z-index:9998; top:100px; text-align:center; width:100%; margin-left:-4.25em;}
#CSslider-outer .pips div { display:inline-block; margin:5px auto }
#CSslider-outer .pips span { font:bold 0.5em/2em Arial; color:#333333;/*dimgray;*/ background:silver; width:2em; border-radius:2em; margin:0 0.5em; float:left; display:block; z-index:9999; cursor:pointer; border: 1px solid #333333;/*dimgray;*/}
#CSslider-outer .arrows { 
position:absolute; display:none; z-index:9999;
text-align: center;
font-size: 20px;
color: #FFFFFF;
text-shadow: none;
background-color: silver;
height: 40px;
opacity: 0.8;
width: 40px;
margin-top:20px;
cursor:pointer;
border: 1px solid #333333; /*gray;*/
}
#CSslider-outer .arrows div { 
	padding-top:7px;
}

#CSslider-outer .pips span:hover { 
    background-color:#777777;/*#999999;*/
}
#CSslider-outer .pips label.checked span { 
    background-color:#333333; /*dimgray;*/
}
#CSslider-outer .arrows:hover { 
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
	color:#777777; /*dimgray;*/
	border: 1px solid #777777; /*dimgray;*/
}

/* #### - define ids of checked buttons/arrows here - #### */
#btn-goto-first:checked ~ #arrow-1,
#btn-1:checked ~ #arrow-2,
#btn-2:checked ~ #arrow-3,
#btn-3:checked ~ #arrow-4, 
#btn-4:checked ~ #arrow-5, 
#btn-5:checked ~ #arrow-6, 
#btn-6:checked ~ #arrow-7, 
#btn-7:checked ~ #arrow-8, 
#btn-8:checked ~ #arrow-9, 
#btn-9:checked ~ #arrow-10, 
#btn-10:checked ~ #arrow-1 { /* last button always goes to #arrow-1 */
	right:0px; display:block;
	}

/* #### - define ids of checked buttons/arrows here - reposition/rotate '>' arrows to fake '<' arrows - #### */
#btn-2:checked ~ #arrow-1, 
#btn-3:checked ~ #arrow-2,
#btn-4:checked ~ #arrow-3, 
#btn-5:checked ~ #arrow-4, 
#btn-6:checked ~ #arrow-5, 
#btn-7:checked ~ #arrow-6, 
#btn-8:checked ~ #arrow-7, 
#btn-9:checked ~ #arrow-8, 
#btn-10:checked ~ #arrow-9, 
#btn-1:checked ~ #arrow-10 { /* #btn-1 always goes to last arrow */
	left:0px; display:block;
	-webkit-transform:rotate(-180deg); -ms-transform:rotate(-180deg); transform:rotate(-180deg);
	}

/* #### - define ids of checked buttons/arrows here - (% increment per slide) - move slides when checked - #### */
#CSslider-outer #btn-1:checked ~ #CSslider .slides > div, #CSslider #btn-goto-first:checked ~ #CSslider .slides > div { -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0)}
#CSslider-outer #btn-2:checked ~ #CSslider .slides > div { -webkit-transform:translate(-100%,0); -ms-transform:translate(-100%,0); transform:translate(-100%,0) }
#CSslider-outer #btn-3:checked ~ #CSslider .slides > div { -webkit-transform:translate(-200%,0); -ms-transform:translate(-200%,0); transform:translate(-200%,0) }
#CSslider-outer #btn-4:checked ~ #CSslider .slides > div { -webkit-transform:translate(-300%,0); -ms-transform:translate(-300%,0); transform:translate(-300%,0) }
#CSslider-outer #btn-5:checked ~ #CSslider .slides > div { -webkit-transform:translate(-400%,0); -ms-transform:translate(-400%,0); transform:translate(-400%,0) }
#CSslider-outer #btn-6:checked ~ #CSslider .slides > div { -webkit-transform:translate(-500%,0); -ms-transform:translate(-500%,0); transform:translate(-500%,0) }
#CSslider-outer #btn-7:checked ~ #CSslider .slides > div { -webkit-transform:translate(-600%,0); -ms-transform:translate(-600%,0); transform:translate(-600%,0) }
#CSslider-outer #btn-8:checked ~ #CSslider .slides > div { -webkit-transform:translate(-700%,0); -ms-transform:translate(-700%,0); transform:translate(-700%,0) }
#CSslider-outer #btn-9:checked ~ #CSslider .slides > div { -webkit-transform:translate(-800%,0); -ms-transform:translate(-800%,0); transform:translate(-800%,0) }
#CSslider-outer #btn-10:checked ~ #CSslider .slides > div, #CSslider #btn-goto-last:checked ~ #CSslider .slides > div { -webkit-transform:translate(-900%,0); -ms-transform:translate(-900%,0); transform:translate(-900%,0) }


/* - #### custom styles for slide content - #### */
#CSslider .slides > div > div { font-size:0.875em; padding:0; }
#CSslider .slides img { float:left; margin-top:0.25em; margin-right:1em }
#CSslider .slides .title { display:inline-block; margin-bottom:0.75em }
#CSslider .slides .num { float:right; font-size:0.625em; color:#999 }
#CSslider .slides .more { text-align:right; font-size:0.875em }


@media ( max-width:580px ) { /* #### - make better use of space at 480px (480/16=30 - 16px being default browser font-size) - #### */
	#CSslider-outer { font-size:0.9375em; } /*line-height:1.5em; padding:0 0 1.125em 0 } beeinflusst Höhe beim Zusammenschieben */
	#CSslider-outer .pips { display:none }
	#CSslider .slides > div > div { padding:1em 0.75em 1.25em }
	#CSslider .slides .more { text-align:center }
}