/**********************************************************************************
 * popup_template.css
 *
 * CSS stylings for the KnowledgeShare page layout (i.e. non-content elements,
 * present on every page) for the popup template.
 **********************************************************************************
 */

/********* PAGE TEMPLATE *********/

/* Main ID of the body is id="page-help" on error it will change to id="page-error".
 * We can use this to manipulate different content.
*/

/*** Debug ***/
/*
	body * {
		box-shadow: 0 0 1px rgba(255, 121, 121, 0.75);
	}
*/

/*** Main element setup ***/
	#pagecontainer,
		#site_header,
		#CloseButton,
		#app_logo,
		#page_title,
		#page_header,
	#contentcontainer,
		#site_title,
		#contentcontainer .content,
	#footer,
	#cookie_notice p {
		max-width: 100%;
	}

	#pagecontainer,
	#contentcontainer,
	#footer,
	#cookie_notice p {
		min-width: 300px;
	}

	#site_header,
	#contentcontainer,
	#footer {
		padding: 1em 2em;
		border: none;
	}

	#app_logo,
	#page_title {
		float:left;
		margin: 0;
	}

	#pagecontainer #site_header #page_title h2 {
		color: var(--white);
	}
	
	#app_logo img{
		margin: 0 0.5em 0 0;
		max-width: 280px;
	}

	@media (max-width: 600px) {
		#app_logo,
		#page_title {
			float:unset;
		}
	}

/*** Close button ***/

	#CloseButton {
		float:right;
		font-size: 1.1em;
		z-index: 10;
		margin: 0.5rem;
	}
	#CloseButton input {
		color: var(--white);
		background-color: var(--ks-dark-green);
		margin: 0;
	}
	#CloseButton input:hover {
		background-color: var(--ks-darkest-green);
	}

	#page_header {
		max-width: 100%;
		font-size: 0.9em;
		color: var(--white);
		white-space: collapse;
	}

/*** Content Container ***/

	.SupportPortal {
		float: right;
	}
	.SupportPortal img {
		width: 16px;
		top: 2px;
		position: relative;
		margin-left: 6px;
	}
	.SupportPortal a.LargeButton {
		margin: 0 0.5rem 1rem 0!important;
		background-image: url(https://www.knowledgeshare.nhs.uk/index.php?Request=image&Path=images%2Ficon_external_link.png);
		background-repeat: no-repeat;
		background-position: 90% 50%;
		background-size: 16px;
		display: inline-block;
		padding-right: 46px;
	}

	#contentcontainer {
		margin-bottom: 2.2em;
	}
	#lks_details {
		display: inline-block;
		margin: 0.5rem 0 0;
	}
	body#page-help #page_header #page_title {
		color: var(--black);
	}
	#page_title h2 {
		display: inline-block;
		font-size: 30px;
		text-indent: 0;
		margin: 0.2em 0;
	}
	
	@media (max-width: 600px) {
		#contentcontainer {
			margin-bottom: 4em;
		}
	}

/*** PAGE CONTENT ***/

	#page-help #contentcontainer {
		min-height: 250px;
	}
	#contentcontainer > .content {
		position: relative;
		padding: 0.5em 0 1em;
	}
	#contentcontainer .content {
		clear: both;
	}
	#page-help .content p {
		margin-bottom: 1rem;
	}
	#page-help #TopicTitle {
		padding-top: 0;
		margin-top: 0;
		clear: both;
	}
	#page-help h3.divider {
		border: none;
		background: none;
		padding: 0;
	}
	#page-help #SeeAlsoList {
		margin: 0em -2em;
		padding: 1em 2em;
		background-color: var(--light-grey);
	}
	#page-help #SeeAlsoList h3 {
		margin: 0;
	}
	#page-help #page_title h2 {
		font-size: 1.70rem;
		padding-top: 0;
		margin: 0.3em 0;
	}

/*** Footer elements. ***/

	#footer {
		position: absolute;
		bottom: 0;
		background-color: var(--ks-green);
		min-height: 2em;
		margin-top: 1rem;
		width: 100%;
		box-sizing: border-box;
	}

	#footer #app_copyright {
		margin: 0;
		padding: 0.5rem 0;
	}

/*** ID:page-error ***/

	#page-error #page_header #lks_details {
		display:none;
	}