[CSS NAV] Noir Navbar

This is a black navbar for phpbb3 and phpbb2 forums. It is strictly ran off of CSS which means you wont have to load any images in the navbar unless you're using phpbb2 which you will need mini-icons.

The design is black rectangle buttons with a grayish bold text. Upon hover the button will light up gray and the text color will change to a darkish red.

For a preview see this image: https://i.servimg.com/u/f72/18/45/41/65/captur13.png

To apply this navbar to your forum navigate to..
Administration Panel > Display > Pictures and colors > Colors > CSS stylesheet then paste the code which corresponds to your forum version and submit.

<center><span style="background:#0184cf;border-radius:4px;color:#fff;font-weight:700;height:16px;line-height: 16px;margin-right:5px;padding: 0px 5px;">phpbb3</span></center>

Code:

/*phpbb3 Noir Boutons
par Ange Tuteur*/
a.mainmenu{
box-shadow: 0px 2px 6px #555 inset;
text-shadow: 1px 1px 2px #000;
background-color:#333;
border:1px solid #555;
font-weight:bold;
font-size: 11px;
transition:0.5s;
padding:5px;
color:#ccc;
}
a.mainmenu:hover{
background-color:#444;
color:#c00;
}

To have the navbar buttons close together add this to the first block:

Code:

margin:0px -4px 0px -4px;

<center><span style="background:#0184cf;border-radius:4px;color:#fff;font-weight:700;height:16px;line-height: 16px;margin-right:5px;padding: 0px 5px;">phpbb2</span></center>

Code:

/*phpbb2 Noir Boutons
par Ange Tuteur*/
.bodyline > table:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) a.mainmenu{
box-shadow: 0px 2px 6px #555 inset;
text-shadow: 1px 1px 2px #000;
background-color:#333;
border:1px solid #555;
position:relative;
font-weight:bold;
font-size: 11px;
transition:0.5s;
bottom:10px;
padding:5px;
color:#ccc;
}
.bodyline > table:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) a.mainmenu:hover{
background-color:#444;
color:#c00;
}

Please remember for phpbb2 you will need to use mini-icons in the navbar otherwise you will have a large space to the left. To have the navbar buttons close together add this to the first block:

Code:

margin:0px -6px 0px -6px;

If you have any questions regarding these please ask, thank you.