/******************************************************************************
 * popup.css
 *
 * A set of style overrides for the 'popup' template.
 * This is applied after all standard styling (including content styling) but
 * before the print stylesheet or any browser-specific fixes.
 ******************************************************************************
 */

/**************************************************
 * COMPACT HEADER
 **************************************************
 * For the popup stylesheet, we want a more compact single-line header, laid out
 * as follows:
 *
 *		| [Logo] [Page Title] --------------- [Close] |
 *
 * Although it should fit on a single line in most cases, the styling has been
 * designed to handle situations where the page title wraps onto multiple lines.
 */

/* Remove any screen space taken up by the main site_header block itself.
 * The individual elements will take up space but removing space from the block
 * means that the page_header can be moved up to the top of the screen.
 * We also remove any colouring that may still be visible on the element.
 */
	#site_header {
		display: inline;
		padding: 0;
		border: none;
		background: none;
	}

/* The main application logo should be on the left. */
	#app_logo {
		float: left;

	/* Add a right margin to provide a gap between the logo and the title. */
		margin-right: 1em;

	/* Make sure there is some space around the visual elements of the logo, as the
	 * image file does not include any padding.
	 * Vertical margins are minimal to avoid too much screen space, but horizontal
	 * margins give a bit more space around the logo.
	 */
		padding: 2px 10px;
	}

/* Float the close button on the right, with an appropriate margin to keep it away
 * from the screen edge.
 */
	#CloseButton {
		float: right;
		margin: 0.75em;
	}

/* Undo any margin on the button itself, from the main stylesheet. */
	#CloseButton input {
		margin: 0;
	}

/* The page header sits underneath the whole of the top row.
 * It is coloured to give a background to the logo, and has left padding to ensure
 * this background shows through under the logo.
 * The remainder of the header area will be coloured by the page_title element.
 * We do it this way rather than simply colouring the app_logo background, so that
 * this side panel grows in height to match the page title, if that runs to multiple
 * lines (as it may do on narrower screens or with long page titles).
 */
	#page_header {
	/* Padding matches the image width + the horizontal image padding. */
		padding-left: 170px;

	/* The background colour is as per the default template. */
		background-color: #FAFAFA;

	/* The border runs along the whole of the header area. */
		border-bottom: 1px solid #DDDDDD;
	}

	#page_title {
	/* Remove any margin set in the default stylesheet.  In particular, this removes
	 * the left margin that we don't want here.
	 */
		margin: 0;

	/* Set the background colour that the main stylesheet uses for the page_header
	 * elements, so that this is used for the remainder of the header bar.
	 */
		background-color: #9DA91B;
	}

	#page_title h2 {
	/* Set a top margin so that a single-line header is centred in the header
	 * area, and an equivalent bottom margin so things look balanced if the text
	 * runs to multiple lines.
	 */
		 margin-top: 0.2em;
		 margin-bottom: 0.2em;
	}

/**************************************************
 * FOOTER TWEAKS
 **************************************************
 */

/* The default footer has a imbalanced vertical padding, which ends up looking
 * weird on this page, where only the copyright link is present.
 */
	#footer {
	/* The default stylesheet uses an !important flag, so we need to use one here,
	 * to.
	 */
		padding-top: 0.5rem !important;

	 /* We also remove the large top margin - not sure what this is for, but it isn't
	  * needed here.
	  */
		margin-top: 1em;
	}