title: No opacity on div inside a div with opacity
body: <p>I have to use the asp.net ajax toolkit for a task and what I am doing is to display a div on the whole screen when an update progress control is triggered. The main div (that covers the whole screen) is having some opacity but when I try to have a div inside this one that one also gets some opacity even though I set it to none;</p>
  
  <p>Example HTML:</p>
  
  <pre><code>&lt;ProgressTemplate&gt;
              &lt;div class="updateProgressBox"&gt;
                  &lt;div class="updateProgressMessage"&gt;
                      &lt;p&gt;Processing request..&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  &lt;/ProgressTemplate&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>.updateProgressBox {
      top: 0px; 
      height: 100%; 
      background-color:Gray;
      opacity:0.7; 
      filter:alpha(opacity=70);
      vertical-align: middle; 
      left: 0px; 
      z-index: 999999; 
      width: 100%; 
      position: absolute;
      text-align: center;   
  }
  
  .updateProgressMessage {
      border: black 2px solid;
      background-color: #fff;
      z-index: 1000000;   
      padding: 20px;
      opacity:1.0; 
      filter:alpha(opacity=100);
      margin: 300px auto auto auto;
      font-weight: bold; 
      vertical-align: middle;
      width: 200px; 
      text-align: center
  }
  </code></pre>
  
  <p>What should I do to make the div with the message have no transparency and white background color?</p>