/*
/	PPWH - Light-up a life
/	Frame Digital
/
/	Navigation
/
*/

#navigation
{
    height: 30px;
    padding: 0;
    margin: 0;
}
#navigation ul
{
    margin: 0px;
    padding: 0px;
}
#nav
{
    text-align: left;
}
#nav a
{
    text-decoration: none;
}
#nav li
{
    /*float the main list items*/
    margin: 0;
    float: left;
    display: block;
    padding-right: 0px;
    text-align: center;
    height: 30px;
}

#nav li a
{
    color: #431110;
    font-weight: bold;
    display: block;
    padding: 0px 0 0 0;
}

/*do the image replacement*/
#nav li span
{
    position: absolute;
    visibility: hidden;
    left: -3000px;
}
.tab1 a, .tab2 a, .tab3 a, .tab4 a, .tab5 a, .tab6 a, .tab7 a, .tab8 a, .tab9 a
{
    display: block;
    position: relative;
    height: 31px;
    background-color: #fff;
    background: url(../images/framework/bk_nav.jpg) no-repeat; /*contains all hover states*/
    outline: none;
}

/*first, put the initial states in place*/
.tab1 a
{
    width: 70px;
    background-position: 0px 0px;
}
.tab2 a
{
    width: 234px;
    background-position: -70px 0px;
}
.tab3 a
{
    width: 141px;
    background-position: -304px 0px;
}
.tab4 a
{
    width: 139px;
    background-position: -445px 0px;
}
.tab5 a
{
    width: 124px;
    background-position: -585px 0px;
}
.tab6 a
{
    /*links*/
    width: 70px;
    background-position: -710px 0px;
}


/* OVER */
.tab1 a:hover, .tab1:hover a, .tab1.over a, .tab1.on a, .tab1 .active, .tab1 .selected
{
    width: 70px;
    background-position: 0px -31px;
}
.tab2 a:hover, .tab2:hover a, .tab2.over a, .tab2.on a, .tab2 .active, .tab2 .selected
{
    width: 234px;
    background-position: -70px -31px;
}
.tab3 a:hover, .tab3:hover a, .tab3.over a, .tab3.on a, .tab3 .active, .tab3 .selected
{
    width: 141px;
    background-position: -304px -31px;
}
.tab4 a:hover, .tab4:hover a, .tab4.over a, .tab4.on a, .tab4 .active, .tab4 .selected
{
    width: 139px;
    background-position: -445px -31px;
}
.tab5 a:hover, .tab5:hover a, .tab5.over a, .tab5.on a, .tab5 .active, .tab5 .selected
{
    width: 124px;
    background-position: -585px -31px;
}
.tab6 a:hover, .tab6:hover a, .tab6.over a, .tab6.on a, .tab6 .active, .tab6 .selected
{
    width: 70px;
    background-position: -710px -31px;
}