2017.igem.org/Template:Shanghaitech/CSS fractionslider

.fraction-slider{

   position:relative;
   width:100%; height:100%;
   overflow:visible;

}

.fraction-slider .slide{

   display:none; width:100%; height:100%;
   position:absolute;
   z-index:5000;

}

.fraction-slider .active-slide{

   z-index:99;

}

.fraction-slider .fs_obj{

   display:block; display:none;
   position:absolute;
   top:0px; left:100%;
   z-index:7000;

}

.fraction-slider .fs_fixed_obj{

   z-index:6000;
   left:0;

}

.fraction-slider .fs_obj *{

   display:inline-block;
   position:relative;
   top:0px; left:0px;

}

.fs_loader{

   width:100%; height:450px;
   background:url(../images/fraction-slider/fs.spinner.gif) center center no-repeat transparent;

}

/** CONTROLS **/

.fraction-slider .prev, .fraction-slider .next{

   display: none;
   height:35px;
   position: absolute;
   width:35px;
   z-index: 9999;
   border-radius:100%;
   border:1px solid #fff;
   text-align:center;
   line-height:31px;
   color:#fff;
   outline:none;

}

.fraction-slider .next {

   right:10px;
   top:48%;

} .fraction-slider .prev {

   left:10px;
   top:48%;

} .fraction-slider .next:before {

   content: "\f105";
   margin-left: 3px;

} .fraction-slider .prev:before {

   content: "\f104";
   margin-right: 3px;

} .fraction-slider .next:before, .fraction-slider .prev:before {

   color:#fff;
   font-size:33px;
   font-family:fontawesome;

} .fraction-slider .prev:hover, .fraction-slider .next:hover, .fraction-slider .next:hover:before, .fraction-slider .prev:hover:before {

   color:#E74C3C;
   border-color:#E74C3C;
   opacity:1;
   transition:all 0.4s ease-in-out;
   -webkit-transition:all 0.4s ease-in-out;
   -moz-transition:all 0.4s ease-in-out;
   -ms-transition:all 0.4s ease-in-out;
   -o-transition:all 0.4s ease-in-out;
   border-width:3px;
   line-height:26px;

} .fraction-slider:hover .prev, .fraction-slider:hover .next{

   display:block;

}

/** PAGER **/

.fs-pager-wrapper{

   position:absolute;
   left:47%;
   bottom:10px;
   z-index:9999;

}

.fs-pager-wrapper a, .fs-custom-pager-wrapper a{

   display:inline-block;
   width:14px; height:14px;
   margin:0 5px 0 0;
   /*background:url(../images/fraction-slider/fs.pager.png) 0px -14px no-repeat transparent;*/

} .fs-pager-wrapper .active, .fs-custom-pager-wrapper .active{

   /*background:url(../images/fraction-slider/fs.pager.png) 0px 0px no-repeat transparent;*/

}