/*                                                                      */
/* 		                   HIGHLIGHTS                       		    */
/*                                                                      */
/* v001 02 Aug 2019 -   Initial version created from WOL mobile.css     */
/* v002 06 Aug 2019 -   Modified to new content element names           */
/* v003 07 Aug 2019 -   New rule to sort out highlight box top margin   */
/* v004 18 Dec 2019 -   Use _css_border-colour-2 for CSG (the blue)     */
/*                                                                      */
/*                                                                      */


.highlight-box {
  padding: 20px 20px 15px 20px;          /* (see new rule below) */
  margin-bottom: 20px;
  border-radius: var(--border-radius-smaller);
  border: 1px solid #C9CAC8 /* __ ARP 3 __ Light Grey */;
}

/* New rules derived from GS to finally fix the problem if H3 at top of highlight box */
.highlight-box > h3:first-child {	/* Highlight box that has a H3 as its first child element */
  margin-top: 0px;
  padding-top: 0px;
  /*padding-bottom: 0px;*/  /* Removed 31 May 2022 as H3 needs more space if it has an icon */
}
.highlight-box > h4:first-child {	/* Highlight box that has a H4 as its first child element */
  margin-top: 0px;
  padding-top: 0px;
}

section.content .highlight-box > h4 {
  text-transform: none;
}

.highlight-box.action {
  border-color: #1C3A6B /* __ ARP 3 __ Dark Blue (Pantone 541c) */;
}
.highlight-box.colour2 {
  border-color: #0039A6 /* __ ARP 3 __ Dark Blue (Pantone 286c)  */;
}
.highlight-box.colour3 {
  border-color: #5EB9E4 /* __ ARP 3 __ Light Blue (Pantone 2915c)  */;
}
.highlight-box.colour4 {
  border-color: #1C3A6B /* __ ARP 3 __ Dark Blue (Pantone 541c) */;
}
.highlight-box.colour5 {
  border-color: #F0AB00 /* __ ARP 3 __ Gold (Pantone 130c) */;
}


.highlight_box small {
  display: block;
  padding-left: 0.5em;
  text-indent: -0.5em;
}

.highlight_word { font-weight: bold; }


/* **************************************** */
/*          MAKING A CHOICE                 */
/* **************************************** */

.highlight-box.making-a-choice {
  height: 480px;
  background-image: url({_css_image-making-a-choice-mobile});
  background-repeat: no-repeat;
  background-position: 50% 5px;
}

@media only screen and (min-width: 650px) {
  .highlight-box.making-a-choice {
    height: 180px;
    background-image: url({_css_image-making-a-choice-tablet});
    background-repeat: no-repeat;
    background-position: 50% 5px;
    background-size: contain;
  }
}

/* **************************************** */
/*          OPTIONS FROM ARP                */
/* **************************************** */

.highlight-box.options-from-arp {
  height: 660px;
  background-image: url({_css_image-options-from-arp-mobile});
  background-repeat: no-repeat;
  background-position: 50% 0;
}

@media only screen and (min-width: 650px) {
  .highlight-box.options-from-arp {
    height: 128px;
    background-image: url({_css_image-options-from-arp-tablet});
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: contain;
  }
}


/* **************************************** */
/*              LOZENGE                     */
/* **************************************** */

p.lozenge a {
  display: block;
  border: 1px solid #0039A6 /* __ ARP 3 __ Dark Blue (Pantone 286c)  */;
  border-radius: var(--border-radius-main);
  width: auto;
  padding: 13px 20px 13px 20px;
  text-decoration: none;
}
p.lozenge a:hover {
  color: white;
  background-color: #6E267B /* __ ARP 3 __ Purple (Pantone 259c) */;
  border-color: #6E267B /* __ ARP 3 __ Purple (Pantone 259c) */;
}