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

	body, html {
		margin: 0;
		padding: 0;
	}
	html, body, header, footer, article, aside, nav, main, div {
		box-sizing: border-box;
	}

	body {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	nav, div#banner, footer {
		width: 100%;
	}

div#banner {
	min-height: 80px;
}


	main {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	main>aside, main>article {
		padding: 1em 1em;

	}
	main>aside>h1 {
		qmargin-top: 0;
	}

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

	@media (min-width: 600px) {
		body>header,body>nav>div,main,div#qbanner {
			max-width: 800px;
			margin: 0 auto;
		}
		div#banner>img {
			width: 100%;
			max-height: 220px;
		}
		main {
			display: flex;
			flex-direction: row-reverse;
			flex: 1;
		}
		nav>div {
			border: thin #ccc;
			border-style: none solid;
		}

		main>aside {
			flex: 1;
			margin-right: 2em;
		}
		main>article {
			flex: 2;
		}
	}


		@media (min-width: 600px) {
			body>header,main,div#qbanner {
				max-width: 800px;
				margin: 0 auto;
			}
			div#banner>img {
				width: 100%;
				max-height: 220px;
			}
			main>aside {
				padding: 0 0 0 1.5em;
				margin-top: 4.5em;
			}
			
			main>article {
				padding: 0 1.5em 0 0;
			}
		}

/*	Basic
		================================================ */

		html {
			font-family: "Source Sans Pro", helvetica, sans-serif;
			font-size: 87.5%;
			color: #666;
		}
		
		h1, h2 {
			font-family: "Source Serif Pro", serif;
			font-weight: normal;
			transform: scale(.9,1);
			transform-origin: left;
		}
		
		p {
			margin: .75rem 0;
			line-height: 1.6;
		}
		
		li {
			margin: .25rem 0;
		}
		
		p>a {
			text-decoration: none;
			border-bottom: thin solid #ccc;
			color: inherit;
			font-weight: bold;
			position: relative;
		}
		p>a:hover {
			border-bottom: thin solid #333;
		}
		p>a:hover:after {
			content: "\203A\A0" attr(href);
			border: thin solid #ccc;
			position: absolute;
			left: calc(100% + .25em);
			top: -.375em;
			background-color: #f8f8f8;
			padding: .125em .25em;
		}

	/*	Header
		================================================ */

		body>header {
			padding: 1em;
		}
		
		body>header>h1 {
			text-align: center;
			font-family: "Source Serif Pro" !important;
			font-weight: normal;
			font-size: 2rem;
			margin: 0;
			transform: scale(.9,1);
			transform-origin: center;
		}
		body>header>p {
			color: #999;
			text-align: center;
			margin: 0;
			font-size: .6rem;
		}
		
		div#banner>img {
			display: none;
		}
		div#banner {
			height: 80px;
			background: url("trees.jpg");
			background-repeat: repeat-x;
			background-size: 960px 100%;
		}

		@media (min-width: 400px) {
			body>header>h1 {
				font-size: 3rem;
			}
		}
		
		@media (min-width: 600px) {
			div#banner {
				/*! height: 120px; */
				/*! background-size: 960px 100%; */
			}
		}
		
		@media (min-width: 800px) {
			div#banner {
				height: 180px;
				background-size: 960px 100%;
			}
		}

	/*	Animated Banner
		================================================ */

		div#banner {
			animation: banner 120s infinite linear;
			background-position: 0px 0px;
			background-repeat: repeat-x;
		}
		
		@keyframes banner {
			from {
				background-position: 960px 0;
			}
			to {
				background-position: 0 0;
			}
		}

		div#banner[paused] {
			-webkit-animation-play-state: paused;
			animation-play-state: paused;
		}

	/*	Nav
		================================================ */

		html>body>nav {
			left: 0;
			right: 0;
			margin: 0 auto;
			background-color: #f8f8f8;
			z-index: 2000;
		}
		body>nav {
		}
		body>nav>div {

		}

		ul#menu,
		ul#menu ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: table;
			width: 100%;
			table-layout: auto;
			background-color: #f8f8f8;
		}
		ul#menu>li {
			display: table-cell;
			position: relative;
		}
		ul#menu>li+li {
			border-left: thin solid #ccc;
		}
		ul#menu li>a,
		ul#menu li>span {
			text-decoration: none;
			text-transform: uppercase;
			display: block;
			text-align: center;
			color: #666;
			padding: .75em;
			outline: none;
			font-size: .8rem;
		}
		ul#menu>li>span,
		ul#menu li>a:hover,
		ul#menu li>span:hover {
			color: orange;
			background-color: #f0f0f0;
		}

		

		ul#menu li>a,
		ul#menu li>span {
			font-size: 1rem;
		}

		/*	Sub Menu
		================================================ */

		ul#menu>li>span+ul {
			display: none;
		}

		ul#menu>li>span[open]+ul {
			display: table;
			position: absolute;
			right: 0;
		}

		ul#menu>li {
			display: table-cell;
		}

		ul#menu span[tabindex="0"] {
			color: #666;	
		}
		ul#menu span[tabindex="0"]:before {
			content: "︾"; /* U+FE3E See: http://shapecatcher.com/ */
			line-height: 0;
			position: relative;
			margin-right: .5em;
			top: .375em;
		}

		@media (min-width: 800px) {
			ul#menu ul>li {
				display: table-cell;
			}
			ul#menu>li>span[tabindex="0"] {
				display: none;
			}
			ul#menu>li>span+ul {
				display: table;
			}
		}

		ul#breadcrumbs {
			list-style: none;
			margin: 0;
			padding: 0;
			margin-left: 1em;
		}
		ul#breadcrumbs>li {
			display: table-cell;
			padding: .25em;
			position: relative;
		}
		ul#breadcrumbs>li:not(:last-of-type):after {
			content: "›";
			margin-left: .25em;
			font-size: 2em;
			line-height: 0;
			position: relative;
			top: .125em;
		}
		ul#breadcrumbs>li>a {
			text-decoration: none;
			color: #666;
			font-weight: bold;
		}
		ul#breadcrumbs>li>a:hover {
			border-bottom: thin solid #666;
		}

	/*	Aside
		================================================ */

		
		dl#core-details {
			margin: 0;
			padding: 0;
		}
		dl#core-details {
			border-bottom: thin solid #999;
			margin: 0;
		}
		dl#core-details>dt {
			border-top: thin solid #999;
		}
		dl#core-details>dd {
			font-size: .8em;
		}

		dl#core-details>dt {
			color: #333;
			padding: .5em;
			
		}
		dl#core-details>dt>img {
			vertical-align: -8px;
			margin: 0 4px;
			display: inline-block;
		}
		dl#core-details>dt:hover {
			background-color: #f8f8f8;
		}
		dl#core-details>dd {
			margin-left: 3em;
			max-height: 0;
			overflow: hidden;
			opacity: 0;
			transition: max-height .25s, opacity .75s;
		}
		dl#core-details>dt[open] {
			outline: none;
			background-color: #eee;
		}

		dl#core-details>dt[open]+dd {
			opacity: 1;
			max-height: 16em;
			padding: .5em;
		}
		dl#core-details>dd>p {
			margin: .125em 0;
		}
		


		ul#core-list {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		ul#core-list>li {
			border-bottom: thin solid #999;
			margin: 0;
		}
		ul#core-list>li:first-of-type {
			border-top: thin solid #999;
		}
		ul#core-list>li>before {
		
		}

		ul#core-list>li>a {
			color: #333;
			text-decoration: none;
			display: block;
			padding: .5em;
		}
		ul#core-list>li>a>img {
			vertical-align: -8px;
			margin: 0 4px;
		}
		ul#core-list>li>a:hover {
			background-color: #f8f8f8;
		}

		dt {
			position: relative;
		}
		dt>a {
			text-decoration: none;
			border-bottom: thin solid #ccc;
			color: inherit;
			font-weight: bold;
			position: absolute;
			right: 0;
		}
		dt>a:hover {
			border-bottom: thin solid #333;
		}

	/*	Article
		================================================ */

		main>article>ul a {
			text-decoration: none;
			color: black;
		}

	body>footer {
		border-top: 20px solid #7B9061;
		width: 100%;
		background-color: #212221;
		padding: 1em;
/*! min-height: 90px; */
	}
	body>footer>div {
		max-width: 800px;
		margin: 0 auto;
	}
	ul#footer-menu {
		list-style: none;
		padding: 0;
		margin: 0 auto .75em;
		display: table;
	}
	ul#footer-menu>li {
		display: table-cell;
	}
	ul#footer-menu>li+li>a {
		border-left: thin solid #999;
	}
	ul#footer-menu>li>a,
	ul#footer-menu>li>span {
		text-decoration: none;
		display: block;
		color: #f8f8f8;
		padding: 0 1.25em;
	}
	ul#footer-menu>li>a:hover {
		border-bottom: thin solid #f8f8f8;
	}
	body>footer>div>p {
		text-align: center;
		margin: .125em 0;
		color: #ccc;
	}
	body>footer>div>p>a {
		color: #eee;
		text-decoration: none;
	}

/*	Login
	================================================ */

	ul#menu>li>span#show-login {
		color: #666;
	}

	form#login {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 20em;
		height: 16em;
		padding: 2em;
		margin: auto;
		border: thick solid #7B9061;
		background-color: white;
		box-shadow: 4px 4px 4px #666;
	}
	form#login label {
		display: inline;
		font-weight: bold;
		line-height: 2;
		border: none;
	}
	form#login label>input {
		font-weight: normal;
	}
	form#login input[type="password"],
	form#login input[type="text"],
	form#login input[type="email"] {
		border: thin solid #ccc;
		font-family: "Source Code Pro", monospace;
		font-size: .9rem;
		padding: .5em .75em;
		width: calc(100% - 1.5em);
		margin-top: .25em;
	}
	form#login button {
		width: 50%;
		font-size: 1em;
		padding: .25em;
		text-transform: uppercase;

		background-color: #7B9061;
		color: white;

		border: thin solid #999;
	}
	form#login input[name="show-password"] {
		display: none;
	}
	form#login input[name="show-password"]+span {
		font-family: monospace;
		font-size: 1em;
		line-height: 1.6;
		font-weight: bold;
		border: thin solid #999;
		padding: .125em .75em;
		background: linear-gradient(to bottom, #f8f8f8,#ddd);
		box-shadow:
			inset 2px 2px 2px white,
			inset -2px -2px 2px #999;
		float: right;
	}
	form#login input[name="show-password"]:checked+span {
		background: linear-gradient(to top, #ddd,#ccc);
		box-shadow:
			inset 1px 1px 2px #999,
			inset -1px -1px 1px #fff;
	}

:focus {
	outline: none;	
}
body[open] {
	border: thick solid red;
}