/**
 * @colordef #75af7c bay leaf (green)
 * @colordef #5f713f chalet green (green)
 * @colordef #7da1a4 ziggurat (blue)
 * @colordef #794744 tosca (red)
 * @colordef #5e5e5e dim gray (grey)
 * @colordef #a1a1a1 dark gray (grey)
 */

/**
 * CSS reset
 *
 * @author	Eric Meyer
 * @version	2.0
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* END CSS reset */

/**
 * Block-level elements
 *
 * @section blocks
 */
html,
body
{
	height: 100%;
}

body
{
	background: #5e5e5e;
	color: #fff;
	/* 16 * 1.5 = 24 */
	font: 16px/1.5 Verdana, sans-serif;
	/* 16 * .063 = 1 */
	letter-spacing: .063em;
}

address,
blockquote,
dl,
ol,
p,
pre,
table,
ul
{
	/* 16 * 1.5 = 24 */
	margin-bottom: 1.5em;
}

blockquote
{
	/* 16 * .25 = 4 */
	border-left: #bfbfbf solid .25em;
	/* 16 * .75 = 12 */
	padding: .75em;
}

	blockquote > :first-child::before
	{
		color: #bfbfbf;
		content: '\f10d';
		display: block;
		/* 12 * 2 = 24 */
		font: 2em FontAwesome;
		float: left;
		padding: 0 .75em 0 0;
	}

	blockquote > :last-child
	{
		margin-bottom: 0;
	}

		blockquote > :last-child::after
		{
			clear: both;
			content: '';
			display: table;
		}

pre
{
	background: #bfbfbf;
	color: #000;
	font-family: Consolas, monaco, monospace;
	letter-spacing: 0;
	overflow: auto;
	/* 16 * .75 = 12 */
	padding: .75em;
}

/**
 * Headings
 *
 * @section blocks
 * @subsection headings
 * @subsection tables
 */
h1,
h2,
h3,
h4,
h5,
h6
{
	color: #5f713f;
}

h1
{
	/* 16 * 1.5 = 24 */
	font-size: 1.5em;
	line-height: 1;
	margin-top: 1;
}

h2
{
	/* 12 * 1.333 = 16 */
	font-size: 1.333em;
	/* 21 * 1.125 = 18 */
	line-height: 1.125;
	/* 16 * 1.125 = 18 */
	margin-top: 1.125em;
}

h3,
caption
{
	/* 12 * 1.167 = 14 */
	font-size: 1.167em;
	/* 14 * 1.286 = 18 */
	line-height: 1.286;
	/* 14 * 1.286 = 18 */
	margin-top: 1.286em;
}

h4,
h5,
h6
{
	/* 16 * 1.5 = 24 */
	margin-top: 1.5em;
}

/**
 * Lists
 *
 * @section blocks
 * @subsection lists
 */
ol,
ul
{
	list-style-position: outside;
	/* 16 * 1.5 = 24 */
	margin-left: 1.5em;
}

ol
{
	list-style-type: decimal;
}

	ol ol
	{
		list-style-type: lower-alpha;
	}

ul
{
	list-style-type: disc;
}

	ul ul
	{
		list-style-type: square;
	}

ul ul,
ul ol,
ol ul,
ol ol
{
	/* 16 * 1.5 = 24 */
	margin: 0 0 0 1.5em;
}

dt
{
	color: #5f713f;
}

dd
{
	/* 16 * 1.5 = 24 */
	margin-left: 1.5em;
}

	dt + dd
	{
		/* 16 * 1.5 = 24 */
		margin-bottom: 1.5em;
	}

/**
 * Tables
 *
 * @section blocks
 * @subsection tables
 */
table
{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: .75em;
	width: 100%;
}

caption
{
	text-align: left;
	border-bottom: solid #d3d3d3 1px;
}

thead
{
	border-bottom: 1px solid #424143;
}

	thead th
	{
		/* 12 * 1.167 = 14 */
		font-size: 1.167em;
		font-weight: normal;
		letter-spacing: 1px;
		/* 14 * 1.286 */
		line-height: 1.286;
		text-shadow: none;
	}

tfoot
{
	color: #67666a;
	border-top: #424143 solid 1px;
}

tbody tr:nth-child(even)
{
	background: #eee;
	color: #000;
}

td,
th
{

	/* 16 * 0.75 = 12 
	16 * 0.375 = 6 */
	padding: .375em 0.75em;
}

th
{
	text-align: center;
	vertical-align: bottom;
}

/**
 * Forms
 *
 * @section forms
 */
label,
.pseudo-label
{
	display: block;
	/* 16 * .75 = 12 */
	margin-top: .75em;
}

	.inline-label
	{
		display: inline;
		margin: 0;
	}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="date"],
textarea
{
	border: 1px solid #cacaca;
	/* 16 * .25 = 4 */
	-webkit-border-radius: .25em;
	border-radius: .25em;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font: 1em/1.5 'Helvetica Neue', Helvetica, Arial, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', sans-serif;
}

select
{
	font-size: 1em;
	/* 16 * 1.5 = 24 */
	line-height: 1.5;
}

.form__input--full
{
	width: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

figure
{
	border-bottom: 1px solid #595959;
	border-top: 1px solid #595959;
	/* 16 * .75 = 12 */
	margin-bottom: .75em;
	max-width: 100%;
	/* 16 * .75 = 12 */
	padding: .75em 0;
	text-align: center;
}

/**
 * Anchors
 *
 * @section anchors
 */
a
{
	color: #7da1a4;
	text-decoration: underline;
	-webkit-transition: color .3s;
	transition: color .3s;
}

	a:hover
	{
		color: #5f713f;
	}

/**
 * Inline elements
 *
 * @section inline
 */
abbr
{
	/* Weird - shorthand version not working in FF */
	border-bottom-color: inherit;
	border-bottom-style: dotted;
	border-bottom-width: 1px;
}

cite,
em,
i
{
	font-style: italic;
}

code,
var
{
	background: #bfbfbf;
	color: #000;
	font-family: Consolas, monaco, monospace;
	word-wrap: break-word;
}

del,
s
{
	text-decoration: line-through;
}

del
{
	color: #64645e;
}

img
{
	height: auto;
	max-width: 100%;
}

ins
{
	text-decoration: underline;
}

q
{
	font-style: italic;
}

	q:before
	{
		content: '“';
	}

	q:after
	{
		content: '”';
	}

sub,
sup
{
	/* 12 * 0.75 = 9 */
	font-size: 0.75em;
	/* 9 * 2 = 18 */
	line-height: 2;
}

sub
{
	vertical-align: sub;
}

sup
{
	vertical-align: super;
}

strong,
b
{
	font-weight: bold;
}

/**
 * Generic classes
 *
 * @section generic
 */
/**
 * Wrappers
 *
 * @section generic
 * @subsection wrapper
 */
.wrapper,
.wrapper--narrow,
.wrapper--half
{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	/* 16 * 30 = 480 */
	max-width: 30em;
}

/* Applied to links */
.button
{
	background: #66a7c5;
	border: 0;
	/* 16 * .75 = 12 */
	-webkit-border-radius: .75em;
	border-radius: .75em;
	color: #fff;
	display: inline-block;
	text-decoration: none;
	/* 16 * .75 = 12 */
	padding: 0 .75em;
	-webkit-transition: background .3s;
	transition: background .3s;
}

	.button:hover
	{
		background: #75af7c;
		color: #fff;
	}

	/* Make sure browsers respect font-size for form buttons. */
	input.button,
	button.button
	{
		font-size: 1em;
	}

/**
 * Clearing
 *
 * @section generic
 * @subsection clear
 */
.clear
{
	clear: both;
}

.clear--left
{
	clear: left;
}

.clear--right
{
	clear: right;
}

.clear--self::after
{
	clear: both;
	content: '';
	display: table;
}

/**
 * Text alignment
 *
 * @section generic
 * @subsection textAlign
 */
.align--centre
{
	text-align: center;
}

.align--left
{
	text-align: left;
}

.align--right
{
	text-align: right;
}

/**
 * Positioning
 *
 * @section generic
 * @subsection positioning
 */
.pos--centre
{
	display: block;
	/* 16 * .75 = 12 */
	margin: 0 auto .75em;
}

.pos--left
{
	float: left;
	/* 16 * .75 = 12 */
	margin: 0 .75em .75em 0;
}

.pos--right
{
	float: right;
	/* 16 * .75 = 12 */
	margin: 0 0 .75em .75em;
}

/**
 * Spacing
 *
 * @section spacing
 */
.space,
.space--horizonal,
.space--left
{
	/* 16 * 1.5 = 24 */
	margin-left: 1.5em;
}

.space,
.space--horizonal,
.space--right
{
	/* 16 * 1.5 = 24 */
	margin-right: 1.5em;
}

.space,
.space--vertical,
.space--bottom
{
	/* 16 * 1.5 = 24 */
	margin-bottom: 1.5em;
}

.space,
.space--vertical,
.space--top
{
	/* 16 * 1.5 = 24 */
	margin-top: 1.5em;
}

/**
 * Padding
 *
 * @section padding
 */
.pad,
[class*='pad--']
{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.pad,
.pad--horizontal,
.pad--left
{
	/* 16 * .75 = 12 */
	padding-left: .75em;
}

.pad,
.pad--horizontal,
.pad--right
{
	/* 16 * .75 = 12 */
	padding-right: .75em;
}

.pad,
.pad--vertical,
.pad--bottom
{
	/* 16 * .75 = 12 */
	padding-bottom: .75em;
}

.pad,
.pad--vertical,
.pad--top
{
	/* 16 * .75 = 12 */
	padding-top: .75em;
}

/**
 * Columns
 *
 * @section generic
 * @subsection columns
 */
.row::after
{
	clear: both;
	content: '';
	display: table;
}

[class*='row__col--']:first-child
{
	margin-left: 0;
}

/**
 * Colours
 *
 * @section generic
 * @subsection colours
 */
.colour__txt--bay-leaf
{
	color: #75af7c;
}

.colour__txt--chalet-green
{
	color: #5f713f;
}

.colour__txt--ziggurat
{
	color: #7da1a4;
}

.colour__txt--tosca
{
	color: #794744;
}

.colour__txt--dim-gray
{
	color: #5e5e5e;
}

.colour__txt--dark-gray
{
	color: #a1a1a1;
}

.colour__txt--white
{
	color: #fff;
}

.colour__txt--black
{
	color: #000;
}

.colour__bg--bay-leaf
{
	background-color: #75af7c;
}

.colour__bg--chalet-green
{
	background-color: #5f713f;
}

.colour__bg--ziggurat
{
	background-color: #7da1a4;
}

.colour__bg--tosca
{
	background-color: #794744;
}

.colour__bg--dim-gray
{
	background-color: #5e5e5e;
}

.colour__bg--dark-gray
{
	background-color: #a1a1a1;
}

.colour__bg--white
{
	background-color: #fff;
}

.colour__bg--black
{
	background-color: #000;
}

/**
 * Top navigation bar
 *
 * @section topNav
 */
.top-nav__name
{
	display: none;
}

.top-nav__menu
{
	display: block;
	margin: 0;
}

	.top-nav__menu > li
	{
		display: inline;
		margin-right: 1em;
	}

	.top-nav__menu a
	{
		color: #fff;
		text-decoration: none;
	}

		.top-nav__menu a:hover
		{
			color: #7da1a4;
		}

.top-nav__label
{
	display: none;
}

li.top-nav__welcome
{
	display: none;
}

.top-nav__message
{
	/* 16 * .625 = 10 */
	font-size: .625em;
	/* 10 * 2.4 = 24 */
	line-height: 2.4;
}

.main-nav
{
	background: #7da1a4;
}

.main-nav a
{
	color: #fff;
	text-decoration: none;
}

	.main-nav a:hover
	{
		color: #5a5a5a;
	}

.main-nav__menu
{
	display: none;
	margin: 0;
}

	.main-nav__menu > li
	{
		display: block;
		margin-left: 1em;
	}

	.main-nav__menu a
	{
		color: #fff;
		text-decoration: none;
	}

		.main-nav__menu a:hover
		{
			color: #5a5a5a;
		}

.content-header,
.content
{
	background: #fff;
	color: #5e5e5e;
	letter-spacing: 0;
}

.content-header h1
{
	margin: 0;
}

/**
 * Footer
 *
 * @section footer
 */
.footer
{
	text-align: center;
}

	.footer > aside
	{
		font-size: .75em;
	}

.footer__logo
{
	max-width: 50%;
}

/**
 * GUI elements
 *
 * @section gui
 */
.warning
{
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: 3;
	animation-iteration-count: 3;
	-webkit-animation-name: pulse;
	animation-name: pulse;
	background: #794744;
	color: #fff;
	letter-spacing: 1px;
}

	@keyframes pulse {
		50%
		{
			background: #7da1a4;
		}

		100%
		{
			background: #794744;
		}
	}

.error__form
{
	display: block;
	color: #794744;
	/* 16 * .75 = 12 */
	font-size: .75em;
}

.info-box
{
	border: solid 1px #a1a1a1;
	/* 16 * .75 = 12 */
	border-radius: .75em;
	padding: .75em;
}

.sub-menu
{
	text-align: center;
}

	.sub-menu > a
	{
		display: block;
		margin-bottom: 1em;
	}

/**
 *
 *
 * section gui
 * subsection lists
 */
.list--plain
{
	margin: 0;
	list-style-type: none;
}

/**
 * Responsive data tables
 *
 * @section gui
 * @subsection responsiveTables
 */
.responsive-table,
.responsive-table tbody,
.responsive-table tfoot,
.responsive-table tr,
.responsive-table th,
.responsive-table td
{
	display: block;
}

.responsive-table td[data-col-title]::before
{
	content: attr(data-col-title) ' ';
	display: inline-block;
	font-weight: bold;
	padding-right: 1em;
	text-align: right;
	width: 6.5em;
}

.responsive-table thead
{
	display: none;
}

td.responsive-table__cell--control
{
	display: inline-block;
	font-size: 1.5em;
}

/**
 * Pagination
 *
 * @section gui
 * @subsection pagination
 */
.pagination__links
{
	/* 16 * .75 = 12 */
	margin: .75em 0;
	text-align: center;
}

	.pagination__links > a,
	.pagination__links > strong
	{
		display: inline-block;
		/* 16 * .5 = 8　*/
		margin-right: .5em;
		text-decoration: none;
	}

.notifications
{
	box-shadow: 0 0 .5em rgba(0,0,0,.5);
	/* 16 * .75 = 12 */
	margin: 1.5em 0;
}

/**
 * "Tablet"-size
 *
 * Responsive design
 *
 * @section tablet
 */
@media screen
and (min-width: 640px){
	h1
	{
		/* 16 * 2.5 = 40 */
		font-size: 2.5em;
		/* 40 * 1.2 = 48 */
		line-height: 1.2;
		/* 48 * .6 = 24 */
		margin-top: .6em;
	}

	h2
	{
		/* 16 * 2 = 32 */
		font-size: 2em;
		/* 32 * 1.5 = 48 */
		line-height: 1.5;
		/* 32 * .75 = 24 */
		margin-top: .75em;
	}

	h3
	{
		/* 16 * 1.5 = 24 */
		font-size: 1.5em;
		line-height: 1;
		margin-top: 1em;
	}

	figcaption
	{
		/* 12 * .75 = 9 */
		font-size: .75em;
		line-height: 1;
	}

	/**
	 * Generic classes
	 *
	 * @section tablet
	 * @subsection generic
	 */
	.wrapper,
	.wrapper--narrow,
	.wrapper--half
	{
		margin: 0 auto;
	}

	.wrapper
	{
		/* 16 * 50 = 800 */
		max-width: 50em;
	}

	.wrapper--narrow
	{
		/* 16 * 37.5 = 600 */
		max-width: 37.5em;
		width: 75%;
	}

	.wrapper--half
	{
		/* 16 * 25 = 400 */
		max-width: 25em;
		width: 50%;
	}

	/**
	 * Columns
	 *
	 * @section tablet
	 * @subsection generic
	 */
	[class*='row__col--']
	{
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		float: left;
		margin-left: 2%;
	}

		[class*='row__col--']:first-child
		{
			margin-left: 0;
		}

	.row__col--1-2
	{
		width: 49%;
	}

	.row__col--1-3
	{
		width: 32%;
	}

	.row__col--2-3
	{
		width: 66%;
	}

	.row__col--1-4
	{
		width: 23.5%;
	}

	.row__col--3-4
	{
		width: 74.5%;
	}

	/**
	 * Top navigation bar
	 *
	 * @section tablet
	 * @subsection topNav
	 */
	li.top-nav__welcome
	{
		display: inline-block;
	}

	.top-nav__name
	{
		display: block;
	}

	.top-nav__message
	{
		font-size: 1em;
		/* 16 * 1.5 = 24 */
		line-height: 1.5;
	}

	.top-nav__label
	{
		display: inline;
	}

	.top-nav__toggle,
	li.top-nav__toggle
	{
		display: none;
	}

	.main-nav__toggle
	{
		display: none;
	}

	.main-nav__menu
	{
		display: block;
	}

		.main-nav__menu > li
		{
			display: inline-block;
		}

		.main-nav__menu > li:first-child
		{
			margin-left: 0;
		}

	/**
	 * Footer
	 *
	 * @section tablet
	 * @section footer
	 */
	.footer__logo
	{
		max-width: 33.333%;
	}

	/**
	 * GUI
	 *
	 * @section tablet
	 * @subsection gui
	 */
	.sub-menu
	{
		text-align: left;
	}

		.sub-menu > a
		{
			font-size: .75em;
			display: inline-block;
			margin-bottom: 0;
			max-width: 30%;
			overflow: hidden;
			white-space: nowrap;
		}

	.responsive-table
	{
		display: table;
		text-align: center;
	}

	.responsive-table tbody
	{
		display: table-row-group;
	}

	.responsive-table tfoot
	{
		display: table-footer-group;
	}

	.responsive-table tr
	{
		display: table-row;
	}

	.responsive-table th,
	.responsive-table td
	{
		display: table-cell;
	}

	.responsive-table td[data-col-title]::before
	{
		content: none;
	}

	.responsive-table thead
	{
		display: table-header-group;
	}

	.form--narrow
	{
		margin: 0 auto;
		width: 66.67%;
	}

	.pagination__links > a,
	.pagination__links > strong
	{
		/* 16 * .5 = 8　*/
		margin-right: .75em;
	}

}

/**
 * "Desktop"-size
 *
 * Responsive design
 *
 * @section desktop
 */
@media screen
and (min-width: 980px){
	body
	{
		font-size: 20px;
	}

	.wrapper
	{
		/* 20 * 64 = 1280 */
		max-width: 64em;
	}

	.wrapper--narrow
	{
		/* 20 * 48 = 960 */
		max-width: 48em;
	}

	.wrapper--half
	{
		/* 20 * 32 = 640 */
		max-width: 32em;
	}

	/**
	 * Footer
	 *
	 * @section tablet
	 * @section footer
	 */
	.footer__logo
	{
		max-width: 25%;
	}

	.form--narrow
	{
		width: 40%;
	}
}

/**
 * Remove spacing
 *
 * Placed last to use the cascade.
 *
 * @section removeSpace
 */
 
 /**
 * Spacing
 *
 * @section removeSpace
 * @subsection spacing
 */
.space--rm,
.space--horizonal-rm,
.space--left-rm
{
	margin-left: 0;
}

.space--rm,
.space--horizonal-rm,
.space--right-rm
{
	margin-right: 0;
}

.space--rm,
.space--vertical-rm,
.space--bottom-rm
{
	margin-bottom: 0;
}

.space--rm,
.space--vertical-rm,
.space--top-rm
{
	margin-top: 0;
}

/**
 * Padding
 *
 * @section removeSpace
 * @subsection padding
 */
.pad--rm,
.pad--horizontal-rm,
.pad--left-rm
{
	padding-left: 0;
}

.pad--rm,
.pad--horizontal-rm,
.pad--right-rm
{
	padding-right: 0;
}

.pad--rm,
.pad--vertical-rm,
.pad--bottom-rm
{
	padding-bottom: 0;
}

.pad--rm,
.pad--vertical-rm,
.pad--top-rm
{
	padding-top: 0;
}

.decoration--rm
{
	text-decoration: none;
}