/*
Examples used on the ui-carousel.html page

    Created on : 01-Dec-2015, 13:05:04
    Author     : Richard.Siggins
*/

#example-carousel4 .carousel-control.left,#example-carousel4 .carousel-control.right {
    background-image:none !important;
}
#example-carousel4 .carousel-caption {
    top:auto;
    width:auto;
    right:auto;
    bottom:60px;
    left:0;
    padding:20px;
    background:rgba(0,0,0,0.70);
    text-align:left;
    height:auto;
    max-width:60%;
}
#example-carousel4 .carousel-control.right {
    right:10px;
}
#example-carousel4 .carousel-control.left {
    right: 46px;
}
#example-carousel4 .carousel-indicators {
    bottom:5px;
    left:0;
    width:auto;
    padding:5px 25px 5px 25px;
    margin-left:0;
    background:rgba(0,0,0,0.7);
}
#example-carousel4 .carousel-indicators li {
    border-radius:0;
    width:8px;
    height:8px;
    background:#fff;
}
#example-carousel4 .carousel-indicators .active {
    width:10px;
    height:10px;
    background:#39b3d7;
    border-color:#39b3d7;
}
#example-carousel4 .carousel-control {
    background: #39b3d7;
    color:#fff;
    width:26px;
    top:auto;	
    left:auto;
    bottom:12px;
    opacity:0.85;
}
#example-carousel4 .carousel-control span {
    position: static;
}
#example-carousel4 .carousel-control i {
    width: 10px;
    height: 10px;
    margin: 0px;
}

/* Simple Carousel */
#example-carousel5 {
    padding:5px;
    background: #428BCA;
}
#example-carousel5 .carousel-caption {
    top:auto;
    width:auto;
    right:auto;
    bottom:0px;
    left:0;
    padding:20px;
    background:rgba(255,255,255,0.65);
    text-align:center;
    height:auto;
    width:100%;
    color:#432A18;/*#FFF*/
    text-shadow:none;
}
#example-carousel5 .carousel-caption h2 {
    color:#428BCA;
    margin-top:0;
}
#example-carousel5 .carousel-control {
    color:#fff;
    top:44%;
    background:#428BCA;
    bottom:auto;
    padding-top:8px;
    width:36px;
    border-radius:50%;
    height:36px;
    opacity:1;
}
#example-carousel5 .carousel-control.left, 
#example-carousel5 .carousel-control.right {
    background-image:none !important;
}
#example-carousel5 .carousel-control.right,
#example-carousel5 .carousel-control .glyphicon-chevron-right {
    left:auto;
    right:-16px;
}
#example-carousel5 .carousel-control.left {
    right:auto;
    left:-16px;
}
#example-carousel5 .carousel-control span {
    top: 15%;
}

/* Product Slider */
#example-carousel6 .thumbnail {
    margin-bottom: 0;
}
#example-carousel6 .carousel-control.left,
#example-carousel6 .carousel-control.right {
    background-image:none !important;
}
#example-carousel6 .carousel-control {
    color:#fff;
    top:40%;
    color:#428BCA;
    bottom:auto;
    padding-top:4px;
    width:30px;
    height:30px;
    text-shadow:none;
    opacity:1;
}
#example-carousel6 .carousel-control:hover {
    color: #d9534f;
}
#example-carousel6 .carousel-control.right {
    left:auto;
    right:-32px;
}
#example-carousel6 .carousel-control.left {
    right:auto;
    left:-32px;
}
#example-carousel6 .carousel-indicators {
    bottom:-30px;
}
#example-carousel6 .carousel-indicators li {
    border-radius:0;
    width:10px;
    height:10px;
    background:#ccc;
    border:1px solid #ccc;
}
#example-carousel6 .carousel-indicators .active {
    width:12px;
    height:12px;
    background:#3276b1;
    border-color:#3276b1;
}
#example-carousel6 .carousel-control i {
    width: 10px;
    height: 10px;
    margin-left: -10px
}
#example-carousel6 .item .col-md-3 {
    padding-right: 15px;
    padding-left: 15px;
}
#example-carousel6 .carousel-control.left:hover, 
#example-carousel6 .carousel-control.right:hover {
    background: none;
}
#example-carousel6 .carousel-control {
    font-size: 30px;
}

/* Thumbnail Carousel */
#example-carousel7 .carousel-indicators {
    bottom: 0;
    left: 10px;
    margin-left: 5px;
    width: 100%;
}
#example-carousel7 .carousel-indicators li {
    border: medium none;
    border-radius: 0;
    float: left;
    height: 67px;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 5px !important;
    margin-top: 0;
    width: 100px;
}
#example-carousel7 .carousel-indicators img {
    border: 2px solid #FFFFFF;
    float: left;
    height: 67px;
    left: 0;
    width: 100px;
}
#example-carousel7 .carousel-indicators .active img {
    border: 2px solid #39b3d7;
}

/* Tabbed Carousel */
#example-carousel8 .nav a small {
    display: block;
}
#example-carousel8 .nav {
    background: #eee;
}
#example-carousel8 .nav-pills > li > a {
    border-radius: 0px;
}

#example-carousel8 .carousel-indicators {
    display: block;
    bottom:5px;
    left:0;
    width:auto;
    padding:5px 25px 5px 25px;
    margin-left:0;
    background:rgba(0,0,0,0.7);
}
#example-carousel8 .carousel-indicators li {
    border-radius:0;
    width:8px;
    height:8px;
    background:#fff;
}
#example-carousel8 .carousel-indicators .active {
    width:10px;
    height:10px;
    background:#39b3d7;
    border-color:#39b3d7;
}