/**
 * File: basic.css
 *
 * Resets, basic typography, global utility classes
 */



/* =============================================================================
 * Web fonts
 * Formats included are EOT for older IE and WOFF for everything else
 * Open Sans (http://www.fontsquirrel.com/fonts/open-sans)
 * Yellowtail (http://www.fontsquirrel.com/fonts/yellowtail)
============================================================================= */

/*
 * Open Sans regular
 */
@font-face {
	font-weight:normal;
	font-style:normal;
	font-family:"Open Sans";
	src:url(/gui/fonts/OpenSans-Regular-webfont.eot?iefix) format("eot"), url(/gui/fonts/OpenSans-Regular-webfont.woff) format("woff");
}

/*
 * Open Sans italic
 */
@font-face {
	font-weight:normal;
	font-style:italic;
	font-family:"Open Sans";
	src:url(/gui/fonts/OpenSans-Italic-webfont.eot?iefix) format("eot"), url(/gui/fonts/OpenSans-Italic-webfont.woff) format("woff");
}

/*
 * Open Sans semibold
 */
@font-face {
	font-weight:bold;
	font-style:normal;
	font-family:"Open Sans";
	src:url(/gui/fonts/OpenSans-Semibold-webfont.eot?iefix) format("eot"), url(/gui/fonts/OpenSans-Semibold-webfont.woff) format("woff");
}

/*
 * Open Sans semibold italic
 */
@font-face {
	font-weight:bold;
	font-style:italic;
	font-family:"Open Sans";
	src:url(/gui/fonts/OpenSans-SemiboldItalic-webfont.eot?iefix) format("eot"), url(/gui/fonts/OpenSans-SemiboldItalic-webfont.woff) format("woff");
}

/*
 * Open Sans bold
 */
@font-face {
	font-weight:900;
	font-style:normal;
	font-family:"Open Sans";
	src:url(/gui/fonts/OpenSans-Bold-webfont.eot?iefix) format("eot"), url(/gui/fonts/OpenSans-Bold-webfont.woff) format("woff");
}

/*
 * Yellowtail regular
 */
@font-face {
	font-weight:normal;
	font-style:normal;
	font-family:"Yellowtail";
	src:url(/gui/fonts/Yellowtail-Regular-webfont.eot?iefix) format("eot"), url(/gui/fonts/Yellowtail-Regular-webfont.woff) format("woff");
}



/* =============================================================================
 * Resets and basic typography/colors
============================================================================= */
* {
	box-sizing:border-box;
	margin:0;
	padding:0;
	border:none;
}
body,
html {
	background:#fff;
	color:#5e5a57;
}
html {
	font:15px/24px "Open Sans", Arial, Helvetica, sans-serif;
	-webkit-font-smoothing:antialiased;
}
address,
dl,
ol,
p,
pre,
table,
ul {
	margin:0 0 12px;
}
img {
	max-width:100%;
	height:auto;
	border:none;
}


/* Lists
----------------------------------------------------------------------------- */
dd,
ol,
ul {
	margin-left:20px;
}
ol ol,
ol ul,
ul ol,
ul ul {
	margin-bottom:0;
}
ul {
	list-style-image:url(../i/ul-bullet-green.svg?embed);
}
dt {
	font-weight:bold;
}


/* Blockquotes
----------------------------------------------------------------------------- */
blockquote {
	position:relative;
	margin:12px 0;
	padding:0 70px;
	font-style:italic;
	font-size:17px;
	line-height:26px;
	text-align:center;
}
blockquote:before {
	position:absolute;
	top:5px;
	left:35px;
	width:27px;
	height:20px;
	background:url(../i/quotation-mark.svg?embed);
	content:"";
}
blockquote cite {
	color:#4c4947;
	font-weight:bold;
	font-style:normal;
	font-size:15px;
}
blockquote cite:before {
	content:"– ";
}


/* max-width:520px
 * Less horizontal padding in narrow viewports
----------------------------------------------------------------------------- */
@media only screen and (max-width:520px) {

	blockquote {
		padding:0 40px;
	}
	blockquote:before {
		left:5px;
	}

} /* End media query */


/* Tables
----------------------------------------------------------------------------- */
table {
	width:100%;
	margin-bottom:24px;
	border-spacing:0;
	border-collapse:collapse;
}
table,
td,
th {
	border:1px solid #e3e2e1;
}
td,
th {
	padding:10px;
	vertical-align:top;
}
td {
	padding-top:7px;
	padding-bottom:7px;
}
caption,
th {
	color:#4c4947;
	font-weight:bold;
	text-align:left;
}
caption {
	margin-bottom:15px;
}
thead th {
	border-color:#87a570;
	background:#93b478;
	color:#fff;
}

/*
 * Less margin-bottom inside teasers
 */
.m-teaser table {
	margin-bottom:12px;
}

/*
 * No border
 */
table.no-border,
table.no-border th,
table.no-border td {
	border:none;
}
table.no-border th,
table.no-border td {
	padding:0;
}
table.no-border caption {
	margin-bottom:0;
}


/* Avoid line-height issues caused by default rendering of sub and sup elements
----------------------------------------------------------------------------- */
sub,
sup {
	position:relative;
	height:0;
	line-height:1;
	vertical-align:baseline;
}
sup {
	bottom:1ex;
}
sub {
	top:0.5ex;
}


/* Code
----------------------------------------------------------------------------- */
code,
kbd,
pre {
	font-family:Monaco, Courier, "Courier New", Tahoma;
}


/* Headings
----------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-bottom:12px;
	color:#4c4947;
	font-weight:bold;
}
h1 {
	margin-bottom:24px;
	font:normal 42px/46px "Yellowtail", cursive;
}
h2 {
	font-size:20px;
	line-height:30px;
}
h3 {
	font-size:18px;
	line-height:26px;
}
h4 {
	font-size:17px;
	line-height:25px;
}
h5 {
	font-size:16px;
	line-height:28px;
}
h6 {
	font-weight:900;
	font-size:15px;
	line-height:28px;
}
h1 b,
h2 b {
	color:#93b478;
	font-weight:inherit;
}
.allrum h1 b,
.allrum h2 b {
	color:#679eb3;
}
.cursive {
	font:normal 36px/42px "Yellowtail", cursive;
}


/* Links
----------------------------------------------------------------------------- */
a:link {
	color:#7b9665;
	font-weight:bold;
}
.allrum a:link {
	color:#4f7d8c;
}
.allrum a:visited {
	color:#3f666e;
}
a:visited {
	color:#5f6957;
}
a:hover,
a:focus,
a:active {
	color:#5d724d;
}

/*
 * External links
 */
a[href^="http"]:after {
	display:inline-block;
	width:13px;
	height:13px;
	margin-left:5px;
	background:url(../i/external-link.svg?embed);
	background-position:0 0 !important;
	background-size:100%!important;
	content:"";
	vertical-align:middle;
}
a.red[href^="http"]:after,
.allrum a.red[href^="http"]:after {
	background:url(../i/external-link-red.svg?embed);
}
a.white[href^="http"]:after,
.allrum a.white[href^="http"]:after {
	background:url(../i/external-link-white.svg?embed);
}
.allrum a[href^="http"]:after {
	background:url(../i/external-link-blue.svg?embed);
}

/* Inline elements
----------------------------------------------------------------------------- */
b,
strong {
	font-weight:bold;
}
i,
em {
	font-style:italic;
}


/* Form elements
 * [1] Enable line-wrapping in IE8+
 * [2] Enable line-wrapping in other browsers
 * [3] Declarations repeated in this rule since IE8- ignore selectors that
 *     contain :not()
----------------------------------------------------------------------------- */
fieldset {
	padding:0 10px 10px;
	border:1px solid #e3e2e1;
	border-radius:2px;
}
legend {
	display:table; /* [1] */
	padding:0 2px;
	color:#383634;
	font-weight:bold;
	white-space:normal; /* [2] */
}
label {
	display:block;
	color:#383634;
	font-weight:bold;
}
button,
input,
select,
textarea {
	color:inherit;
	font:inherit;
	-webkit-font-smoothing:antialiased;
	line-height:normal;
}
input[type="text"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
	padding:6px 10px;
	border:1px solid #e3e2e1;
	border-radius:2px;
	background:#fff;
	color:inherit;
	-webkit-appearance:none;
}
select {
	padding:1px;
}
input:not([type]) { /* [3] */
	padding:6px 10px;
	border:1px solid #e3e2e1;
	border-radius:2px;
	background:#fff;
	color:inherit;
	-webkit-appearance:none;
}

/*
 * Reset button look in webkit
 */
input[type="reset"],
input[type="button"],
input[type="submit"],
button {
	-webkit-appearance:none;
}

/*
 * Reset search input look in webkit, making it possible to style it as a normal text input
 */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
	display:none;
}

/*
 * Placeholder styling for Gecko
 * [1] No semi-transparent text, please
 */
input::-moz-placeholder,
textarea::-moz-placeholder {
	color:#767676;
	opacity:1; /* [1] */
}

/*
 * Placeholder styling for webkit
 */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color:#767676;
}

/*
 * Placeholder styling for IE10
 */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	color:#767676;
}

/*
 * Remove extra padding on gecko buttons
 */
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
	padding:0;
	border:0;
}

/*
 * Iframe inserted by content editor
 */
iframe.editor-inserted {
	min-height:600px;
	width:100%;
}



/* Columns
 * [1] Negative horizontal margins to compensate for padding between columns.
 * [2] The default width of a column corresponds to the .full width.
 * [3] This should correspond to the chosen "standard" width, e.g. "medium".
================================================================================ */
.row {
	margin:0 -15px 30px; /* [1] */
}
.row:after {
	display:table;
	clear:both;
	content:"";
}
.col {
	float:left;
	width:100%; /* [2] */
	padding:0 15px;
}
.col.small,
.cols-4 > .col {
	width:25%;
}
.cols-3 > .col {
	width:33.33333%;
}
.col.medium,
.cols-2 > .col {
	width:50%;
}
.col.large {
	width:75%;
}
.col.hr,
.col.full {
	width:100%;
}


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

	.row {
		margin-bottom:0;
	}
	.col:nth-child(n) {
		float:none;
		width:auto;
		margin-bottom:30px;
	}

} /* End media query */


/* Form structure: rows and columns
 * [1] Different vertical margin between rows than for general columns.
 * [2] Margin-top = line-height of labels: 24px line-height / 15px font-size.
 * [3] No margin-top on .submit-areas that are the only column.
----------------------------------------------------------------------------- */
form .row {
	margin-bottom:15px; /* [1] */
}
.row .text input,
.row textarea {
	width:100%;
}
.row .submit-area {
	margin-top:1.6em; /* [2] */
}
.row .submit-area:first-child:last-child { /* [3] */
	margin:0;
	text-align:right;
}


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

	form .row {
		margin-bottom:0;
	}
	form .col:nth-child(n) {
		float:none;
		width:auto;
		margin-top:0;
		margin-bottom:15px;
	}

} /* End media query */



/* =============================================================================
 * Global utility classes
============================================================================= */


/* Easy clearing of floats.
 * See http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
----------------------------------------------------------------------------- */
.cf:after {
	display:table;
	clear:both;
	content:"";
}


/* Structural elements.
 * Not visible when CSS is enabled but visible to screen readers.
----------------------------------------------------------------------------- */
.structural {
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(1px, 1px, 1px, 1px);
	padding:0;
	border:0;
}


/* Hidden elements. Hidden even for screen readers
----------------------------------------------------------------------------- */
.hidden {
	display:none;
	visibility:hidden;
}


/* Clear elements. Used by content editors in TinyMCE
----------------------------------------------------------------------------- */
.clear {
	clear:both;
}


/* Prevent line breaking, used by content editors in TinyMCE
----------------------------------------------------------------------------- */
.nowrap {
	white-space:nowrap;
}


/* Zebra background on tables
----------------------------------------------------------------------------- */
.zebra tbody tr:nth-child(even) {
	background:#f5f4f3;
}
.zebra tbody tr:hover {
	background:#ecf4e5;
}


/* Images
----------------------------------------------------------------------------- */
.left,
.right,
.left-dec,
.right-dec {
	float:left;
	width:auto;
	margin:3px 18px 10px 0;
}
.right,
.right-dec {
	float:right;
	margin:3px 0 10px 18px;
}
img.dec,
img.left-dec,
img.right-dec,
img.fullwidth-dec,
span.dec img,
span.left-dec img,
span.right-dec img,
span.fullwidth-dec img {
	padding:4px;
	border:1px solid #e3e2e1;
	background:#fff;
}
img.fullwidth,
img.fullwidth-dec,
span.fullwidth img,
span.fullwidth-dec img {
	display:block;
	width:100%;
	margin:0 0 20px;
	padding:9px;
}
.caption,
.caption em {
	display:block;
}
.caption em {
	font-style:normal;
	font-size:0.916em;
}
.caption p,
.caption em {
	margin-bottom:0;
}
.caption sup {
	bottom:3px;
}

/*
 * Image at the top of content pages
 */
.top-image {
	margin-bottom:10px;
}


/* max-width:760px
 * Expand the image when its container is linearised
----------------------------------------------------------------------------- */
@media only screen and (max-width:760px) {

	.top-image {
		width:100%;
	}

} /* End media query */


/* Action links
----------------------------------------------------------------------------- */
.action-link {
	font-weight:bold;
	line-height:1;
	text-decoration:none;
}
.action-link:link,
.action-link:visited {
	color:#383634;
}
.action-link:hover,
.action-link:focus {
	text-decoration:underline;
}
.action-link:after {
	display:inline-block;
	width:16px;
	height:16px;
	margin-left:8px;
	background:url(/gui/i/circle-arrows.svg) -80px 0;
	content:"";
	vertical-align:middle;
}
.allrum .action-link:after {
	background-image:url(/gui/i/circle-arrows-blue.svg);
}
.action-link.green:link,
.action-link.green:visited {
	color:#93b478;
}
.allrum .action-link:link,
.allrum .action-link:visited {
	color:#679eb3;
}
.action-link.white:link,
.action-link.white:visited {
	color:#fff;
}
.action-link.white:after {
	background-position:-16px 0;
}
.action-link.red:after {
	background-position:-144px 0;
}

/*
 * Buttonish action link
 */
.action-link.button,
.allrum .action-link.button {
	display:block;
	margin-bottom:30px;
	padding:10px 25px;
	color:#fff;
	font:normal 24px/1 "Yellowtail", cursive;
}
.action-link.button:after {
	background-position:-16px 0;
	vertical-align:-2px;
}

/*
 * Action links in teaser headings inherit font properties
 */
.m-h .action-link {
	font:inherit;
}


/* max-width:540px
 * Action links in main content need to get out of the way in narrow viewports.
----------------------------------------------------------------------------- */
@media only screen and (max-width:540px) {

	[role="main"] > .action-link {
		float:none;
		margin:0 0 20px;
	}

} /* End media query */