/* Global Styles */
	html { background: url(images/grid.png) 50% top; }
	body { background: url(images/background.png) no-repeat 50% top; }

	/* Anchor Glow */
		a.glow {
			color: #ccc;
			background: #29387b;
			transition: all 0.25s ease-out;
		}
		a.glow:hover,
		a.glow:focus {
			color: #e1e3ec;
			background: #349;
			transition: all 0.25s ease-out;
		}

	/* Sets page width */
		#navmenu,
		.page,
		#fineprint,
		.page-width {
			max-width: 75rem;
			margin: 0 auto;
		}

/* Gratipay */
	#gratipay-container {
		background: #151c3e url(images/background.png) no-repeat 50% 100%;
		color: #ccc;
		position: absolute;
		top: -16em;
		width: 100%;
		height: 16em;
		transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
		overflow: hidden;
		box-sizing: border-box;
		border-bottom: 0.18rem solid #000;
	}
	#gratipay-container section {
		margin: 0 auto;
		max-width: 75em;
	}
	#gratipay-container section:before {
		content: '';
		float: right;
		width: 25em;
		height: 16em;
		background: url(images/shambler.png) no-repeat 100% 0%/22em;
	}
	#gratipay-container section p {
		max-width: 30em;
	}
	#gratipay-container a {
		padding: 0.25em 1em 0.25em 4em;
		line-height: 2.5em;
		text-decoration: none;
		border-radius: 0.5em;
		border: 0.18rem solid #000;
		margin: 0 auto;
		display: inline-block;
		color: #ccc;
		background: #29387b url(images/logo-gratipay.svg) 0.5em 0 / 3em 3em no-repeat;
		transition: all 0.25s ease-out;
	}
	#gratipay-container a:hover,
	#gratipay-container a:focus {
		background: #349 url(images/logo-gratipay.svg) 0.5em 0 / 3em 3em no-repeat;
		transition: all 0.25s ease-out;
	}
	.megah {
		display: block;
		margin: 0;
		height: 7em;
		background: url(images/megah.png) no-repeat 50% 100% / 7em 7em;
	}
	#toggle {
		position: absolute;
		appearance: none;
		cursor: pointer;
		left: -100%;
		top: -100%;
		display: none;
	}
	#toggle + label {
		position: absolute;
		cursor: pointer;
		padding: 0 0 1em 0;
		width: 10em;
		border-radius: 0 0 0.75em 0.75em/0 0 0.75em 0.75em;
		border: 0.18em solid #000;
		border-top: 0;
		color: #fff;
		text-align: center;
		font: bold 1em verdana;
		cursor: pointer;
		transition: all 500ms ease;
		right: 12%;
		background: #29387b url(images/background.png) no-repeat 50% 10%;
	}
	#toggle + label:hover,
	#toggle + label:focus {
		color: #e1e3ec;
		background: #349 url(images/background.png) no-repeat 50% 10%;
		transition: all 0.25s ease-out;
	}
	#toggle + label:after {
		content:"Donate" 
	}
	.drop-container {
		transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
	}
	#toggle:checked ~ #gratipay-container {
		top: 0;
	}
	#toggle:checked ~ .drop-container {
		margin-top: 16em;
	}
	#toggle:checked + label {
		background: #29387b url(images/background.png) no-repeat 50% 10%;
	}
	#toggle:checked + label:hover,
	#toggle:checked + label:focus {
		background: #349 url(images/background.png) no-repeat 50% 10%;
	}
	#toggle:checked + label:after {		
		content:"Close"
	}

/* Radiant Logo */
	#banner {
		max-width: 1600px;
		margin: 0 auto;
	}
	#radiant {
		float: left;
	}
	#radiant a {
		display: block;
		max-width: 18em;
		height: 8em;
		background: url(images/logo-radiant.png) no-repeat;
		background-size: 100%;
		position: relative;
		left: 2%;
		/* hide h1 text */
			text-indent: 100%;
			white-space: nowrap;
			overflow: hidden;
	}

/* Nav Menu */
	#navmenu {
		clear: both;
		margin: 1em auto 0 auto;
	}
	#navmenu a,
	#navmenu a:visited {
		padding: 0.25em 0.5em;
		display: inline-block;
		color: #ccc;
		background: #29387b;
		text-decoration: none;
		border: 0.18em solid #000;
		border-bottom: 0;
		transition: all 0.25s ease-out;
	}
	#navmenu a:hover,
	#navmenu a:focus {
		color: #e1e3ec;
		background: #349;
		transition: all 0.25s ease-out;
	}

/* Page */
	.page {
		margin: 0 auto;
		border-top-right-radius: 16px;
		box-shadow: 0 2em 2em #000;
		background: #fff;
	}
	.page-header {
		position: relative;
		border-top-right-radius: 16px;
		background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0)), url(images/bg-geotechnic.jpg) 0 90% / 100% auto no-repeat;
		overflow: auto;
	}
	/* override - background */
		#installation .page-header {
			background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0)), url(images/bg-pom.jpg) 0 20% / 100% auto no-repeat;
		}
		#documentation .page-header {
			background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.5)), url(images/bg-mcsarges.jpg) 0 15% / 100% auto no-repeat;
		}
		#support .page-header {
			background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0)), url(images/bg-rustgrad.jpg) 0 70% / 100% auto no-repeat;
		}
		#developers .page-header {
			background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0)), url(images/bg-endurance.jpg) 0 20% / 100% auto no-repeat;
		}
	.page:after, .page-header:after {
		display: table;
		content: '';
		clear: both;
	}
	.page-header {
		margin: 0 0 2em 0;
	}
	.page-header h1 {
		margin: 1em 4%;
		color: #ccc;
		text-shadow: 0.1em 0.1em 0.05em #000;
	}
	.page-header ul {
		border: 1px solid black;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.page-header li {
		border: 1px solid black;
	}
	.page-header li a {
		margin: 0;
		padding: 0.5em;
		display: block;
		text-decoration: none;
		color: #ccc;
		background: rgba(41,56,123,0.75);
		transition: all 0.25s ease-out;
	}
	.page-header li a:hover {
		background: rgba(51,68,153,0.75);
		transition: all 0.25s ease-out;
	}
	.page-header p {
		margin-top: 0;
		color: #ccc;
	}
	.page-header p a { color: #78d; }

/* Fine Print */
	#fineprint {
		clear: both;
		float: none;
		margin: 0 auto;
		padding: 2em 0;
		color: #ccc;
		font-size: 0.7rem;
		background: #151c3e url(images/background.png) no-repeat left bottom;
	}
	#fineprint a, #fineprint a:visited, #fineprint a:hover { color: #78d; }
	#fineprint h1 { font-size: 1.25em; }
	#fineprint nav { margin-bottom: 1em; }
	#fineprint nav a { margin-right: 2em; }
	#fineprint small { font-size: 0.85em; }

/* Landing Page */
	/* About */
		#about {
			border-top-right-radius: 16px;
			background: #99a5a9 url(images/bg-lunaran.jpg) 0 0 / 100% auto no-repeat;
		}
		#about section {
			width: 60%;
			float: left;
			margin: 0 0 0 4%;
		}
		#about section h1 {
			color: #ccc;
			font-size: 2em;
			text-shadow: 0.1em 0.1em 0.05em #000;
		}
		#about section p {
			margin-top: 18.5em;
			padding: 1em;
			font-size: 1.15em;
			border-radius: 0.5em 0.5em;
			background: rgba(255,255,255,0.75);
		}
		#about aside {
			margin: 2em 0 0 0;
			width: 32%;
			float: right;
		}
		#about aside h1 {
			margin: 0;
		}
		/* displays radiant logo */
			#versions {
				background: url(images/apple-touch-icon.png) no-repeat 50% top;
				padding-top: 5.5em;
			}
		/* displays team image */
			#volunteer {
				background: url(images/team.png) no-repeat center top;
				background-size: contain;
				padding-top: 10em;
				margin-top: 2.5em;
			}
		/* Link Boxes */
			#versions a, #volunteer a {
				display: block;
				padding: 0em 1em;
				text-align: center;
				color: #ccc;
				border: 2px solid black;
				border-right: 0;
				border-radius: 0.5em 0 0 0.5em / 0.5em 0 0 0.5em;
				text-decoration: none;
				transition: all 0.25s ease-out;
				background: #29387b url(images/background.png) no-repeat 0 50%;
			}
			#versions h3, #volunteer h3 { color: #ccc; margin-bottom: 1em; }
			#versions p, #volunteer p { margin-top: 0; }
			#versions a:hover, #volunteer a:hover {
				background-color: #349;
				text-decoration: none;
				transition: all 0.25s ease-out;
			}

	/* Features */
		#features section {
			color: #eee;
			background: url(images/bg-geotechnic.jpg) no-repeat 0 90% / 100%;
		}
		#features div {
			display: inline-block;
			max-width: 30%;
			min-height: 22em;
			padding: 0 4%;
			background: rgba(0,0,0,0.75);
		}
		#features h3 {
			color: #eee;
			font-size: 1.5em;
			text-shadow: 0.1em 0.1em 0.05em #000;
			text-align: center;
		}
		#features a { color: #78d;	}
		#features p {
			-webkit-hyphens: auto;
			-o-hyphens: auto;
			hyphens: auto;
			text-align: justify;
		}
		#features p:after {
			display: block;
			margin: 1.5em auto 0 auto;
			content: '';
			height: 8em;
			width: 8em;
			background: url(images/logo-octocat.png) no-repeat 0 / 100%;
		}

		/* override */
			#features section:nth-child(2) {
				background: url(images/bg-rustgrad.jpg) no-repeat 0 70% / 100%;
			}
			#features section:nth-child(3) {
				background: url(images/bg-endurance.jpg) no-repeat 0 20% / 100%;
			}
			#features section:nth-child(2) p:after {
				background: url(images/logo-multiplatform.png) no-repeat 0 / 100%;
			}
			#features section:nth-child(3) p:after {
				background: url(images/logo-quakecon.png) no-repeat 0 / 100%;
			}
			#features section:nth-child(even) div {
				float: right;
				clear: both;
			}
			#features section:after {
				visibility: hidden;
				display: block;
				content: '';
				clear: both;
				height: 0;
			}

	/* Mission Statement */
		#mission {
			background: url(images/bg-3drad.png) no-repeat 50% 0 / 100%;
		}
		#news {
			overflow: auto;
		}
		#news time {
			font-size: 0.7rem;
			font-weight: bold;
		}
		#news p {
			margin-top: 0;
			font-size: 0.85rem;
		}

/* Downloads Page */
	/* Tab Menu */
		.tab-menu {
			max-width: 92%;
			float: none;
			list-style: none;
			padding: 0;
			margin: 0 auto;
		}
		/* Clears content after tab-menu */
		.tab-menu:after {
			content: '';
			display: table;
			clear: both;
		}
		.tab-menu input[type=radio] {
			display:none;
		}
		.tab-menu label {
			display: inline-block;
			cursor: pointer;
			margin: 0;
			padding: 0.5em 1em;
			font-weight: normal;
			color: #ccc;
			background: #29387b;
			border: 0.125em solid black;
			border-bottom: 0;
			transition: all 0.25s ease-out;
		}
		.tab-menu label:hover {
			background: #349;
		}
		.tab-content {
			position: relative;
			display: none;
			padding: 2em 4%;
			background: #0e132a url(images/background.png) no-repeat 100% 0%;
			border: 0.125em solid #000;
			border-top-right-radius: 1rem;
		}
		.tab-content * { color: #ccc; }
		.tab-content a { color: #78d; }
		.tab-content h1 {
			font-size: 2em;
			font-weight: bold;
			padding-left: 64px;
			max-height: 1.75em;
		}
		#tab-content1 h1 {
			background: url(images/logo-windows.png) 0 50% no-repeat; padding-right: 0.6em;
			background-size: contain;
		}
		#tab-content2 h1 {
			background: url(images/logo-macosx.png) 0 50% no-repeat; padding-right: 0.6em;
			background-size: contain;
		}
		#tab-content3 h1 {
			background: url(images/logo-linux.png) 0 50% no-repeat; padding-right: 0.6em;
			background-size: contain;
		}
		#tab-content4 h1 {
			background: url(images/logo-devbuild.png) 0 50% no-repeat; padding-right: 0.6em;
			background-size: contain;
		}
		/* Link Lists */
			.tab-content ul {
				list-style: none;
				padding: 0;
			}
			.tab-content ul li a {
				display: block;
				margin-bottom: 6px;
				padding: 1em;
				font-size: 1.25em;
				color: #e1e3ec;
				background: rgba(41,56,123,0.75) 90% 100%;
				border-left: 16px solid #29387b;
				border-radius: 4px;
				transition: all 0.25s ease-out;
			}
			.tab-content ul li a:hover {
				text-decoration: none;
				color: #fff;
				background: #349;
				background: rgba(51,68,153,0.75) url(images/icon-download.png) no-repeat 90% 15%;
				background-size: 6em 12em;
			}
			.tab-content ul li a:focus { text-decoration: none; }
			.tab-content ul li a:active { box-shadow: 0 1px 1px 0 #444 inset; }

		/*
			.tab-content * {
				animation: scale 0.7s ease-in-out;
			}
			@keyframes scale {
				0% { 
					transform: scale(0.9);
					opacity: 0;
				}
				50% {
					transform: scale(1.01);
					opacity: 0.5;
				}
				100% { 
					transform: scale(1);
					opacity: 1;
				}
			}
		*/

		[id^=tab]:checked + label {
			background: #78d;
			color: #fff;
		}
		#tab1:checked ~ #tab-content1,
		#tab2:checked ~ #tab-content2,
		#tab3:checked ~ #tab-content3, 
		#tab4:checked ~ #tab-content4 {
			display: block;
		}
		/*
			[id^=tab]:checked ~ div[id^=tab-content] {

			.tab-menu [id^="tab"]:checked ~ [id^="tab-content"] {
				display: block;
			}
		*/

	/* Download Notes */
		#dlnotes {
			margin: 0 4% 4em 4%;
			padding: 1em 4%;
			list-style: none;
			font-size: 0.9em;
			background: #29387b;
			border: 0.125rem solid #000;
			border-top: 0;
			border-bottom-right-radius: 1rem;
		}
		#dlnotes li {
			float: left;
			margin-right: 2em;
		}
		#dlnotes a { color: #78d; }