/*                                                                      */
/* 		              PROMOS - 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 -   Inherited promo sprite offsets from GS          */
/*                                                                      */
/*                                                                      */


/* **************************************** */
/* 				ASIDE		 				*/
/* **************************************** */

  section#main-select aside {
    display: none;
  }

  div.promo {
    /*padding-left: 45px;
    margin-left: 5px;
    margin-right: 5px;*/
    display: block;
	float: left;		/* 14 Jul 2017 - had to do this instead of inline-block as middle promo on ipad stepping down */
    width: 32%;
    max-width: 250px;
  }

  .promo.non-func {
    min-height: 245px;		/* Generally no content in a nf-promo so give it some height (250px - 5px bottom border) */
  }

  div.promo {
    background-image: url(https://cms03.s3-eu-west-1.amazonaws.com/csg-ux-03-promos-20191217.jpg);
    background-repeat: no-repeat;
    background-position: -0px 0;
    padding: 0 0 0 0;
    margin: 0;
    border-width: 0 5px 5px 0;
    border-style: solid;
    border-color: white;
	overflow: hidden;	/* To stop the promos stepping out on tablet - but doesn't work */
	background-color: black;
  }
  div.promo a {
	display: block;
    padding: 175px 0 0 0;
	overflow: hidden;	/* To stop the promos stepping out on tablet - but doesn't work */
  }
  div.promo.demomode a {
    padding-top: 0;
  }
  div.promo a:hover {
	text-decoration: none;
  }
  div.promo a:hover h3 {
	color: white;
  }
  section#main-select div.promo {
    border-width: 0 5px 5px 5px;
  }
  section#main div.promo:first-of-type {
    border-width: 0 5px 5px 5px;
  }

  div.promo h3,
  div.promo p {
	background-color: #0072ce /* CSG Blue (Pantone 285C) */;
	background-color: rgba(0, 114, 206, 0.8) /* 80% CSG Blue (Pantone 285c) */;
	color: white;
	height: 50px;
    margin: 5px 0 0 0;      /* Changed 10px to 5px 7 Aug 2019 as too deep for sprite */
    padding: 10px 5px 0 10px;
	overflow: hidden;	/* To stop the promos stepping out on tablet - but doesn't work */
  }
  div.promo a:hover h3 {
	background-color: rgba(0, 114, 206, 0.9) /* 90% CSG Blue (Pantone 285c) */;
  }
  div.promo h3 a {
	color: white;
  }
  div.promo.promo0  { background-position:   -20px -37px; }
  div.promo.promo1  { background-position:  -280px -37px; }
  div.promo.promo2  { background-position:  -540px -37px; }
  div.promo.promo3  { background-position:  -800px -37px; }
  div.promo.promo4  { background-position: -1060px -37px; }
  div.promo.promo5  { background-position: -1320px -37px; }
  div.promo.promo6  { background-position: -1580px -37px; }
  div.promo.promo7  { background-position: -1840px -37px; }
  div.promo.promo8  { background-position: -2100px -37px; }
  div.promo.promo9  { background-position: -2360px -37px; }
  div.promo.promo10 { background-position: -2620px -37px; }

/* Offsets from GS */
  div.promo         { background-position:    -5px 0px; }
  div.promo.promo0  { background-position:    -5px 0px; }
  div.promo.promo1  { background-position:  -265px 0px; }
  div.promo.promo2  { background-position:  -525px 0px; }
  div.promo.promo3  { background-position:  -785px 0px; }
  div.promo.promo4  { background-position: -1045px 0px; }
  div.promo.promo5  { background-position: -1305px 0px; }
  div.promo.promo6  { background-position: -1565px 0px; }
  div.promo.promo7  { background-position: -1825px 0px; }
  div.promo.promo8  { background-position: -2085px 0px; }
  div.promo.promo9  { background-position: -2345px 0px; }
  div.promo.promo10 { background-position: -2605px 0px; }

/* Revised to fit the (old) sprite used to build Demo 1 */
  div.promo.promo0  { background-position:   -10px -20px; }
  div.promo.promo1  { background-position:  -270px -20px; }
  div.promo.promo2  { background-position:  -530px -20px; }
  div.promo.promo3  { background-position:  -790px -20px; }
  div.promo.promo4  { background-position: -1050px -20px; }
  div.promo.promo5  { background-position: -1310px -20px; }
  div.promo.promo6  { background-position: -1570px -20px; }
  div.promo.promo7  { background-position: -1830px -20px; }
  div.promo.promo8  { background-position: -2090px -20px; }
  div.promo.promo9  { background-position: -2350px -20px; }
  div.promo.promo10 { background-position: -2610px -20px; }