[mystique theme] header float

I want to ask how can I adjust how my header float, i mean adjust the space between the header and the navigation menu on my mystique theme?

i want it to look something like this:
http://imgur.com/ZYqjv

so i wonder how can i edit it from this?
http://imgur.com/GME8S

Thanks.

———————

here are my elements:

#header{display:block;position:relative;z-index:5;}

#header p.nav-extra{position:absolute;top:-25px;z-index:10;right:10px;}
#header a.nav-extra{width:64px;height:36px;display:block;float:right;margin-left:6px;}
#header a.nav-extra span{display:none;}

#site-title{padding:4em 0 3.6em 0;}
#site-title #logo{font-size:400%;font-weight:bold;font-style:normal;margin:0;padding:0;float:left;line-height:60px;}
#site-title #logo a{color:#fff;text-decoration:none;text-shadow:#000 1px 1px 1px;font-variant:small-caps;letter-spacing:-0.04em;}
#site-title #logo a:hover{color:#ed1e24;}
#site-title p.headline{float:none;border-left:1px solid #999;margin:0 0 0 1em;padding:.2em 0 .2em .8em;font-weight:normal;font-size:140%;line-height:34px;letter-spacing:0.4em;}