/*

This layout uses a mobile first approach.

Styles are written for mobiles first, then enhanced for desktops below.

Tip:Resize your browser window to see the layout change!

*/

/* body */

body
{
	background-color:#837560;
	margin:0;
	padding:0;
	font-family:verdana, arial, sans-serif;
}

/* wrap */

.wrap
{
	margin:0 auto;
	max-width:480px;
	box-shadow:0px 2px 8px 8px rgba(0,0,0,0.63);
	background-color:#FFFFFF;
}

/* desktop extra links */

.desktop-extra-links
{
	display:none;
}

/* header (contains title, tagline and mobile nav link) */

header
{
	display:flex;
	flex-direction:row;
	align-items:center;
	background:url("images/header-background.jpg");
	background-size:100% 100%;
	color:#FFFFFF;
}

.site-title-and-tagline-area
{
	flex:1;
	padding:16px;
}

.site-title
{
	font-size:1.5rem;
	font-weight:bold;
}

.tagline
{
	font-size:1.2rem;
	font-style:italic;
}

.mobile-nav-link-area
{
	padding:16px;
}

.mobile-nav-link
{
	display:inline-block;
	border:0;
	width:32px;
	height:32px;
	background-image:url("images/burger.png");
	background-repeat:no-repeat;
	background-position:center;
	background-color:transparent;
	background-size:100%;
	color:transparent;
	text-decoration:none;
	cursor:pointer;
}

/* desktop nav */

.desktop-nav
{
	display:none;
}

/* main */

main
{
	background-color:#FFFFFF;
	padding:16px;
	box-shadow:inset -7px 0 9px -7px rgba(0, 0, 0, 0.4);
}

/* main h1 */

main h1
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
	display:block;
	color:#CE7014;
	font-size:1.5rem;
	border-bottom:solid 1px #CAAE90;
	border-top:solid 1px #CAAE90;
}

main h1:last-child
{
	margin-bottom:0;
}

/* main h2 */

main h2
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
	font-size:1.25rem;
	color:#CE7014;
	border-bottom:solid 1px #CAAE90;
}

main h2:last-child
{
	margin-bottom:0;
}

/* main h3 */

main h3
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
	font-size:1.115rem;
	color:#CE7014;
	border-bottom:solid 1px #CAAE90;
}

main h3:last-child
{
	margin-bottom:0;
}

/* main h4 */

main h4
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
	font-size:1.07rem;
	color:#CE7014;
	border-bottom:solid 1px #CAAE90;
}

main h4:last-child
{
	margin-bottom:0;
}

/* main h5 */

main h5
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
	font-size:1.03rem;
	color:#CE7014;
	border-bottom:solid 1px #CAAE90;
}

main h5:last-child
{
	margin-bottom:0;
}

/* main h6 */

main h6
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
	font-size:1.01rem;
	color:#CE7014;
	border-bottom:solid 1px #CAAE90;
}

main h6:last-child
{
	margin-bottom:0;
}

/* main paragraph */

main p
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
}

main p:last-child
{
	margin-bottom:0;
}

/* main links */

main a
{
	color:#70695A;
}

main a:active, main a:hover
{
	color:#8a8371;
}

/* main tables + cells */

main table
{
	border-collapse:collapse;
	border:solid 1px #CAAE90;
	padding:0;
	margin:0;
	margin-bottom:1rem;
}

main table:last-child
{
	margin-bottom:0;
}

main th
{
	border:solid 1px #CAAE90;
	padding:0.25rem;
}

main td
{
	border:solid 1px #CAAE90;
	padding:0.25rem;
}

/* main unordered list */

main ul
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
	margin-left:20px;
}

main ul:last-child
{
	margin-bottom:0;
}

/* main ordered list */

main ol
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
	margin-left:25px;
}

main ol:last-child
{
	margin-bottom:0;
}

/* side content */

aside
{
	background-color:#595959;
	color:#DBD7D1;
	margin-bottom:16px;
	padding-top:16px;
	padding-bottom:16px;
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
	font-size:0.9rem;
}

/* side section */

.side-section
{
	margin-bottom:16px;
}

.side-section:last-child
{
	margin-bottom:0;
}

.side-section-heading
{
	display:block;
	background-image:url("images/orange-background-heading.png");
	background-size:auto 100%;
	background-repeat:repeat-x;
	padding:0.5rem;
	color:#70695A;
	font-weight:bold;
	font-size:0.9rem;
}

.side-section-heading:last-child
{
	margin-bottom:0;
}

/* side section content */

.side-section-content
{
	padding:16px;
}

/* side section content paragraph */

aside p
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
}

aside p:last-child
{
	margin-bottom:0;
}

/* side section content links */

aside a
{
	color:#DBD7D1;
}

aside a:hover,
aside a:active
{
	color:#f5f0e8;
}

/* side section content unordered list */

aside ul
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
	margin-left:20px;
}

aside ul:last-child
{
	margin-bottom:0;
}

/* side section content ordered list */

aside ol
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
	margin-left:25px;
}

aside ol:last-child
{
	margin-bottom:0;
}

/* mobile menu */

.mobile-nav
{
	background-color:#595959;
	padding-top:16px;
	padding-bottom:16px;
	margin-bottom:16px;
}

.mobile-nav-heading
{
	display:flex;
	background-image:url("images/orange-background-heading.png");
	background-size:auto 100%;
	background-repeat:repeat-x;
	padding:0.5rem;
	color:#70695A;
	font-weight:bold;
	font-size:0.9rem;
}

.mobile-nav-heading-right
{
	flex:1;
	text-align:right;
}

.mobile-nav-heading-right a
{
	color:#70695A;
}

.mobile-nav-heading a:hover,
.mobile-nav-heading a:active
{
	color:#8a8270;
}

.mobile-nav-links
{
	padding:16px;
}

.mobile-nav-links a
{
	display:block;
	border-bottom:solid 1px #DBD7D1;
	padding-bottom:8px;
	color:#DBD7D1;
	margin-bottom:8px;
	text-align:center;
}

.mobile-nav-links a:last-child
{
	padding-bottom:0;
	border-bottom:0;
	margin-bottom:0;
}

.mobile-nav-links a:hover,
.mobile-nav-links a:active
{
	color:#f5f0e8;
}

/* mobile extra links */

.mobile-extra-links
{
	background-color:#595959;
	padding-top:16px;
	padding-bottom:16px;
	margin-bottom:16px;
	text-align:center;
}

.mobile-extra-links a
{
	display:inline-block;
	margin-left:8px;
	margin-right:8px;
	color:#DBD7D1;
}

.mobile-extra-links a:hover,
.mobile-extra-links a:active
{
	color:#f5f0e8;
}

/* footer */

footer
{
	background-image:url("images/menu-background.png");
	background-repeat:repeat-x;
	background-size:auto 100%;
	padding:0.5rem;
	text-align:center;
	color:#DBD7D1;
	margin-bottom:600px;
}

.footer-section
{
	margin-bottom:8px;
}

.footer-section:last-child
{
	margin-bottom:0;
}

footer a
{
	color:#DBD7D1;
}

footer a:hover,
footer a:active
{
	color:#f5f0e8;
}



/* === layout help styles === */

.layout-help-heading
{
	border:dashed 2px #008000;
	padding:4px;
	color:#008000;
	margin-bottom:1rem;
}

.layout-help-code
{
	border:dashed 1px #008000;
	color:#008000;
	padding:4px;
	margin-bottom:1rem;
	font-family: "Lucida Console", Monaco, monospace;
}

/* === desktop styles === */

@media (min-width:680px)
{
	body
	{
		padding:32px;
	}

	.wrap
	{
		max-width:1024px;
	}

	/* desktop extra links */

	.desktop-extra-links
	{
		display:block;
		background:url("images/menu-background.png");
		background-repeat:repeat-x;
		background-size:auto 100%;
		padding:8px 0px 12px 8px;
		text-align:right;
	}

	.desktop-extra-links a
	{
		margin-left:8px;
		margin-right:8px;
		color:#DBD7D1;
	}

	.desktop-extra-links a:hover,
	.desktop-extra-links a:active
	{
		 color:#f5f0e8;
	}
	
	/* mobile nav link (hide on desktop!) */

	.mobile-nav-link-area
	{
		display:none;
	}

	/* desktop nav */

	.desktop-nav
	{
		display:block;
		background:url("images/menu-background.png");
		background-repeat:repeat-x;
		background-size:auto 100%;
		padding:8px 8px 12px 0px;
		text-align:left;
	}

	.desktop-nav a
	{
		margin-left:8px;
		margin-right:8px;
		color:#DBD7D1;
	}

	.desktop-nav a:hover,
	.desktop-nav a:active
	{
		 color:#f5f0e8;
	}

	.desktop-columns
	{
		display:flex;
	}

	main
	{
		flex:1;
		background-color:#FFFFFF;
		margin-bottom:0;
	}

	aside
	{
		width:300px;
		margin-bottom:0;
	}

	.mobile-nav
	{
		display:none;
	}

	.mobile-extra-links
	{
		display:none;
	}

	footer
	{
		margin-bottom:0px;
	}
}