/* styles for dropdown menu */
/* this is the overall div the whole menu is in */
#navi { margin: 0px auto; width: 770px;
padding-left: 4px;}

/* this is the main ul that the entire list of navigation is build within */
#nav {
	margin: 0px auto;
	padding: 7px 6px 0px 0px;
	line-height: 100%;
	border-radius: 2em;
    border: solid 1px #6d6d6d;
    background-color: hotpink;
}

#nav li {
	margin: 0 5px 0 10px;
	padding: 0 0 8px;
	float: left;
	position: relative;
	list-style: none;}
        
 /* main level links */
#nav a:link, #nav a:visited {
	font-weight: bold;
	color: #e7e5e5;
	text-decoration: none;
	display: block;
	padding:  8px 25px;
	margin: 0;
	border-radius: 1.6em; 
    background: red;
    border-top: solid 1px #000;
}

/* main level link hover and the class for the current page */
#nav .current a, #nav li a:hover  {
	background: turquoise; 
	color: #444;
	border-top: solid 1px #f8f8f8;
	}
        
/* sub levels link  */  
    #nav ul li a:hover, #nav li:hover li a {
	background: #4ad;
        /* blue */
	border: none;
	color: #fff;
    border-top: solid 1px yellow;
    border-radius: 0 0;
        }
        
/* sub level hover */        
#nav ul li a:hover a, #nav li:hover li a:hover 
{
    background: purple;
	border: none;
	color: #eee;
    border-top: solid 1px red;
        }
        
 /* sub levels link hover */  
   #nav ul li ul li a:link, #nav ul li li:hover ul li a {
	background: yellow;
	border: none;
	color: #000;
    border-top: solid 1px red;
    border-radius: 0 0;
        }
        
/* sub sub level hover */
    #nav ul li:hover ul li a:hover 
	{
	background: orange;
	border: none;
	color: #eee;
	border-top: solid 1px red;
        }       

 /* level 2 list */
	#nav ul {
	display: none;
	margin: 0px auto;
	padding: 0px;
	width: 155px;
	position: absolute;
	top: 35px;
	left: 0;	
}

/* makes dropdowns appear */
	#nav li:hover > ul {
	display: block;}
        
    #nav ul li {
	float: none;
	margin: 0;
	padding: 0;}
        
    #nav ul a {
	font-weight: normal;
	}
        
 /* level 3+ list dropdown appears */
	#nav ul ul {
	left: 151px;
	top: 4px;}
    
            
/* rounded corners for first and last child dropdown one */
	#nav ul li:first-child > a {
	border-radius: 1.1em 1.1em 0 0;}
        
    #nav ul li:last-child > a {
	border-radius:  0 0 1.1em 1.1em;}
        
    #nav ul li:first-child > a:hover {
	border-radius: 1.1em 1.1em 0 0;
       }
	
	#nav ul li:last-child > a:hover {
	border-radius:  0 0 1.1em 1.1em;}

/* 2nd set of sub links border radius */

 #nav ul li ul li:first-child > a
 {border-radius: 1.1em 1.1em 0 0;}

 #nav ul li ul li:last-child > a
 {border-radius:  0 0 1.1em 1.1em;}

/* clearfix */

#nav:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;}
	
#nav {display: inline-block;}