/* This is the template file for 'Responsive' KnowledgeShare.
To accommodate WCAG 1.4.10 AA - Reflow the suggested implementation
is to make the site use responsive design using media queries.

This file will incorporate all the required CSS to correctly
display the header and footer. */

/* Accessibility */
.ScreenReaderOnly {
	position: absolute;
	left: -9999px;
}

#jumplinks {
  	left: -9999px;
  	padding: 8px;
  	position: absolute;
}

#jumplinks:focus-visible {
	left: 10px;
	top: 10px;
}

.ScreenReaderOnly {
	display: none;
}

.ks-skip-link {
	position: absolute;
	left: -9999px;
	padding: 0.5rem 1rem;
	background-color: var(--white);
	border: 0;
}

.ks-skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* Hide some non-user content */
#app_version,
#lks_header_prefix,
#nav_personal h3,
.nav h3 {
	display: none;
}

/* Header */

header a {
	text-decoration: none;
}

#site_header {
	background-color: var(--ks-green);
}

/* LKS & User */

/* LKS */
.lks_user_details_container {
	background-color: var(--ks-dark-green);
	display: inline-block;
	width: 100%;
}

.lks_user_details {
	display: block;
	background-color: var(--ks-dark-green);
	padding: 0 1rem;
	max-width: 1250px;
	margin: 0 auto;
	box-sizing: border-box;
}

@media screen and (min-width: 1000px) {
	.lks_user_details {
		padding: 0 2rem;
	}
}

#lks_details {
	display: inline-block;
	margin: 0.5rem 0;
}

#lks_details a {
	color: var(--white);
}

#page-error #lks_details {
	visibility: hidden;
}

 /* End LKS */

/* Athens login notice */

#RegistrationNotice {
	color: var(--white);
	margin: 0;
}

#RegistrationNotice p {
	margin: 0.5rem 0;
	display: inline-block;
	width: calc(100% - 120px);
}

.RegistrationButtons {
	float: right;
}

.RegistrationButtons a {
	background-color: var(--white);
	text-decoration: none;
	color: var(--ks-dark-green);
	margin: 0;
	line-height: 1.3;
}

.RegistrationButtons a:hover {
	background-color: var(--ks-green);
}


/* User */
#loginstatus {
	padding: 0.5rem 0;
	margin: 0;
}

/* The user display name */
#loginstatus b {
	padding: 0.5rem 1rem;
	color: var(--white);
	position: relative;
}

#loginstatus b:hover {
	cursor: pointer;
	background-color: var(--ks-darkest-green);
}

.loginstatus_loggedin #loginstatus b {
	padding-left: 50px;
  	background-image: url("https://www.knowledgeshare.nhs.uk/index.php?Request=image&FileStore=project&Path=%2Fimages%2Fmenu_icons.png");
  	background-repeat: no-repeat;
  	background-position: 10px -148px;
  	cursor: default;
}

/* Their hover menu */
#nav_personal {
	position: relative;
}

@media screen and (min-width: 800px) {
	#nav_personal {
		float: right;
	}
}

#nav_personal ul {
	position: absolute;
  	display: none;
  	left: 2.25rem;
  	list-style: none;
  	margin: 0;
  	padding: 0;
}

#loginstatus:hover + ul,
#nav_personal ul:hover {
	display: block;
	background-color: var(--ks-darkest-green);
	z-index: 10;
	list-style: none;
}

#nav_personal li  {
	margin: 0;
}

#nav_personal li a {
	display: block;
	padding: 0.75rem 1rem;
	color: var(--white);
	border-top: 1px solid var(--nav-border);
}

#nav_personal li:hover a {
	background-color: black;
	text-decoration: none;
}

/* Maintains the hover state of the top level menu */
/* Not working */
#nav_personal:hover #loginstatus {
  	background-color: var(--ks-darkest-green);
  	color: var(--white);
}

/* End User */


/* Logo and search */

.logo_search_container .HideMe {
	display: none;
}

.logo_search_container {
	background-color: var(--ks-green);
	width: 100%;
	padding: 0;
	display: inline-block;
}

.logo_search {
	display: block;
	clear: both;
	background-color: var(--ks-green);
	padding: 1rem 1rem 0 1rem;
	margin: 0 auto;
	max-width: 1250px;
	box-sizing: border-box;
}

@media screen and (min-width: 1000px) {
	.logo_search {
		padding: 1rem 2rem 0 2rem;
	}
}

#app_logo {
	display: inline-block;
	margin: 0.5rem 0 1rem 0;
}

#app_logo a {
	display: block;
}

#app_logo a img {
  	width: 200px;
  	xheight: 53px;
  	xpadding-left: 300px;
  	xbackground-image: url("https://www.knowledgeshare.nhs.uk/index.php?Request=image&FileStore=project&Path=%2Fimages%2Fapp_logo_light.png");
}

@media screen and (min-width: 600px) {
	#app_logo a img {
		width: 300px;
	}
}

#nav_search {
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

@media screen and (min-width: 800px) {
	#nav_search {
		float: right;
	}
}

#nav_search a {
	color: var(--white);
	font-size: 0.875rem;

}

#AdvancedSearchWrapper {
	margin-top: 0.25rem;
}

@media screen and (min-width: 800px) {
	#AdvancedSearchWrapper {
		text-align: right;
	}
}

#AdvancedSearchWrapper a:hover {
	text-decoration: underline;
}


/* Search button */

#SubmitSearch {
	background-color: var(--ks-dark-green);
	margin-right: 0;
	margin-bottom: 0.25rem;
	line-height: 1.2;
	padding: 0.5rem 1.125rem;
	border: 1px solid var(--ks-dark-green) !important;
	color: var(--white);
	font-size: 1rem;
}

#SubmitSearch:hover {
	cursor: pointer;
	background-color: var(--ks-darkest-green);
}

#SearchTerms {
	padding: 0.375rem 0.75rem;
	line-height: 1.2;
	width: 200px;
}

@media screen and (min-width: 500px) {
	#SearchTerms {
		width: auto;
	}
}

/* Primary navigation */

#navigation_container {
	background-color: var(--lightest-grey);
	display: inline-block;
	width: 100%;
	padding: 0;
}

#navigation {
	background-color: var(--lightest-grey);
	display: block;
	width: 100%;
	max-width: 1250px;
	margin: 0 auto;
	box-sizing: border-box;
}

@media screen and (min-width: 1000px) {
	#nav_site {
		float: left;
		padding-left: 1rem;
	}
}

#navigation ul {
	background-color: var(--lightest-grey);
	margin: 0 0 0 1rem;
	padding: 0;
	font-weight: bold;
}

@media screen and (min-width: 500px) and (max-width: 750px) {
	#navigation ul {
		padding-right: 75px;
	}
}

@media screen and (min-width: 500px) and (max-width: 750px) {
	#navigation ul ul {
		padding-right: 0;
	}
}

#navigation ul li {
	position: relative; /* Needed to position the hover menu relative to its parent */
	cursor: default;
	margin: 0 0.75rem 0 0;
	font-size: 1rem;
}

@media screen and (min-width: 500px) {
	#navigation ul li {
		display: inline-block;
	}
}

#navigation ul li span,
#navigation ul li a {
	padding: 0.875rem 1rem 0.75rem 1rem;
	display: block;
}

#navigation ul li span:focus {
	outline: 0;
	background-color: var(--ks-dark-green);
	color: var(--white);
	border: 0;
}

/* We need to apply alternative focus rules if the user has the mobile
menu open but expands the browser back to desktop size */
@media screen and (min-width: 601px) {
	#navigation ul li.MobileDropDown span:focus {
		background-color: unset;
		color: unset;
	}
}

@media screen and (min-width: 601px) {
	#navigation ul li.MobileDropDown span:hover {
		background-color: var(--ks-dark-green);
		color: var(--white);
	}
}

#navigation ul li span:hover,
#navigation ul li a:hover {
	background-color: var(--ks-dark-green);
	color: var(--white);
	text-decoration: none;
}

/* Maintains the hover state of the top level menu.  The second instance
accommodates if the mobile menu is open and the browser is expanded */
#navigation ul li:hover > span,
#navigation ul li.MobileDropDown:hover > span {
  background-color: var(--ks-dark-green);
  color: var(--white);
}

/* Hides the submenu by default */
#navigation #nav_site ul li ul {
	display: none;
	position: absolute;
	left: 0;
	z-index: 10;
	margin-left: 0;
}

#navigation #nav_admin ul li ul {
	display: none;
	position: absolute;
	right: 0;
	z-index: 10;
}

/* Displays the sub menu on hover */
#navigation #nav_site ul li:hover ul,
#navigation #nav_admin ul li:hover ul {
	display: block; /* Makes the menu visible */
	width: auto;
	background-color: var(--ks-dark-green);
	border: solid 1px;
}

#navigation ul li:hover ul li a,
#navigation #nav_site ul li span:focus + ul li a {
	padding: 0.75rem 1rem;
	white-space: nowrap; /* Ensures the menu items appear on a sungle line */
	color: var(--white);
	font-weight: normal;
}

/* child hover state */
#navigation ul li:hover ul li a:hover {
	background-color: var(--ks-darkest-green);
	color: var(--white);
	text-decoration: none;
}

/* Ensure the sub menu hover is shown full width */
#navigation ul li:hover ul li {
	display: block;
	border-top: 1px solid var(--nav-border);
	margin-right: 0;
}

/* Selected main menu state */
.nav_heading.current_nav_zone {
	background-color: var(--light-grey);
	border-bottom: solid 3px var(--ks-dark-green);
}

.nav_heading.nav_home {
	color: var(--ks-green);
}

/* End main nav */

#nav_admin {
	float: left;
}

@media screen and (min-width: 1000px) {
	#nav_admin {
		float: right;
		clear: none;
	}
}

#nav_admin ul li {
	margin-right: 0;
}

#nav_help h3 {
	display: inline-block;
	position: relative;
	margin: 0 1rem 0 0;
	font-size: 1rem;
	padding: 0.875rem 0 0.75rem 0;
	z-index: 5;
	cursor: pointer;
	display: block;
}

@media screen and (min-width: 1000px) {
	#nav_help h3 {
		margin-right: 2rem;
	}
}

#navigation #nav_admin ul li span, #nav_help h3 a {
	padding: 0.875rem 1rem 0.75rem 3rem;
	background-image: url("https://www.knowledgeshare.nhs.uk/index.php?Request=image&FileStore=project&Path=%2Fimages%2Fmenu_icons.png");
	background-repeat: no-repeat;
	font-weight: bold;
	color: var(--black);
}



#navigation #nav_admin ul li span {
  background-position: 10px 12px;
}

#navigation #nav_admin ul li span:hover {
	padding: 0.875rem 1rem 0.75rem 3rem;
	background-position: 10px -25px;
	color: var(--white);
}

/* Maintains hover colour and icon on sub menu */
#navigation #nav_admin ul li:hover > span {
	color: var(--white);
	background-position: 10px -25px;
	}

#nav_help {
	clear: left;
	float: left;
	margin-left: 1.25rem;
}

@media screen and (min-width: 1000px) {
	#nav_help {
		position: relative;
		float: right;
		clear: none;
		margin-left: 0;
	}
}

#nav_help h3 a {
  background-position: 10px -65px;
  line-height: 1.4;
}

#nav_help h3 a:hover {
	background-color: var(--ks-dark-green);
	background-position: 10px -104px;
	color: var(--white);
}


/* Link trail */
#link_trail {
	display: block;
	border-bottom: solid 1px var(--dark-border);
	padding: 0.75rem 0;
	margin-bottom: 1.5rem;
	clear: both;
	font-weight: bold;
	font-size: 1rem;
	color: var(--dark-grey);
}

.link_trail_separator {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

#link_trail a {
	text-decoration: none;
	color: var(--ks-green);
}

#link_trail a:hover {
	color: var(--black);
}

/* Cookie notice */

#cookie_notice {
	max-width: 1250px;
	margin: 0 auto;
	padding: 1rem 1rem 0 1rem;
	box-sizing: border-box;
}

@media screen and (min-width: 1000px) {
	#cookie_notice {
		padding: 1rem 2rem 0 2rem;
	}
}

/* End header */

/* Content container */

/* Needed to fix the footer to the bottom of the screen. */

/* Removed the media query as it was impacting on making the modals responsive
in blocker bug 15383 and having re-tested it wasn't actually needed. */
#pagecontainer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
}

#contentcontainer {
	width: 100%;
	padding: 0 1rem 3rem 1rem;
	box-sizing: border-box;
	max-width: 1250px;
	margin: 0 auto;
}

/* As we fix the footer to the bottom of the page we need to
adjust the amount of bottom padding based on screen size.
This wont be an issue on smaller screens as there isn't enough
vertical height. This height is excessive to allow for the LKS logo. */
@media screen and (min-width: 1000px) {
	#contentcontainer {
		padding: 0 2rem 400px 2rem ;
	}
}

/* End Content container */

/* Footer */

#footer {
	background-color: var(--ks-dark-green);
	margin-top: 3rem;
	width: 100%;
}

@media screen and (min-width: 1000px) {
	#footer {
		position:absolute;
		bottom: 0;
		top: auto;
	}
}

#licensing_information_container {
	background-color: var(--lightest-grey);
	width: 100%;
}

#licensing_information {
	background-color: var(--lightest-grey);
	padding: 1rem;
	width: 100%;
	max-width: 1250px;
	margin: 0 auto;
	box-sizing: border-box;
}

@media screen and (min-width: 1000px) {
	#licensing_information {
		padding: 1rem 2rem;
	}
}

#licensing_preamble {
	display: block;
	font-style: italic;
}

#licensing_information img {
	max-height: 50px;
	vertical-align: middle;
	padding: 1rem;
	background-color: var(--white);
	margin: 0 1rem 1rem 0;
	border: solid 1px var(--medium-grey);
	display: inline-block;
}

#footer #licensing_information p {
	color: var(--darkest-grey);
	margin-top: 0.5rem;
	margin-bottom: 0.75rem;
}

#footer #licensing_information a {
	color: var(--ks-green);
	font-weight: 600;
}

#footer #licensing_information a:hover {
	color: var(--darkest-grey);
	font-weight: 600;
}

#licensing_lks, #licensing_sponsor {
	display: inline-block;
}

#footer #licensing_information .licensing_conjunction_between_images {
	display: inline-block;
	margin-right: 1rem;
	vertical-align: middle;
	margin-top: 0;
}

.footer-menu_copright_outer_container {
	background-color: var(--ks-green);
	width: 100%;
	display: inline-block;
}

.footer-menu_copright_inner_container {
	background-color: var(--ks-green);
	margin: 0 auto;
	max-width: 1250px;
	box-sizing: border-box;
}

@media screen and (min-width: 1000px) {
	.footer-menu_copright_inner_container {
		padding: 0 1rem;
	}
}

#nav-meta {
	float: left;
}

#footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer li {
	display: inline-block;
}


#nav-meta ul {
	padding: 1.375rem 0 0 0;
	line-height: 1;
}

#footer #nav-meta li {
	margin-bottom: 1rem;
}

@media screen and (max-width: 450px) {
	#footer #nav-meta li {
		display: block;
	}
}

#footer #nav-meta li a {
	padding: 0 0.75rem;
	display: block;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
}

@media screen and (min-width: 800px) {
	#footer #nav-meta li a {
		border-right: solid 1px var(--white);
	}
}

#footer #nav-meta li:last-child a {
	border-right: 0;
}

#footer #nav-meta li a:hover {
	text-decoration: underline;
}

/* The 'provided by' and 'built by' colour */
#footer div {
	color: var(--footer-text);
}

#footer a {
	color: var(--white);
}

#footer #app_copyright {
	background-color: var(--ks-green);
	color: var(--white);
	padding: 1.25rem 1rem;
	box-sizing: border-box;
	line-height: 1.3;
	box-sizing: border-box;
	float: left;
	font-size: 0.9375rem;
	text-align: left;
	clear: left;
}

@media screen and (min-width: 1250px) {
	#footer #app_copyright {
		float: right;
		text-align: right;
		clear: none;
	}
}

@media screen and (min-width: 600px) {
	#footer #app_copyright .FirstBR {
		display: none;
	}
}

@media screen and (min-width: 400px) {
	#footer #app_copyright .SecondBR {
		display: none;
	}
}


/* Footer logos */
#nav-stakeholders_container {
	background-color: var(--ks-dark-green);
	width: 100%;
	display: inline-block;
}

#nav-stakeholders {
	clear: left;
	padding: 1rem;
	width: 100%;
	max-width: 1250px;
	margin: 0 auto;
	box-sizing: border-box;
}

@media screen and (min-width: 1000px) {
	#nav-stakeholders {
		padding: 1rem 2rem;
	}
}

/* Brighton logo */
#bsuh_item a img {
  	width: 0;
  	height: 47px;
  	padding-left: 185px;
  	background-image: url("https://www.knowledgeshare.nhs.uk/index.php?Request=image&FileStore=project&Path=%2Fimages%2FUHSussex_Logo_Light.png");
  	background-size: 185px 47px;
  	opacity: 0.8;
  	margin: 0 1rem 0 0;
  	vertical-align: middle;
}

@media screen and (min-width: 600px) {
	#maldaba_item {
		float: right;
	}
}

#maldaba_item a img {
  	width: 0;
  	height: 34px;
  	padding-left: 140px;
  	background-image: url("https://www.knowledgeshare.nhs.uk/index.php?Request=image&FileStore=project&Path=%2Fimages%2Fmaldaba_footer_logo_light.png");
  	opacity: 0.8;
  	margin: 0;
  	vertical-align: middle;
}

#bsuh_item a img:hover,
#maldaba_item a img:hover {
	opacity: 1.0;
}

/* We use CSS grid to vertically align the logos and text */
#nav-stakeholders ul {
	display: grid;
}

@media screen and (min-width: 600px) {
	#nav-stakeholders ul {
		grid-template-columns: 3fr 2fr;
	}
}

#footer #bsuh_item,
#footer #maldaba_item {
	padding: 1rem 0;
	margin: 0;
	align-self: center;
}

@media screen and (min-width: 600px) {
	#footer #maldaba_item {
    	text-align: right;
	}
}

#footer #bsuh_item span {
	margin-right: 1rem;
	vertical-align: middle;
	margin-bottom: 1rem;
}

@media screen and (max-width: 400px) {
	#footer #bsuh_item span {
		display: block;
	}
}

#footer #maldaba_item span {
	margin-right: 1rem;
	text-align: left;
	vertical-align: middle;
	margin-bottom: 1rem;
}

@media screen and (max-width: 400px) {
	#footer #maldaba_item span {
		display: block;
	}
}

@media screen and (min-width: 600px) {
	#footer #maldaba_item span {
		text-align: right;
	}
}


/* Mobile menu */

/* Anywhere #navigation_container is used it is for additional specificity */

/* hides the menu toggle for desktop */
@media only screen and (min-width: 600px) {
	#MenuToggle,
	#ProfileToggle {
		display: none;
	}
}

/* initially hides the menu for mobile while setting some default properties */
@media only screen and (max-width: 600px) {
	header #navigation ul,
	header #navigation h3,
	header #nav_personal #loginstatus {
  	display: none;
 		height: auto;
 		width: 100%;
 		padding: 0;
	}
}

/* display of the toggle button */
header a#MenuToggle,
header a#ProfileToggle {
	background-color: var(--white);
	color: var(--ks-green);
	float: right;
	padding: 0.375rem 1rem;
	font-weight: bold;
	font-size: 1rem;
	margin: 0.5rem 0 0.5rem 0;
	z-index: 10;
}

/* changes the profile to a link */
header a#ProfileToggle {
	background-color: unset;
	padding: 8px 0 8px 30px;
	margin: 0 0 0.25rem 0;
	color: var(--white);
	float: left;
  background-image: url("https://www.knowledgeshare.nhs.uk/index.php?Request=image&FileStore=project&Path=%2Fimages%2Fmenu_icons.png");
  background-repeat: no-repeat;
  background-position: 0 -148px;
}

/* Added media queries so the mobile menu styling will
not be seen beyond 600px viewport width. */

/* Toggle button when mobile menu open */
@media only screen and (max-width: 600px) {
	.TopMenuVisible header a#MenuToggle,
	.ProfileMenuVisible header a#ProfileToggle {
		color: var(--ks-green);
		background-color: var(--white);
	}
}

@media only screen and (max-width: 600px) {
	.ProfileMenuVisible header a#ProfileToggle {
		padding: 0.375rem 1rem;
		margin: 0.5rem 0 0.5rem 1rem;
	}
}

/* Top level items */
@media only screen and (max-width: 600px) {
	.TopMenuVisible #navigation ul li span {
		text-align: center;
		color: var(--white);
		font-size: 1.375rem;
		padding: 0.75rem 0.5rem;
		background: url("https://www.knowledgeshare.nhs.uk/index.php?Request=image&FileStore=project&Path=%2Fimages%2Fmobile-menu-sub-section-down-arrow.png") no-repeat 90% 50%;
		background-size: 20px 15px;
	}
}

/* Current selected section state */
@media only screen and (max-width: 600px) {
	.TopMenuVisible header #navigation ul li span.current_nav_zone {
		border-bottom: 0;
		color: var(--ks-darkest-green);
		background: var(--white) url("https://www.knowledgeshare.nhs.uk/index.php?Request=image&FileStore=project&Path=%2Fimages%2Fmobile-menu-sub-section-down-arrow-selected.png") no-repeat 90% 50%;
		background-size: 20px 15px;
	}
}

@media only screen and (max-width: 600px) {
	.TopMenuVisible header #navigation ul li.MobileDropDown span.current_nav_zone {
		background: var(--white) url("https://www.knowledgeshare.nhs.uk/index.php?Request=image&FileStore=project&Path=%2Fimages%2Fmobile-menu-sub-section-down-arrow.png") no-repeat 90% 50%;
		background-size: 20px 15px;
	}
}

@media only screen and (max-width: 600px) {
	.TopMenuVisible header #navigation ul li.MobileDropDown span.current_nav_zone {
		color: var(--black);
		background: var(--white) url("https://www.knowledgeshare.nhs.uk/index.php?Request=image&FileStore=project&Path=%2Fimages%2Fmobile-menu-sub-section-down-arrow-selected.png") no-repeat 90% 50%;
		background-size: 20px 15px;
	}
}

/* Overrides the default desktop nav hover */
@media only screen and (max-width: 600px) {
	.TopMenuVisible #navigation_container #navigation ul li:hover ul {
		display: none;
	}
}

/* The expanded open menu */
@media only screen and (max-width: 600px) {
	.TopMenuVisible header #navigation,
	.ProfileMenuVisible #nav_personal {
		position: absolute;
		right: 0;
		height: auto;
		z-index: 100;
 		width: 100%;
 		padding: 0 0 1rem 0;
 		background-color: var(--ks-dark-green);
 		border-top: solid 10px var(--black);
 		border-bottom: solid 10px var(--black);
 	}
}

@media only screen and (max-width: 600px) {
	.ProfileMenuVisible #nav_personal {
		top: 0;
	}
}

@media only screen and (max-width: 600px) {
	.ProfileMenuVisible #nav_personal ul {
		display: inline;
		position: relative;
		right: 0;
		left: 0;
	}
}

@media only screen and (max-width: 600px) {
	.ProfileMenuVisible #nav_personal ul li {
		display: block;
		width: 100%;
		margin: 0;
		box-sizing: border-box;
	}
}

/* mobile menu link items display */
@media only screen and (max-width: 600px) {
	.TopMenuVisible header #navigation ul li a,
	.ProfileMenuVisible #nav_personal ul li a {
		display: block;
		font-size: 1.375rem;
		text-align: center;
		width: 100%;
		color: var(--white);
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		box-sizing: border-box;
		font-weight: bold;
		border-top: 0;
	}
}

@media only screen and (max-width: 600px) {
	.TopMenuVisible header #navigation ul li a:hover {
		background-color: var(--black);
	}
}

@media only screen and (max-width: 600px) {
	.TopMenuVisible header #navigation ul li:first-child a {
		padding: 0.75rem 0.5rem;
	}
}

/* Mobile sub nav */
@media only screen and (max-width: 600px) {
	.TopMenuVisible #navigation ul li.MobileDropDown span {
		background-color: var(--ks-darkest-green);
		border-bottom: 0;
		padding: 0.75rem 0.5rem;
	}
}

@media only screen and (max-width: 600px) {
	.TopMenuVisible #navigation_container #navigation ul li.MobileDropDown ul {
  	position: relative;
  	display: block;
  	text-align: center;
  	width: 100%;
  	background-color: var(--ks-darkest-green);
  	border-radius: 0;
  	border: 0;
  	font-weight: bold;
  	padding-bottom: 1rem;
	}
}

@media only screen and (max-width: 600px) {
	.TopMenuVisible #navigation ul li.MobileDropDown ul li a {
		font-weight: normal;
		padding: 0.675rem 0.5rem;
		border-bottom: 0;
		font-size: 1.25rem;
	}
}

@media only screen and (max-width: 600px) {
	.TopMenuVisible #navigation ul li.MobileDropDown ul li a:hover {
		font-weight: normal;
		padding: 0.675rem 0.5rem;
		border-bottom: 0;
		background-color: var(--black);
	}
}

@media only screen and (max-width: 600px) {
	.TopMenuVisible #navigation ul li:hover ul li {
		border-top: 0;
	}
}

/* Mobile menu hover */
@media only screen and (max-width: 600px) {
	.TopMenuVisible header #navigation ul li a:hover {
		background-color: var(--black);
		color: var(--white);
		text-decoration: none;
	}
}

/* Shows the expanded menu */
@media only screen and (max-width: 600px) {
	.TopMenuVisible header #navigation ul {
		display: inline;
		margin: 0;
		padding: 0.25rem 0 1rem 0;
	}
}

@media only screen and (max-width: 600px) {
	.TopMenuVisible header #navigation ul li,
	.TopMenuVisible header #navigation h3 {
		display: block;
		width: 100%;
		margin: 0;
		box-sizing: border-box;
	}
}

@media only screen and (max-width: 600px) {
	.TopMenuVisible header #nav_site > ul > li:first-child,
	.ProfileMenuVisible header #nav_personal > ul > li:first-child {
		margin-top: 1rem;
	}
}

@media only screen and (min-width: 600px) {
	.TopMenuVisible header #nav_site ul {
		margin: 0;
		padding: 0;
		display: inline;
	}
}

/* End Mobile menu */


/* Add admin and help to mobile menu */
@media only screen and (max-width: 600px) {
	.TopMenuVisible header #nav_admin {
		float: none;
	}
}

@media only screen and (max-width: 600px) {
	.TopMenuVisible header #nav_help {
		float: none;
		margin-left: 0;
	}
}

@media only screen and (max-width: 600px) {
	.TopMenuVisible header #nav_help h3 a {
		float: none;
		margin-left: 0;
		display: block;
		text-align: center;
		color: var(--white);
		padding: 0.75rem 0.5rem;
		font-size: 1.375rem;
		font-weight: bold;
		background-image: none;
	}
}

@media only screen and (max-width: 600px) {
	.TopMenuVisible header #nav_help h3 a:hover {
		background-image: none;
		background-color: var(--black);
		cursor: pointer;
	}
}

@media only screen and (max-width: 600px) {
	.TopMenuVisible header #navigation #nav_admin .nav_heading {
		padding: 0.75rem 0.5rem;
  	background: url("https://www.knowledgeshare.nhs.uk/index.php?Request=image&FileStore=project&Path=%2Fimages%2Fmobile-menu-sub-section-down-arrow.png") no-repeat 90% 50%;
  	background-size: 20px 15px;
  	text-align: center;
  	color: var(--white);
	}
}

@media only screen and (max-width: 600px) {
	.TopMenuVisible header #navigation #nav_admin ul li.MobileDropDown span.nav_heading {
  	background-color: var(--ks-darkest-green);
	}
}