#nav {
	width: 100%;
	position: relative;
	font-family: font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	/* position: absolute; I think this is to position it in the browser window -- not needed for WH
	top: 25%;
	left: 50%;
	margin-left: -30em; */ /* 30 480 */
}

	#nav > a {
		display: none;
	}

	#nav li {
		position: relative;
		margin-bottom: 0; /* to counteract common sitewide style */
	}
		#nav li a {
			color: #258;
			display: block;
		}
		#nav li a:active {
			background-color: #bbb !important;
		}

	#nav span:after /* this adds a little down arrow after the nav text */ {
		width: 0;
		height: 0;
		border: 0.313em solid transparent; /* 5 */
		border-bottom: none;
		border-top-color: #ccc;
		content: '';
		vertical-align: middle;
		display: inline-block;
		position: relative;
		right: -0.313em; /* 5 */
	}

	/* first level */

	#nav > ul {
		list-style-type: none; /***/
		height: 3.75em; /* 60 */
		background-color: #fff;
	}
		#nav > ul > li {
			width: 20%;
			height: 100%;
			float: left;
		}
		#nav > ul > li.sh { width: 18%; }
		#nav > ul > li.lo { width: 24%; }
		
			#nav > ul > li > a {
				height: 36px; /* 100% */
				font-size: 1em; /* 1.5em;  24 */
				line-height: 1.2em; /* 2.5em 60 (24) */
				text-align: center;
				padding: 10px 8px 9px 8px;
			}
				#nav > ul > li:not( :last-child ) > a {
					/* border-right: 1px solid #ccc; */
				}
				#nav > ul > li:hover > a,
				#nav > ul:not( :hover ) > li.active > a {
					background-color: #eee;
					text-decoration: none; /***/
				}

		/* second level */

		#nav li ul {
			list-style-type: none; /***/
			text-transform: none; /***/
			font-weight: normal; /***/
			background-color: #eee;
			margin: 0;
			display: none;
			/*position: absolute;
			top: 100%;*/
		}
			#nav li:hover ul {
				display: block;
				left: 0;
				right: 0;
			}
				#nav li:not( :first-child ):hover ul {
					left: -1px;
				}
				#nav li ul a {
					font-size: 0.9em; /* 20 */
					line-height: 1.1em;
					border-top: 1px solid #ccc;
					padding: 0.5em; /* 15 (20) */
				}
					#nav li ul li a:hover,
					#nav li ul:not( :hover ) li.active a {
						background-color: #ddd;
						text-decoration: none; /***/
					}

@media only screen and ( max-width: 868px ) {

	#nav {
		width: 100%;
		position: static;
		margin: 0;
	}
}

@media only screen and (max-width : 480px) {

	/*html {
		font-size: 75%; 
	}*/

	#nav {
		position: relative;
		top: auto;
		left: auto;
	}
		#nav > a {
			/* if hamburger, these are background styles * width: 3.125em; /* 
			height: 3.125em; text-align: left; text-indent: -9999px; background-color: #555; position: relative;*/
		
			width: 100%;
			color: #fff;
			font-size: 1.2em; 
			font-weight: bold;
			text-align: center;
			padding: 12px 0;
			background-color: #555;
			position: relative;
		}
				
		#nav > a:hover { background-color: #666; text-decoration: none; }
			/* if hamburger, these are horiz lines inside * #nav > a:before,
			#nav > a:after {
				position: absolute;
				border: 2px solid #fff;
				top: 35%;
				left: 25%;
				right: 25%;
				content: '';
			}
			#nav > a:after {
				top: 60%;
			}*/

		#nav:not( :target ) > a:first-of-type,
		#nav:target > a:last-of-type {
			display: block;
		}

	/* first level */

	#nav > ul {
		height: auto;
		display: none;
		position: relative;
		margin: 0;
		 /*left: 0;
		right: 0;
		top: 4.5em; to push down the menu below the show/hide */
	}
		#nav:target > ul {
			display: block;
		}

		#nav > ul > li {
			width: 100%;
			float: none;
		}
		#nav > ul > li.sh { width: 100%; }
		#nav > ul > li.lo { width: 100%; }
		
			#nav > ul > li > a {
				height: auto;
				text-align: center;
				padding: .8em; /* 0 0.833em 20 (24) */
			}
			#nav > ul > li > a:hover {
				background-color: #fff;
			}
				#nav > ul > li:not( :last-child ) > a {
					border-right: none;
					border-bottom: 1px solid #ccc;
				}

		/* second level */

		#nav li ul {
			position: static;
			padding: 0; /* 20 */
			margin: 0;
			/*padding-top: 0;*/
		}
			#nav li ul li a {
				height: auto;
				text-align: center;
				padding: .5em; /* 0 0.833em 20 (24) */
				border-top: none;
				border-bottom: 1px solid #ccc;
			}
}