MediaWiki:Gadget-CustomSlider.css

#SliderView {
  background-color: #000;
  width: 80%;  
  margin: 0 auto;
  height: auto;
  position: relative;
  overflow: hidden;
  user-select: none;
  color: #fff;
}
#SliderWrapper {
  position: relative;
  transition: 1s;
  transition-timing-function: cubic-bezier(.67,.01,.23,1);
}
#SliderWrapper, #SliderWrapper ul, #SliderWrapper li, #NavBtns, #NavBtns ul {
  margin: 0px;
  padding: 0px;
}
#NavBtns li {
  margin: 0px;
}
 
.Sld {
  height: auto;
  list-style: none;
  display: inline;
  float: left;
  position: relative;
}

.Sld h2 {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0;
  padding: 12px;
  background: rgba(0,0,0,0.7)!important;
  text-shadow: none!important;
}
 
.SlideIMG {
  width: 100%;
}
.SlideIMG img {
  display: block;
  height: 320px !important;
  margin: 0 auto;
  width: auto !important;
  position: relative;  
}
 
#NavBtns {
  position: absolute; 
  display: block;
}
.NavBtn {
  position: relative;
  display: block;
  top: 0px;
  width: auto;
  height: auto;
  list-style: none;
  margin: 0px;
  background: transparent;
}
 
.nmLeft {
  height: 100%;
  left: 0px;
  background: linear-gradient(to right, rgba(61,61,61,0.8), rgba(61,61,61,0.8),  transparent);
}
.nmLeft li {
  list-style: none;   
  padding: 10px 100px 10px 10px;
}
.nmLeft li:hover {
  cursor: pointer;
  background: linear-gradient(to right, rgba(81,81,81,0.8), rgba(81,81,81,0.8),  transparent);
}
 
.nmRight {
  height: 100%;
  right: 0px;
  background: linear-gradient(to left, rgba(61,61,61,0.8), rgba(61,61,61,0.8),  transparent);
  text-align: left;
}
.nmRight li {
  list-style: none;   
  padding: 10px 10px 10px 100px;
}
.nmRight li:hover {
  cursor: pointer;
  background: linear-gradient(to left, rgba(81,81,81,0.8), rgba(81,81,81,0.8),  transparent);
}
 
.nmTop {
  width: 100%;
  top: 0px;
  background: linear-gradient(to bottom, rgba(61,61,61,0.8), rgba(61,61,61,0.8),  transparent);
  text-align: left;
}
.nmTop li {
  display: inline-block;
  list-style: none;   
  padding: 10px 10px 20px 10px;
}
.nmTop li:hover {
  cursor: pointer;
  background: linear-gradient(to bottom, rgba(81,81,81,0.8), rgba(81,81,81,0.8),  transparent);
}
 
.nmBottom {
  width: 100%;
  bottom: 0px;
  background: linear-gradient(to top, rgba(61,61,61,0.8), rgba(61,61,61,0.8),  transparent);
  text-align: left;
}
.nmBottom li {
  display: inline-block;
  list-style: none;   
  padding: 20px 10px 10px 10px;
}
.nmBottom li:hover {
  cursor: pointer;
  background: linear-gradient(to top, rgba(81,81,81,0.8), rgba(81,81,81,0.8),  transparent);
}
 
.nbActiveLeft {
  background: linear-gradient(to right, rgba(111,111,111,0.8), rgba(111,111,111,0.8),  transparent);
}
.nbActiveRight {
  background: linear-gradient(to left, rgba(111,111,111,0.8), rgba(111,111,111,0.8),  transparent);
}
.nbActiveTop {
  background: linear-gradient(to bottom, rgba(111,111,111,0.8), rgba(111,111,111,0.8),  transparent);
}
.nbActiveBottom {
  background: linear-gradient(to top, rgba(111,111,111,0.8), rgba(111,111,111,0.8),  transparent);
}
@media screen and (max-width:850px) {
  #SliderView {
    width: 100%;
  }
  .SlideIMG img {
    display: block;
    height: 280px !important;
    margin: 0 auto;
    width: auto !important;
    position: relative;  
  }
}