/*
 * ELICIA COLOUR SCHEME (light to dark):
 *
 *		Logo Background:		#F3F5F5
 *		Banner Background:		#E0F0E0
 *		Back Tick:				#ADCEAD
 *		Logo/Banner Border:		#ADCEAD
 *		Mid Tick: 				#7DB07D
 *		Front Tick: 			#006600
 *
 */

/**** MAIN ELEMENTS, LAYOUT ****/

	body, html {
		margin: 0;
		padding: 0;
	}

	#header {
	/* Set height of header to match background image.
	 * This includes 8px of drop-shadow, which should overlap the main content.
	 */
		height: 96px;

	/* Set a minimum width for the header, so it doesn't break on smaller screen
	 * sizes.  This is lower than our minimum requirement anyway (800x600) so
	 * shouldn't cause any problems.
	 */
		min-width: 630px;

	/* Ensure header sits on top of content section, via a high z-index.
	 * z-index only works on positioned elements, so give set position:relative.
	 */
		position: relative;
		z-index: 100;
	}

	#demo_notice,
	#site_notice {
	/* Remove default margins from these <p> tag, as we don't want space around the
	 * element.
	 */
		margin: 0;

	/* Shift content upwards so that they sit under drop-shadow.
	 * We don't use a negative bottom-margin here, because otherwise we would need
	 * different rules for the .content section, depending on whether either of
	 * these notices were present or not.
	 */
		position: relative;
		top: -8px;
	}

	.content {
	/* Shift content upwards so that it sits under drop-shadow.
	 * Use negative bottom-margin to compensate for this (i.e. to avoid an 8px
	 * gap before the footer section.
	 */
		position: relative;
		top: -8px;
		margin-bottom: -8px;
	}


/**** MAIN ELEMENTS, COLOURING ****/

	body,
	#footer {
		background-color: #F3F5F5;
	}

	#header {
	/* Background color and border are set by the background image, so that we can
	 * apply the drop-shadow to it.  We leave the header background color as
	 * transparent so that the drop-shadow sits over the main content properly.
	 */
		background-image: url(https://www.elicia.org.uk/hosting/index.php?Request=image&Path=images%2Fbanner_background.png);
		background-repeat: repeat-x;
	}

	.content {
		background-color: #FFFFFF;
	}

	#footer {
	/* background-color is set above, to match the body, therefore we don't need
	 * to worry about the height of the footer section.
	 */
		border-top: 3px solid #ADCEAD;
	}

/**** HEADER ****/

	#app_info {
	/* Set position: absolute so that other items aren't forced to flow round the
	 * fixed app_info block.  Without this, the loginstatus block may wrap underneath
	 * the logo (i.e. outside of the header) if the screen is narrow and the username
	 * is too long (where too long currently seems to be 4 characters!).
	 */
		position: absolute;

	/* Add a background image to give the drop-shadow effect round the logo. */
		background-image: url(https://www.elicia.org.uk/hosting/index.php?Request=image&Path=images%2Felicia_logo_shadow.png);
		background-repeat: no-repeat;

	/* Set the width/height so that the background-image is in the right place. */
		width: 280px;
		height: 112px;
		background-position: 20px bottom;
	}

	#app_logo {
		border: none;
		margin: 10px 3px 0 20px;
		float: left;
	}

	#app_name {
		display: block;
		margin-top: 28px;

		background-image: url(https://www.elicia.org.uk/hosting/index.php?Request=image&Path=images%2Felicia_text.png);
		background-repeat: no-repeat;
		width: 158px;
		height: 56px;

		color: #7DB07D;
		line-height: 200px;
		overflow: hidden;
	}

	#app_version {
	/* Until the version number is meaningful, hide it! */
		display: none;

		position: absolute;
		right: 0.4em;
		margin-top: -17px;
		font-size: 0.7em;
		color: #7DB07D;
	}

	#loginstatus {
		float: right;

		padding: 0.2em 0 0.2em 0.5em;
		margin-right: 1em;

		font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
		color: #7DB07D;
		font-size: 12px;
	}

	#loginstatus a {
		color: #000066;
		text-decoration: none;
	}

	#loginstatus a:hover {
		color: #0000CC;
		text-decoration: underline;
	}

	#loginstatus.loginstatus_anon {
		display: none;
	}

	#page_title {
		position: absolute;
		top: 56px;
		left: 274px;

	/* Set right position to 0 and make any overflow hidden, to stop the div from
	 * extending off the right edge of the page when the title is particularly long.
	 */
		right: 0;
		overflow: hidden;
	}

	#page_title h2 {
		margin: 0;

		font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
		font-size: 22px;
		font-weight: bold;
		color: #7DB07D;

	/* Set the title so it doesn't wrap when long (i.e. when a long survey title is
	 * part of the page title).  We cover any overspill with the navigation/client
	 * logo, so it will be hidden, but without the nowrap directive the title may
	 * wrap onto a second line (also hidden) which would not be making the best use
	 * of the available space.
	 */
		white-space: nowrap;
	}

	#nav {
		text-align: right;
		float: right;

	/* A z-index of 1 brings it above all other header elements, as they have no
	 * z-index set.  This means the navigation will set on top of the page header
	 * if that expands too wide (e.g. because it includes a long survey name).
	 * The background colour obscures the header, so it is as if the header has been
	 * truncated.
	 * Z-index only works on positioned elements, so also added position:relative.
	 */
		position: relative;
		z-index: 1;
		background-color: #E0F0E0;

	/* Position element.  We use padding rather than margin so that the background
	 * colour fully covers any title text that may run underneath it.
	 * 45px: top positioning, 1em: right margin to separate from logo/page edge,
	 * 3px: to cover down to header border, 0.5em: to give some space to the left.
	 */
		padding: 45px 1em 3px 0.5em;

		font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
		color: #ADCEAD;
		font-size: 0.8em;
	}

	#nav a {
		color: #ADCEAD;
		color: #7DB07D;

		font-weight: bold;
		text-decoration: none;
	}

	#nav a:hover {
		color: #006600;
	}

/*** CLIENT-SPECIFIC ELEMENTS ***/

	#client_logo {
		float: right;
		margin: 4px 0;
		padding: 9px 1em;

	/* Set a height so that if the logo is too small (or for some reason just a
	 * client name is specified, though this is strongly advised against) then
	 * we still get the divider running down the full length of the left-hand-side.
	 */
		height: 60px;

		border-left: 1px solid #ADCEAD;

	/* Set a z-index and background-color to ensure the logo is always on top of,
	 * and obscuring, the title so that long titles don't appear behind the logo.
	 * We need to set position to relative for z-index to be applied.
	 */
		z-index: 100;
		position: relative;
		background-color: #E0F0E0;
	}

	#client_logo img {
		border: none;
		-khtml-opacity: 0.70;
		-moz-opacity: 0.70;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
		filter: alpha(opacity=70);
		opacity: 0.70;
	}

/*** FOOTER ***/

	#footer {
		color: #ADCEAD;

		padding: 0.5em 0;

		font-size: 0.75em;
		text-align: center;
	}

	#app_copyright a {
		color: #ADCEAD;
		text-decoration: none;
	}

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

/*** PAGE CONTENTS ***/

	.content {
		padding: 1em 1.5em;
	}

/* Demo notice and site notice.  It is unlikely that both will be in effect as the
 * demo is only for our servers, and we are unlikely to need the site notice there.
 * However the design allows for both (it just looks a bit cluttered to have so
 * many notices at the top of the screen).
 */
	#demo_notice,
	#site_notice {
	/* Use 122px horizontal padding so that content is centered.  Wrapping around
	 * the floated logo will cause an automatic indentation which results in two
	 * side-effects.  Firstly, the content will not be properly centered, and
	 * secondly, if there are more than two lines, the third line onwards will
	 * jump to the left as the wrapping will have ended.
	 * Setting a left margin greater than the wrapping forced by the logo (i.e.
	 * >= 122px) will stop the second issue, and making the right margin equal
	 * to this will stop the first.
	 * The top and bottom margins are to give a bit of space - the top margin
	 * should be slightly larger because otherwise the drop-shadow makes it appear
	 * that it is not vertically centered (even though it is).
	 */
		padding: 0.3em 122px 0.2em 122px;

		text-align: center;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}

	#demo_notice {
		background-color: #E06666;
		color: #FFFFFF;
		border-color: #996666;
	}

	#site_notice {
		font-size: 0.9em;

		background-color: #FFFF99;
		color: #990000;
		border-color: #AAAA00;
	}