/**
 * File: global.css
 *
 * The main CSS file.
 *
 * Layout
 * Modules
 * Teasers
 */



/* =============================================================================
 * Layout
============================================================================= */


/* Global
 * [1] This would be 1170px if not for the padding and box-sizing:border-box.
 * [2] Prevent negative margins of rows with columns from reaching the viewport
 *     edge
 * [3] Space between the header and content on pages without breadcrumbs.
----------------------------------------------------------------------------- */
#header {
	padding:20px 0;
	border-bottom:3px solid #93b479;
}
.allrum #header {
	border-bottom-color:#679eb3;
}
#main {
	max-width:1210px; /* [1] */
	margin:0 auto 40px;
	padding:0 20px; /* [2] */
}
.lt-ie9 #main {
	width:1210px;
}
#content {
	margin-top:30px; /* [3] */
}
.breadcrumbs + #content {
	margin-top:0; /* [3] */
}
#footer {
	clear:both;
	background:#93b479;
	color:#fff;
}
.allrum #footer {
	background-color:#679eb3;
}


/* max-width:860px
 * Right-align text in the header when nav-supp and nav-main are compacted
----------------------------------------------------------------------------- */
@media only screen and (max-width:860px) {

	#header {
		padding:10px 0;
		text-align:right;
	}

} /* End media query */


/* Blocks
 * Window wide blocks with centred content area.
 * [1] This would be 1170px if not for the padding and box-sizing:border-box.
 * [2] Prevent negative margins of rows with columns from reaching the viewport
 *     edge
----------------------------------------------------------------------------- */
.block {
	background:#fff;
}
.block-inner {
	max-width:1210px; /* [1] */
	margin:0 auto;
	padding:0 20px; /* [2] */
}
.lt-ie9 .block-inner {
	width:1210px;
}

/*
 * Block with gray background
 */
.block-gray {
	background:#ecebea;
}

/*
 * Block with light green background
 */
.block-light-green {
	background:#93b479;
}

/*
 * Block with dark green background
 */
.block-dark-green {
	background:#87a570;
}

/*
 * Block with light blue background, used when body has .allrum class
 */
.block-light-blue {
	background:#679eb3;
}

/*
 * Block with dark blue background, used when body has .allrum class
 */
.block-dark-blue {
	background:#5c8ea1;
}


/* Default layout
 * Used on Regular content page (a.k.a. layout-1).
----------------------------------------------------------------------------- */
.content-1 {
	float:left;
	width:23.076923076923%; /* 270 / 1170 */
}
.content-2 {
	float:right;
	width:74.358974358974%; /* 870 / 1170 */
}
.content-2-1 {
	float:left;
	width:65.51724137931%; /* 570 / 870 */
}
.content-2-2 {
	float:right;
	width:31.034482758621%; /* 270 / 870 */

}


/* max-width:760px
 * Linearise main layout columns
 * .content-2 is unfloated when .nav-sub is compacted, see
 * .content-1.has-nav-sub + .content-2 { }
----------------------------------------------------------------------------- */
@media only screen and (max-width:760px) {

	.no-js .content-1,
	.no-js .content-2,
	.content-2-1,
	.content-2-2 {
		float:none;
		width:auto;
	}

} /* End media query */


/* Layout 2: Home page
 * [1] No margin-bottom since there will always be blocks that already have a
 *     margin-bottom on the home page.
----------------------------------------------------------------------------- */
.layout-2 #main {
	max-width:none;
	margin-bottom:0; /* [1] */
	padding:0;
}


/* Layout 3
 * Sub navigation, wider content area and no right column.
 * No rules necessary; default column widths are used.
----------------------------------------------------------------------------- */


/* Layout 4
 * No sub navigation or right column.
 * Centred content area, not quite full width.
----------------------------------------------------------------------------- */
.layout-4 .content-1 {
	float:none;
	width:75%;
	margin:0 auto;
}


/* max-width:800px
 * Make the content area full width.
----------------------------------------------------------------------------- */
@media only screen and (max-width:800px) {

	.layout-4 .content-1 {
		width:auto;
	}

} /* End media query */


/* Layout 5
 * Full width content area, no sub navigation or right column
----------------------------------------------------------------------------- */
.layout-5 .content-1 {
	float:none;
	width:auto;
}


/* Layout-7
 * Small centered content area. Used on login page.
----------------------------------------------------------------------------- */
.layout-7 .content-1 {
	float:none;
	max-width:100%;
	width:400px;
	margin:50px auto 0;
	padding:20px;
	border:1px solid #e4e3e2;
	border-bottom:3px solid #93b479;
	background:#fff;
}
.allrum.layout-7 .content-1 {
	border-bottom-color:#679eb3;
}

/* Content split section
 * Used to split a content area into two columns.
----------------------------------------------------------------------------- */
.content-split > div {
	float:right;
}
.content-split > div:first-child {
	float:left;
}
.content-split .content-large {
	width:65.51724137931%; /* 570 / 870 */
}
.content-split .content-small {
	width:31.034482758621%; /* 270 / 870 */
}


/* max-width:700px
 * Change widths
----------------------------------------------------------------------------- */
@media only screen and (max-width:700px) {

	.content-split .content-large {
		width:50%; /* 330 / 660 */
	}
	.content-split .content-small {
		width:45.454545454545%; /* 300 / 660 */
	}

} /* End media query */


/* max-width:540px
 * Change widths
----------------------------------------------------------------------------- */
@media only screen and (max-width:540px) {

	.content-split > div:nth-child(n) {
		float:none;
		width:auto;
	}

} /* End media query */



/* =============================================================================
 * Modules
 *
 * Basic module class.
 * [1] No margin-bottom when inside columns; rows already have margin-bottom
============================================================================= */
.m {
	margin:0 0 30px;
}
.col > .m {
	margin-bottom:0; /* [1] */
}



/* =============================================================================
 * Alertbox
 *
 * Info box used on the home page
============================================================================= */
.alertbox {
	margin:30px 0;
	padding:20px 0;
	line-height:40px;
}
.alertbox > * {
	display:inline-block;
	margin:0 25px 0 0;
	vertical-align:baseline;
}
.alertbox > *:last-child {
	margin-right:0;
}
.alertbox h2 {
	color:#93b478;
	font-size:40px;
}
.allrum .alertbox h2 {
	color:#679eb3;
}
.alertbox h2:before {
	display:inline-block;
	width:60px;
	height:60px;
	margin-right:20px;
	background:url(../i/alertbox-icons.svg?embed);
	background-size:auto 60px;
	content:"";
	vertical-align:-17px;
}
.allrum .alertbox h2:before {
	background-image:url(../i/alertbox-icons-blue.svg?embed);
}
.alert {
	font-weight:bold;
	font-size:18px;
}
.alert:before {
	content:"- ";
}
.alertbox .action-link {
	color:#93b478;
	font-size:18px;
}
.allrum .alertbox .action-link {
	color:#679eb3;
}


/* Crisis version of alertbox
----------------------------------------------------------------------------- */
.alertbox.crisis h2:before {
	background-position:-60px 0;
}
.alertbox.crisis h2,
.alertbox.crisis .action-link {
	color:#b3665f;
}


/* max-width:600px
 * Smaller icon, heading, less padding
----------------------------------------------------------------------------- */
@media only screen and (max-width:600px) {

	.alertbox {
		padding:10px 0;
		line-height:inherit;
	}
	.alertbox > * {
		display:block;
		margin-right:0;
	}
	.alertbox h2 {
		margin-bottom:10px;
		font-size:30px;
		line-height:40px;
	}
	.alertbox h2:before {
		width:40px;
		height:40px;
		margin-right:10px;
		background-size:auto 40px;
		vertical-align:middle;
	}
	.alertbox.crisis h2:before {
		background-position:-40px 0;
	}
	.alert {
		margin-bottom:10px;
		font-size:inherit;
	}

} /* End media query */


/* print
 * Print styling
----------------------------------------------------------------------------- */
@media print {

	.alertbox {
		border:2px solid #383634;
	}

} /* End media query */



/* =============================================================================
 * Teasers
============================================================================= */


/* Shortcut teasers
 * Simple block level links with a background image.
 * Displayed as columns in a row.
 * [1] Match the negative top positioning of the pseudo elements
 * [2] line-height equal to min-height for vertical centering
 * [3] Reduced line-height since this link has a byline
 * [4] Move the text upwards to compensate for the large line-height
----------------------------------------------------------------------------- */
.shortcut-teasers {
	margin-top:20px;
	margin-bottom:40px;
}
.shortcut-teasers h2 {
	margin-bottom:20px;
	text-align:center;
}
.shortcut-teasers ul {
	padding-top:24px; /* [1] */
	list-style:none;
}
.shortcut-teasers li {
	text-align:center;
}
.shortcut-teasers a {
	display:block;
	position:relative;
	min-height:200px;
	color:#fff;
	font:40px/200px "Yellowtail", cursive; /* [2] */
	text-decoration:none;
}
.allrum .shortcut-teasers a {
	color:#fff;
}
.shortcut-teasers a:before {
	position:absolute;
	top:-24px;
	left:50%;
	width:88px;
	height:88px;
	margin-left:-44px;
	content:"";
	transition:all 0.2s ease;
}
.shortcut-teasers a:hover:before,
.shortcut-teasers a:focus:before {
	top:-44px;
}
.shortcut-teasers a:after,
.allrum .shortcut-teasers a:after {
	position:absolute;
	bottom:-30px;
	left:0;
	width:100%;
	height:20px;
	background:radial-gradient(ellipse farthest-side, rgba(0, 0, 0, 0.12) 0, rgba(0, 0, 0, 0) 90%);
	content:"";
	opacity:0;
	-webkit-transition:-webkit-transform 0.2s ease-out, opacity 0.2s ease-out;
	transition:transform 0.2s ease-out, opacity 0.2s ease-out;
	-ms-transform:scale(0.5);
	-webkit-transform:scale(0.5);
	transform:scale(0.5);
}
.shortcut-teasers a:hover:after,
.allrum .shortcut-teasers a:hover:after,
.shortcut-teasers a:focus:after,
.allrum .shortcut-teasers a:focus:after {
	opacity:1;
	-ms-transform:scale(1);
	-webkit-transform:scale(1);
	transform:scale(1);
}
.shortcut-teasers .my-pages {
	background-color:#ba8d9c;
	line-height:170px; /* [3] */
}
.shortcut-teasers .my-pages:before {
	background-image:url(../i/shortcut-teaser-my-pages.png?embed);
}
.shortcut-teasers .my-pages i {
	display:block;
	margin-top:-50px; /* [4] */
	font:14px/1 "Open Sans", Arial, Helvetica, sans-serif;
}
.shortcut-teasers .current-vacancies {
	background-color:#679eb3;
}
.shortcut-teasers .current-vacancies:before {
	background-image:url(../i/shortcut-teaser-current-vacancies.png?embed);
}
.shortcut-teasers .report-an-error {
	background-color:#a08571;
}
.shortcut-teasers .report-an-error:before {
	background-image:url(../i/shortcut-teaser-report-an-error.png?embed);
}
.shortcut-teasers .contact-us {
	background-color:#93b478;
}
.shortcut-teasers .contact-us:before {
	background-image:url(../i/shortcut-teaser-contact-us.png?embed);
}


/* max-width:1000px
 * Change from 4 columns to 2
----------------------------------------------------------------------------- */
@media only screen and (max-width:1000px) {

	.shortcut-teasers .col {
		width:50%;
	}
	.shortcut-teasers .col:nth-child(n+3) {
		margin-top:60px;
	}

} /* End media query */


/* max-width:520px
 * Change from 4 columns to 2
----------------------------------------------------------------------------- */
@media only screen and (max-width:520px) {

	.shortcut-teasers {
		margin-bottom:0;
	}
	.shortcut-teasers ul {
		padding-top:0;
	}
	.shortcut-teasers .col {
		float:none;
		width:auto;
	}
	.shortcut-teasers .col:nth-child(n+2) {
		margin-top:30px;
	}
	.shortcut-teasers a {
		min-height:80px;
		font-size:32px;
		line-height:80px;
	}
	.shortcut-teasers a:before {
		position:absolute;
		top:-11px;
		left:10px;
		width:44px;
		height:44px;
		margin-left:0;
		background-size:100%;
	}
	.shortcut-teasers a:hover:before,
	.shortcut-teasers a:focus:before {
		top:-22px;
	}
	.shortcut-teasers a:after {
		bottom:-20px;
	}
	.shortcut-teasers .my-pages {
		line-height:60px;
	}
	.shortcut-teasers .my-pages i {
		margin-top:-10px;
	}

} /* End media query */


/* Popular pages
 * List of popular pages
----------------------------------------------------------------------------- */
.popular {
	margin-bottom:50px;
}
.popular h2 {
	text-align:center;
}
.popular ul {
	list-style:none;
}


/* max-width:1000px
 * Change from 3 to 2 columns
 * [1] Clear floats
 * [2] Remove the clearing element from rows
----------------------------------------------------------------------------- */
@media only screen and (max-width:1000px) {

	.popular {
		overflow:hidden; /* [1] */
		margin-bottom:20px;
	}
	.popular .row {
		margin-bottom:0;
	}
	.popular .row:after {
		display:none; /* [2] */
	}
	.popular .col {
		width:50%;
		margin-bottom:30px;
	}

} /* End media query */


/* max-width:660px
 * Change from 2 columns to 1
----------------------------------------------------------------------------- */
@media only screen and (max-width:660px) {

	.popular .col {
		float:none;
		width:auto;
		margin-bottom:20px;
	}

} /* End media query */


/* Link teaser
 * Single link teasers
----------------------------------------------------------------------------- */
.link-teaser {
	display:block;
	position:relative;
	padding:10px 35px 10px 20px;
	border-left:3px solid #7f9b6a;
	background:#93b478;
	font-weight:bold;
	font-size:17px;
	text-decoration:none;
}
.link-teaser:after {
	position:absolute;
	top:50%;
	right:10px;
	width:16px;
	height:16px;
	margin-top:-8px;
	background:url(/gui/i/circle-arrows.svg) -16px 0;
	content:"";
	transition:right 0.2s ease;
}
.link-teaser:link,
.link-teaser:visited,
.allrum .link-teaser:link,
.allrum .link-teaser:visited {
	color:#fff;
}
.link-teaser:hover,
.link-teaser:focus {
	background-color:#87a570;
}
.link-teaser:hover:after,
.link-teaser:focus:after {
	right:5px;
}
.allrum .link-teaser {
	border-left:3px solid #5c8ea1;
	background:#679eb3;
}
.allrum .link-teaser:hover,
.allrum .link-teaser:focus {
	background-color:#5c8ea1;
}


/* General teasers
 * Teasers that can have different types of content
 * [1] No margin-bottom when a teaser is in a row
 * [2] 6px instead of 10px to compensate for the heading's line-height
 * [3] FLoated when inside .article (mostly intended for share links)
 * [4] Not floated when inside .content-small (which is inside .article)
----------------------------------------------------------------------------- */
.m-teaser {
	padding:9px;
	border:1px solid #e4e3e2;
	border-bottom:3px solid #93b479;
	background:#fff;
}
.allrum .m-teaser {
	border-bottom-color:#679eb3;
}
.row .m-teaser {
	margin-bottom:0; /* [1] */
}
.m-i {
	margin-bottom:10px;
}
.m-i img {
	display:block;
	max-width:100%;
	height:auto;
}
.m-teaser .m-h {
	padding:6px 10px; /* [2] */
	font:bold 18px/26px "Open Sans", Arial, Helvetica, sans-serif;
}
.m-teaser .m-h h2 {
	margin-bottom:0;
	font:inherit;
}
.m-teaser .m-c h3 {
	margin-bottom:0;
	font-size:1em;
}
.m-h a {
	text-decoration:none;
}
.m-c {
	padding:0 10px 10px;
	word-wrap:break-word;
	-moz-hyphens:auto;
	-ms-hyphens:auto;
	-webkit-hyphens:auto;
	hyphens:auto;
}
.m-c > *:last-child {
	margin-bottom:0;
}
.m-f {
	padding:20px 10px 10px;
}
.m-c + .m-f {
	padding-top:0;
}
.teasers {
	margin-bottom:50px;
}
.article .m-teaser {
	float:right; /* [3] */
	margin-left:10px;
}
.content-small .m-teaser {
	float:none; /* [4] */
	margin-left:0;
}

/* max-width:780px
 * Change from 3 to 2 columns in .teasers module
 * [1] Contain floats
 * [2] Remove the clearing element from rows
 * [3] Clear every second teaser
----------------------------------------------------------------------------- */
@media only screen and (max-width:780px) {

	.teasers {
		overflow:hidden; /* [1] */
		margin-bottom:30px;
	}
	.teasers .row {
		margin-bottom:0;
	}
	.teasers .row:after {
		display:none; /* [2] */
	}
	.teasers .col {
		width:50%;
		margin-bottom:30px;
	}
	.teasers .row:nth-child(3n+1) .col:nth-child(3),
	.teasers .row:nth-child(3n+2) .col:nth-child(2),
	.teasers .row:nth-child(3n+3) .col:nth-child(1) { /* [3] */
		clear:left;
	}

} /* End media query */


/* max-width:760px
 * Put two teasers on each row when layout is linearised. [role="complementary"]
 * only affects teasers in the sidebar/right column.
----------------------------------------------------------------------------- */
@media only screen and (max-width:760px) {

	[role="complementary"] > .m-teaser {
		float:left;
		width:calc(50% - 15px);
	}
	[role="complementary"] > .m-teaser:nth-child(even) {
		float:right;
	}
	[role="complementary"] > .m-teaser:nth-child(odd) {
		clear:left;
	}

} /* End media query */


/* max-width:520px
 * One teaser on each row. Max-width to avoid images from stretching too much.
----------------------------------------------------------------------------- */
@media only screen and (max-width:520px) {

	[role="complementary"] > .m-teaser:nth-child(n) {
		float:none;
		max-width:370px;
		width:auto;
	}
	.teasers {
		margin-bottom:0;
	}
	.teasers .col {
		float:none;
		width:auto;
	}

} /* End media query */


/* Teaser colours
 * Only intended for teasers with a linked heading and text.
----------------------------------------------------------------------------- */

/*
 * Green
 */
.m-teaser.green {
	border-color:#93b479 #93b479 #7f9b6a;
	background:#93b479;
	color:#fff;
}

/*
 * Purple
 */
.m-teaser.purple {
	border-color:#ba8d9c #ba8d9c #a77f8c;
	background:#ba8d9c;
	color:#fff;
}

/*
 * Brown
 */
.m-teaser.brown {
	border-color:#a08571 #a08571 #907765;
	background:#a08571;
	color:#fff;
}

/*
 * Blue
 */
.m-teaser.blue {
	border-color:#679eb3 #679eb3 #5c8ea1;
	background:#679eb3;
	color:#fff;
}

/*
 * Gray
 */
.m-teaser.gray {
	border-color:#e3e2e1;
	background:#f5f4f3;
}

/*
 * Make links in coloured teasers white
 */
.m-teaser.green a,
.m-teaser.purple a,
.m-teaser.brown a,
.m-teaser.blue a {
	color:inherit;
}

/* Bordered teaser
 * Teaser header (.m-h) has bottom border
 * Teaser footer (.m-f) has top border
----------------------------------------------------------------------------- */
.m.bordered > .m-h {
	margin-bottom:20px;
	padding:0 20px 10px;
	border-bottom:3px solid #93b479;
}
.allrum .m.bordered > .m-h {
	border-bottom:3px solid #679eb3;
}
.m.bordered > .m-f {
	margin-top:20px;
	padding:20px;
	border-top:1px solid #ecebea;
}


/* max-width:960px
 * Reduce whitespace
----------------------------------------------------------------------------- */
@media only screen and (max-width:960px) {

	.m.bordered > .m-h {
		padding:0 10px;
	}
	.m.bordered > .m-f {
		padding:10px;
	}

} /* End media query */


/* Wide teaser
 * Spans entire container width.
 * Text content with background image, optional right-aligned separate image
 *
 * [1] Compensate for padding on the parent element
 * [2] Contain floats
 * [3] Prevent text in these elements from spilling out below the floated image
----------------------------------------------------------------------------- */
.m-teaser-wide {
	margin-bottom:50px;
	padding:20px 20px 40px 20px;
	background:#f5f5f5 url(/gui/i/bear-teaser-bg.png) no-repeat 0 100%;
}
.m-teaser-wide .m-i {
	float:right;
	width:570px;
	width:calc(50% - 15px);
	margin:-20px -20px -40px 20px; /* [1] */
}
.m-teaser-wide-image {
	overflow:hidden; /* [2] */
}
.m-teaser-wide-image .m-h,
.m-teaser-wide-image .m-c {
	overflow:hidden; /* [3] */
}
.m-teaser-wide .m-c {
	padding-right:0;
	padding-left:0;
}
.m-teaser-wide .m-f {
	padding:0;
}


/* max-width:640px
 * Place the image above the content
----------------------------------------------------------------------------- */
@media only screen and (max-width:640px) {

	.m-teaser-wide .m-i {
		float:none;
		width:auto;
		margin-bottom:20px;
		margin-left:-20px;
	}
	.m-teaser-wide .m-i img {
		width:100%;
	}

} /* End media query */


/* News teaser
 * Lists links to recent news articles
----------------------------------------------------------------------------- */
.m-news ul {
	margin:0 10px;
	list-style:none;
}
.m-news ul li + li {
	margin-top:10px;
	padding-top:10px;
	border-top:1px solid #ecebea;
}
.m-news time {
	display:block;
	font-weight:bold;
	font-size:14px;
}
.m-news ul a {
	color:#5e5a57;
	font-weight:normal;
	font-size:17px;
	text-decoration:none;
}
.m-news ul a:hover,
.m-news ul a:focus {
	text-decoration:underline;
}

/* News teaser
 * 2 Columns
----------------------------------------------------------------------------- */
.m-news .m-c.cols-2 {
	padding:0;
}
.m-news .cols-2 .col {
	margin-bottom:10px;
	padding:0 10px;
}

.m-news .cols-2 ul li {
	padding-top:0;
	padding-bottom:10px;
	border-top:0;
	border-bottom:1px solid #ecebea;
}

.m-news .cols-2 + .m-f {
	margin-top:0;
	border-top:none;
}


/* max-width:960px
 * Reduce whitespace
----------------------------------------------------------------------------- */
@media only screen and (max-width:960px) {

	.m-news ul {
		margin:0;
	}

} /* End media query */


/* Quote teaser
 * Contains a quote from someone and a link to further reading
 * [1] Contain floated image
 * [2] Encoded "”" character
----------------------------------------------------------------------------- */
.m-quote-teaser .m-c {
	overflow:hidden; /* [1] */
	padding:0 20px;
}
.m-quote-teaser img {
	margin-bottom:0;
}
.m-quote-teaser blockquote {
	margin:0;
	padding-right:0;
	padding-left:40px;
	text-align:left;
}
.m-quote-teaser blockquote:before {
	left:0;
}
.m-quote-teaser blockquote p:first-of-type:before,
.m-quote-teaser blockquote p:last-of-type:after {
	content:"\0201d"; /* [2] */
}
.m-quote-teaser blockquote p:first-of-type:before {
	display:inline-block;
	margin-left:-0.5ex;
}
.m-quote-teaser blockquote cite {
	color:#383634;
	font-size:14px;
}


/* max-width:960px
 * Reduce whitespace
----------------------------------------------------------------------------- */
@media only screen and (max-width:960px) {

	.m-quote-teaser .m-c {
		padding:0 10px;
	}
	.m-quote-teaser img {
		max-width:40%;
	}

} /* End media query */



/* =============================================================================
 * Contact cards
 * Contact details, marked up with microdata
============================================================================= */


/* Organisation-wide contact card
 * [1] Ensure that there is room for the logo in the footer.
----------------------------------------------------------------------------- */
.contact-card {
	margin-bottom:20px;
	padding:20px;
	background:#87a570;
	font-weight:bold;
	font-size:14px;
}
#footer .contact-card {
	margin-top:30px;
	margin-bottom:65px; /* [1] */
}
.contact-card h3 {
	margin-bottom:10px;
	font:normal 36px/42px "Yellowtail", cursive;
}
.contact-card .email {
	margin-top:10px;
}
.contact-card .phone:before,
.contact-card .email:before {
	display:inline-block;
	margin-right:10px;
	content:"";
	vertical-align:middle;
}
.contact-card .phone:before {
	width:11px;
	height:20px;
	margin-right:13px;
	margin-left:4px;
	background-image:url(../i/phone.svg?embed);
}
.contact-card .email:before {
	width:18px;
	height:19px;
	background-image:url(../i/email.svg?embed);
}
.allrum .contact-card {
	background-color:#5c8ea1;
}
.allrum .contact-card .phone:before {
	background-image:url(../i/phone-blue.svg?embed);
}
.allrum .contact-card .email:before {
	background-image:url(../i/email-blue.svg?embed);
}

/* max-width:540px
 * Reduce margin-bottom since the footer logo is smaller
----------------------------------------------------------------------------- */
@media only screen and (max-width:540px) {

	#footer .contact-card {
		margin-bottom:0;
	}

} /* End media query */


/* Contact card for a person
 * [1] 5px instead of 10px to compensate for line-height.
----------------------------------------------------------------------------- */
.contact-card.person {
	position:relative;
	padding:5px 10px 10px 60px; /* [1] */
	border:1px solid #e3e2e1;
	background:#f5f4f3;
}
.contact-card.person img {
	position:absolute;
	top:10px;
	left:10px;
}
.contact-card.person a {
	text-decoration:none;
}
.contact-card.person:not(.no-images) a {
	color:inherit;
}
.contact-card.person a:hover,
.contact-card.person a:focus {
	text-decoration:underline;
}
.contact-card [itemprop="jobTitle"] {
	font-weight:normal;
}
.contact-card.person .phone:before {
	margin-right:8px;
	background-position:-11px 0;
}
.contact-card.person .email:before {
	margin-right:5px;
	background-position:-18px 0;
}


/* Contact card without images
 * Person contact card but no photo and no icons
----------------------------------------------------------------------------- */
.contact-card.no-images {
	padding-left:10px;
}
.contact-card.no-images .structural {
	position:static;
}
.contact-card.no-images .phone:before,
.contact-card.no-images .email:before {
	display:none;
}


/* =============================================================================
 * Share
 *
 * Links to social networks
 * [1] Match height of icons
 * [2] Hack to pull the list one line upwards, countering the extra line
 *     created by [3]
 * [3] Insert an extra line to make sure text-align:justify works
 * [4] Pull list items back down to counter the negative margin-top set by [2]
============================================================================= */
.share {
	margin-left:0;
	list-style:none;
	line-height:30px; /* [1] */
	text-align:justify;
}
.share:before { /* [2] */
	display:block;
	width:100%;
	margin-bottom:-30px;
	content:"";
}
.share:after { /* [3] */
	display:inline-block;
	width:100%;
	content:"";
}
.share li { /* [4] */
	display:inline-block;
	position:relative;
	top:30px;
}


/* Share links
----------------------------------------------------------------------------- */
.share-link {
	display:block;
}
.share-link:before {
	display:block;
	width:30px;
	height:30px;
	background:url(../i/social-icons.svg?embed);
	content:"";
}
.allrum .share-link:before {
	background-image:url(../i/social-icons-blue.svg?embed);

	backround-repeat:no-repeat;
}
.lt-ie9 .share-link:before {
	background-image:url(../i/social-icons.png);
}
.share-link.facebook:before {
	background-position:0 0;
}
.share-link.facebook:hover:before,
.share-link.facebook:focus:before {
	background-position:-30px 0;
}
.share-link.twitter:before {
	background-position:-60px 0;
}
.share-link.twitter:hover:before,
.share-link.twitter:focus:before {
	background-position:-90px 0;
}
.share-link.googleplus:before {
	background-position:-120px 0;
}
.share-link.googleplus:hover:before,
.share-link.googleplus:focus:before {
	background-position:-150px 0;
}
.share-link.linkedin:before {
	background-position:-180px 0;
}
.share-link.linkedin:hover:before,
.share-link.linkedin:focus:before {
	background-position:-210px 0;
}
.share-link.email:before {
	background-position:-240px 0;
}
.share-link.email:hover:before,
.share-link.email:focus:before {
	background-position:-270px 0;
}



/* =============================================================================
 * Print button
 *
 * Inserted with JavaScript at the end of .article elements
============================================================================= */
button.print {
	margin-top:10px;
	font-weight:bold;
}
button.print:before {
	display:inline-block;
	width:16px;
	height:16px;
	margin-right:8px;
	background:url(../i/printer.png?embed);
	content:"";
	vertical-align:-2px;
}
.allrum button.print:before {
	background-image:url(../i/printer-blue.png?embed);
}
button.print:hover {
	text-decoration:underline;
}



/* =============================================================================
 * System messages
============================================================================= */
.system-message {
	margin:30px 0;
	padding:10px;
	border:3px solid #5c8ea1;
	background:#679eb3;
	color:#fff;
	font-weight:bold;
	font-size:16px;
}
.system-message h2 {
	color:#fff;
}
.system-message ul {
	list-style-image:url(../i/ul-bullet-white.svg?embed);
}
.system-message a,
.allrum .system-message a {
	color:inherit;
}
.error-message {
	border-color:#a77f8c;
	background:#ba8d9c;
}
.confirmation-message {
	border-color:#7f9b6a;
	background:#93b479;
}



/* =============================================================================
 * Paging
============================================================================= */
.paging {
	margin:0 0 30px;
	line-height:1;
	text-align:center;
}
.paging p {
	margin:0;
}
.paging a,
.paging .ellipsis,
.paging .sel {
	display:inline-block;
	min-width:2em;
	margin:0 2px;
	padding:8px;
	border-radius:2px;
	color:#5e5a57;
	font-weight:normal;
	vertical-align:middle;
	text-decoration:none;
}
.paging a:hover,
.paging a:focus,
.paging .sel {
	box-shadow:0 -3px #87a570 inset;
	background:#93b478;
	color:#fff;
	font-weight:bold;
}
.paging .comma {
	display:none; /* The commas are mainly there for non-CSS presentation */
}
.paging .prev-page,
.paging .next-page {
	padding-top:7px; /* Reduce padding by 1px since the image is taller than the text */
	line-height:0;
}
.paging .prev-page:before,
.paging .next-page:after {
	display:inline-block;
	width:9px;
	height:16px;
	background:url(../i/paging-arrows.png?embed) no-repeat;
	content:"";
}
.paging .prev-page:before {
	background-position:0 -40px;
}
.paging .prev-page:hover:before,
.paging .prev-page:focus:before {
	background-position:0 -60px;
}
.paging .next-page:hover:after,
.paging .next-page:focus:after {
	background-position:0 -20px;
}
.allrum .paging a:hover,
.allrum .paging a:focus,
.allrum .paging .sel {
	box-shadow:0 -3px #5c8ea1 inset;
	background:#679eb3;
	color:#fff;
	font-weight:bold;
}
.allrum .paging .prev-page:before,
.allrum .paging .next-page:after {
	background-image:url(../i/paging-arrows-blue.png?embed);
}



/* =============================================================================
 * Forms
============================================================================= */


/* General form layout
----------------------------------------------------------------------------- */
.form-general {
	margin:30px 0;
}
.form-general input,
.form-general select,
.form-general textarea {
	margin:0;
}
.form-general .alt {
	display:inline;
	margin:0 12px 0 0;
}
.checkbox,
.radio {
	white-space:nowrap;
}


/* Alternate style
 * Grey background, border
----------------------------------------------------------------------------- */
.form-general-gray {
	padding:20px;
	border:1px solid #e3e2e1;
	background:#f5f4f3;
}


/* max-width:520px
 * Reduce padding
----------------------------------------------------------------------------- */
@media only screen and (max-width:520px) {

	.form-general-gray {
		padding:10px;
	}

} /* End media query */


/* Labels
----------------------------------------------------------------------------- */
fieldset label {
	font-weight:normal;
}
.disabled label {
	color:#999;
}
.checkbox label,
.radio label {
	display:inline;
	margin-left:4px;
	vertical-align:middle;
	white-space:normal;
}
.alt label {
	display:inline;
}


/* Required indicator
 * Used in labels and legends
----------------------------------------------------------------------------- */
.required-indicator {
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(1px, 1px, 1px, 1px);
	padding:0;
	border:0;
}
.mandatory > fieldset > legend:after,
.mandatory > label:after {
	display:inline-block;
	width:8px;
	height:8px;
	background:url(../i/required.svg?embed);
	content:"";
	vertical-align:5px;
}


/* Form errors
----------------------------------------------------------------------------- */
.form-error,
.text.error label,
.error legend {
	color:#900;
}
.text.error input,
.text.error textarea {
	border-color:#900;
}


/* Form controls
----------------------------------------------------------------------------- */
.text textarea {
	height:120px;
}
.checkbox input,
.radio input {
	width:auto !important;
	vertical-align:middle;
}


/* Buttons
 * Button elements and buttony links.
----------------------------------------------------------------------------- */
input[type="button"],
input[type="submit"],
button,
a.button {
	width:auto;
	padding:0 25px;
	border-radius:2px;
	box-shadow:0 -3px #87a570 inset;
	background-color:#93b478;
	color:#fff;
	font-weight:bold;
	line-height:34px;
	cursor:pointer;
}
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
button:hover,
button:focus,
a.button:hover,
a.button:focus {
	box-shadow:none;
	background-color:#87a570;
}
input[type="button"]:active,
input[type="submit"]:active,
button:active,
a.button:active {
	box-shadow:none;
}
.link,
.allrum .link {
	margin:0;
	padding:0;
	border:none;
	border-radius:0;
	box-shadow:none;
	background:transparent;
	color:inherit;
	font:inherit;
	cursor:pointer;
}
.link:hover,
.link:focus,
.allrum .link:hover,
.allrum .link:focus {
	background-color:transparent;
}
.link span {
	text-decoration:underline;
}
.form-general fieldset.no-border {
	padding:0 9px;
	border:none;
}
.no-border legend {
	padding:0;
}
.allrum input[type="button"],
.allrum input[type="submit"],
.allrum button,
.allrum a.button {
	box-shadow:0 -3px #5c8ea1 inset;
	background-color:#679eb3;
	color:#fff;
}
.allrum input[type="button"]:hover,
.allrum input[type="button"]:focus,
.allrum input[type="submit"]:hover,
.allrum input[type="submit"]:focus,
.allrum button:hover,
.allrum button:focus,
.allrum a.button:hover,
.allrum a.button:focus {
	background-color:#5c8ea1;
}


/* Custom checkboxes and radio buttons
 * In effect only when images are determined to be available
 * Wrapped in a media query to hide from IE8- due to lack of support for :checked
----------------------------------------------------------------------------- */
@media only screen {
	.checkbox,
	.radio {
		position:relative;
	}
	.images-on fieldset .radio:last-child label,
	.images-on fieldset .checkbox:last-child label {
		margin-bottom:0;
	}
	.images-on .checkbox > input[type="checkbox"],
	.images-on .radio > input[type="radio"] {
		position:absolute;
		width:18px !important;
		height:18px;
		overflow:hidden;
		margin:0;
		padding:0;
		outline:0 !important;
		border:0;
		opacity:0;
	}
	.images-on input[type="checkbox"] + label,
	.images-on input[type="radio"] + label {
		display:inline-block;
		margin-bottom:0;
		margin-left:0;
		vertical-align:middle;
	}
	.images-on input[type="checkbox"] + label::before,
	.images-on input[type="radio"] + label::before {
		display:inline-block;
		width:25px;
		height:20px;
		background:url(../i/radio-checkbox.png?embed) no-repeat -5px -5px;
		content:"";
		vertical-align:middle;
	}
	.images-on input[type="checkbox"]:checked + label::before {
		background-position:-5px -61px;
	}
	.images-on input[type="checkbox"] + label:hover::before,
	.images-on input[type="checkbox"]:hover + label::before,
	.images-on input[type="checkbox"]:focus + label::before {
		background-position:-5px -33px;
	}
	.images-on input[type="checkbox"]:checked + label:hover::before,
	.images-on input[type="checkbox"]:checked:hover + label::before,
	.images-on input[type="checkbox"]:checked:focus + label::before {
		background-position:-5px -89px;
	}
	.images-on input[type="radio"] + label::before {
		background-position:-5px -117px;
	}
	.images-on input[type="radio"]:checked + label::before {
		background-position:-5px -173px;
	}
	.images-on input[type="radio"] + label:hover::before,
	.images-on input[type="radio"]:hover + label::before,
	.images-on input[type="radio"]:focus + label::before {
		background-position:-5px -145px;
	}
	.images-on input[type="radio"]:checked + label:hover::before,
	.images-on input[type="radio"]:checked:hover + label::before,
	.images-on input[type="radio"]:checked:focus + label::before {
		background-position:-5px -201px;
	}
}



/* =============================================================================
 * Apartment search form
 *
 * Special cases for column width and backgrounds.
============================================================================= */
.apartment-search {
	margin-top:0;
	margin-bottom:15px;
	border-bottom:1px solid #e3e2e1;
}
.search-options {
	margin-right:0;
	margin-left:0;
	padding:14px 7px;
	border:1px solid #e3e2e1;
	background:#f5f4f3;
}
.search-options .col {
	width:20%;
	padding-right:7px;
	padding-left:7px;
}


/* max-width:760px
 * Change column widths
----------------------------------------------------------------------------- */
@media only screen and (max-width:760px) {

	.search-options .col {
		width:33.33333%;
	}

} /* End media query */


/* max-width:520px
 * Restore bottom margin after general form linearisation
----------------------------------------------------------------------------- */
@media only screen and (max-width:520px) {

	.search-options.row {
		margin-bottom:15px;
	}

} /* End media query */



/* =============================================================================
 * Skip link
 *
 * Make the skip link visible when it receives focus.
 * [1] Remove default focus outline from the target element.
============================================================================= */
.skip {
	position:absolute;
	top:0;
	left:-9999px;
	z-index:100;
	width:100%;
	margin:0;
}
.skip a {
	display:block;
	position:absolute;
	top:-2em;
	left:0;
	width:100%;
	padding:10px;
	border:1px solid #e3e2e1;
	border-bottom:3px solid #87a570;
	background:#93b479;
	color:#fff;
	font-weight:900;
	font-size:18px;
	text-align:center;
	text-decoration:none;
	transition:top 0.3s, box-shadow 0.8s;
}
.skip a:focus {
	top:0;
	left:9999px;
	outline:none;
	box-shadow:0 10px 15px rgba(0,0,0,0.2);
}
#content-primary:focus {
	outline:none; /* [1] */
}



/* =============================================================================
 * Logo
 * [1] Makes sure the image is visible in IE8
============================================================================= */
.logo {
	float:left;
	margin:0;
}
.logo a,
.logo img {
	display:block;
}
.logo img {
	width:auto; /* [1] */
	font-size:2em;
}


/* max-width:1000px
 * [1] Add a right margin to keep nav-main away.
 * [2] Compensate for the lower image height.
----------------------------------------------------------------------------- */
@media only screen and (max-width:1000px) {

	.logo {
		margin-right:10px; /* [1] */
	}
	.logo img {
		width:120px;
		margin-top:26px; /* [2] */
	}

} /* End media query */


/* max-width:860px
 * Less space around the logo when nav-supp and nav-main are compacted
----------------------------------------------------------------------------- */
@media only screen and (max-width:860px) {

	.js .logo {
		margin:0;
	}
	.js .logo img {
		margin-top:0;
	}

} /* End media query */


/* Logo on login page
----------------------------------------------------------------------------- */
#logo {
	display:block;
	margin:0 auto;
}



/* =============================================================================
 * Main navigation
 *
 * [1] Align the bottom of text in nav-main with the bottom of the logo.
 * [2] Align the left (text) edge of the first item in nav-main with the grid at
 *     300px. The li has 23px padding-left which has been subtracted.
 * [3] Make the margin flexible in browsers that understand calc().
============================================================================= */
.nav-main {
	float:left;
	margin-top:22px; /* [1] */
	margin-left:94px; /* [2] */
	margin-left:calc(25.641025641026% - 204px); /* [3] */
	font-weight:bold;
	font-size:17px;
	line-height:1;
}
.nav-main ul {
	margin:0;
	list-style:none;
}
.nav-main li {
	float:left;
	padding:0 23px;
}
.nav-main a,
.allrum .nav-main a {
	display:block;
	color:#383634;
	text-decoration:none;
}
.nav-main a:hover,
.nav-main a:focus {
	color:#93b478;
	text-decoration:underline;
}
.nav-main li[data-selected] a {
	color:#93b478;
}
.nav-main strong {
	font-weight:900;
}
.allrum .nav-main a:hover,
.allrum .nav-main a:focus {
	color:#679eb3;
	text-decoration:underline;
}
.allrum .nav-main li[data-selected] a {
	color:#679eb3;
}

/* max-width:1200px
 * Less padding between menu items.
------------------------------------- */
@media only screen and (max-width:1200px) {

	.nav-main {
		margin-left:calc(25.641025641026% - 191px);
	}
	.nav-main li {
		padding:0 10px;
	}

} /* End media query */


/* max-width:1000px
 * Remove left margin.
------------------------------------- */
@media only screen and (max-width:1000px) {

	.nav-main {
		margin-left:0;
	}

} /* End media query */


/* max-width:860px
 * Main & sub navigation in narrow windows
------------------------------------- */
@media only screen and (max-width:860px) {

	/* General compact navigation with JavaScript
	------------------------------------------------------------------------- */
	.nav-menu-narrow > ul {
		margin:0;
		list-style:none;
	}
	.nav-menu-narrow > ul > li {
		display:none;
	}
	.expanded.nav-menu-narrow > ul > li {
		display:block;
	}
	.nav-menu-narrow button {
		position:absolute;
		top:2px;
		right:10px;
		z-index:1;
		min-width:0;
		margin:0;
		padding:0 10px;
	}
	.nav-menu-narrow button:after {
		display:inline-block;
		width:16px;
		height:14px;
		background:url(../i/hamburger.svg?embed) no-repeat;
		content:"";
		vertical-align:middle;
	}


	/* Nav-main
	 * [1] Middle-align vertically with the logo
	 * [2] Position below the bottom border of the header: logo
	 *     height + header vertical padding + bottom border
	 * [3] Make the menu appear on top of any slideshow components
	-------------------------------------------------------------- */
	.nav-main-narrow {
		display:inline-block;
		vertical-align:middle;
	}
	.nav-main-narrow a {
		display:block;
		padding:8px 23px 8px 15px;
		border-top:1px solid #e3e2e1;
		color:#4b4846;
		font-weight:normal;
		text-decoration:none;
	}
	.nav-main-narrow > ul > li:last-child > a {
		border-bottom:1px solid #e3e2e1;
	}
	.nav-main-narrow a:hover,
	.nav-main-narrow a:focus {
		text-decoration:underline;
	}
	.nav-main-narrow.expanded > ul > [data-selected] > a {
		background:#93b479;
		color:#fff;
	}
	.nav-main-narrow button {
		display:block;
		position:static;
		margin-top:8px; /* [1] */
		margin-right:10px;
		vertical-align:middle;
	}
	.nav-main-narrow > ul {
		position:absolute;
		top:73px; /* [2] */
		left:0;
		z-index:20; /* [3] */
		width:100%;
		background:#fff;
		text-align:left;
	}

	/* Nav-sub
	 * [1] less vertical padding than links in the menu because of
	 *     different line heights
	-------------------------------------------------------------- */
	.has-nav-sub .page-meta:first-child + .content-1 + .content-2 {
		padding-top:2.5em; /* Temporarily make room for the moved nav-sub */
	}
	.js .content-1 .nav-sub {
		display:none; /* Hide nav-sub until it has been moved */
	}
	.nav-sub.nav-menu-narrow button {
		position:relative;
		top:auto;
		right:auto;
		width:100%;
		padding:4px 15px 3px; /* [1] */
		text-align:left;
	}
	.nav-sub.nav-menu-narrow button:after {
		position:absolute;
		top:50%;
		right:11px;
		margin-top:-7px;
	}
	.nav-sub.nav-menu-narrow:not(.expanded) > ul > .sel > a {
		padding-right:58px;
	}
	.nav-sub.nav-menu-narrow {
		margin-bottom:20px;
		background:none;
	}
	.nav-sub.nav-menu-narrow > ul {
		display:none;
	}
	.nav-sub.nav-menu-narrow.expanded > ul {
		display:block;
	}

	/* Hide the left column if it contained a .nav-sub */
	.content-1.has-nav-sub {
		display:none;
	}

	/* Let the content area expand */
	.content-1.has-nav-sub + .content-2 {
		float:none;
		width:auto;
	}

	/* Compact nav-main without JS
	-------------------------------------------------------------- */
	.no-js .nav-main li {
		padding:4px 10px;
	}

} /* End media query */



/* =============================================================================
 * Supplemental navigation
 *
 * Additional links in header and footer.
============================================================================= */
.nav-supp {
	font-weight:bold;
	font-size:14px;
}
.nav-supp ul {
	margin:0;
	list-style:none;
	text-align:right;
}
.nav-supp li {
	display:inline-block;
	vertical-align:middle;
}
.nav-supp li + li {
	position:relative;
	margin-left:5px;
}
.nav-supp li + li:before {
	display:inline-block;
	width:1px;
	height:18px;
	margin-right:10px;
	background:#ecebea;
	content:"";
	vertical-align:middle;
}
.nav-supp .contact-us {
	margin-left:15px;
}
.nav-supp .contact-us:before {
	display:none;
}
.nav-supp a {
	display:inline-block;
	vertical-align:middle;
	text-decoration:none;
}
.nav-supp a:not(.button) {
	color:#7d7773;
}
.nav-supp a:hover,
.nav-supp a:focus {
	text-decoration:underline;
}



/* =============================================================================
 * Sub navigation
============================================================================= */
.nav-sub {
	margin-bottom:30px;
}
.nav-sub h2 {
	margin:0;
	padding:10px 15px;
	border-bottom:3px solid #716c68;
	background:#7d7773;
	color:#fff;
	font-size:24px;
	line-height:1;
}
.nav-sub h2 a,
.allrum .nav-sub h2 a {
	color:inherit;
	font:inherit;
	text-decoration:none;
}
.nav-sub ul {
	margin:0;
	list-style:none;
}


/* Level one / all nav-sub links
 * [1] 8px vertical padding + 24px line-height = 40px total height
 *     23px padding-right to make room for arrows
----------------------------------------------------------------------------- */
.nav-sub ul a {
	display:block;
	padding:8px 23px 8px 15px; /* [1] */
	border:1px solid #e3e2e1;
	border-bottom-width:0;
	color:#4b4846;
	font-weight:normal;
	text-decoration:none;
}
.nav-sub > ul > li:last-child > a {
	border-bottom-width:1px;
}
.nav-sub a:hover,
.nav-sub a:focus {
	text-decoration:underline;
}


/* Level two
----------------------------------------------------------------------------- */
.nav-sub li li a {
	padding-left:27px;
	border-left-width:4px;
	background:#f5f4f3;
}


/* Level three
----------------------------------------------------------------------------- */
.nav-sub li li li a {
	padding-left:42px;
}


/* Level four
----------------------------------------------------------------------------- */
.nav-sub li li li li a {
	padding-left:57px;
}


/* Page with subpages
----------------------------------------------------------------------------- */
.nav-sub li[data-has-children] > a {
	position:relative;
}
.nav-sub li[data-has-children] > a:after {
	position:absolute;
	top:50%;
	right:13px;
	width:10px;
	height:10px;
	margin-top:-5px;
	background:url(../i/arrows-small.svg?embed);
	background-size:100% auto;
	content:"";
}


/* Page with expanded subpages
----------------------------------------------------------------------------- */
.nav-sub li[data-expanded] > a:after {
	background-position:0 -30px;
}


/* Selected page link
----------------------------------------------------------------------------- */
.nav-sub li[data-selected] > a {
	padding-top:9px;
	border-top:none;
	border-right-color:#87a570;
	border-bottom:none;
	border-left-width:4px;
	border-left-color:#87a570;
	background:#93b479;
	color:#fff;
	font-weight:900;
}
.nav-sub li[data-selected] > a:after {
	background-position:0 -10px;
}
.nav-sub li[data-selected]:not([data-expanded]) + li > a,
.nav-sub li[data-selected] > a + ul > li:first-child > a {
	padding-top:9px;
	border-top:none;
}
.allrum .nav-sub li[data-selected] > a {
	border-right-color:#5c8ea1;
	border-left-color:#5c8ea1;
	background:#679eb3;
}

/* Selected page link with subpages
----------------------------------------------------------------------------- */
.nav-sub li[data-selected][data-has-children] > a:after {
	background-position:0 -40px;
}



/* =============================================================================
 * Breadcrumbs
============================================================================= */
.breadcrumbs {
	margin:10px 0;
	font-weight:bold;
	font-size:14px;
}
.breadcrumbs a {
	text-decoration:none;
}
.breadcrumbs a:hover,
.breadcrumbs a:focus {
	text-decoration:underline;
}


/* max-width:760px
 * Hide breadcrumbs in narrow windows
 * Restore margin-top on #content
----------------------------------------------------------------------------- */
@media only screen and (max-width:760px) {

	.breadcrumbs {
		display:none;
	}
	.breadcrumbs + #content {
		margin-top:20px;
	}

} /* End media query */



/* =============================================================================
 * Tab navigation
 * [1] Pull the selected tab down 1px to cover the ul's bottom border.
 * [2] Box-shadow instead of border to get 90 degree corners.
============================================================================= */
.tabs {
	margin:30px 0;
	border-bottom:1px solid #e7e6e5;
	list-style:none;
}
.tabs li {
	float:left;
}
.tabs a {
	display:block;
	padding:10px 25px;
	text-decoration:none;
}
.tabs a:hover,
.tabs a:focus {
	outline:none;
	text-decoration:underline;
}
.tabs [data-selected] a {
	margin-bottom:-1px; /* [1] */
	padding-bottom:11px; /* [1] */
	border-right:1px solid #e7e6e5;
	border-left:1px solid #e7e6e5;
	box-shadow:0 -3px #93b479; /* [2] */
	background:#fff;
	color:#383634;
}
.allrum .tabs [data-selected] a {
	box-shadow:0 -3px #679eb3;
}

/* Rules used for testing the width of the tabs so we can apply different
 * styling if the tabs do not fit on a row.
----------------------------------------------------------------------------- */
.tabs.widthtest {
	float:left;
	white-space:nowrap;
}
.tabs.widthtest li {
	display:inline-block;
	float:none;
	margin:0;
}


/* Wrapped tabs
 * Styling when tabs do not fit on one row.
----------------------------------------------------------------------------- */
.tabs.wrapped li {
	margin-right:10px;
	margin-bottom:10px;
}
.tabs.wrapped [data-selected] a {
	margin-bottom:0;
	padding-bottom:10px;
}
.tabs.wrapped > li > a {
	border:1px solid #e7e6e5;
}


/* Tabs inside tabbed modules
 * Active tabs are switched via JavaScript
----------------------------------------------------------------------------- */
.tabbed-module.active {
	margin-bottom:20px;
}
.tabbed-module .tabs {
	margin-bottom:0;
}
.tabbed-module.active .tab-panel {
	padding-top:9px;
}
.tabbed-module.active .tab-panel:not(.no-border) {
	padding:9px;
	border:1px solid #e7e6e5;
	border-top:none;
}
.hidden-tab {
	display:none;
}


/* Tabs with icons
----------------------------------------------------------------------------- */
.tab-icons .tabs a {
	padding-left:14px;
}
.tab-icons .tabs a:before {
	display:inline-block;
	width:17px;
	height:17px;
	margin-right:5px;
	background:url(../i/tab-icons.svg?embed);
	content:"";
	vertical-align:-3px;
}
.tab-icons .tabs #project-map:before {
	background-position:0 -17px;
}
.allrum .tab-icons .tabs a:before {
	background-image:url(../i/tab-icons-blue.svg?embed);
}



/* =============================================================================
 * Search
 *
 * Search forms and search results.
============================================================================= */


/* Search form
 * In the site header.
----------------------------------------------------------------------------- */
.search {
	clear:both;
	padding:20px 0;
	background:#93b479;
}
.search input {
	float:left;
	padding:15px;
	font-size:18px;
	line-height:normal;
}
.search input[type="search"] {
	width:90%;
	padding-left:50px;
	background-image:url(../i/search-gray.svg);
	background-position:20px 50%;
	background-repeat:no-repeat;
}
.allrum .search {
	background:#679eb3;
}
.lt-ie9 .search input[type="search"] {
	background-image:url(../i/search-gray.png);
}


/* Search form without JavaScript
 * The form is always visible.
 * [1] Remove border radius on adjacent corners
 * [2] Compensate for the lack of borders on the submit button
----------------------------------------------------------------------------- */
.no-js .search {
	margin-top:10px;
	padding:3px;
}
.no-js .search > div {
	overflow:hidden;
	padding:5px;
	background:#fff;
}
.no-js .search input[type="search"] {
	border-right:none;
	border-top-right-radius:0; /* [1] */
	border-bottom-right-radius:0; /* [1] */
}
.no-js .search .submit {
	width:10%;
	padding-top:16px; /* [2] */
	padding-bottom:16px; /* [2] */
	border-top-left-radius:0; /* [1] */
	border-bottom-left-radius:0; /* [1] */
}


/* max-width:640px
 * Change the widths of the search field and submit button
----------------------------------------------------------------------------- */
@media only screen and (max-width:640px) {

	.no-js .search input[type="search"] {
		width:76%;
	}
	.no-js .search .submit {
		width:24%;
	}

} /* End media query */


/* Search form when JavaScript is available
 * The form is hidden and toggled with a button that is inserted via JS.
 * [1] Make the form appear on top of the slideshow that may be present and the
 *     togglable sub navigation used in narrow viewports.
 * [2] Position the search form below the bottom border of the header.
 * [3] The submit button is hidden when JS is available, let the search field
 *     fill the entire width.
----------------------------------------------------------------------------- */
.js .search {
	position:absolute;
	right:0;
	left:0;
	z-index:10; /* [1] */
	margin-top:23px; /* [2] */
}
.js .search > div {
	max-width:1210px;
	margin:0 auto;
	padding:0 20px;
}
.js .search input[type="search"] {
	width:100%; /* [3] */
}
.toggle-search.link {
	float:right;
	margin-top:18px;
	box-shadow:none;
	color:#93b478;
	font-weight:900;
	font-size:18px;
}
.toggle-search.link span {
	text-decoration:none;
}
.toggle-search:after {
	display:inline-block;
	width:18px;
	height:19px;
	margin-right:2px;
	margin-left:10px;
	background:url(../i/search-toggle.svg?embed);
	content:"";
	vertical-align:-3px;
}
.allrum .toggle-search.link {
	color:#679eb3;
}
.allrum .toggle-search:after {
	background-image:url(../i/search-toggle-blue.svg?embed);
}
.lt-ie9 .toggle-search:after {
	background-image:url(../i/search-toggle.png);
}
.toggle-search[aria-expanded="true"]:after {
	background-position:-36px 0;
}
.toggle-search.link:hover,
.toggle-search.link:focus {
	background-color:transparent;
}


/* max-width:860px
 * Put the button next to the button that toggles the menu for narrow
 * viewports.
 * Change the look of the button (standard button with icon)
 * [1] Display the search form below the bottom border of the header.
 * [2] Middle-align the button vertically with the logo.
 * [3] The "search" text is hidden so remove the left margin of the icon
----------------------------------------------------------------------------- */
@media only screen and (max-width:860px) {

	.js .search {
		top:73px; /* [1] */
		margin-top:0;
	}
	.toggle-search {
		display:inline-block;
		float:none;
		margin-top:8px; /* [2] */
		padding:0 10px;
		vertical-align:middle;
	}
	.toggle-search:after {
		margin-left:0; /* [3] */
		background-position:-18px 0;
	}
	.toggle-search[aria-expanded="true"]:after {
		background-position:-54px 0;
	}

} /* End media query */



/* Search form on the search results page
----------------------------------------------------------------------------- */
.main-search .mandatory > label:after {
	display:none;
}
.main-search input[type="submit"] {
	width:100%;
	padding-right:10px;
	padding-left:10px;
}
.main-search .large {
	width:85%;
}
.main-search .small {
	width:15%;
}


/* max-width:800px
 * Make the submit button wider
----------------------------------------------------------------------------- */
@media only screen and (max-width:800px) {

	.main-search .large {
		width:80%;
	}
	.main-search .small {
		width:20%;
	}

} /* End media query */


/* max-width:520px
 * Prevent the columns in the main search form from nbeing linearised
----------------------------------------------------------------------------- */
@media only screen and (max-width:520px) {

	.main-search .row {
		margin-right:-5px;
		margin-left:-5px;
	}
	.main-search .row .col {
		float:left;
		padding:0 5px;
	}
	.main-search .row .large {
		width:75%;
	}
	.main-search .row .small {
		width:25%;
		margin-top:1.6em;
	}

} /* End media query */


/* Search results
----------------------------------------------------------------------------- */
.search-results {
	margin-bottom:30px;
	margin-left:0;
	border-top:1px solid #e7e6e5;
	list-style:none;
}
.search-results li {
	padding:15px 0;
	border-bottom:1px solid #e7e6e5;
}
.search-results h2 {
	margin:0;
	font-weight:bold;
	font-size:18px;
	font-family:inherit;
	line-height:26px;
}
.search-results h2 a {
	text-decoration:none;
}
.search-results h2 a:hover,
.search-results h2 a:focus {
	text-decoration:underline;
}
.search-results p {
	margin:0;
}
.search-results .meta {
	margin-top:10px;
	font-weight:normal;
}
.updated:before {
	display:inline-block;
	width:4px;
	height:4px;
	margin-right:4px;
	border-radius:50%;
	background:#383634;
	content:"";
	vertical-align:middle;
}
.search-results strong {
	background:#ffc;
	color:#000;
}



/* =============================================================================
 * Footer
============================================================================= */
#footer {
	position:relative;
}
#footer:after {
	position:absolute;
	right:0;
	bottom:0;
	width:215px;
	height:135px;
	background:url(/gui/i/footer-logo.png);
	content:"";
}
#footer h3,
#footer a {
	color:#fff;
}


/* max-width:900px
 * Change from 4 columns to 2 in the footer
----------------------------------------------------------------------------- */
@media only screen and (max-width:900px) {

	#footer .row > .col {
		width:50%;
	}
	#footer .row > .col:nth-child(2n + 3) {
		clear:left;
	}

} /* End media query */


/* max-width:540px
 * Shrink the footer logo
 * Change from 2 columns to 1 in the footer
----------------------------------------------------------------------------- */
@media only screen and (max-width:540px) {

	#footer:after {
		width:155px;
		height:97px;
		background-size:100% auto;
	}
	#footer .row > .col {
		float:none;
		width:100%;
	}

} /* End media query */


/* Link block
 * Header + list of links
----------------------------------------------------------------------------- */
.link-block {
	padding:60px 20px 30px;
}
.link-block h3 {
	margin-bottom:20px;
	font:bold 18px/20px "Open Sans", Arial, Helvetica, sans-serif;
}
.link-block ul {
	margin:0;
	list-style:none;
}
.link-block a {
	font-size:14px;
	text-decoration:none;
}
.link-block a:hover,
.link-block a:focus {
	text-decoration:underline;
}


/* max-width:900px
 * Less padding when displayed in 2-column rows
----------------------------------------------------------------------------- */
@media only screen and (max-width:900px) {

	.link-block {
		padding:30px 20px 20px;
	}

} /* End media query */


/* max-width:540px
 * Less padding when linearised
----------------------------------------------------------------------------- */
@media only screen and (max-width:540px) {

	.link-block {
		padding-bottom:0;
	}
	.link-block h3 {
		margin-bottom:10px;
	}

} /* End media query */


/* Footer footer
 * [1] This should be 20px to align .copyright with the fourth column in the
 *     footer, but because inline-block is used we need to compensate for
 *     whitespace.
----------------------------------------------------------------------------- */
.footer-footer {
	padding:20px 0;
}
.footer-footer .block-inner > * {
	display:inline-block;
	vertical-align:middle;
}
.footer-footer .nav-supp {
	width:75%;
	margin-right:16px; /* [1] */
	padding-left:20px;
}
.footer-footer .nav-supp ul {
	text-align:left;
}
.copyright {
	margin-bottom:0;
	font-size:14px;
}


/* max-width:1280px
 * Reduce width of footer nav-supp to move copyright info to prevent it from
 * being obscured by the footer logo.
----------------------------------------------------------------------------- */
@media only screen and (max-width:1280px) {

	.footer-footer .nav-supp {
		width:auto;
	}

} /* End media query */


/* max-width:800px
 * Wrap footer nav-supp and copyright info
----------------------------------------------------------------------------- */
@media only screen and (max-width:800px) {

	.footer-footer .block-inner > * {
		display:block;
	}
	.footer-footer .nav-supp {
		margin-right:0;
		padding-left:0;
	}

} /* End media query */


/* max-width:540px
 * Put nav-supp links on separate rows
----------------------------------------------------------------------------- */
@media only screen and (max-width:540px) {

	.footer-footer {
		padding:10px 0;
		line-height:22px;
	}
	.footer-footer .nav-supp li {
		display:block;
	}
	.footer-footer .nav-supp li + li {
		margin-left:0;
	}
	.footer-footer .nav-supp li + li:before {
		display:none;
	}

} /* End media query */



/* =============================================================================
 * Intro
============================================================================= */
.intro {
	font-weight:bold;
	font-size:17px;
	line-height:26px;
}



/* =============================================================================
 * Lists
============================================================================= */


/* Article list
 * Used for news archive, contact us, blog
----------------------------------------------------------------------------- */
.bordered-list {
	margin-bottom:30px;
	margin-left:0;
	list-style:none;
}
.bordered-list > li {
	padding:15px 0;
	border-bottom:1px solid #e7e6e5;
}
.bordered-list > li:first-child {
	border-top:1px solid #e7e6e5;
}
.bordered-list h2 {
	margin-bottom:0;
	font:bold 18px/26px "Open Sans", Arial, Helvetica, sans-serif;
}
.bordered-list h2 a {
	text-decoration:none;
}
.bordered-list h2 a:hover,
.bordered-list h2 a:focus {
	text-decoration:underline;
}
.bordered-list p {
	margin:0;
}
.meta {
	color:#383634;
	font-weight:bold;
}

/*
 * No top border on the first item when preceded by tabs
 */
.tabs + .bordered-list > li:first-child,
.tabbed-module.active .tab-panel > .bordered-list > li:first-child {
	padding-top:0;
	border-top:none;
}


/* File list
----------------------------------------------------------------------------- */
.file-list {
	margin:0 0 1em;
	list-style:none;
}
.file-list li {
	margin-bottom:6px;
}

/*
 * Generic files
 */
a.file {
	padding:5px 0 5px 20px;
	background-image:url(../i/file-types/generic.png?embed);
	background-position:0 50%;
	background-repeat:no-repeat;
}

/*
 * Folders
 */
a.folder {
	background-image:url(../i/file-types/folder.png?embed);
}

/*
 * Images
 */
a.bmp,
a.gif,
a.jpg,
a.jpeg,
a.png,
a.psd {
	background-image:url(../i/file-types/image.png?embed);
}

/*
 * Vector graphics
 */
a.ai,
a.eps {
	background-image:url(../i/file-types/vector.png?embed);
}

/*
 * Text
 */
a.asp,
a.chm,
a.config,
a.css,
a.db,
a.htm,
a.html,
a.js,
a.txt,
a.xml {
	background-image:url(../i/file-types/text.png?embed);
}

/*
 * Word
 */
a.doc,
a.docx {
	background-image:url(../i/file-types/word.png?embed);
}

/*
 * Rich text
 */
a.rtf {
	background-image:url(../i/file-types/rich-text.png?embed);
}

/*
 * Powerpoint
 */
a.ppt,
a.pptx {
	background-image:url(../i/file-types/ppt.png?embed);
}

/*
 * Flash
 */
a.fla,
a.swf {
	background-image:url(../i/file-types/flash.png?embed);
}

/*
 * Video
 */
a.mov,
a.wmv {
	background-image:url(../i/file-types/video.png?embed);
}

/*
 * PDF
 */
a.pdf {
	background-image:url(../i/file-types/pdf.png?embed);
}

/*
 * Spreadsheet
 */
a.xls,
a.xlsx {
	background-image:url(../i/file-types/excel.png?embed);
}

/*
 * Compressed
 */
a.zip {
	background-image:url(../i/file-types/zip.png?embed);
}

/*
 * File meta
 */
a.file span {
	display:inline-block;
	margin-left:4px;
	color:#5e5a57;
	font-weight:normal;
	font-size:14px;
}


/* Calendar list
 * Used in teasers.
----------------------------------------------------------------------------- */
.calendar-list {
	margin-left:0;
	list-style:none;
}
.calendar-list > li {
	word-wrap:break-word;
	-moz-hyphens:auto;
	-ms-hyphens:auto;
	-webkit-hyphens:auto;
	hyphens:auto;
}
.calendar-list > li + li {
	margin-top:20px;
}
.calendar-list a {
	text-decoration:none;
	word-wrap:break-word;
}
.calendar-list a:hover,
.calendar-list a:focus {
	text-decoration:underline;
}


/* =============================================================================
 * Calendar sheet
 *
 * Time element styled like a calendar sheet with a single day.
 * [1] Move the text to the left to counter the font's slanting to the right.
============================================================================= */
.calendar-day {
	float:left;
	margin:5px 10px 5px 0;
	padding:5px 10px;
	border-bottom:3px solid #7f9b6a;
	background:#93b479;
	color:#fff;
	font-weight:normal;
	line-height:1;
	text-align:center;
}
.calendar-day .day {
	display:block;
	font:normal 30px/24px "Yellowtail", cursive;
	text-indent:-3px; /* [1] */
}
.allrum .calendar-day {
	border-bottom:3px solid #5c8ea1;
	background:#679eb3;
}


/* =============================================================================
 * Sitemap
============================================================================= */
.sitemap {
	margin-left:0;
	list-style:none;
}
.sitemap > li {
	margin:0 0 30px;
}
.sitemap > li > a {
	font-size:17px;
	text-decoration:none;
}



/* =============================================================================
 * Apartments table
============================================================================= */
.apartments {
	white-space:nowrap;
}
.apartments th {
	border-color:#87a570;
	background:#93b478;
	color:#fff;
}
.apartments tbody {
	font-size:14px;
}
.status {
	font-style:italic;
}
.status:before {
	display:inline-block;
	width:16px;
	height:16px;
	margin-right:8px;
	border-radius:50%;
	content:"";
	vertical-align:-3px;
}
.status.available:before {
	background:#93b478;
}
.status.reserved:before {
	background:#eea52c;
}
.status.rented:before {
	background:#e42a2c;
}



/* =============================================================================
 * Sortable tables
============================================================================= */
.tablesorter-header {
	cursor:pointer;
}
.tablesorter-header:hover,
.tablesorter-header:focus {
	text-decoration:underline;
}
thead tr:first-child th[aria-sort] {
	padding-right:12px;
	border-color:#7d7773;
	background:#7d7773;
	background:linear-gradient(to top, #716c68,#716c68 2px,#7d7773 3px);
}
th[aria-sort] .tablesorter-header-inner {
	position:relative;
	padding-right:20px;
}
th[aria-sort] .tablesorter-header-inner:after {
	position:absolute;
	top:50%;
	right:0;
	width:16px;
	height:16px;
	margin-top:-8px;
	background:url(/gui/i/circle-arrows.svg) -32px 0;
	content:"";
}
th[aria-sort].tablesorter-headerDesc .tablesorter-header-inner:after {
	background-position:-48px 0;
}



/* =============================================================================
 * Tables with clickable rows
 *
 * Entire rows made clickable with JS. Changes location.href to the href of the
 * first link found in the row.
============================================================================= */
.clickable-rows tbody > tr:hover {
	cursor:pointer;
}