I like where your design is headed!
Try it without the top and bottom borders:
#access,
#colophon {
border: none;
}
.hentry {
margin-bottom: 0;
}
To target that rule so it just affects the home page, add a ".home" class to the front of each selector like this:
.home #access,
.home #colophon {
border: none;
}
When working with absolute positioning in such a precise manner like you are (i.e. text needs to be placed exactly in a certain spot relative to the background image), it might be best to set position with pixels not ems. Also, it will probably help to do the positioning inside a relatively positioned element.
Check out this page:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
And then try this example to see what I mean:
.entry-content {
position: relative;
}
#navigation2 h2 {
margin: 0;
}
#navigation2 ul {
margin-left: 1em;
}
#navigation2 {
position: absolute;
top: 280px;
right: 30px;
height: 130px;
width: 90px;
overflow: hidden;
}
Note, it's possible you'll want to prefix all of those selectors with ".home" if that main graphic you're using will just be displayed on the home page.
Another trick I use to visualize things is to temporarily set a border so I can see things a little better. Here is an example you can preview:
#navigation2 {
border: 2px dashed red;
}
Try Inconsolata or Anonymous Pro for the site title on the Appearance → Custom Design → Fonts page to see if you like them. They both have a very technology-esque feel to them.
Great work so far!
designsimply