$header-size: 50px;
$menu-color: mix($text-color,$black);

.jPanelMenu {
	header.main {
		@include linear-gradient($blue, mix($blue, $blue-dark, 25%));
		@include box-shadow(0,1px,5px,rgba($black,.5));
		position: fixed;
		top: 0;
		width: 100% - ($horizontal-space-xl*2);
		max-width: none;
		height: $header-size;
		margin: 0;
		padding: 0 $horizontal-space-xl;
		border-bottom: 1px solid $blue-dark;
		z-index: 10;

		.logo a, .menu-trigger {
			display: block;
			height: 100%;
			text-shadow: 0 -1px 1px $black;
			line-height: $header-size;
			color: $white;
		}

		.logo {
			@include type-medium;
			float: none;
			width: 60%;
			margin: 0 auto;

			a {
				position: static;
			}

			a:before { display: none !important; }
		}

		.menu-trigger {
			position: absolute;
			top: 0;
			left: 0;
			padding: 0 $vertical-space*1.5;
			font-size: 1.2em;
			line-height: $header-size*1.15;

			&:active { text-shadow: 0 -1px 1px $black, 0 0 50px $white; }
		}

		nav {
			text-indent: -9999px;
		}
	}

	.content {
		padding-top: $vertical-space-xl;

		section.intro h2 {
			padding-top: 0;
		}

		h2 {
			margin-top: 0;
			padding-top: $header-size*1.25;
		}

		.spec, h3 {
			margin-top: 0;
			padding-top: $vertical-space-xl;
		}

		.spec h3 { padding-top: 0; }

		.jPM-specific {
			display: block;
		}
	}
}

#jPanelMenu-menu {
	background: $menu-color;

	ul {
		border-bottom: 1px solid lighten($menu-color,5%);
	}

	li a {
		@include linear-gradient(lighten($menu-color,1%), darken($menu-color,1%));
		@include type-medium;
		display: block;
		padding: $vertical-space-small $horizontal-space-large;
		border-top: 1px solid lighten($menu-color,5%);
		border-bottom: 1px solid darken($menu-color,5%);
		text-decoration: none;
		text-shadow: 0 -1px 2px $black;
		color: $white;

		&:hover, &:focus { @include linear-gradient(lighten($menu-color,5%), darken($menu-color,1%)); }
		&:active {
			@include linear-gradient(lighten($menu-color,1%), darken($menu-color,5%));
			@include box-shadow(0,2px,7px,$black,true);
			border-top-color: darken($menu-color,10%);
			padding-top: $vertical-space-small*1.1;
			padding-bottom: $vertical-space-small*.9;
		}
	}
}

.jPanelMenu-panel {
	@include box-shadow(0,0,25px,$black);
}