/*                                                                      */
/* 		        	        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          */
/*                                                                      */
/*                                                                      */


/* **************************************** */
/* 				BANNER		 				*/
/* **************************************** */

header.banner {
  padding: 0;
}
header.banner h1 {
  background-color: black;
  color: white;
  height: 18px;         /* Added 4 Jul 2024 to stop it going onto two lines */
  margin: 0;
  padding: 16px 50px 16px 8.33%;
  font-size: 1em;
  line-height: 18px;
  text-transform: uppercase;
  border-bottom: 2px solid white;
}
@media only screen and (max-width: 399px) {
  header.banner h1 {
    xx-padding-top: 10px;
    xx-padding-bottom: 22px;
    padding-left: 6%;
  }
}


header.banner div#audience-name {
  display: none;
  color: black;
  padding: 14px 0px 9px 20px;
  height: 27px;		/* 27 = 50 - 15 top padding - 8 bottom padding */
  background-color: transparent;
  font-size: 0.85em;
  line-height: 20px;
  border-bottom: 2px solid white;
  font-weight: 600;
}

header.banner div#logo {
  margin: 0;
  margin-right: 52px;
  height: 75px;
  /*background-position: -0px -120px; */
  margin-left: 8.33%;
}



/* **************************************** */
/* 				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: 50px;
  width: 50px;
  xx-border-left: 2px solid white;
  xx-border-bottom: 2px solid white;
  background-color: #f18a00 /* CSG Orange (Pantone 144c) */;
  text-indent: -9999px;
}
header.banner nav#func li.home { border-bottom: 2px solid white; }
header.banner.home nav#func li.home { border-bottom: 0px; }
header.banner.home nav#func li.disp-nav a { background-color: black; }

header.banner nav#func li.home a 			{  background-color: black; }
header.banner nav#func li.search a			{  background-color: #e1251b /* CSG Red (Pantone 485c) */; }
header.banner nav#func li.disp-nav a		{  background-color: #0072ce /* CSG Blue (Pantone 285C) */; }
header.banner nav#func li.today a			{  background-color: black; }
header.banner nav#func li.account a			{  background-color: #e2e5e8 /* CSG Pale Grey */; }

header.banner nav#func li.home a			{  background-position: 0      -250px; }
header.banner nav#func li.search a 			{  background-position: -100px -250px; }
header.banner nav#func li.disp-nav a		{  background-position:  -50px -250px; }
header.banner nav#func li.today a			{  background-position: -150px -250px; }
header.banner nav#func li.account a			{  background-position: -200px -250px; }

/*header.banner nav#func li.home a:hover		{  background-position: 0      -320px; }
header.banner nav#func li.search a:hover	{  background-position: -100px -320px; }
header.banner nav#func li.disp-nav a:hover	{  background-position:  -50px -320px; }
header.banner nav#func li.today a:hover		{  background-position: -150px -320px; }
header.banner nav#func li.account a:hover	{  background-position: -200px -320px; }
*/
header.banner.home nav#func li.home a		{  display: none; }

