/*
<style>
Style Sheets
*/

/********************************************************************
***
***	nav-css.php is the navigation css for purplemoondesign.com
***	There are two distictive navs for mobile and tablet and larger
***	
***	Version 1.0
***	
***	Initial release: June 27, 2020
***	
***	Author: Thom Harrington of Kise Thomas 
***
**********************************************************************/ 

	
/*********************** Mobile Navigation ***************************/
	#nav	{
		display: flex;
		overflow: visible;
		position: fixed;
		top: 50px;
		right: 5vw;
		flex-direction: column;
		justify-content: flex-start;
		color: #E8D642;
		z-index: 100;  
		-webkit-user-select: none;
		user-select: none;
	}

	#nav input	{
		display: block;
		width: 40px;
		height: 32px;
		position: fixed;
		top: 40px;
		right: 4.5vw;
		cursor: pointer;
		opacity: 0; /* hide this */
		z-index: 1001; /* and place it over the hamburger */
		-webkit-touch-callout: none;
	}

	/*
	 * The following span defitions are just a quick hamburger
	 */
	#nav span
	{
		display: block;
		width: 33px;
		height: 4px;
		margin-bottom: 5px;
		position:relative;
		background: #E8D642;
		border-radius: 3px;
		z-index: 1;
		transform-origin: -8px 12px;
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  	background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  	opacity 0.55s ease;
	}

	#nav span:first-child
	{
		transform-origin: 0% 0%;
	}

	#nav span:nth-last-child(2)
	{
		transform-origin: 50% 50%;
	}

	/* 
	 * Transform the slices of hamburger
	 * into a crossmark.
	 */
	#nav input:checked ~ span
	{
		opacity: 1;
		transform: rotate(45deg) translate(-2px, -1px);
		background: #232323;
	}

	/*
	 * Hide the middle one.
	 */
	#nav input:checked ~ span:nth-last-child(3)	{
		opacity: 0;
	}

	/*
	 * Flip the last one in the other direction
	 */
	#nav input:checked ~ span:nth-last-child(2)	{
		transform: rotate(-45deg) translate(-2px, -1px);
	}
	
	/*
	 * Slide the navigation in from the right
	*/
	#nav input:checked ~ ul	{
		transform: translate(-60%, 5%);
	}

	/*
	 * Make this absolute positioned
	 * at the top right of the screen
	 */
	#menu	{
		position: absolute;
		width: 250px;
		margin: 0px 0 0 -50px;
		padding: 0px 50px 0 0;
		background-color: rgba(255, 0, 0, 0.6);
		list-style-type: none;
		-webkit-font-smoothing: antialiased;	  /* to stop flickering of text in safari */
		text-align: right;
		transform-origin: 0% 0%;
		transform: translate(300%, 5%);
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	}

	#menuSub	{
		position: absolute;
		width: 250px;
		margin: -100px 0 0 -50px;
		padding: 125px 50px 0 0;
		background-color: rgba(255, 0, 0, 0.6);
		list-style-type: none;
		-webkit-font-smoothing: antialiased;	/* to stop flickering of text in safari */
		transform-origin: 30% 0%;
		transform: translate(600%, 5%);
		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	}


	/*
	 * And let's slide it in from the right
	*/
	#nav input:checked ~ ul
	{
		transform: translate(-60%, 5%);
	}

/*********************** Table & Larger Navigation ***************************/
	
	@media (min-width: 48em) {

		#nav {
			display: flex;
			position: fixed;             	/* position and top adjusted in js */
			top: 11.0em;					/* change this value in hold-nav.js also */
			height: auto;
/*			right: 0;*/
			right: 7vw;
/*			margin: auto 5vw auto 5vw;*/
			text-align: justify;
			flex-direction: row;
			align-self: center;
			font-size: 1.0vw;
			width: 60vw;
			justify-content: flex-end;
/*			width: 30vw;*/
		}
		
				#nav a:hover, .dropdown:hover .dropbtn {
			background-color: rgba(255,0,0,0.6); /* rgba(174, 70, 80, .3);*/
		}

		#nav .active {
			background-color: rgba(255, 0, 0, 0.3);
		}
		
		/* Hide the hamburger menu when showing the traditional munu */
		#nav span{
			display: none;
		}

		#menu {
			display: inline-flex;
			transform-origin: unset;
			transform: none;
			transition: unset;
			width: max-content;
			margin: 0;
			padding: 0;
			background-color: transparent;
		}

		#menuSub
		{
			display: flex;
			transform-origin: unset;
			transform: none;
			transition: unset;
			width: 100vw;
			max-width: max-content;
			margin: 0;
			padding: 0;
			border-bottom-style: groove;
			border-top-style: groove;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,<1></1>);
			background-color: rgba(23,2,36,0.8);
			top: 2.0em;
/*			left: -15em;*/
			right: 0;
			text-align: right;
			align-items: center;
			visibility: hidden;
		}
		
		#menu li{
			display: flex;
		}

		/*	display the secondardy nav on hover of the li on the primary */
		#nav ul li:hover > ul,
		#nav ul li > ul:hover,
		#nav ul li ul:hover li 	/* and keep it displayed when overing the secondary nav */
		{
/*			display: inline-flex;*/
/*			left: -15em;*/
			visibility: visible;
		}

		ul li ul li {
			clear: both;
			width: 100%;
		}

		#menu a {
			float: left;
			width: inherit;
			color: inherit;
			text-align: center;
			padding: .3em 1.3em;
			text-decoration: none;
			font-size: 1.2vw;
		}

		#menuSub a {
			font-size: 1.0vw;
		}
		
		#logOut {
			position: absolute;
			top: -2.0vw;
			color: inherit;
			opacity: 50%;
		}
		
		
		#adminMenu {
			position: absolute;
			top: -3.0vw;
			color: inherit;
			opacity: 50%;
		}
	} /* end @ media (min-width: 48em) */