Can't set opacity or z-index of DIV overlaying fullcalendar.js

Question

I have a Fiddle here that overlay's a div (using margin-top: -10em) on top of fullcalendar.js. From the Fiddle you can see that the overlaying DIV has some transparency. So I tried setting the opacity to 1 and the z-index to like 5000, but I still can't get the div the be solid and hide the fullcalendar behind it. Any help will be appreciated!

Here is some code snippets.

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

var events_array = [{
  title: 'Test1',
  start: new Date(2012, 8, 20),
  tip: 'Personal tip 1'
}, {
  title: 'Test2',
  start: new Date(2012, 8, 21),
  tip: 'Personal tip 2'
}];
$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  selectable: true,
  events: events_array,
  eventRender: function(event, element) {
    element.attr('title', event.tip);
  }
});

@import 'http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css';
#demo.width {
  height: auto;
  -webkit-transition: width 0.35s ease;
  -moz-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<div style="border:solid 2px red;">
  <div id='calendar'></div>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
    Horizontal Collapsible
  </button>
  <div id="demo" class="collapse in width" style="background-color:yellow;float:right;border:1px solid black;margin-top:-10em;opacity:1;z-index:5000;">
    <div style="padding: 20px; overflow:hidden; width:300px;">
      Here is my content
    </div>
  </div>
</div>