title: Background color on hover & padding
body: <p>I'm having trouble with having a background color on hover, on a logo and also <strong>padding around some images</strong>. </p>
  
  <p>For the background-color, it's for the logo that you see on the navigation bar on the left that is CAUL/CBUA. Its' hover state switches to <a href="http://redsky.incredifull.com/imgs/navi-hover/caul_blue_nav.png" rel="nofollow">this image</a> and the background on hover should fill the whole block just like the links beside it.</p>
  
  <p>For the padding of the images, it's on the <strong>same</strong> navigation bar, to the right. They are the social icons I'm sure it's not hard to see where the padding should be.</p>
  
  <p><a href="http://redsky.incredifull.com/" rel="nofollow">Here's the link to what I have so far. You can see the navigation bar here.</a></p>
  
  <p>And here's my CSS:</p>
  
  <pre><code>/* Navigation bar */
  #navi {
  height: 40px;
  background: #1e416f;
  font-size: 14px;
  color: white;
  text-transform: uppercase;
  margin: 0 0 20px 0;
  }
  
  #navi a:hover {
  background: white;
  color: #1e416f;
  }
  
  .logo {
  margin: 5px;
  padding: 0;
  float: left;
  }
  
  .logo a {
  float: left;
  margin: 2px 10px;
  width: 36px;
  height: 26px;
  background: url(/imgs/navi/caul_white_nav.png) left top no-repeat;
  text-indent: -9999px;
  }
  
  .logo a:hover {
  background: url(/imgs/navi-hover/caul_blue_nav.png) left top no-repeat;
  }
  
  #primary-nav, #tools-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  }
  
  #primary-nav li, #primary-nav a,
  #tools-nav li, #tools-nav a { float: left; }
  
  #primary-nav a, #tools-nav a {
  color: white;
  text-decoration: none;
  padding: 0 10px;
  border-right: 1px solid white;
  line-height: 40px;
  }
  
  #primary-nav li:first-child a, #tools-nav li:first-child a {
  border-left: 1px solid white;
  }
  
  #tools-nav {
  float: right;
  }
  
  #tools-nav .icon a {
  text-indent: -9999px;
  }
  
  #tools-nav .email a {
  background: url(/imgs/navi/mail.png) no-repeat;
  width: 20px;
  }
  
  #tools-nav .email a:hover {
  background: url(/imgs/navi-hover/hover_mail.png) no-repeat;
  width: 20px;
  }
  
  #tools-nav .twitter a {
  background: url(/imgs/navi/twitter.png) no-repeat;
  width: 20px;
  }
  
  #tools-nav .twitter a:hover {
  background: url(/imgs/navi-hover/hover-twitter.png) no-repeat;
  width: 20px;
  }
  
  #tools-nav .search a {
  background: url(/imgs/navi/search.png) no-repeat;
  width: 20px;
  }
  
  #tools-nav .search a:hover {
  background: url(/imgs/navi-hover/hover_search.png) no-repeat;
  width: 20px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- NAVIGATION --&gt;
  &lt;div id="navi"&gt;
  &lt;h1 class="logo"&gt;&lt;a href="#"&gt;CAUL/CBUA&lt;/a&gt;&lt;/h1&gt;
  
  &lt;ul id="primary-nav"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Directories&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Committees&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Resources&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul id="tools-nav"&gt;
      &lt;li class="login"&gt;&lt;a href="#"&gt;Log In&lt;/a&gt;&lt;/li&gt;
      &lt;li class="email icon"&gt;&lt;a href="#"&gt;Email&lt;/a&gt;&lt;/li&gt;
      &lt;li class="twitter icon"&gt;&lt;a href="#"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
      &lt;li class="search icon"&gt;&lt;a href="#"&gt;Search&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>