/* THIS SHEET STYLES THE NAVIGATION IN THE HEADER SECTION OF THE WEBSITE. THERE ARE FOUR STATES FOR EACH BOTTON: UP (STATIC), HOVER, ACTIVE (MOUSE PRESSED DOWN), AND "SELECTED" WITH A SPECIAL STYLE THAT ELIMINATES THE USE OF JAVASCRIPT AT BOTTOM. THE "SELECTED" STATE DOES NOT HAVE TO BE USED AND CAN ONLY BE USED WHEN GIVING THE BODY TAG OF THE PAGE AN ID AS DESCRIBED BELOW.*/

#nav {
width: 586px;
height: 76px;
position: relative;
background: url(images/nav_main.png);
margin: 0;
padding: 0;
}

#nav li {
float: left;
list-style: none;
text-decoration: none;
}

#nav li a {
position: absolute;
top: 0;
margin: 0;
padding: 0;
display: block;
height: 70px;
background: url(images/nav_main.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
}

/*up state*/
li#nav_home a {
left: 0;
width: 86px;
background-position: 0px 0px;
}

li#nav_whoweare a {
left: 86px;
width: 156px;
background-position: -86px 0;
}

li#nav_mab a {
left: 242px;
width: 119px;
background-position: -242px 0;
}

li#nav_contact a {
left: 361px;
width: 118px;
background-position: -361px 0;
}

li#nav_support a {
left: 479px;
width: 107px;
background-position: -479px 0;
}

/*hover state*/
li#nav_home a:hover {
background-position: 0px -76px;
}

li#nav_whoweare a:hover {
background-position: -86px -76px;
}

li#nav_mab a:hover {
background-position: -242px -76px;
}

li#nav_contact a:hover {
background-position: -361px -76px;
}

li#nav_support a:hover {
background-position: -479px -76px;
}

/*active/down state*/
li#nav_home a:active {
background-position: 0 -152px;
}

li#nav_whoweare a:active {
background-position: -86px -152px;
}

li#nav_mab a:active {
background-position: -242px -152px;
}

li#nav_contact a:active {
background-position: -361px -152px;
}

li#nav_support a:active {
background-position: -479px -152px;
}

/*current state*/
/*TO GIVE A PAGE THE INDICATION THAT IT IS THE SELECTED PAGE IN THE NAVIGATION, ALL YOU NEED TO DO IS PLACE AN ID SELECTOR IN THE "BODY" TAGE OF THAT PAGE. FOR EXAMPLE, GIVE THE HOME PAGE'S BODY AN ID OF  "body_home" AND WHEN YOU ARE ON THE HOME PAGE, IT WILL SHOW THE NAVIGATION BUTTON IN THE "SELECTED" STATE WHICH IS GREEN TEXT ON THE CLEAR SURFACE*/
#body_home li#nav_home a {
background-position: 0 -228px;
}

#body_whoweare li#nav_whoweare a {
background-position: -86px -228px;
}

#body_mab li#nav_mab a {
background-position: -242px -228px;
}

#body_contact li#nav_contact a {
background-position: -361px -228px;
}

#body_support li#nav_support a {
background-position: -479px -228px;
}