/*  Gavin Wray, ITS
    Adapted for ID7, 11 Feb 2016 
*/

/*** INFOGRAPHICS SLIDESHOW ***/

#slideshowContainer {
  position: relative; 
  height: 405px;
  width: 100%;
  max-width: 600px; /* Constrain to width of slide image */
  margin-left: 0;	
  margin-bottom: 20px;
}

#slideshowContainer ul {
  padding-left: 0; 
  list-style: none;
  margin: 0;
}

#slideshowContainer ul > li {
  position: absolute; 
  height: 405px;
  width: 100%;
}

#slideshowContainer ul > li.slide {
  background-position: top left; 
  background-repeat: no-repeat;
}

#slideshowContainer ul li .caption {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35em;
  position: absolute;
}

/* Slide controls */

.slideshowControl {
  position: absolute;
  bottom: 10px;
  right: 20px;
}

.slideshowControl .controller {
  background: transparent url('slidedot-grey.png') top left no-repeat;
  display: inline-block;
  height: 21px;
  width: 21px;
  cursor: pointer;
}

.slideshowControl .controller.active {
  background-image: url('slidedot-red.png');
  
  }
.slideshowControl .controller.active.slide5 {
  background-image: url('slidedot-white.png');
}

/* Slide content */

#slide1 {background-image: url(infographic1-poundworth.png);}
#slide2 {background-image: url(infographic2-euroclock.png);}
#slide3 {background-image: url(infographic3-voter.png);}
#slide4 {background-image: url(infographic4-banks.png);}
#slide5 {background-image: url(infographic5-marketinequality.png);}
#slide6 {background-image: url(infographic6-foodbanks.png);}
#slide7 {background-image: url(infographic7-tulipmania.png);}

/* Adjust individual slide caption positions and accent colours */

#slide1 .caption {
  width: 260px;
  bottom: 60px;
  left: 321px;
  color: white;
}

#slide1 .caption .accent {
  color: #D0AB5C;
}

#slide2 .caption {
  width: 260px;
  bottom: 36px;
  left: 40px;
  color: #3d3d3b;  
}

#slide2 .caption .accent {
  color: white;
}

#slide3 .caption {
  width: 310px;
  bottom: 60px;
  left: 261px;
  color: #17666e;
}

#slide3 .caption .accent {
  color: #AB1D39;
}

#slide4 .caption {
  width: 315px;
  top: 41px;
  left: 227px;
  color: white;
}

#slide4 .caption .accent {
  color: #D0AB5C;
}

#slide5 .caption {
  width: 306px;
  top: 232px;
  left: 255px;
  color: white;
}

#slide5 .caption .accent {
  color: #BAE25B;
}

#slide6 .caption {
  width: 450px;
  top: 260px;
  left: 100px;
  color: white;
}

#slide6 .caption .accent {
  color: #3d3d3b;
}

#slide7 .caption {
  width: 250px;
  top: 250px;
  left: 322px;
  color: #ab0536;
}

#slide7 .caption .accent {
  color: #3D3E3B;
}


/*** RESPONSIVE ***/

@media (max-width: 660px) {

  #slideshowContainer {
    position: static;
    width: auto;
    height: auto;
    margin-top: 40px;
    background: none;
    min-height: 0;
  }

  #slideshowContainer ul > li {
    position: static;
    height: auto;
    width: auto;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  #slideshowContainer ul > li:last-child {
    border-bottom: none;
    max-height: 40px !important;
  }

  #slideshowContainer ul li .caption {
    position: static;
    width: auto !important;
    height: auto !important;
    color: #383838;
  }

   #slideshowContainer ul li .caption .accent {
    color: #AB1D39;
   }

  /* Hide images */
  #slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7 {
    background: none;
  }

  /* Hide controls */
  .slideshowControl {
    display: none;
  }

}

/* Extra large screens */
@media (min-width: 1200px) {
    #slideshowContainer {
        margin-left: 20px;
    }
}