Moving individual elements / still trying to get logo thru menu bar

Okay here’s my website:

http://john-messenger.com/

Here’s what i’m trying to do. I’m new to CSS but I’m using Firebug to locate the elements I want to edit and playing around with trying to manipulate them. A lot of trial and error. But i want to do a few things that seem complex to me. The tree logo that is at the top, i want to move it down so that the words are just above the top of the menu bar and the image of the tree passes thru the menu bar, tree top in the header, roots in the body, and the menu items parted in-between “poetry” and “creative non-fiction” So i want “poetry” and “non-fiction” on the left side of the portion of the tree image going thru the menu bar, evenly spaced on their side, and all the other menu links on the right, evenly spaced on their side. I potentially want to invert the color of the tree trunk where it passes thru the menu bar from black to white so that the lines of the image don’t get lost passing thru the black menu bar. At this point, i would be happy if i was able to make any of the menu items move their positioning individually (so far i’ve only been able to affect them by changing their padding and thus squeezing them all or widening them all). Also, i would be happy if i could move the tree…at all. I figured how to move my head shot on the home page by adjusting the margins:

.alignleft {
float: left;
margin: -25px 10px 10px 0;

But the tree doesn’t give me pixels to play with, all i can find with Firebug relating to the trees alignment is:

#site-title img {
vertical-align: middle;

Which doesn’t do anything when i play with it.

Help!

Thanks