/* Examples - Tiny Carousel */
#slider1 { height: 1%; overflow:hidden; padding: 0 0 10px;   }
#slider1 .viewport { float: left; width: 240px; height: 125px; overflow: hidden; position: relative; }
#slider1 .buttons { background:url("buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
#slider1 .next { background-position: 0 0; margin: 30px 0 0 10px;  }
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}

#slider2 { height: 1%; overflow:hidden; position: relative; padding: 0 0 10px;   }
#slider2 .viewport { float: left; width: 780px; height: 125px; overflow: hidden; position: relative; }
#slider2 .buttons { background:url("buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
#slider2 .next { background-position: 0 0; margin: 30px 0 0 10px; }
#slider2 .disable { visibility: hidden; }
#slider2 .overview { list-style: none; position: absolute; width: 240px; left: 0 top: 0; }
#slider2 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}

#slider3 { height: 1%; overflow:hidden; padding: 0 0 10px 0; }
#slider3 .viewport { width: 240px; height: 125px; float: left; overflow: hidden; position: relative; }
#slider3 .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 45px; }
#slider3 .pager li { float: left; }
#slider3 .pager a { background-color: #fff; text-decoration: none; text-align: center; padding: 5px; color: #555555; font-size: 14px; font-weight: bold; display: block; }
#slider3 .pager .active { color: #fff; background-color:  #555555; }
#slider3 .buttons { background:url("buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
#slider3 .next { background-position: 0 0; margin: 30px 0 0 10px; }
#slider3 .disable { visibility: hidden; }
#slider3 .overview { list-style: none; position: absolute; width: 240px; left: 0 top: 0; }
#slider3 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}

#slider4 { height: 1%; overflow:hidden; display: block; padding: 0 0 10px 0; margin: 0 0 0 50px;}
#slider4 .viewport { width: 500px; height: 257px; overflow: hidden; position: relative; }
#slider4 .pager { overflow:hidden; height: 1%; list-style: none; clear: both; margin: 0 0 10px; }
#slider4 .pager li { float: left; }
#slider4 .pagenum { background-color: #fff; text-decoration: none; text-align: center; padding: 5px; color: #555555; font-size: 14px; font-weight: bold; display: block; }
#slider4 .active { color: #fff; background-color:  #555555; }
#slider4 .overview { list-style: none; position: absolute; width: 500px; left: 0 top: 0; }
#slider4 .overview .page{ float: left; padding: 5px; height: 245px; border: 1px solid #dcdcdc; width: 488px;}

#slider5 { height: 1%; overflow:hidden; padding:0; margin:0;  }
#slider5 .viewport { width: 100%; height: 150px; overflow: hidden; position: relative; }
#slider5 .buttons { background:url(buttons.png) no-repeat scroll 0 0 transparent; display: block; text-indent: -999em; width: 20px; height: 20px; overflow: hidden; position: absolute; left:220px; top:130px; }
#slider5 .next { background-position: 0 -20px; left:245px;}
#slider5 .disable { visibility: hidden; }
#slider5 .overview { list-style: none; position: absolute; width: 100%; left: 0; padding:0; margin:0; top: 0;}
#slider5 .overview li{ margin:0; padding: 0px; height: 150px; width: 100%; border:1px solid #fff;}
#slider5 .overview li img{ float:right; max-width:100px; max-height:70px; border:1px solid #ddd; margin:0 1px 10px 10px;}
#slider5 .overview li h1{ font-size:15px;}

#slidersektor { height: 1%; overflow:hidden; padding:0; margin:0;  }
#slidersektor .viewport { width: 100%; height: 150px; overflow: hidden; position: relative; }
#slidersektor .buttons { background:url(buttons.png) no-repeat scroll 0 0 transparent; display: block; text-indent: -999em; width: 20px; height: 20px; overflow: hidden; position: absolute; left:220px; top:130px; }
#slidersektor .next { background-position: 0 -20px; left:245px;}
#slidersektor .disable { visibility: hidden; }
#slidersektor .overview { list-style: none; position: absolute; width: 100%; left: 0; padding:0; margin:0; top: 0;}
#slidersektor .overview li{ margin:0; padding: 0px; height: 150px; width: 100%; border:1px solid #fff;}
#slidersektor .overview li img{ float:right; max-width:100px; max-height:70px; border:1px solid #ddd; margin:0 1px 10px 10px;}
#slidersektor .overview li h1{ font-size:15px;}

#slider6 { height: 1%; overflow:hidden; padding: 0 0 10px; margin: 0 0 0 50px;  }
#slider6 .viewport { float: left; width: 240px; height: 125px; overflow: hidden; position: relative; }
#slider6 .buttons { background:url("buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
#slider6 .next { background-position: 0 0; margin: 30px 0 0 10px;  }
#slider6 .disable { visibility: hidden; }
#slider6 .overview { list-style: none; position: absolute; width: 240px; left: 0 top: 0; }
#slider6 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}

#slider7 { height: 300px; overflow:hidden; padding: 0 0 10px 0; margin:0; position:relative;}
#slider7 .viewport { width: 900px; height: 300px; float: left; overflow: hidden; position: relative; }
#slider7 .buttons { background:url("buttons.png") no-repeat scroll 0 0 transparent; display: block; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position:absolute; left:88%; top:80%;}
#slider7 .next { background-position: 0 0; left:93%;}
#slider7 .disable { visibility: hidden; }
#slider7 .overview { list-style: none; position: absolute; width: 900px; left: 0; top: 0; background-color:#f4f4f4; }
#slider7 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 300px; width: 900px;}
#slider7 .overview li img{ width:640px; float:left;}
#slider7 .overview li .metin{ width:220px; padding:10px 20px; background-color:#000; float:right; height:100%;}
#slider7 .overview li .metin h1{ margin:0 0 10px 0;}
#slider7 .overview li ul li{ margin: 0; padding: 1px 1px 1px 20px; height: 20px; background:url(../images/bullet.png) no-repeat 0 3px;}
#slider7 .overview li ul li a:hover{ text-decoration:underline;}
#slider7 .overview li .metin h3{ color:#fff;}

/* Examples - Tiny Scrollbar */
#scrollbar1 { width: 520px; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#scrollbar1 .scrollbar{ background: transparent url(bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#scrollbar1 .track { background: transparent url(bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:15px; position: relative; }
#scrollbar1 .thumb { background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#scrollbar1 .thumb .end { background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#scrollbar1 .disable { display: none; }

#scrollbar2 { width: 251px; margin: 20px 0 10px; }
#scrollbar2 .viewport { width: 236px; height: 125px; overflow: hidden; position: relative; }
#scrollbar2 .overview { list-style: none; width: 1416px; padding: 0; margin: 0; position: absolute; left: 0; top: 0;  }
#scrollbar2 .overview img{ float: left; }
#scrollbar2 .scrollbar{ background: transparent url(bg-scrollbar-track-x.png) no-repeat 0 0; position: relative; margin: 0 0 5px; clear: both; height: 15px; }
#scrollbar2 .track { background: transparent url(bg-scrollbar-trackend-x.png) no-repeat 100% 0; width: 100%; height:15px; position: relative; }
#scrollbar2 .thumb { background: transparent url(bg-scrollbar-thumb-x.png) no-repeat 100% 50%; height: 25px; cursor: pointer; overflow: hidden; position: absolute; left: 0; top: -5px; }
#scrollbar2 .thumb .end{ background: transparent url(bg-scrollbar-thumb-x.png) no-repeat 0 50%; overflow: hidden; height: 25px; width: 5px;}
#scrollbar2 .disable { display: none; }

#scrollbar3 { width: 320px;  margin: 20px 0 10px; }
#scrollbar3 .viewport { width: 300px; height: 300px; overflow: hidden; position: relative; }
#scrollbar3 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#scrollbar3 .scrollbar{ background: transparent url(bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#scrollbar3 .track { background: transparent url(bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:15px; position: relative; }
#scrollbar3 .thumb { background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#scrollbar3 .thumb .end { background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#scrollbar3 .disable { display: none; }

#scrollbar4 { width: 520px;  margin: 20px 0 10px; }
#scrollbar4 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar4 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar4 .scrollbar{ background: transparent url(bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#scrollbar4 .track { background: transparent url(bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:15px; position: relative; }
#scrollbar4 .thumb { background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#scrollbar4 .thumb .end { background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#scrollbar4 .disable { display: none; }

#scrollbar5 { width: 520px;  overflow: hidden; margin: 20px 0 10px; }
#scrollbar5 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar5 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar5 .scrollbar{ background: transparent url(bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#scrollbar5 .track { background: transparent url(bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:15px; position: relative; }
#scrollbar5 .thumb { background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#scrollbar5 .thumb .end { background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#scrollbar5 .disable { display: none; }
#scroll5text { display: none;}
#scroll5text2 { display: none;}
#scroll5text3 { display: none;}
#scroll5load { display:block; float:left; padding: 0 10px 0 0; }
#scroll5load2 { display:block; float:left; padding: 0 10px 0 0; }
#scroll5load3 { display:block; float:left; padding: 0 10px 0 0; }
#scroll5load4 { display:block; float:left; padding: 0 10px 0 0; clear: left; }
#scroll5load5 { display:block; float:left; padding: 0 10px 0 0; }
#scroll5load6 { display:block; float:left; padding: 0 10px 0 0; clear: left;}
#scroll5load6 { display:block; float:left; padding: 0 10px 0 0; }
#scrollbar5 .loadtext p { clear: both; margin: 0; padding: 20px 0 0; }

#scrollbar6 { width: 520px;  overflow: hidden; margin: 20px 0 10px; }
#scrollbar6 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar6 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar6 .scrollbar{ background: transparent url(bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#scrollbar6 .track { background: transparent url(bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:15px; position: relative; }
#scrollbar6 .thumb { background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#scrollbar6 .thumb .end { background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#scrollbar6 .disable { display: none; }
#scrollbar6 .loadtext p { clear: both; margin: 0; padding: 20px 0 0; }

#scroll6load { display:block; float:left; padding: 0 10px 0 0; }
#scroll6load2 { display:block; float:left; padding: 0 10px 0 0; }
#scroll6load3 { display:block; float:left; padding: 0 10px 0 0; }

/* Examples - Tiny Circleslider */
#rotatescroll1 { height:300px; position:relative; width:300px; }
#rotatescroll1 .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px }
#rotatescroll1 .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
#rotatescroll1 .overview li { height:300px; width:300px; float: left; position: relative; }
#rotatescroll1 .overlay {background:url(bg-rotatescroll.png) no-repeat 0 0;  position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll1 .thumb { background:url(bg-thumb.png) no-repeat 50% 50%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200; height: 100px; }
#rotatescroll1 .dot { background:url(bg-dot2.png) no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#rotatescroll1 .dot span { display: none; }

#rotatescroll2 { height:300px; position:relative; width:300px; }
#rotatescroll2 .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px }
#rotatescroll2 .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
#rotatescroll2 .overview li { height:300px; width:300px; float: left; position: relative; }
#rotatescroll2 .overlay {background:url(bg-rotatescroll.png) no-repeat 0 0;  position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll2 .thumb { background:url(bg-thumb.png) no-repeat 50% 50%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200; height: 100px; }
#rotatescroll2 .dot { background:url(bg-dot2.png) no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#rotatescroll2 .dot span { display: none; }

#rotatescroll3 { height:350px; padding: 25px; position:relative; width:350px; }
#rotatescroll3 .viewport{ height:350px; position: relative; margin:0 auto; overflow:hidden; width:350px }
#rotatescroll3 .overview { background-color: #efefef; position: absolute; width: 798px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
#rotatescroll3 .overview li { height:350px; width:350px; margin: 0 20px 0 0; float: left; position: relative; }
#rotatescroll3 .overlay {background:url(bg-rotatescroll2.png) no-repeat 0 0;  position: absolute; left: 0; top: 0; height:400px; width:400px; }
#rotatescroll3 .thumb { background:url(bg-thumb.png) no-repeat 50% 50%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200; height: 100px; }
#rotatescroll3 .dot { cursor: pointer; background:url(bg-dot3.png) no-repeat 0 0; height: 22px; text-align: center; line-height: 22px; font-size: 10px; color: #555; width: 22px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#rotatescroll3 .dot span { cursor: pointer; }