#nav {
    margin: auto;
    width: 980px;       
 }
 
 
/* Configuring all the sprite elements*/
#nav a.n_home,#nav a.n_why, #nav a.n_search, #nav a.n_resources, #nav a.n_community, #nav a.n_news, #nav a.n_contact, #nav a.n_board {
    background:transparent url('../../../images/menu.gif') no-repeat scroll 0 0; /* loads the sprite image with no repeating */
    float:left;
    height:51px;  /* height of the sprite */
    text-indent:-999999px; /* Hides all text */
}

/*These set the up state of the sprite*/
#nav a.n_home  {
/*    left: 90px;
    width: 56px;
    background-position: -111px 0;  */  
}

#nav a.n_why  {
    left: 90px;
    width: 176px;
    background-position: -111px 0;    
}

#nav a.n_search {
    left: 90px;
    width: 232px;
    background-position: -287px 0;    
}

#nav a.n_board {
    left: 90px;
    width: 154px;
    background-position: -519px 0;    
}

#nav a.n_community {
    left: 90px;
    width: 153px;
    background-position: -673px 0;    
}

#nav a.n_news {
    left: 90px;
    width: 65px;
    background-position: -826px 0;    
}

#nav a.n_contact {
    left: 90px;
    width: 110px;
    background-position: -891px 0;
}

#nav a.n_home {
    left: 90px;
    width: 90px;
    background-position: -1001px 0;
}


/*These set the hover state of the sprite*/
/*#nav a.n_why:hover { background-position: -330px -67px; }
#nav a.n_search:hover { background-position: -526px -67px; }
#nav a.n_resources:hover { background-position: -610px -67px; }
#nav a.n_community:hover { background-position: -727px -67px; }
#nav a.n_news:hover { background-position: -800px -67px; }
#nav a.n_contact:hover { background-position: -876px -67px;}    */


/*These set the active state of the sprite IE(page we are currently viewing)*/       
/*
#nav a#active1 {
background-position:left -64px;
}
#nav a#active2 {
background-position:-113px -64px;
}
#nav a#active4 {
background-position:-299px -64px;
}
#nav a#active5 {
background-position:-387px -64px;
}
#nav a#active6 {
background-position:-468px -64px;
}
*/

ol, ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
}

#drops, #drops ul {
    clear:both;
    float:left;
    margin:0;
    padding:0;
    width:inherit;
}

#drops ul.drop {
    background: none repeat scroll 0 0;
    clear:both;
    float:left;
    margin-top: 51px; /* this sets how far down the dropdown comes */
    margin-left: 0px;
    /*padding-top: 24px;*/
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    width:inherit;

}

/* here we can configure the drop downs general appearance */
#drops ul.drop li {
    clear:both;
    width:inherit;
    background: #4C4F57;
    border: solid #5C5F68;  
    border-top-width: 2px;
    border-left-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 0px;
}

#drops ul.drop li:last-child  {
    clear:both;
    width:inherit;
    background: #4C4F57;
    border: solid #5C5F68;  
    border-top-width: 2px;
    border-left-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
}



/* Here we configure the LI holding the element */
#drops ul.drop li:hover {
    clear:both;
    width:inherit;
    background: #5a5a5a;
}

/*#drops ul.drop a:hover {
    color: #E6EFED;
}                 */

/* this is where we can configure individual elements of the drop down */
#drops ul.drop a {
    clear:both;
    color:#F7F7F7;
    float:left;
    font-size:8pt;
    font-weight:bold;
    text-decoration:none;
    padding-top: 3px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 3px;
    font-family: tahoma;
    text-align:left;

}

#drops a {
    clear:both;
    display:block;
    float:left;
    width:175px;
}

#drops li {
    float:left;
}

#drops li ul {
    left:-999em;
    position:absolute;
    width:10em;
}

#drops li:hover ul {
    left:auto;
}

#drops li:hover ul, #drops li.sfhover ul {
    left:auto;
}