I am making a website and though of a cool navigation bar that is suppose to look like this:

And using css code:

    #navigation ul {
    list-style: none;
    text-align: center;
    }

    #navigation li {
    display: inline;
    }

    #navigation li a {
    text-indent: -5000px;
    display: inline-block;
    height: 40px;
    }

    #navigation li a.profile {
    width: 240px;
    background: url("http://i.imgur.com/pphPRAA.png");
    text-decoration: none;
    }
    #navigation li a.profile:hover {
    background: url("http://i.imgur.com/bDwcbXd.png");
    background-position: -240px;
    text-decoration: none;
    }
    #navigation li a.profile:current {
    background: url("http://i.imgur.com/bDwcbXd.png");
    background-position: -240px;
    background-repeat: no-repeat;
    text-decoration: none;
    }

I managed to make it look like this: http://pokemasters.freeiz.com/bare.html I just ran out of ideas.... i got the images that i made seperatly, a navbar:

& buttons:

I'm looking for a full width navbar that adjusts itself to different screens, is located at the bottom of the screen, red buttons while active or hovered and white buttons while normal, with that pokeball line right on top of it and overlaying the buttons

Can someone point me in the right direction please?? thank you:)