"

From 2013.igem.org

.carousel {

 position: relative;
 margin-bottom: 20px;
 line-height: 1;

}

.carousel-inner {

 position: relative;
 width: 100%;
 overflow: hidden;

}

.carousel-inner > .item {

 position: relative;
 display: none;
 -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
      -o-transition: 0.6s ease-in-out left;
         transition: 0.6s ease-in-out left;

}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {

 display: block;
 line-height: 1;

}

.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev {

 display: block;

}

.carousel-inner > .active {

 left: 0;

}

.carousel-inner > .next, .carousel-inner > .prev {

 position: absolute;
 top: 0;
 width: 100%;

}

.carousel-inner > .next {

 left: 100%;

}

.carousel-inner > .prev {

 left: -100%;

}

.carousel-inner > .next.left, .carousel-inner > .prev.right {

 left: 0;

}

.carousel-inner > .active.left {

 left: -100%;

}

.carousel-inner > .active.right {

 left: 100%;

}

.carousel-control {

 position: absolute;
 top: 40%;
 left: 15px;
 width: 40px;
 height: 40px;
 margin-top: -20px;
 font-size: 60px;
 font-weight: 100;
 line-height: 30px;
 color: #ffffff;
 text-align: center;
 background: #222222;
 border: 3px solid #ffffff;
 -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
         border-radius: 23px;
 opacity: 0.5;
 filter: alpha(opacity=50);

}

.carousel-control.right {

 right: 15px;
 left: auto;

}

.carousel-control:hover, .carousel-control:focus {

 color: #ffffff;
 text-decoration: none;
 opacity: 0.9;
 filter: alpha(opacity=90);

}

.carousel-indicators {

 position: absolute;
 top: 15px;
 right: 15px;
 z-index: 5;
 margin: 0;
 list-style: none;

}

.carousel-indicators li {

 display: block;
 float: left;
 width: 10px;
 height: 10px;
 margin-left: 5px;
 text-indent: -999px;
 background-color: #ccc;
 background-color: rgba(255, 255, 255, 0.25);
 border-radius: 5px;

}

.carousel-indicators .active {

 background-color: #fff;

}

.carousel-caption {

 position: absolute;
 right: 0;
 bottom: 0;
 left: 0;
 padding: 15px;
 background: #333333;
 background: rgba(0, 0, 0, 0.75);

}

.carousel-caption h4, .carousel-caption p {

 line-height: 20px;
 color: #ffffff;

}

.carousel-caption h4 {

 margin: 0 0 5px;

}

.carousel-caption p {

 margin-bottom: 0;

}

a:link, a:visited{ text-decoration: none; }

/* Carousel Fade Effect */ .carousel.carousel-fade .item { -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; -ms-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; opacity:0; }

.carousel.carousel-fade .active.item { opacity:1; }

.carousel.carousel-fade .active.left, .carousel.carousel-fade .active.right { left: 0; z-index: 2; opacity: 0; filter: alpha(opacity=0); }

.carousel.carousel-fade .next, .carousel.carousel-fade .prev { left: 0; z-index: 1; }

.carousel.carousel-fade .carousel-control { z-index: 3; }