/*                                                                      */
/* 		               NAVIGATION - TABLET UP              		        */
/*                                                                      */
/* v001 02 Aug 2019 -   Initial version created from WOL tablet.css     */
/* v002 06 Aug 2019 -   Modified to new content element names           */
/* v003 02 Dec 2019 -   Use _css_subnav-section1/2 (CSG only)           */
/* v004 03 May 2022 -   Changes for ARP3 largely reversing v003         */
/*                                                                      */
/*                                                                      */


/* **************************************** */
/* 				PRIMARY NAV 				*/
/* **************************************** */

  div.wrapper.nav {
    background-color: transparent;
    /* Height set in ARP 3 specific file (11248) */
  }

  nav.primary {
    background-color: transparent;
    min-height: 0;
    overflow: auto;         /* Because the UL floats right */
  }
  nav.primary p.pagetitle {
    display: none;
  }
  nav.primary ul {
    display: block;
    margin-top: 0px;
	padding: 0;
	/* offset by 20px section.content + 20px article left paddings combined */
	padding-left: calc( 2 * var(--left-margin));
	padding-right: calc( 2 * var(--left-margin));
	background-color: transparent;        /* transparent on ARP3 */
	border-right: none;
  }
  nav.primary ul li {
    display: inline-block;
    padding: 0 0px 0 15px;
    margin: 0;
  }
  nav.primary ul li.home,
  nav.primary ul li.welcome,
  nav.primary ul li.today,
  nav.primary ul li.my-account {
    display: inline-block;
  }

  nav.primary ul li a {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55em;
    min-width: 25px;
	padding: 10px 0px 4px 0px;
    margin-top: 0;
    margin-bottom: 0;
	border-top: none;
	border-left: none;
	border-bottom: 2px solid transparent;
    background: transparent;
    /*text-align: center;*/
  }

  nav.primary ul li a:hover, 
  nav.primary ul li.hover a,
  nav.primary ul li.active a,
  nav.primary ul li.active.hover a {
    background: transparent;
    color: white;
  }
  nav.primary ul li.active a {
    border-color: white;
    font-weight: bold;
  }
  nav.primary ul li a:hover, 
  nav.primary ul li.hover a {
    border-color: var(--audience-color);
  }
  nav.primary ul li.active.hover a {
    border-color: white;
  }
  nav.primary ul li.last a {
  }

  /* Secondary nav within primary */
  nav.primary ul li ul {
    display: none;
  }
  nav.primary ul li ul a {
    color: white;
    font-weight: normal;
  }
  nav.primary ul li ul li {
    border-bottom: none;
  }
  nav.primary ul li ul li.current a {
    color: white;
  }
  nav.primary ul li ul a {
    border-right: 1px solid #5EB9E4 /* __ ARP 3 __ Light Blue (Pantone 2915c)  */;
    margin-top: 8px;
    margin-bottom: 10px;
  }
  nav.primary ul li ul li a {
    border-top: none;
  }
  nav.primary ul li a.last {
    border-right: none;
  }


/* **************************************** */
/* 		SECONDARY NAV [AUG-2020-REVAMP]	 	*/
/* **************************************** */

  nav.primary {
    /*position: relative;*/     /* Stop secondary nav dropping through [AUG-2020-REVAMP] */
    /*height: 99px;*/           /* Make room for secondary nav [AUG-2020-REVAMP] */
  }

  nav.primary ul li.has_subnav.hover ul,            /* ARP 3 shows separate secondary nav in aside */
  nav.primary ul li.active.has_subnav ul {
    display: none;
  }
  nav.primary ul li ul {
    padding-top: 25px;
    padding-bottom: 30px;
    background-color: #dd052b /* __ ARP 3 __ Red (Pantone 186c) */;
    z-index: 7;             /* Get it above Features */
  }
  nav.primary ul li ul li {
    display: block;         /* Put them underneath each other [AUG-2020-REVAMP] */
    padding-left: 30px;
    padding-right: 30px;
  }
  nav.primary ul li ul li a {
    font-size: 12px;
    text-transform: none;
    padding-left: 0px;                  /* [AUG-2020-REVAMP] */
    font-weight: bold;
    text-align: left;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 7px 0 7px 0;
    border-right: none;                 /* [] */
    border-bottom: 1px solid white;     /* [AUG-2020-REVAMP] */
  }
  nav.primary ul li ul li a.first {
    border-top: 1px solid white;
  }
  nav.primary ul li.active ul li a {
    font-weight: bold;
  }
  nav.primary ul li.hover ul li a, 
  nav.primary ul li.active.hover ul li a {
    border-color: white;                /* Needed to override Primary nav setting */
  }


/* **************************************** */
/* 			SECONDARY NAV	 				*/
/* **************************************** */

  aside nav.secondary {
  }
  nav.secondary {
    padding: 20px var(--left-margin) 30px var(--left-margin);
    background-color: #1C3A6B /* __ ARP 3 __ Dark Blue (Pantone 541c)  */;
  }
  body.not-in-use-on-arp3 nav.secondary {   /* This used where only some pages have secondary nav */ 
    display: block;
  }
  nav.secondary h3 {
    color: white;
    margin: 0;
    padding: 0 0 0 0;
    font-size: 15px;
  }
  nav.secondary h3 a {
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
  }
  nav.secondary h3 a:hover {
    border-color: transparent;
  }
  nav.secondary ul {
    list-style: none;
    margin: 2px 0 0 0;
    padding: 0;
  }
  nav.secondary li {
    padding-left: 0;
    margin-top: 2px;
    margin-bottom: 0px;
  }
  nav.secondary a {
    display: inline-block;
    font-size: 14px;
    color: white;
    font-weight: normal;
    text-align: left;
    padding-top: 1px;
	border-bottom: 2px solid transparent;
	text-decoration: none;
  }
  nav.secondary a:hover {
	border-color: white;
  }
  nav.secondary ul li.has_subnav a {
	background-position: right -760px;
  }
  nav.secondary ul li.current.has_subnav a {
	background-position: right -810px;
  }
  nav.secondary li.current a {
    font-weight: bold;
  }
  nav.secondary li.currentpage > a {
    border-color: white;
  }
  nav.secondary li.current.hover a {
    color: white;
    background-position: 0 0 !important;
  }

  /* Second level */
  nav.secondary ul li ul {
    margin-top: 0;
    border-bottom: none;
  }
  nav.secondary ul li ul li a {
    padding-left: 0px;      /* Replaced with mdash */
    margin-left: 20px;
  }
  nav.secondary ul li ul li a:before {
    content: '\2014 ';
    margin-left: -20px;
    width: 20px;
    display: inline-block;
  }
  nav.secondary ul li.current ul li a {
    /*border-color: transparent;*/
    font-weight: normal;
    background-position: 0 0 !important;
  }
  nav.secondary ul li.current ul li a:hover {
    /*border-color: red;*   /* This is done in audience-specific CSS */
    background-position: 0 0 !important;
  }
  nav.secondary ul li.current ul li.current a {
    background-position: 0 0 !important;
    /*border-color: white;*/
    font-weight: bold;
  }
  nav.secondary ul li.current ul li.current a:hover {
    background-position: 0 0 !important;
    border-color: white;
  }
/*  nav.secondary ul li.current.has_subnav ul li a {
    border-top: none;
	background-position: -9999px -9999px;
    color: white;
    font-weight: normal;
  }
*/


  /* 3rd level */
  nav.secondary ul li ul li ul li a {
    padding-left: 20px;
    margin-left: 40px;
  }
  nav.secondary ul li ul li ul li a:before {
    margin-left: -40px;
  }

  nav.secondary ul li.current ul li.current ul li a {
    /*border-color: transparent;*/
    font-weight: normal;
  }
  nav.secondary ul li.current ul li.current ul li a:hover {
    /*border-color: red;*   /* This is done in audience-specific CSS */
  }
  nav.secondary ul li.current ul li.current ul li.current a {
    /*border-color: white;*/
    font-weight: bold;
  }
  nav.secondary ul li.current ul li.current ul li.current a:hover {
    border-color: white;
  }

  /* 4th level */
  nav.secondary ul li ul li ul li ul li a {
    padding-left: 40px;
    margin-left: 60px;
  }
  nav.secondary ul li ul li ul li ul li a:before {
    margin-left: -60px;
  }
  nav.secondary ul li.current ul li.current ul li.current ul li a {
    /*border-color: transparent;*/
    font-weight: normal;
  }
  nav.secondary ul li.current ul li.current ul li.current ul li a:hover {
    /*border-color: red;*   /* This is done in audience-specific CSS */
  }
  nav.secondary ul li.current ul li.current ul li.current ul li.current a {
    /*border-color: white;*/
    font-weight: bold;
  }
  nav.secondary ul li.current ul li.current ul li.current ul li.current a:hover {
    border-color: white;
  }

  /* 5th level */
  nav.secondary ul li ul li ul li ul li ul li a {
    padding-left: 60px;
    margin-left: 80px;
  }
  nav.secondary ul li ul li ul li ul li ul li a:before {
    margin-left: -80px;
  }
  nav.secondary ul li.current ul li.current ul li.current ul li.current ul li a {
    background: /* 11212 line 297 */ repeating-linear-gradient( 90deg, green, green 10px, orange 10px, orange 20px );
  }
  nav.secondary ul li.current ul li.current ul li.current ul li.current ul li a:hover {
    background: /* 11212 line 300 */ repeating-linear-gradient( 90deg, purple, purple 10px, yellow 10px, yellow 20px );
  }
  nav.secondary ul li.current ul li.current ul li.current ul li.current ul li.current a {
    background: /* 11212 line 303 */ repeating-linear-gradient( 90deg, black, black 10px, red 10px, red 20px );
  }
  nav.secondary ul li.current ul li.current ul li.current ul li.current ul li.current a:hover {
    background: /* 11212 line 306 */ repeating-linear-gradient( 90deg, blue, blue 10px, orange 10px, orange 20px );
  }



  article.from-the-scheme p.intro {
	/*margin-bottom: 50px;*/		/* To clear the secondary nav */ /* Removed 3 Jan 2018 as seems superfluous */
  }


/* ************************************ */
/*      ARP 3 SPECIFIC BELOW HERE       */
/* ************************************ */

/* When secondary appears in the main content area */

section.content article.secondary-nav {
  display: block;
  background-color: #1C3A6B /* __ ARP 3 __ Dark Blue (Pantone 541c)  */;
}
section.content article.secondary-nav:empty {
  padding-bottom: 0;
  margin-bottom: 0;
}

article.secondary-nav nav.secondary {
  display: block;
  padding-left: 0px;
  padding-top: 30px;
}

article.secondary-nav nav.secondary h3:before {         /* Make the icon white */
  background-color: white;
}

article[class*="icon"].secondary-nav nav.secondary > ul {     /* Need to take 10px off (but why?) */
  padding-left: calc( var(--indent-width) + 0px );
}

article.secondary-nav nav.secondary ul li:before { 
  content: none;
}
article.secondary-nav nav.secondary ul li {
  text-indent: 0;
}
section.content article.secondary-nav nav.secondary a:hover {
  color: white;
}