/*                                                                      */
/* 		           FEATURED CONTENT - TABLET UP            		        */
/*                                                                      */
/* v001 02 Aug 2019 -   Initial version created from WOL tablet.css     */
/* v002 06 Aug 2019 -   Modified to new content element names           */
/* v003 07 Aug 2019 -   Pick up new Feature sprite offsets from GS      */
/*                                                                      */
/*                                                                      */

  /* Slideshow */
  
  div.wrapper.featured { position: relative; display: block; }
  section#featuredcontent { position: relative; }
  .slideshow { height: 330px; width: 100%; overflow: hidden; margin: 0 auto; }
  a.activeSlide { font-weight: bold; }
  .slide-content { height: 330px; width: 100%; float: left; }
  .slide-content > div { width: 1000px; margin: 0 auto; }
  .content .slide-content h2 { font-size: 150%; margin-top: 0px; }
  .slide-image img { border: none; }
  .slide-image { width: 1000px; float: left; }
  
  /* The page progression indicator */
  #slideshow-nav { position: absolute; margin: 0 auto; top: 300px; right: 10px; z-index: 100;}
  #slideshow-nav a { 
    display: inline-block; 
    overflow: hidden; 
    text-indent: -50px; 
    height: 19px; 				/* Changed from 20px to 19px becauise line in sprite was showing */
    width: 20px; 
    margin-right: 5px; 
	background-position: -3px -460px;
  }
  #slideshow-nav a.activeSlide { background-position: -223px -460px; }
  #slideshow-nav a:hover { 		 background-position: -23px -460px; } 


  .slideshow div.slide-content {
    background: url({_css_image-sprite-feature}) no-repeat 50% 0;
	background-color: #232F5D /* BAT Blue */;
  }
  .slideshow div.slide-panel {
    width: 400px;
	min-height: 160px;
    margin: 50px 0 0 50px;
    padding: 20px 20px 20px 20px;
	background-color: rgba( 251, 185, 17, 0.9 ) /* 90% BAT Yellow */;
	border: 5px solid white;
  }
  .slideshow a:hover div.slide-panel {
	background-color: white;
	background-color: #f3f3f3 /* Base Light  Grey */;
	border-color: #636469 /* Dark Grey */;
  }
  .slideshow div.slide-content			 {	background-position: 50%  -250px; }
  .slideshow div.slide-content.feature1	 {	background-position: 50%  -250px; }
  .slideshow div.slide-content.feature2	 {	background-position: 50%  -590px; }
  .slideshow div.slide-content.feature3	 {	background-position: 50%  -930px; }
  .slideshow div.slide-content.feature4	 {	background-position: 50% -1270px; }
  .slideshow div.slide-content.feature5	 {	background-position: 50% -1610px; }
  .slideshow div.slide-content.feature6	 {	background-position: 50% -1950px; }
  .slideshow div.slide-content.feature7	 {	background-position: 50% -2290px; }
  .slideshow div.slide-content.feature8	 {	background-position: 50%  -250px; }

  /* New offsets from GS */
  .slideshow div.slide-content			 {	background-position: 50%   -70px; }
  .slideshow div.slide-content.feature1	 {	background-position: 50%   -70px; }
  .slideshow div.slide-content.feature2	 {	background-position: 50%  -410px; }
  .slideshow div.slide-content.feature3	 {	background-position: 50%  -750px; }
  .slideshow div.slide-content.feature4	 {	background-position: 50% -1090px; }
  .slideshow div.slide-content.feature5	 {	background-position: 50% -1430px; }
  .slideshow div.slide-content.feature6	 {	background-position: 50% -1770px; }
  .slideshow div.slide-content.feature7	 {	background-position: 50%   -70px; }



  .slideshow h3,
  .slideshow p {
    color: white;
  }
  .slideshow h3 {
    font-size: 2.75em;
    font-weight: 300;
    line-height: 1.1em;
    max-width: 530px;
    margin: 0;
    padding: 0;
  }
  .slideshow h3 a {
    color: white;
    text-decoration: none;
  }
  .slideshow p {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0;
    max-width: 530px;
    padding-top: 5px;
    padding-bottom: 10px;
  }
  .slideshow p a,
  .slideshow a p,
  .slideshow p a p {
    color: white;
  }
  .slideshow a:hover div.slide-panel h3,
  .slideshow a:hover div.slide-panel p {
	color: #636469 /* Dark Grey */;
  }