title: box-shadow with :before and :after [CSS3]
body: <p>I am trying to create the following effect in my current project:</p>
  
  <p><a href="http://jsfiddle.net/pns2050/7TYTc/2/" rel="nofollow">http://jsfiddle.net/pns2050/7TYTc/2/</a></p>
  
  <p>But when i try to add it to my website the 2 bottom corners lose that angle effect..</p>
  
  <p>my website consists of a Masterpage which basicly creates a table in the middle for the content to be added..</p>
  
  <pre><code>&lt;div class="clearboth"&gt;&lt;/div&gt;
  &lt;div id="pageWrap"&gt;
      &lt;asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"&gt;
      &lt;/asp:ContentPlaceHolder&gt;
  &lt;/div&gt;&lt;!--/Page Wrap--&gt;
  </code></pre>
  
  <p>with CSS</p>
  
  <pre><code>#pageWrap
  {
  width:950px;
  height:700px;
  margin:-30px auto -20px auto;
  box-shadow: -1px -5px 20px 5px #80b840;
  background-color:white;
  position:relative;   
  }
  </code></pre>
  
  <p>so i add in my default.aspx</p>
  
  <pre><code>&lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" 
   Runat="Server"&gt; 
    &lt;div class="box effect2"&gt;
      &lt;h3&gt;Effect 2&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>with the CSS shown in jsfiddle but the effect breaks..</p>
  
  <p>I know my question is vague but i tried everything and i cant see where the problem is..I could recreate this in some older projects of mine..</p>
  
  <p>I am just looking for a little hint/idea from someone experienced to give me strength so i  can keep trying ;} </p>