/**
 * Main template CSS for Northern Greenhouse
 */

body {
	height: 100%;
	overflow-x: hidden;
}

/* primary blocks */
header, main, footer {
	display: block;
	font-size: 0px; /* collapse spacing */
}

/* allow simple bolding and italicizing */
b { font-weight: bold; }
i { font-style: italic; }
u { text-decoration: underline; }

/* centering blocks */
div.centering {
	display: block;
	margin: auto;
	padding: 0px 25px 0px 25px;
	max-width: 1150px;
}

/* main header */
header {
	position: fixed;
	z-index: 100;

	width: 100%;
	height: 95px;
	left: 0px;
	top: 0px;

	background-color: white;
	border-bottom: 10px solid rgb(84,187,194);
	font-size: 0px; /* collapse spacing */
	box-shadow: 0px 20px 30px rgba(0,0,0,.25);

	transition: all 0.2s linear 0s;
}

	/* header when collapsed */
	header.collapsed {
		height: 50px;
		background-color: #08542E;
		border-bottom: 5px solid white;

		/* border-bottom: 5px solid rgb(84,187,194); */
	}

	/* main title */
	header > .centering > a#title {
		display: inline-block;
		position: relative;
		width: 400px;
		margin-top: 26px;

		text-align: left;
		font-family: 'latolight', Lato Light;
		font-size: 35px;
		color: rgb(8,84,46);
		text-decoration: none;
		white-space: nowrap;

		transition: all 0.2s linear 0s;
	}

		/* browser-specific adjustments */
		header.is-browser-chrome:not(.collapsed) > .centering > a#title {
			font-size: 38px;
		}

		/* title collapsed */
		header.collapsed > .centering > #title {
			color: white;
			font-size: 30px;
			margin-top: 10px;
		}


/* main */
main {
	margin-top: 105px;
	transition: margin-top 0.2s linear 0s;
}

	/* main with header collapsed */
	main.collapsed {
		margin-top: 55px;
	}


/* footer */
footer {
	margin-top: 40px;

	background: linear-gradient(top, rgb(8,84,46) 0px, rgb(8,84,46) 125px, rgb(134, 177, 145) 125px, rgb(204,255,204) 126px);
	background: -moz-linear-gradient(top, rgb(8,84,46) 0px, rgb(8,84,46) 125px, rgb(134, 177, 145) 125px, rgb(204,255,204) 126px);
	background: -webkit-linear-gradient(top, rgb(8,84,46) 0px, rgb(8,84,46) 125px, rgb(134, 177, 145) 125px, rgb(204,255,204) 126px);
	background: -o-linear-gradient(top, rgb(8,84,46) 0px, rgb(8,84,46) 125px, rgb(134, 177, 145) 125px, rgb(204,255,204) 126px);
	background: -ms-linear-gradient(top, rgb(8,84,46) 0px, rgb(8,84,46) 125px, rgb(134, 177, 145) 125px, rgb(204,255,204) 126px);
	height: auto;

	clear: both;
}

	/* centering block */
	footer > .centering {
		padding: 0px;
		margin: 0px auto 0px auto;
	}

		/* greenhouse graphic */
		footer > .centering > img#sunshine-greenhouse-logo {
			float: right;
			width: 315px;
			height: 168px;
			margin: 0px 10px 0px 0px;
			vertical-align: top;
		}

		/* vertical positioning */
		footer > .centering > #v-positioning {

			/* because CSS is dumb */
			display: table-cell;
			vertical-align: middle;

			width: auto;
			height: 125px;
			padding: 0px 50px 0px 50px;
		}

			/* bottom nav and footnotes */
			footer > .centering > #v-positioning > nav,
			footer > .centering > div#footnotes {
				position: relative;
				text-align: center;
			}

			/* bottom nav */
			footer > .centering > #v-positioning > nav {
				display: inline-block;
			}

				/* bottom nav links */
				footer > .centering > #v-positioning > nav > a {
					display: inline-block;
					padding: 10px;

					font-family: 'latoregular';
					font-size: 17px;
					color: rgba(255,255,255,.85);
					text-decoration: none;
				}

					/* hover on bottom nav links */
					footer > .centering > #v-positioning > nav > a:hover {
						text-decoration: underline;
					}

		/* footnotes */
		footer > .centering > div#footnotes {
			width: 100%;
			padding: 5px 0px 20px 0px;

			font-family: 'latolight';
			font-size: 14px;
			color: rgba(0,0,0,.75);
		}

			/* footnote elements */
			footer > .centering > div#footnotes > * {
				display: inline-block;
				margin: 15px 10px 0px 10px;
			}

			/* footnote links */
			footer > .centering > div#footnotes > a {
				color: rgba(0,0,0,.75);
				text-decoration: none;
			}