/*                                                                      */
/* 		           NAVIGATION - MOBILE ONLY               		        */
/*                                                                      */
/* v001 02 Aug 2019 -   Initial version created from WOL mobile-only-nav.css     */
/* v002 06 Aug 2019 -   Modified to new content element names           */
/* v003 07 Aug 2019 -   Inherited search-bar-container stuff from GS    */
/* v004 20 Sep 2019 -   Set mobile image offsets for RHM                */
/* v005 27 Sep 2019 -   Fix search box at top of mobile-only nav        */
/*                                                                      */
/*                                                                      */


nav.primary ul li.home,
nav.primary ul li.welcome,
nav.primary ul li.my-account {
  display: block;		/* They are omitted in usual mobile nav, but needed in this variant */
}

div.wrapper.overlay {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 1;		/* Default z-index puts it behind header.banner */
  background-color: transparent;
  transition: background-color 0.1s ease;
  transition-delay: 0.4s;
}

div.wrapper {
  margin-left: 0px;		/* All wrappers (except nav) normally up against left edge of page */
  transition: margin-left 0.4s ease;
}
body.menu-out div.wrapper {
  margin-left: -270px;	/* Move all wrappers (except nav) so they appear to slide of the page */
}

body.menu-out nav#func {
  /*display: none;*/
}

div.wrapper.nav,
div.wrapper.search-bar-container {
  position: absolute;		/* Take out of main flow, as it will be appearing over on right */
  overflow: hidden;			/* Width 0 isn't enough to make this vanish */
  right: 0;
  top: 0;
  width: 0;
  transition: width 0.4s ease;
}
div.wrapper.nav { top: 52px; }		/* This one has to appear a bit further down */

nav.primary ul,
div.wrapper.search-bar-container div.search-bar {
  display: block;		/* Always display them, because their containers can't be seen */
}

body.menu-out div.wrapper.nav,
body.menu-out div.wrapper.search-bar-container {
  margin-left: 0;
  display: block;
  width: 270px;
}
div.wrapper.nav ul,
div.wrapper.search-bar-container div.search-bar {
  width: 270px;
  overflow-x: hidden;		/* This makes it appear to slide from right, instead of just getting wider */
}
body.menu-out div.wrapper.nav nav {}
body.menu-out nav.primary ul {
  display: block;
  border-right: 0;
}

header.banner {		/* Make sure nav#func doesn't fall through and go too far right */
  position: relative;
}
header.banner nav#func li.search,
header.banner nav#func li.account {
  display: none;
}
body.menu-out header.banner nav#func li.disp-nav a {
  background-position: -50px -391px;
  background-color: #e2e5e8 /* CSG Pale Grey */;
}

nav.primary p.pagetitle { display: none } /* Iain 31 Jul 2017 says hide page title for now */

/* **************************************** */
/* 			SEARCH BAR						*/
/* **************************************** */

div.wrapper.search-bar-container div.search-bar {
  display: block;
  width: 270px;
}
div.wrapper.search-bar-container div.search-bar {
  margin-right: 0px;
}
div.wrapper.search-bar-container .search-bar input.term {
  width: 190px;
}
.search-bar input.submit {
  margin-right: 0px;        /* Needed to fix mobile-only nav (27 Sep 2019) */
}

/* **************************************** */
/* 		MOBILE NAV BACKGROUND IMAGE			*/
/* **************************************** */

div.wrapper.header {
  height: 267px;		/* This change needed as wrapper.nav is no longer in the flow */
  background-image: url(https://cms03.s3-eu-west-1.amazonaws.com/csg-ux-04-mobile-20191217.jpg);
  background-repeat: no-repeat;
  background-position: 0 112px;
}

/* These offsets set for RHM would need to be amended for each client */
body.home 	            		div.wrapper.header { background-position:     0px 112px; }
body.options-for-your-benefits	div.wrapper.header { background-position:  -700px 112px; }
body.plan-a-better-retirement	div.wrapper.header { background-position: -1400px 112px; }
body.benefits-for-dependants	div.wrapper.header { background-position: -2100px 112px; }
body.pensions-and-tax      		div.wrapper.header { background-position: -2800px 112px; }
body.help-and-contacts          div.wrapper.header { background-position: -3500px 112px; }
body.document-library           div.wrapper.header { background-position: -4200px 112px; }
body.my-account            		div.wrapper.header { background-position: -4900px 112px; }
body.yyyyyyyy           		div.wrapper.header { background-position: -5600px 112px; }