/*

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:#588194;
	background-image:url("images/background.png");
	margin:0;
	padding:0;
	font-family:verdana, arial, sans-serif;
}

/* wrap */

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

/* desktop extra links */

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

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

header
{
	border-top:solid 3px #48525B;
	display:flex;
	flex-direction:row;
	align-items:center;
	background:url("images/header-background.jpg");
	background-size:100% 100%;
	border-bottom:solid 3px #48525B;
}

.site-title-and-tagline-area
{
	flex:1;
	padding-top:32px;
	padding-bottom:32px;
	padding-left:16px;
	padding-right:16px;
	color: #555555;
}

.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;
	margin:16px;
}

/* main h1 */

main h1
{
	padding-top:0;
	padding-bottom:4px;
	padding-left:0;
	padding-right:0;
	margin:0;
	margin-bottom:1rem;
	display:block;
	color:#536C71;
	font-size:1.5rem;
	border-bottom:solid 10px #DDDDDD;
}

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

/* main h2 */

main h2
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
	font-size:1.25rem;
	color:#536C71;
}

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

/* main h3 */

main h3
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
	font-size:1.115rem;
	color:#536C71;
}

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

/* main h4 */

main h4
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
	font-size:1.07rem;
	color:#536C71;
}

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

/* main h5 */

main h5
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
	font-size:1.03rem;
	color:#536C71;
}

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

/* main h6 */

main h6
{
	padding:0;
	margin:0;
	margin-bottom:1rem;
	font-size:1.01rem;
	color:#536C71;
}

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:#3B5D77;
}

main a:active,
main a:hover
{
	color:#668FA3;
}

/* main tables + cells */

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

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

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

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

/* main unordered list */

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

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;
}

/* main layout help heading */

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

/* main layout help code */

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

/* side content */

aside
{
	background-color:#EAF2F5;
	color:#555555;
	font-size:0.9rem;
	margin:16px;
	padding:16px;
}

/* side content heading */

.side-section-heading
{
	color:#586B7A;
	font-weight:bold;
	font-size:0.9rem;
	margin-bottom:0.9rem;
}

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

/* side content paragraph */

aside
{
	font-size:0.9rem;
}

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

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

/* side content links */

aside a
{
	color:#3B5D77;
}

aside a:hover,
aside a:active
{
	color:#668FA3;
}

/* side content unordered list */

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

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

/* side 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:rgb(120,152,172);
	background-image:linear-gradient(180deg, #53748D 0%, #3B5D77 100%);
	border-top:solid 3px #41637D;
	border-bottom:solid 3px #41637D;
	padding-top:8px;
	padding-right:16px;
	padding-bottom:32px;
	padding-left:16px;
	margin-bottom:16px;
}

/* mobile menu links */

.mobile-nav a
{
	color:#DBD7D1;
}

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

.mobile-nav-heading
{
	display:flex;
	background-size:auto 100%;
	background-repeat:repeat-x;
	padding:0.5rem;
	color:#FFFFFF;
	font-weight:bold;
	font-size:0.9rem;
}

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

.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:rgb(120,152,172);
	background-image:linear-gradient(180deg, #53748D 0%, #3B5D77 100%);
	border-top:solid 3px #41637D;
	border-bottom:solid 3px #41637D;
	padding-top:8px;
	padding-right:16px;
	padding-bottom:32px;
	padding-left:16px;
	margin-bottom:16px;
}

.mobile-extra-links
{
	background-color:rgb(120,152,172);
	background-image:linear-gradient(180deg, #53748D 0%, #3B5D77 100%);
	border-top:solid 3px #41637D;
	border-bottom:solid 3px #41637D;
	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-color:#7797AD;
	background-image:linear-gradient(180deg, #7797AD 0%, #5A819A 100%);
	padding-top:22px;
	padding-bottom:8px;
	padding-left:8px;
	padding-right:8px;
	text-align:center;
	color:#4D5760;
	font-family:arial, sans-serif;
	font-size:0.9rem;
	margin-bottom:600px;
}

.footer-website-owner
{
	text-align:center;
	margin-bottom:16px;
}

.footer-original-author
{
	text-align:right;
	margin-bottom:8px;
}

.footer-original-author a
{
	padding-left:16px;
	padding-right:16px;
	border-right:solid 1px #4D5760;
}

.footer-original-author a:last-child
{
	border-right:0;
	padding-right:0;
}

.footer-scott
{
	margin-bottom:0;
	text-align:right;
}

footer a
{
	color:#4D5760;
}

footer a:hover,
footer a:active
{
	color:#66CC00;
}

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

@media (min-width:680px)
{
	.wrap
	{
		max-width:1024px;
	}

	/* desktop extra links */

	.desktop-extra-links
	{
		display:block;
		background-color:rgb(120, 152, 172);
		background-image:linear-gradient(180deg, rgba(120, 152, 172, 1) 0%, rgba(90, 129, 154, 1) 100%);
		padding:0.5rem;
		padding-top:2rem;
		font-family:arial, sans-serif;
		border-bottom:solid 3px #48525B;
		text-align:right;
	}

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

	.desktop-extra-links a:hover,
	.desktop-extra-links a:active
	{
		color:#3B5D77;
	}

	/* mobile nav link (hide on desktop!) */

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

	/* desktop nav */

	.desktop-nav
	{
		display:flex;
	}

	.desktop-nav-links
	{
		display:flex;
	}

	.desktop-nav-links
	{
		display:flex;
	}

	.desktop-nav a,
	.desktop-nav-spacer
	{
		background-color:rgb(120,152,172);
		background-image:linear-gradient(180deg, #53748D 0%, #3B5D77 100%);
		border-top:solid 6px #41637D;
		padding-top:8px;
		padding-right:16px;
		padding-bottom:32px;
		padding-left:16px;
	}

	.desktop-nav a
	{
		color:#FFFFFF;
	}

	.desktop-nav-spacer
	{
		flex:1;
	}

	.desktop-nav a:hover,
	.desktop-nav a:active
	{
		border-top:solid 6px #455660;
		background-color:#4A5C6A;
		background-image:none;
	}

	.desktop-columns
	{
		display:flex;
		padding-bottom:16px;
	}

	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;
	}
}