/*                                                                      */
/* 		        	        BANNER - MOBILE UP                          */
/*                                                                      */
/* v001 02 Aug 2019 -   Initial version cut from WOL mobile.css         */
/* v002 06 Aug 2019 -   Modified to new content element names           */
/* v003 20 Sep 2019 -   Logo only appears at Tablet, so remove x,y      */
/*                      Audience name not shown on mobile on RHM        */
/*                      Alter h1 padding and add bottom border          */
/*                                                                      */
/*                                                                      */


/* **************************************** */
/* 	   ARP 3 DOES NOT USE H1 OR AUDIENCE   	*/
/* **************************************** */

header.banner h1,
header.banner div#audience-name {
  display: none;
}

/* **************************************** */
/* 				BANNER		 				*/
/* **************************************** */

header.banner {
  padding: 0;
}
header.banner h1 {
  color: white;
  margin: 0 0 0 0;
  padding: 16px 50px 16px 8.33%;
  font-size: 1em;
  line-height: 18px;
  background-color: #5EB9E4 /* __ ARP 3 __ Light Blue (Pantone 2915c)  */;
}

header.banner div#audience-name {
  position: absolute;
  height: 18px;
  padding: 5px 0px 0px 150px;
  top: 0;
  width: 100%;
  font-size: 10px;
  line-height: 10px;
  font-weight: 300;
  font-style: italic;
  border-bottom: none;
  color: white;
  background-color: transparent;
  box-sizing: border-box;
}


header.banner div#logo {
  margin: 0;
  margin-right: 52px;
  margin-left: calc( 2 * var(--left-margin) );

  height: 46px;
  width: 70px;
  /* Logo is SVG on ARP 3 so no background or border needed */
  /*border-width: 0 2px 2px 2px;*/
  /*border-radius: 0 0 10px 10px;*/
  /*border-style: solid;*/
  /*border-color: white;*/

  /*background-position: -45px -127px;*/
}



/* **************************************** */
/* 				FUNCTIONAL NAV 				*/
/* **************************************** */

header.banner nav#func {
  position: absolute;
  right: 0;
  top: 0;
  overflow: auto;				/* To keep height as child (ul) is floated */
}
header.banner nav#func ul,
header.banner nav#func li {
  list-style: none;
  margin: 0;
  padding: 0;
}
header.banner nav#func ul {
  float: right;
  margin-right: 0px;
}
header.banner nav#func li.search { 
  /*border-top: 2px solid white;*/
  /*margin-top: 75px;*/
}
header.banner.home nav#func li.search { 
  /*margin-top: 127px;*/
}
header.banner nav#func ul a {
  display: block;
  text-decoration: none;
  height: 48px;
  width: 48px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  background-color: #6E267B /* __ ARP 3 __ Purple (Pantone 259c) */;
  text-indent: -9999px;
}
header.banner nav#func li.home a 			{  background-color: white; }
header.banner nav#func li.search a			{  background-color: white; }
header.banner nav#func li.disp-nav a		{  background-color: white; }
header.banner nav#func li.today a			{  background-color: #1C3A6B /* __ ARP 3 __ Dark Blue (Pantone 541c)  */; }
header.banner nav#func li.account a			{  background-color: #0083A9 /* __ ARP 3 __ Blue (Pantone 314c) */; }

header.banner nav#func li.home a			{  /*background-position:    0   -320px;*/ /* Using masks on ARP 3 */}
header.banner nav#func li.search a 			{  /*background-position: -100px -320px;*/ /* Using masks on ARP 3 */}
header.banner nav#func li.disp-nav a		{  /*background-position:  -50px -320px;*/ /* Using masks on ARP 3 */}
header.banner nav#func li.today a			{  background-position: -150px -250px; }
header.banner nav#func li.account a			{  background-position: -200px -250px; }


header.banner.home nav#func li.home		    {  display: none; }

/* See also 'Navigation - mobile only' for stuff not needed tablet and above */

/* *** Functional Nav *** (this taken out of mobile navigation css)  */

header.banner nav#func {
  position: absolute;
  right: 32px;
  top: 20px;
  overflow: auto;
  height: 60px;             /* Make it plenty big enough */
  width: 180px;             /* Make it plenty big enough */
}
header.banner nav#func ul li {
  float: left;
  margin-left: 20px;
}
header.banner nav#func li.search  {
  display: none;        /* Idea of having search here on mobile as well as in side nav abandoned 10 Aug 2022 */
}


/* All this rubbish down here is to allow a white mask to show orange behind it, */
/* so the LI is orange, but it's been made smaller than the A on top of it, so a */
/* halo of orange doesn't appear around the mask. */

header.banner nav#func ul {
  padding-top: 4px;             /* Position the a tag outside the li, so allow some space */
  padding-right: 10px;
}
header.banner nav#func ul li {
  border-radius: 18px;          /* Give it some border rounding to hid the li behind the a */
  height: 35px;                 /* Try to hide smaller li behind the masked 'a' tag */
  width: 35px;                  
}
header.banner nav#func ul a {
  border-left: 0;
  border-bottom: 0;
  border-radius: 0px;           /* No need for border rounding, as the mask does that job */
  margin-left: -3px;            /* Try to hide smaller li behind the masked 'a' tag */
  margin-top: -3px;             /* Try to hide smaller li behind the masked 'a' tag */
}