/* Default */

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

#nav li {
float: left;
}

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

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

li#nav_services a {
left: 270px;
width: 100px;
background-position: -270px 0;
}

li#nav_getocto a {
left: 370px;
width: 120px;
background-position: -370px 0;
}

li#nav_company a {
left: 490px;
width: 80px;
background-position: -490px 0;
}

li#nav_whyocto a {
left: 570px;
width: 125px;
background-position: -570px 0;
}

li#nav_contact a {
left: 695px;
width: 85px;
background-position: -695px 0;
}

li#nav_showcase a {
left: 780px;
width: 119px;
background-position: -780px 0;
}
/*hover state*/
li#nav_home a:hover {
background-position: 0 -75px;
}

li#nav_services a:hover {
background-position: -270px -75px;
}

li#nav_getocto a:hover {
background-position: -370px -75px;
}

li#nav_company a:hover {
background-position: -490px -75px;
}

li#nav_whyocto a:hover {
background-position: -570px -75px;
}

li#nav_contact a:hover {
background-position: -695px -75px;
}

li#nav_showcase a:hover {
background-position: -780px -75px;
}

/*current state*/
#body_home li#nav_home a {
background-position: 0 -150px;
}

#body_services li#nav_services a {
background-position: -270px -150px;
}

#body_get_octo li#nav_getocto a {
background-position: -370px -150px;
}

#body_company li#nav_company a {
background-position: -490px -150px;
}

#body_why_octo li#nav_whyocto a {
background-position: -570px -150px;
}

#body_contact li#nav_contact a {
background-position: -695px -150px;
}

#body_showcase li#nav_showcase a {
background-position: -780px -150px;
}