title: Inset Box Shadow on iFrame (Google Calendar)
body: <p>I am trying to put an Inset Box Shadow on a Google Calender and cannot seem to get it to show up unless the z-index is a negative. It shows, but then the user cannot click/use the calendar. I looked at: <a href="https://stackoverflow.com/questions/11264240/add-inset-box-shadow-on-google-maps-element">Add inset box-shadow on Google Maps element</a>  but it has the z-index set to a negative. I put everything in-line until I figure everything out. </p>
  
  <pre><code>&lt;div style="box-shadow:inset 0 0 10px #000000; 
              -moz-box-shadow:inset 0 0 10px #000000; width: 900px;"&gt;
  
     &lt;iframe src="https://www.google.com/calendar/embed?showTz=0&amp;amp;height=600&amp;amp;wkst=1&amp;amp;bgcolor=%23ccffff&amp;amp;src=756r34h4d6aqhta6fmaqkijm9k%40group.calendar. google.com&amp;amp;color=%23853104&amp;amp;ctz=America%2FNew_York" style="border-width:0" width="900" height="600" scrolling="no"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can see the shadow popping in behind it. I have tried double wrapping, putting the style in the iframe ect and cannot get it to work for the life of me. </p>