Wolf Nav + Logo

by blowsie

HTML

<a id="wolf-logo" href="http://patgrickwolf.com">&nbsp;</a>
<ul id="wolf-links">
    <li class="lnk-live-dates">
        <a href="http://patrickwolf.com/livedates">&nbsp;</a>
    </li>
     <li class="lnk-gallery">
          <a href="http://patrickwolf.com/gallery">&nbsp;</a>
     </li>
     <li class="lnk-lyrics">
          <a href="http://patrickwolf.com/lyrics">&nbsp;</a>
     </li>
     <li class="lnk-discography">
          <a href="http://patrickwolf.com/discography">&nbsp;</a>
     </li>
     <li class="lnk-wolf-tv">
          <a href="http://www.youtube.com/user/patrickwolftv">&nbsp;</a>
     </li>
</ul>
<br/><br/>
<ul id="wolf-links-foot">
    <li class="lnk-live-dates">
        <a href="http://patrickwolf.com/livedates">&nbsp;</a>
    </li>
     <li class="lnk-gallery">
          <a href="http://patrickwolf.com/gallery">&nbsp;</a>
     </li>
     <li class="lnk-lyrics">
          <a href="http://patrickwolf.com/lyrics">&nbsp;</a>
     </li>
     <li class="lnk-discography">
          <a href="http://patrickwolf.com/discography">&nbsp;</a>
     </li>
     <li class="lnk-wolf-tv">
          <a href="http://www.youtube.com/user/patrickwolftv">&nbsp;</a>
     </li>
    <li class="lnk-contact">
          <a href="http://patrickwolf.com/contact">&nbsp;</a>
     </li>
     <li class="lnk-links">
          <a href="http://patrickwolf.com/links">&nbsp;</a>
     </li>
    <li class="lnk-store">
          <a href="http://patrickwolf.firebrandlive.com/">&nbsp;</a>
     </li>
</ul>

CSS

body {background:#000;}
#wolf-logo {width:435px; height:278px; display:block; background: url('http://patrickwolf.com/hq/wp-content/themes/patrickwolf/images/wolf-logo.png'); text-decoration:none;}
#wolf-links {width:619px;height:39px; list-style-type:none; margin:-25px 0 0 50px}
#wolf-links li {height:39px; display:inline-block; zoom:1;margin:0; float:left }
#wolf-links li a { height:39px; text-decoration:none; display:block; background-image:url('http://patrickwolf.com/hq/wp-content/themes/patrickwolf/images/wolf-nav.png')}
#wolf-links-foot {width:949px;height:39px; list-style-type:none; margin:-25px 0 0 50px}
#wolf-links-foot li {height:39px; display:inline-block; zoom:1;margin:0; float:left }
#wolf-links-foot li a { height:39px; text-decoration:none; display:block; background-image:url('http://patrickwolf.com/hq/wp-content/themes/patrickwolf/images/wolf-nav-footer.png')}
.lnk-live-dates a{ width:139px; background-position: 0px 0px}
.lnk-live-dates a:hover {background-position: 0px -39px}
.lnk-gallery a { width:104px;background-position:-139px 0px;}
.lnk-gallery a:hover {background-position: -139px -39px}
.lnk-lyrics a { width:101px;background-position: -243px 0px;}
.lnk-lyrics a:hover {background-position: -243px -39px}
.lnk-discography a{ width:165px;background-position: -344px 0px;}
.lnk-discography a:hover {background-position: -344px -39px}
.lnk-wolf-tv a {width: 110px;background-position:-509px 0px;}
.lnk-wolf-tv a:hover {background-position: -509px -39px}
.lnk-contact a{ width:137px;background-position: -619px 0px;}
.lnk-contact a:hover {background-position: -619px -39px}
.lnk-links a{ width:99px;background-position: -756px 0px;}
.lnk-links a:hover {background-position: -756px -39px}
.lnk-store a{ width:94px;background-position: -855px 0px;}
.lnk-store a:hover {background-position: -855px -39px}

/* Begin Dark */
body.dark {background:#fff}
body.dark #wolf-logo {width:435px; height:278px; display:block; background:...

JavaScript

$('body').click(function(){
$(this).toggleClass('dark')

});