/******************************************************************************
 * default_page_layout.css
 *
 * A set of default stylings for the page layout (non-content) for MAF
 * projects.  It is expected that more mature projects will use their own
 * style-sheets and so this is targetted at new projects, with the purposes
 * of getting something decent quickly, so you can worry about functionality
 * before having to get into the messy business of styling the thing.
 *
 * The default styling was originally based on SMYLE, but may be updated
 * however you see fit.  However, it should not require any images.
 ******************************************************************************
 */

/**** POSITIONING ****/

/* Main Building Blocks */

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

	#pagecontainer {
		width: 90%;
		margin: 0.5em auto 2em auto;
		padding: 0;
	}

	#site_header {
		padding: 1em;

	/* Left-padding slightly greater to indent the title/user info better, so it
	 * aligns with the page title.
	 */
		padding-left: 1.5em;

	/* Set min-height so that it doesn't collapse too far if there is nothing there
	 * except the 'home' link.
	 */
		min-height: 1.2em;
	}

/* Make sure each block clears any previous blocks. */

	#contentcontainer,
	#footer {
		clear: both;
	}

/* Force footer outside of the white background. */

	#contentcontainer {
	/* Add negative margin, to bring the footer on top of the content container. */
		margin-bottom: -1.7em;
	}

	#footer {
	/* Use relative positioning to move it back out to its original location. */
		position: relative;

	/* 2.4em at the footer font-size is near-enough equivalent to 1.7em at the
	 * contentcontainer font-size.
	 */
		top: 2.4em;
	}

/* Spacing between/inside the main elements. */

	.content {
		margin: 1em 3em 1em 3em;
	}

	#footer {
		padding: 0 0.5em;
	}

/* Sub-Elements */

	#site_title {
		margin: 0;
		padding: 0;

	/* Reduce top-margin so it lines up with home link on right-hand-side. */
		margin-top: -0.2em;
	}

	#page_title {
		margin-left: 1.5em;
		padding: 1.5em 0 0.5em 0;
	}

	#page_title h2 {
		margin: 0;
	}

	#home_link {
		float: right;
		margin-top: -0.1em;

	/* Ensure link is always above the title element.  Required for IE, but
	 * no harm doing this as standard, in case the title is particularly wide.
	 */
		position: relative;
		z-index: 1;
	}

/* Don't float the home link if we are using the application logo for this,
 * rather than a dedicated text string.
 */
	#app_logo #home_link {
		float: none;
		margin-top: 0;
	}

	#app_version {
	/* The App version is meaningless for new new projects, and shouldn't be shown.
	 * We could update our template to omit it, but doing it this way gives the easy
	 * opportunity of adding it back in.
	 */
		display: none;
	}

	#app_copyright {
		padding: 0.5em 0;
	}

	#link_trail {
	/* Set a minimum height, so that the space occupied by the element is still
	 * present even when it's empty, to stop things moving about as you navigate
	 * onto and away from the home page.
	 */
		min-height: 1.2em;

	/* Add some padding to stop it buffering right up to the edges.  We use padding
	 * rather than margin, so a background color can be applied.
	 */
		padding: 0.5em;
	}

/***** FONTS ****/

	#pagecontainer,
	#cookie_notice {
		font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
		font-size: 0.8em;
	}

	#site_header {
		font-size: 0.9em;
	}

	#link_trail {
		font-size: 0.8em;
	}

	#footer {
		font-size: 0.7em;
	}

/***** APPEARANCE ****/

	body {
		background-color: #ECEAC6;
		color: #999999;
	}

	#pagecontainer {
		background-color: #FFFFFF;
		border: 1px solid #E0DBD2;
		color: #000000;
	}

	#site_header {
		background-color: #163288;
		color: #FFFFFF;

		border-bottom: 1px solid #E0DBD2;
	}

/* Disable borders which IE adds to images inside anchor tags.  We only do this
 * for the site header, so it removes it from the logo images that may be present.
 * We don't over-ride this behaviour for content, as it may be desirable.
 * If we did want to do that, it should be part of a separate CSS 'reset' file
 * rather than the actual page styling.
 */
	#site_header img {
		border: none;
	}

	#site_header a {
		color: #FFFFFF;
	}

	#home_link a:hover {
		color: #FFFF00;
	}

	#app_copyright {
		color: #999999;
	}

	#app_copyright a, #app_copyright a:visited {
		text-decoration: none;
		color: #999999;
	}

	#app_copyright a:hover {
		color: #3333FF;
	}

	#link_trail {
		background-color: #F0F0FF;
		color: #666666;
	}

	.link_trail_separator {
		padding: 0 0.5em;
		color: #999999;
	}

	#link_trail a {
		color: #0000AA;
		text-decoration: none;
		font-weight: normal;
	}

	#link_trail a:hover {
		color: #0000FF;
	}

/* COOKIE NOTICE */

	#cookie_notice {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0.5em;
		margin: 0;
		margin-bottom: 1em;

		color: #FFFF00;
		text-shadow: 1px 1px 1px #AA0000;

		background: #cf0404;
		background: -moz-linear-gradient(top, #cf0404 0%, #ff0f0f 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cf0404), color-stop(100%, #ff0f0f));
		background: -webkit-linear-gradient(top, #cf0404 0%, #ff0f0f 100%);
		background: -o-linear-gradient(top, #cf0404 0%, #ff0f0f 100%);
		background: -ms-linear-gradient(top, #cf0404 0%, #ff0f0f 100%);
		background: linear-gradient(to bottom, #cf0404 0%, #ff0f0f 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf0404', endColorstr='#ff0f0f', GradientType=0);
		-khtml-opacity: 0.85;
		-moz-opacity: 0.85;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
		filter: alpha(opacity=85);
		opacity: 0.85;
		-moz-box-shadow: 0 5px 5px -5px #000000;
		-khtml-box-shadow: 0 5px 5px -5px #000000;
		-webkit-box-shadow: 0 5px 5px -5px #000000;
		box-shadow: 0 5px 5px -5px #000000;
	}

	#cookie_notice #cookie_notice_dismiss {
		font-weight: bold;
		white-space: nowrap;
		color: #FFFFFF;
	}