/* ----------------styles for navigation ----------------*/

	#nav{ 
		position: absolute;
		top: 100px; right: 8px;
		/*to make it at the right bottom*/
		
		width: 600px;

		background-color: rgba(50,50,220,0.2);
		/*green*/

		/*outline: 2px #FFFF00 solid; */
		/*yellow*/
		
		
		font-size: 20px;
		font-weight: bold;

		z-index: 2;		
	}

	#nav ul {
		margin: 0px;
		/*to make the ul element in the center*/

		list-style: none;
		/*to make the bullet in front of li element to disappear*/

		overflow: hidden;
	}


	#nav > ul > li{
		float: left;
		/*outline:3px #FF0080 solid; */
		margin-left: 20px; 
	}


	#nav a {
		display: block;
		text-decoration: none;
		padding: 0.2em;
		color: green;
		color: black;
	}



	#nav  a:visited {
		text-decoration: none;
	}

	#nav  li a:hover {
		color: white;
		background-color: rgba(21,0,0,0.5);
		text-decoration: none;
		
	}

	#active > a {
		color: white; 
		background-color: rgba(21,0,0,0.5);
		text-decoration: none;
	}


	/*_________Dropdown menu_________*/



	#nav > ul > li > ul{	
		position: absolute;
		overflow: visible;
		padding: 0px;
		margin: 0px;	
		
		
		width: 80px;


		background: white url('pic/drop-down_menu_bg') repeat-y center;

		outline:  2px black solid;
		/*for testing purpose*/
		
		display: none; 
		/*hide, and only display hovered.*/

	}



	#nav > ul > li > ul:hover{
		
		display: block;
		background: white url('pic/drop-down_menu_bg') repeat-y center;
	}



	#nav > ul > li > ul > li > a {
		
		font-size: 14px;
		
		/*background-color: orange;*/
		/*outline:  2px blue solid;*/		
	}


	#nav li:hover ul {
		
		display: block;		
		
	}