I can't get opacity of #firstPopupDiv to over ride the opacity of #outer.

What am I missing?
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function popup(popup_name) {
    popup_elem=document.getElementById(popup_name);
    popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';
}
</script>
<style type="text/css">
#outer {position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:#000; opacity: .75; }
.middle {height:100%; display:table; margin:0 auto;}
.inner {vertical-align:middle; display:table-cell;}
#firstPopupDiv {width:200px;height:200px;background-color:white;margin:0px 0px 0px 0px;opacity:1.0; }
</style>
</head>
<body>
<div style="width:730px;margin:0 auto;">
    <button onclick="popup('outer')" style="width:730px;height:60px;font-size:30px;margin:200px 0px 0px 0px;">Send to Printer</button>
</div>
<div id="outer" onclick="popup('outer')">
    <div class="middle">
            <div class="inner">
                    <div id="firstPopupDiv">
                            <p>You are here.</p>
                    </div>
            </div>
    </div>
</div>
</body>
</html>