/**********************************************************************************
 * page_template.css
 *
 * CSS stylings for the Dwell page layout (i.e. non-content elements, present
 * on every page).
 * There are two modes of operation: AdminMode or PersonalMode.  Most styles
 * are initially defined as they should appear in PersonalMode, with appropriate
 * over-rides for AdminMode following.
 **********************************************************************************
 */

/**** POSITIONING ****/

/* Main Building Blocks */

	html {
		margin: 0;
		padding: 0;
	}

	body {
		padding: 0;
		margin: 0 1em 2em 1em;
	}

	#header {
		padding: 0;

	/* Set the minimum height to the height of the logo images.  Because everything
	 * is floated, the box is not expanding to reflect the true size.
	 * We use min-height rather than height, so that if anything wraps it won't
	 * overlap the main content.
	 * We then add a margin to give the necessary space around the items, having set
	 * the body to the actual size of the content.
	 */
		min-height: 51px;
		margin: 1em 0;
	}

	#pagecontainer {
		max-width: 800px;
		min-width: 350px;

		padding: 0 80px;
		margin: 0 auto 2em auto;
	}

/* We set the position of the .content container(s) to be relative.  We need to
 * do this so that any absolutely-positioned elements in the page content are
 * positioned based on 0,0 being the top of the page content, rather than being
 * positioned relative to the whole page.
 * Without this, we run into problems if the inner div contains scroll-bars, as it
 * means that right-positioning will be suddenly in the wrong place.  It also means
 * that these items move with the panel as it scrolls.
 * This is important for situations where we output a navigation widget in the top
 * right of the page, as on the unit_view page.
 */
	.content {
		position: relative;
	}

/* The annual_statement page can get quite wide, so we increase the space allowed
 * for it.  This only applies to personal mode.
 */
	body#page-annual_statement.PersonalMode #pagecontainer {
		min-width: 870px;
		max-width: 1000px;
	}

	#contentcontainer {
	/* Make sure we clear the header. */
		clear: both;
	}

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

	#footer {
		padding: 0 0.5em;
		clear: both;
	}

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

	#app_logo {
		float: left;
		margin: 0;

	/* Total height: 50px */
		padding-top: 3px;
		height: 47px;
	/* Total width: 136px */
		padding-left: 7px;
		width: 129px;
	}

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

	#client_logo {
		float: left;

		margin-right: 1em;

		position: relative;
		left: -14px;

	/* Total height: 57px */
		padding-top: 10px;
		height: 41px;
	/* Total width: 119px */
		padding-left: 28px;
		width: 91px;
	}

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

	#pagecontainer, p, td, th, li {
		font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
		font-size: 0.9em;
	}

	#header {
		font-size: 0.9em;
	}

	#footer {
		font-size: 0.7em;
	}

	#client_logo {
		font-size: 1.9em;
		font-family: Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
		font-weight: bold;
	}

	#NavUser li {
		font-size: 0.8em;
	}

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

	body {
		background-color: #EEE9E5;
		background-image: url(https://dwellstaging.lilac.coop/index.php?Request=image&Path=images%2Fpage_background.jpg);
		background-position: top center;
		background-repeat: repeat;

		color: #615843;
	}

	#contentcontainer {
		border: 1px solid #E1E0D1;

		background-color: #F6F3F1;
		background-image: url(https://dwellstaging.lilac.coop/index.php?Request=image&Path=images%2Fcontent_background.jpg);
	/* Top position is set to a negative value, so that it tiles with the outside
	 * background image.  The current value is a bit arbitrary - I'm not sure if
	 * can get it exact - but it seems OK.
	 */
		background-position: -3em center;
		background-repeat: repeat;
	}

/* Disable borders which IE adds to images inside anchor tags.  We only do this
 * for the 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.
 */
	#header img {
		border: none;
	}

	#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;
	}

	#app_logo {
		background-image: url(https://dwellstaging.lilac.coop/index.php?Request=image&Path=images%2Fdwell_logo_background.png);
		background-position: top left;
		background-repeat: no-repeat;
	}

	#client_logo {
		color: #F1EDE1;

		background-image: url(https://dwellstaging.lilac.coop/index.php?Request=image&Path=images%2Flilac_logo_background.png);
		background-position: top left;
		background-repeat: no-repeat;
	}

	#footer {
		text-align: right;
	}

/********************** LOGIN STATUS / LINKS **********************/

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

		position: relative;
		top: 1.2em;

		color: #8F8590;
	}

	#loginstatus b {
		color: #615843;
	}

	#NavUser {
		padding: 0;
		margin: 0;
	}

	#NavUser li {
		display: inline;
		padding-left: 0.5em;
	}

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

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

	#NavUser #NavModeChange a {
		color: #5A9920;
	}

	#NavUser #NavModeChange a:hover {
		color: #5ACC20;
	}

	#xloginstatus b {
		border: 1px solid #E0E0D1;
		-moz-border-radius: 5px;
		-khtml-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		background-color: #F4F1F0;
		padding: 1px 4px;
	}

/********************** PERSONAL MODE NAVIGATION ITEMS **********************/

	.PersonalMode #Navigation {
		float: right;

	/* Position the navigation.  Move upwards so aligned appropriately with top of
	 * #contentcontainer, and move right (by same amount as #contentcontainer
	 * padding) so it occupies the right-hand space appropriately.
	 */
		position: relative;
		right: -80px;
		top: -3em;

	/* Use a negative margin to release the original space that the element occupied,
	 * to stop the content flow breaking.  Without this, full-width elements are
	 * forced below the end of the navigation.
	 */
		margin-left: -80px;

		text-align: right;
	}

	.PersonalMode #Navigation ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.PersonalMode #Navigation li {
		width: 119px;
		height: 50px;

		clear: right;

	/* Ensure the tabs always overlap page content. */
		position: relative;
		z-index: 1000;
	}

	.PersonalMode #Navigation li a {
		display: block;
		float: right;

		width: 40px;
		height: 40px;
		margin: 5px 29px;

		background-image: url(https://dwellstaging.lilac.coop/index.php?Request=image&Path=images%2Ftenant_nav_buttons.png);
		background-repeat: no-repeat;

	/* Hide link text. */
		text-indent: 50px;
		overflow: hidden;
		white-space: nowrap;
	}

	.PersonalMode .SelectedNavZone {
		background-image: url(https://dwellstaging.lilac.coop/index.php?Request=image&Path=images%2Fselected_nav_tenant.png);
	}

	.PersonalMode #nav_person a {
		background-position: 0 0;
	}

	.PersonalMode #nav_person a:hover {
		background-position: -40px 0;
	}

	.PersonalMode #nav_property a {
		background-position: 0 -40px;
	}

	.PersonalMode #nav_property a:hover {
		background-position: -40px -40px;
	}

	.PersonalMode #nav_project a {
		background-position: 0 -80px;
	}

	.PersonalMode #nav_project a:hover {
		background-position: -40px -80px;
	}

/********************** ADMIN MODE CONTENT BOXES **********************/

/* Set up main content areas to be in the appropriate place, and to fill the area
 * designated for them.  There are three areas.  The page is divided into two
 * horizontally, with the top section being the #header element, which is 75px high.
 * The bottom section is divided into two areas vertically.  The left area is the
 * #Navigation, which is 145px wide, and the remaining area is the page content,
 * in the #content_container.  The top and left areas are 'fixed', with the content
 * are being a scrollable window.  Each item should always occupy the full amount of
 * space available to it.
 * Note that in order to use %-based heights, all containing elements need to
 * have an explicit height set on them (min-height is not sufficient).  This
 * includes the <html> tag.  Note that we can't select the <html> tag for AdminMode
 * only, as that class is placed on the <body> tag, however this rule shouldn't
 * affect other modes.
 */

/* METRICS:
 *   App/Client logo background height: 50px
 *   Logo vertical margin (top and bottom): 7px
 *   Header height: 64px  (7 + 50 + 7)
 *   Horizontal page margin (left and right): 15px
 */

/* Set heights on containing elements. */
	html,
	body.AdminMode,
	.AdminMode #pagecontainer {
		height: 100%;
	}

/* Remove the body's margin, set above.  Positioning is being set on the individual
 * elements, and this throws everything off.
 */
	body.AdminMode {
	/* Use !important to stop the debug bar from re-introducing the bottom margin. */
		margin: 0 !important;
	}

/* Setup header bar, so it is a fixed-position bar at the top left of the screen. */
	.AdminMode #header {
		position: fixed;
		top: 0;
		left: 0;

	/* Need to add an explicit width, otherwise it will collapse to the width of
	 * it's content.
	 */
		width: 100%;

	/* Disable the min-height set above - in admin mode we can size automatically
	 * to our content.
	 */
		min-height: 0;

	/* Over-ride the margin, set above. */
		margin: 0;
	}

/* Position app/client logos, which dictate the height of the header. */

	.AdminMode #app_logo {
	/* We use margin for top, so the background image doesn't start too soon,
	 * and padding for bottom, so it counts as 'mouseover' when navigating, and
	 * so the mouse-over background image is not cut-off.
	 */
		margin: 7px 0 0 15px;
		padding-bottom: 7px;
	}

	.AdminMode #client_logo {
	/* We use margin for top, so the background image doesn't start too soon,
	 * and padding for bottom, so it counts as 'mouseover' when navigating.
	 */
		margin-top: 7px;
		padding-bottom: 7px;
	}

/* Setup page content area to occupy the remaining space. */
	.AdminMode #pagecontainer {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;

	/* Remove the width restrictions which we apply in PersonalMode. */
		max-width: none;
		min-width: 0;

	/* Remove any margin/padding set above. */
		padding: 0;
		margin: 0;

	/* Set the box-model so that the padding doesn't increase the size of the
	 * element, but instead eats-in to the 100% height.
	 */
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

	/* Give the padding necessary to move it below the header.  We also give
	 * padding on the left/right so the page has a bit of a border at the edges.
	 * Note that we use pixel widths, as we need to ensure exact positioning of
	 * several elements, which have different font-sizes.
	 */
		padding: 84px 15px 0 15px;
	}

/* Reduce top padding of page_title, to close up the gap (it looks nicer when the
 * link trail is present.
 */
	.AdminMode #page_title {
		padding-top: 1em;
	}

/* Setup the content container so that it occupies the whole of the content area,
 * with overflow set to auto so that scrollbars appear within the content area if
 * the content is larger than the available space.
 */
	.AdminMode #contentcontainer {
		height: 100%;
		overflow: auto;

	/* Set the border widths: 1px top, 3px left and nothing right or bottom. */
		border-width: 1px 0 0 3px;
	}

/* Line up background images between page and contents. */

	body.AdminMode,
	.AdminMode #contentcontainer {
		background-position: left top;
	}

/* Move the footer to the right at the bottom. */
/* TODO: This location not ideal, as it may cover page content.  We need to review
 *		 this properly!
 */
	.AdminMode #footer {
		position: fixed;
		bottom: 0;
		left: 0;

		padding: 0 0.5em 0 3.5em;
	}

/* Setup navigation bar, which is a pop-up box that aligns with the app_logo element
 * and which covers the borders of the contentcontainer.
 */
	.AdminMode #NavWrapper {
		position: absolute;

	/* Position the pop-up so it matches the content container, and therefore
	 * overlaps it's left/top border.
	 * The actual top positioning should be at 64px, but the link trail takes up
	 * 20px and we want the border of the nav wrapper to join the border of the
	 * page content, so we add these 20px to the top positioning and then move
	 * the contents of the element up by 20px to compensate, and to ensure that
	 * the interior navigation box still joins up with the Dwell logo.
	 */
		left: 15px;
		top: 84px;

	/* Set a high z-index, to ensure it is always on top of any page content. */
		z-index: 1000;
	}

/* Use a table-based layout to ensure that each list element in the admin navigation
 * acts as a separate column, and is therefore expanded to full height.
 */
	.AdminMode #Navigation {
		display: table;

	/* Move the navigation element up by 20px to compensate for the additional 20px
	 * that are placed on the containing #NavWrapper element (see above for details).
	 * We use a negative margin to close up the space that this would otherwise leave
	 * behind.
	 * We also subtract one additional pixel, to ensure we don't get a tiny invisible
	 * gap where the mouseover fails, causing the navigation box to close
	 * unexpectedly.
	 */
		position: relative;
		top: -21px;
		margin-bottom: -21px;
	}

	.AdminMode #Navigation ul {
		display: table-cell;
	}

/********************** ADMIN MODE STYLE OVERRIDES **********************/

	.AdminMode #loginstatus {
		position: static;
		margin-right: 1em;
		margin-top: 1.5em;
		width: auto;
	}

/* Add an additional padding to the bottom of .content blocks so that there is some
 * space between the content and the bottom of the browser window on long pages.
 * We unfortunately can't add this as padding to the #contentcontainer, as it would
 * cause the page to be 100% + padding high, and scrollbars would always be present.
 * The drawback with this method is that if there are multiple .content blocks, the
 * gap between them may be too large.  We'll keep an eye on this and if it becomes
 * a problem, we can either use :last to select it (at the expense of reduced browser
 * compatibility) or add an empty element at the end of the container which we can
 * give some height to (at the expense of additional non-semantic markup).
 * We use padding rather margin, because margin doesn't force the contentcontainer
 * to expand with it (leaving a bit of the main page backrgound showing at the
 * bottom of the page).
 */
	.AdminMode .content {
		padding-bottom: 0.5em;
	}

/********************** ADMIN MODE NAVIGATION APPEARANCE **********************/
/* (See above for positioning) */

/* The panel is made up of two elements.  The outer #NavWrapper provides the grey
 * border that separates it from the page background, whilst the inner #Navigation
 * element provides the green border and the overall background to the panel.
 */
	.AdminMode #NavWrapper {
	/* There is a border, including a bit of background image, at the right and
	 * bottom only.
	 */
		padding: 0 0.5em 0.5em 0;
		background-color: #EEE9E5;
		background-image: url(https://dwellstaging.lilac.coop/index.php?Request=image&Path=images%2Fpage_background.jpg);

		border: 1px solid #E1E0D1;
		border-width: 0 1px 1px 0;
		-moz-border-radius: 0 0 20px 0;
		-khtml-border-radius: 0 0 20px 0;
		-webkit-border-radius: 0 0 20px 0;
		border-radius: 0 0 20px 0;
	}

	.AdminMode #Navigation {
	/* Thick green curvy border. */
		border: 6px solid #57981C;
		-moz-border-radius: 0 8px 15px 8px;
		-khtml-border-radius: 0 8px 15px 8px;
		-webkit-border-radius: 0 8px 15px 8px;
		border-radius: 0 8px 15px 8px;

	/* Menu background is in between the page backgroud and the content background,
	 * in terms of shade.
	 */
		background-color: #F2EEEC;
		background-image: url(https://dwellstaging.lilac.coop/index.php?Request=image&Path=images%2Fmenu_background.jpg);

	/* We don't include horizontal padding - this is handled by the list elements
	 * themselves.
	 */
		padding: 0.5em 0;
	}

/* Set up padding and border between each column. */

	.AdminMode #Navigation ul {
	/* Ensure there is no margin provided by the browser's default styling. */
		margin: 0;

	/* Use a 0.5em padding between items, and a slightly different top/bottom
	 * padding because - for some reason I haven't quite figured out - the top
	 * seems to be getting some additional padding from somehwhere (Firefox bug?).
	 */
		padding: 0.25em 0.5em 0.5em 0.5em;

	/* The right border is grey and the left white, to give a slightly etched
	 * effect.
	 */
		border-left: 1px solid #F8F5F3;
		border-right: 1px solid #DFDFCE;
	}

	.AdminMode #Navigation #NavSite {
	/* Remove left border from left-most column. */
		border-left: none;

	/* We also tweak the padding, as we want a bit less space here so that the
	 * border round the buttons is a consistent width.
	 */
		padding-left: 0.3em;

	/* Add padding to the bottom of the element, to make up for the fact that the
	 * system menu is going to be taken out of the document flow.  This ensures that
	 * we always leave space for the button even when the other lists are short.
	 */
		padding-bottom: 2.5em;
	}

	.AdminMode #Navigation #NavMaintenance {
	/* Remove right border from right-most column. */
		border-right: none;
	}

/* Remove list styling from the individual list items and add a more appropriate
 * horizontal margin.
 */

	.AdminMode #Navigation li {
		list-style: none;
		margin: 0 0.4em;
	}

/* Style the standard navigation links. */

	.AdminMode #Navigation li a {
		color: #615843;
		text-decoration: none;

	/* We use Tahoma for the navigation, as per the design document. */
		font-family: Tahoma, sans-serif;

	/* Use a slightly smaller font size. */
		font-size: 0.85em;

	/* Make them into block-level elements so that they are clickable on their
	 * full width, and so we can give a bit of vertical margin to them.
	 */
		display: block;

	/* Give a bit of a gap between each item. */
		margin-top: 0.6em;
	}

	.AdminMode #Navigation li a:hover {
		color: #5ACC20;
	}

/* Style the 'header' links, which are picked-out in orange. */

	.AdminMode #Navigation #NavSite a,
	.AdminMode #Navigation .NavHeading {
		color: #FF3300;
		font-weight: bold;

	/* Undo the font-sizing set above, to make these links normal sized again. */
		font-size: 1em;

	/* Give a bit of an additional margin below the header links.  We also remove
	 * the top margin, as we don't want to add additional space at the top of the
	 * lists.
	 */
		margin-top: 0;
		margin-bottom: 0.75em;
	}

	.AdminMode #Navigation #NavSite a:hover {
		color: #FFCC00;
	}

/* Style the primary links in the left-most column, to make them look a bit
 * button-like.
 */

	.AdminMode #Navigation #NavSite a {
		border: 1px solid #E6E0D9;
		padding: 0.25em 0.5em 0.25em 2.25em;
		background-color: #FFFFFF;
		-moz-border-radius: 5px;
		-khtml-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;

	/* Decrease the separation between items by using a slightly smaller bottom
	 * margin.
	 */
		margin-bottom: 0.5em;
	}

	.AdminMode #Navigation #NavSite li {
	/* Reduce the right margin so the spacing around the buttons is more even. */
		margin-right: 0.3em;
	}

/* Position the 'System' link so it always drops to the bottom of the column
 * so that it is visually separated from the other links.
 */

	.AdminMode #Navigation #NavSystem {
		position: absolute;
		bottom: 1.25em;
	}

	.AdminMode #Navigation #NavSystem a {
	/* Colour the system link differently, as it is not at the same level of
	 * prominence as the others.
	 */
		color: #615843;

	/* This width is set to match the width of the other buttons, but their width
	 * is set based on the longest navigational label, so if the longest label
	 * changes, this value will need updating.  Annoying, but I can't see a way
	 * round it at present.
	 */
		width: 4.6em;
	}

/* Set button icons. */

	.AdminMode #Navigation #NavSite a {
		background-image: url(https://dwellstaging.lilac.coop/index.php?Request=image&Path=images%2Fadmin_icons.png);
		background-position: 3px 3px;
		background-repeat: no-repeat;
	}

	.AdminMode #Navigation #NavUnits a {
		background-position: 3px -17px;
	}

	.AdminMode #Navigation #NavDocStore a {
		background-position: 3px -37px;
	}

	.AdminMode #Navigation #NavPeople a {
		background-position: 3px -56px;
	}

	.AdminMode #Navigation #NavSystem a {
		background-position: 3px -75px;
	}

	.AdminMode #NavWrapper {
		display: none;
	}

	.AdminMode.NavigationOpen #NavWrapper {
		display: block;
	}

	.AdminMode.NavigationOpen #app_logo {
		background-position: left -57px;
	}

/* Style horizontal rules in the navigation. */

	.AdminMode #Navigation hr {
		border-top: 1px solid #DFDFCE;
		border-bottom: 1px solid #F8F5F3;

	/* Use the same margin as for the menu items. */
		margin: 0;
		margin-top: 0.6em;
	}

	.AdminMode #Navigation li.NavDivider {
		margin: 0;
	}

/* Link trail. */

	#NavLinkTrail {
	/* Pixel positioning to move it to top left of where the pagecontainer is
	 * positioned.
	 */
		position: absolute;
		top: 63px;
		left: 15px;

	/* Em positioning to move it away from the edge. */
		margin-left: 1em;

		font-size: 0.75em;
		color: #A4A289;

		padding-left: 15px;
		background-image: url(https://dwellstaging.lilac.coop/index.php?Request=image&Path=images%2Fadmin_icons.png);
		background-position: left -95px;
		background-repeat: no-repeat;
	}

	#NavLinkTrail a {
		color: #A4A289;
	}

	#NavLinkTrail a:hover {
		color: #F99F34;
	}