title: CSS opacity goes over other layers
body: <p>I have a question...I have my header class like this</p>
  
  <pre><code>.header{
      background-color:#626262;
      width:250px;
      height:745px;
      opacity:0.4;
      filter:alpha(opacity=40); /* For IE8 and earlier */
  }
  </code></pre>
  
  <p>inside this class I have these classes...</p>
  
  <pre><code>.logo{
      background-color:#626262;
      opacity:1.0;
      filter:alpha(opacity=100); /* For IE8 and earlier */
      color:#FFF;
      font-size:28px;
      padding-top:125px;
      margin-left:20px;
  }
  
  .navigation{
      background-color:#626262;
      opacity:1.0;
      filter:alpha(opacity=100); /* For IE8 and earlier */
      color:#FFF;
      margin-left:20px;
      text-align:left;
      margin-bottom: 125px;
  }
  
  .navigation ul{
      list-style:none;
      padding-left:0;
      padding-top:35px;
  }
  
  .navigation ul li{
      padding-bottom:20px;
      font-size:24px;
  }
  
  .navigation li a{
      color:#FFF;
      text-decoration:none;
  }
  
  .social{
      width:100%;
      font-size:18px;
      height: 50px;
      line-height: 72px;
      padding-right: 10px;
  }
  
  .social ul {
      list-style-type: none;
      margin: 0;
      padding: 0 0 0 8px;
  }
  
  .social li {
      float: left;
  }
  
  .social ul .facebook a {
      color: #FFFFFF;
      display: block;
      text-decoration: none;
      background-image: url(http://jamessuske.com/karl/images/facebook.png);
      background-position: center right;
      background-repeat: no-repeat;
      padding-right:65px;
  }
  
  .social ul .facebook a:hover {
      background-image: url(http://jamessuske.com/karl/images/facebook_hover.png);
  }
  
  .social ul .twitter a {
      color: #FFFFFF;
      display: block;
      text-decoration: none;
      background-image: url(http://jamessuske.com/karl/images/twitter.png);
      background-position: center right;
      background-repeat: no-repeat;
      padding-right:70px;
  }
  
  .social ul .twitter a:hover {
      background-image: url(http://jamessuske.com/karl/images/twitter_hover.png);
  }
  
  .social ul .pinterest a {
      color: #FFFFFF;
      display: block;
      text-decoration: none;
      background-image: url(http://jamessuske.com/karl/images/pinterest.png);
      background-position: center right;
      background-repeat: no-repeat;
      padding-right:70px;
  }
  
  .social ul .pinterest a:hover {
      background-image: url(http://jamessuske.com/karl/images/pinterest_hover.png);
  }
  </code></pre>
  
  <p>And those layers are faded to the opacity of 0.4....my question is how do I get those over layers not to be faded with opacity of 0.4? I hope this makes sense...an example of this would be at <a href="http://www.yourthirdeye.ca/" rel="noreferrer">http://www.yourthirdeye.ca/</a></p>