﻿/* Navigation
---------------------------------------------- */
nav {
	width: 100%;
}

nav ul {
	padding: 0;
	margin: 0;
}

nav ul li a {
	display: block;
	text-decoration: none;
	color: #CCC;
	padding: 0.5rem;
}

nav ul li a:hover,
nav ul li a:focus {
	color: #FFF;
}
nav ul li a.disabled:hover,
nav ul li a.disabled:focus {
	color: #CCC;
}

/* Menu decoration
---------------------------------------------- */

#nav li#back, #jump {
	display: none;
}

/* =Mobile Nav */
/*ref. Aaron Gustafson's "Build a smart mobile navigation without hacks"
<http://www.creativebloq.com/netmag/build-smart-mobile-navigation-without-hacks-6126265>
<http://web.archive.org/web/20121005074708/http://www.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks>
*/

@media screen and (max-width: 30em) { /*480*/

	/*Header*/
	header nav {
		/*padding-right: 3.5rem;*/
	}

	header nav li a {
		border-bottom: 1px solid currentColor;
	}

	/* Menu show/hide functionality */
	#top {
		border-bottom: 1px solid;
	}

	#jump {
		display: block;
		height: 3rem;
		width: 3rem;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1001;
		font-size: smaller;
		/*text-indent: -999rem;*/
		text-align: center;
		/*border: 1px solid;
		border-width: 0 0 1px 1px;*/
		padding: 0;
		cursor: pointer;
		color: #912680;
		text-decoration: none;
	}

	#jump .icon-menu {
		font-size: 250%;
	}

	body:not(:target) #nav {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1000;
		outline: 0;
		/*padding-top: 54px;*/
		margin: 0;
	}

	body:not(:target) #nav a {
		height: 0;
		line-height: 0;
		border-bottom-width: 0;
		overflow: hidden;
		padding: 0 1em;
	}

	body:not(:target) #nav:target {
		z-index: 1001;
	}

	body:not(:target) #nav:target a {
		height: 3rem;
		line-height: 3rem;
		position: relative;
		z-index: 1;
		border-bottom-width: 1px;
		-webkit-transition: height 0.25s, line-height 0.25s;
		-moz-transition: height 0.25s, line-height 0.25s;
		-ms-transition: height 0.25s, line-height 0.25s;
		-o-transition: height 0.25s, line-height 0.25s;
		transition: height 0.25s, line-height 0.25s;
	}

	body:not(:target) #nav:target #back {
		display: block;
		/*position: absolute;*/
	}

	body:not(:target) #nav:target #back a {
		display: block;
		height: auto;
		position: absolute;
		top: -101rem;
		bottom: -101rem;
		left: 0;
		right: 0;
		line-height: 1;
		text-indent: -999rem;
		border: 0;
		background: transparent;
		z-index: 0;
	}
}

@media only screen and (min-width: 30em) { /*480*/
	nav li {
		display: inline-block;
		vertical-align: top;
	}
	nav .major li {
		width: 50%;
		border-bottom: 1px solid #FFF;
		margin-right: -0.188rem;
	}

/*	header {
		border-top: 2.50rem #2B2B2B solid;
	}
*/
	nav .minor {
		/*width: 100%;*/
		position: absolute;
		top: 0;
		right: 0;
		/*left: 0;*/
		margin-top: -2.50rem;
	}

		nav .minor a {
		line-height: 1;
		color: #FFF;
		background-color: #646464;
		border: 1px #2B2B2B solid;
		border-collapse: collapse;
		padding: 0.688rem 1.375rem 0.750rem;
		margin-left: -0.200rem;
		margin-right: -0.200rem;
	}

	nav .minor li a:hover,
	nav .minor li a:focus {
		color: #2B2B2B;
		background-color: #E4E4DD;
		background-color: rgba(255,255,255,0.75) ;
		/*border-color: #646464;*/
	}

	footer nav ul li {
		width: 19%;
		/*border-left: 1px solid #DADAD1;*/
		margin-bottom: 0.5em;
	}

	footer nav ul li:first-child {
		border-left: 0;
	}

	footer nav ul li a {
		padding-top: 0;
		padding-bottom: 0;
	}

}

@media only screen and (min-width: 48em) { /*768*/
	nav {
		display: table;
		width: 100%;
	}

	nav ul {
		display: table-row;
	}

	nav li {
		display: table-cell;
		line-height: 1;
		text-align: center;
		/*vertical-align: middle;*/
	}

	/* Primary
	---------------------------------------------- */

	header nav #nav {
		position: static
	}
	nav .major li {
		width: auto;
		border-right: 1px #FFF solid;
		border-bottom: 0;
		/*border-top-left-radius: 0.313rem;
	border-top-right-radius: 0.313rem;*/
		-webkit-border-radius: 0.313rem 0.313rem 0 0;
		-moz-border-radius: 0.313rem 0.313rem 0 0;
		border-radius: 0.313rem 0.313rem 0 0;
	}
	nav .major li:nth-last-child(2) {
		border-right: none;
	}
	nav .major li a {
		padding: 0.688rem 0.5rem 0.750rem;
		/*min-height: 100%;*/
		/*word-wrap: break-word;*/
	}

	/* Footer
	---------------------------------------------- */
	footer nav {
		background-color: transparent;
		margin-top: 1em;
		margin-bottom: 1em;
	}

	footer nav ul {
		margin-bottom: 0.5em;
	}

	/*footer nav ul li:before {
	content: "|";
	color: #DADAD1;
}
footer nav ul li:first-child:before {
	content: "";
}

.lt-ie8 footer nav ul li {
	padding-right: 1em;
	padding-left: 1em;
	border-left: 1px solid #DADAD1;
}
.lt-ie8 footer nav ul li:first-child {
	border-left: 0;
}
*/
	footer nav ul li {
		width: auto;
		border-left: 1px solid #DADAD1;
	}
	footer nav li a {
		/*display: inline-block;*/
		/*color: #DADAD1;*/
		/*padding: 0;*/
	}

	/*footer nav li a:hover {
		color: #3CC78B;
	}*/
}

/* In page nav/pagination
---------------------------------------------- */
.in-page-container {
	margin-top: 2rem;
	margin-bottom: 1rem;
}
.in-page {
	margin-bottom: 0.25rem;
}

.in-page a:link,
.in-page a:visited,
.in-page .disabled {
	display: block;
	min-width: 2rem;
	/*font-weight: normal;*/
	text-decoration: none;
	background-color: #F5F5F5;
	border: 1px solid #EBEBEB;
	padding: 0.5rem;
	margin-left: 0.25rem;
}

.in-page a:hover {
	color: #912680;
	background-color: #fbeef9;
	border: 1px solid #F0C6E9;
}

.in-page .disabled {
	color: #D7D7D7;
	cursor: default;
}

/* Button groups
---------------------------------------------- */

.button-group {
	width: 100%;
}

.button-group ul {
	list-style: none;
	line-height: 1;
	padding: 0;
	margin: 0;
}

@media only screen and (min-width: 48em) { /*768*/
	.button-group ul li {
		display: inline-block;
	}
}
.button-group .spread li {
	width: 48%;
	margin: 0 4% 1rem 0;
}

.button-group .spread li:nth-of-type(even) {
	margin-right: 0;
}

.button-group .spread .button {
	width: 100%;
	margin: 0;
}
