/* COLOR */

nav, nav a 			{ color:		   #FFFFFF;}
:root{
--h: 120 ;
--s: 30% ;
--l: 29% ;
}

nav, nav li										{ background-color: hsl( var(--h), var(--s), var(--l));}
nav li:hover, nav li label:hover				{ background-color: hsl( var(--h), var(--s), calc(var(--l) - 10%)) ;}
nav li a:active,nav li label:active 			{ background-color: hsl( var(--h), var(--s), calc(var(--l) - 15%)) ;}

nav li li										{ background-color: hsl( calc(var(--h) - 20), calc(var(--s) + 15%), calc(var(--l) - 5%));}
nav li li:hover, nav li li label:hover			{ background-color: hsl( calc(var(--h) - 20), calc(var(--s) + 15%), calc(var(--l) - 15%));}
nav li li a:active,nav li li label:active		{ background-color: hsl( calc(var(--h) - 20), calc(var(--s) + 15%), calc(var(--l) - 25%));}

nav li li li 									{ background-color: hsl( calc(var(--h) - 40), calc(var(--s) + 30%), calc(var(--l) - 10%));}
nav li li li:hover, nav li li li label:hover	{ background-color: hsl( calc(var(--h) - 40), calc(var(--s) + 30%), calc(var(--l) - 20%));}
nav li li li:active,nav li li li label:active	{ background-color: hsl( calc(var(--h) - 40), calc(var(--s) + 30%), calc(var(--l) - 30%));}


@media all and (max-width : 640px) {nav li + li, nav > label ~ ul {border-top: 4px ridge #d3dc3299; }}



/* PERFECT DELTAS */


	nav .toggle 							{ display: 												none; }
	
	nav .menu li 							{ width:		auto;				position:relative; }
	
	nav a:after								{ content: 			'\00a0\25BE'; }
	
	nav .menu ul a:after					{ content: 			'\00a0\25B8'; }

	nav li:hover > ul 						{ display:inherit; }

	nav .menu ul 							{ margin:0px;position:absolute; }

	nav .menu 								{display:block;}

	nav .menu > li > ul > li 				{text-align:right}

	nav .menu > li > ul > li  ul 			{text-align:left}


@media all and (max-width : 640px) {
	nav .toggle 							{ display: 												block; }
	
	nav .menu li 							{ width: 		100%; 				position:static; }
	
	nav a:after								{ content:			''; } 
	
	nav .menu ul a:after					{ content: 			''; }

	nav li:hover > ul 						{ display:none; }	
	
	nav .menu ul 							{ margin:10px;position:static; }

	nav .menu								{display:none;}

	nav .menu > li > ul > li 				{text-align:center}

	nav .menu > li > ul > li > ul			{text-align:center}
}






/* CROSS-PLATFORM FORMATTING */

[id^=drop] {display:none;}

nav .menu a:only-child:after { content: ''; }

nav .menu ul a:only-child:after { content: '\00a0\00a0\2800'; }





nav {
	z-index:100;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav .menu { 
	width:100%; 
	float: left;
}

nav .menu ul {
	display: none;
}

nav .menu ul ul {
	left:100%;
	top: 0px;
}

nav .menu li {
	float:inherit;
}


nav a, .toggle {
	padding: 0 20px;
	font-size: 16px;
	line-height: 40px;
	text-decoration:none;
	white-space:nowrap;
	display:block;
}

nav .menu ul ul a:only-child:after { content: ''}


@media all and (max-width : 640px) {
	
	nav, nav li, nav a {
		text-overflow:ellipsis;
		overflow:hidden;
		text-align:center;
	}

	nav [id^=drop]:checked + ul { 
		display: block; 
	}
	
	
	



}