/******************************************************************************
 * 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 {
		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;
	}

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

	.content {
		margin: 1em 3em 0 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: 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 {
		color: #999999;
	}

	#pagecontainer {
		background-color: #FFFFFF;
		color: #000000;
	}

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

		border-bottom: 1px solid #E0DBD2;
	}

	#page_header {
		background-color: #9DA91B;
		color: #FFFFFF;
	}

/* 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;
	}








/* beta overrides */

	body {
		font-family: 'Open Sans', Arial, Helvetica, sans-serif;
		font-size: 1rem;
	}

	#cookie_notice {
		font-size: 0.875rem;
		font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	}

	#pagecontainer {
		margin: 0;
		font-family: 'Open Sans', Arial, Helvetica, sans-serif;
		font-size: 1rem;
	}

	#site_header {
		background-color: #FAFAFA;
		color: #5C4E44;
		border-bottom: 1px solid #DDDDDD;
		overflow: auto;
		padding: 1rem 2rem ;
	}


	#site_title {
		display: none;
	}

	#app_logo {
		float: left;
		width: 150px;
	}

	#app_logo img {
		width: 100%;
	}

	#site_header a {
		color: #891F59;
		font-weight: bold;
	}

	#site_header a:hover {
		color: #A7A926;
	}



	#loginstatus {
		float: right;
	}

	.content {
		margin: 0.75rem 2rem 1.5em 2rem;
	}

	#page-main .content {
		margin-top: 2rem;
	}

	#page-main .AnalysisListTable {
		margin-top: 1rem;
	}

/* User menu */

	#loginstatus {
		cursor: pointer;
	}

	#loginstatus ul {
		display: none;
		z-index: 100;
	}

	#loginstatus:hover ul {
		display: block;
		position: absolute;
		right: 2em;
		width: 10em;

		list-style: none;

	/* Remove margin so there is no gap that causes the hover to break. */
		margin: 0;

	/* Add a bit of padding, to give a bit of separation from the main text, and
	 * to give a bit of leeway over when the hover stops being in effect.
	 */
		padding: 0.5em;
	}

	#loginstatus li {
		background-color: #FFFFFF;
		border: 1px solid #DDDDDD;
		border-bottom: none;
	}

	#loginstatus li:last-child {
		border-bottom: 1px solid #DDDDDD;
	}

	#loginstatus li a {
		display: block;
		padding: 0.5em;

		text-decoration: none;
	}

/* login */

	.loginstatus_anon {
		font-weight: bold;
		color: #333333;
	}

	#page-login #page_header,
	#page-login #contentcontainer {
		max-width: 500px;
		margin: 0 auto;
		background-color: #891F59;
	}


	#page-login #page_header {
		border-bottom: 0;
		margin-top: 50px;
	}

	#page-login #contentcontainer {
		border-top: 0;
		margin-bottom: 50px;
	}

	#page-login #contentcontainer .content {
		margin-top: 0;
	}

	#page-login #contentcontainer {
		color: #FFFFFF;
	}

	#page-login #page_title h2 {
		font-size: 1.25rem;
		color: #FFFFFF;
	}

	#page-login .CharCountLimit {
		display: inline-block;
	}

	#page_title h2 {
		padding-left: 0.5rem;
	}

	.StandardInputForm .ButtonGroup {
		margin-left: 0 !important;
	}

	.LargeButton {
		background-color: #891F59;
		border: 0 !important;
		color: #FFFFFF;
		padding: 7px 15px !important;
		border-radius: 3px;
		text-decoration: none;
		font-size: 0.875rem;
		margin: 1rem 0.5rem 1rem 0;
		letter-spacing: 1px;
	}

	.LargeButton:hover {
		background-color: #A7A926;
		cursor: pointer;
		color: #FFFFFF;
		text-decoration: none;
	}

	.LargeButton.LargeButtonDelete {
		background-color: #A92926;
	}

	.LargeButton.LargeButtonDelete:hover {
		background-color: #61060B;
	}

	.LargeButton.LargeButtonCancel {
		background-color: #DAD8D8;
		color: #5C4E44;
	}

	.LargeButton.LargeButtonCancel:hover {
		background-color: #5C4E44;
		color: #FFFFFF;
	}

	.LargeButton.LargeButtonDisabled {
		background-color: #EEEEEE;
		color: #BBBBBB;
	}

	.LargeButton.LargeButtonDisabled:hover {
		background-color: #EEEEEE;
		color: #BBBBBB;
		cursor: not-allowed;
	}





	input.LargeButton {
		letter-spacing: 2px;
	}


	#SnapshotDialog input.LargeButton {
		letter-spacing: 0.75px;
	}



	.LargeButton:focus {
		color: #FFFFFF;
	}

/* Adds default styling to results table 'Hide' button */
	.OmitCombo {
		background-color: #891F59;
		padding: 5px 15px !important;
		border: 0;
		border-radius: 3px;
		color: #FFFFFF;
		cursor: pointer;
		text-decoration: none;
		font-size: 0.875rem;
		margin: 0.5rem;
		letter-spacing: 1px;
	}

	.OmitCombo:hover {
		background-color: #A7A926;
	}


	#frmLogin.StandardInputForm label,
	#frmRegister.StandardInputForm label {
		width: 150px;
		padding-top: 4px;
	}

	#frmLogin.StandardInputForm input,
	#frmRegister.StandardInputForm input {
		width: 230px;
	}

	#frmLogin.StandardInputForm .ButtonGroup,
	#frmRegister.StandardInputForm .ButtonGroup {
		margin-left: 164px !important;
	}

	#frmLogin.StandardInputForm .ButtonGroup .LargeButton,
	#frmRegister.StandardInputForm .ButtonGroup .LargeButton {
		border: solid 2px #FFFFFF !important;
		background-color: #891F59;
		padding: 7px 15px;
		border-radius: 3px;
		width: auto;
	}

	#frmLogin.StandardInputForm .ButtonGroup .LargeButton:hover,
	#frmRegister.StandardInputForm .ButtonGroup .LargeButton:hover {
		background-color:#FFFFFF;
		color: #891F59;
	}

	.ItemLinks {
		margin: 20px 0 20px 164px !important;
	}

	#frmLogin.StandardInputForm .RequiredData {
		background-color: #FFFFFF;
		border: 0;
	}

	#frmLogin.StandardInputForm p,
	#frmRegister.StandardInputForm p {
		margin-bottom: 0.5rem
	}


	#page-login #NotificationsPanel {
		margin-top: 0;
		padding: 1rem 0;
		border: 0;
	}

	#page-login #NotificationsPanel p {
		border: 0;
		width: auto;
		text-align: center;
		padding: 1rem;
		font-weight: bold;
	}

/* Help link */

	#help_link {
		position: absolute;
		top: 0;

	/* Add left positioning to match the app_logo width and a left margin to
	 * match the site_header margin x 2, so that the icon is positioned to the right
	 * of the logo.
	 */
		left: 150px;
		margin-left: 4rem;
	}

	#help_link a {
		display: block;

		padding: 0.25em 0.5em;
		border: 2px solid #9DA91B;
		border-top: none;
		-moz-border-radius: 0 0 5px 5px;
		-khtml-border-radius: 0 0 5px 5px;
		-webkit-border-radius: 0 0 5px 5px;
		border-radius: 0 0 5px 5px;
		background-color: #9DA91B;

		color: #FFFFFF;
		text-decoration: none;
	}

	#help_link a:hover {
		background-color: #FFFFFF;
		color: #9DA91B;
	}

/* Footer logos */

	#footer {
		margin-top: 100px;
		padding: 1.5rem 2rem 0.5rem 2rem !important;
		box-sizing: border-box;
		background-color: #FAFAFA;
		border-top: 1px solid #DDDDDD;
		border-bottom: 1px solid #DDDDDD;
		background-color: #EBEBEB;
		background-color: #EEEEEE;
		overflow: auto;
	}

	.FooterInner .Address {
		margin-right: 50px;
	}

	.FooterInner .Address h3 {
		margin-top: 0;
		font-size: 14px;
	}

	.FooterInner .Address p {
		font-size: 13px;
	}

	#footer a {
		color: #5C4E44 !important;
	}

	#footer a:hover {
		color: #A7A926 !important;
	}

	.site_logos {
		float: right;
	}

	.site_logos h3,
	.FooterLinks h3 {
		margin: 0 0 10px 0;
		font-size: 14px;
		font-weight: bold;
	}

	.site_logos h3 {
		font-size: 13px;
	}

	.LSHTM {
		float: left;
		margin: 0 30px 20px 0;
	}

	.LSHTM img {
		height: 60px;
		margin-top: 29px;
	}

	.Funders {
		float: left;
		margin-right: 0;
	}

	.IMMANA {
		float: left;
		margin: 0 20px 20px 0;
	}

	.IMMANA img {
		height: 60px;
	}

	.UKAID {
		float: left;
		margin: 0 30px 20px 0;
	}

	.UKAID img {
		height: 60px;
	}

	.Built {
		float: left;
		margin: 0;
	}

	.Maldaba {
		float: left;
		margin: 0 0 30px 0;
	}

	.Maldaba img {
		height: 28px;
		margin-top: 15px;
	}

	#app_copyright {
		clear: right;
		text-align: right;
	}

	.AddressLinks {
		float: left;
	}

	.FooterLinks {
		float: left;
	}

	.FooterLinks ul {
		list-style: none;
		margin: 0 0 20px 0;
		padding: 0;
	}

	.FooterLinks li {
		margin: 0 16px 8px 0;
		font-size: 13px;
		line-height: 1.1;
		xdisplay: inline;
	}

	#footer a {
		text-decoration: none;
	}

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

/***************** Manage Snapshots *******************/

	#SnapshotDialog table {
		width: 100% !important;
	}

	#SnapshotDialog table .width10{
		width: 10% !important;
	}

/***************** Manage Snapshots *******************/