<!--
  
  #underlay {
    position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%;
    background-color:dimgrey; transition: opacity 0.5s linear;
  }
  #underlay.active { width:100%; height:100%; z-index:100; opacity:0.8; }
  #underlay.inactive { width:0; height:0; z-index:-1; opacity:0; }

  #frame-div {
    position:fixed; top:50%; left:50%; width:90%; height:90%;
    background-color:white;border:10px solid white;z-index:101;
    border-radius: 10px; box-shadow: 5px 5px 5px grey;
    transition:transform 0.5s linear 0.6s, opacity 0.5s linear 0.6s;
    /* box-shadow: 0.3em 1.3em 2em 0.5em rgba(0, 0, 0, 0.3); */
  }
  #frame-div.active { transform:translate(-50%, -50%) scale(1); opacity:1; }
  #frame-div.inactive { transform:translate(-50%, -50%) scale(0.5); opacity:0; }
  /* #frame-close {
    position:absolute; top:-5px; right:-5px; z-index:102;
    background:url(/Images/close.png) no-repeat; width:23px; height:23px;
    cursor:pointer;
  }*/
  #frame-close {
    position:absolute; top:-5px; right:-5px;z-index:102; overflow:hidden;
    width:1.5em; height:1.5em; color:dimgrey; background:transparent;
    border:1px solid darkgrey; border-radius:50%; padding:0;
    font: inherit;text-indent: 100%;
    cursor: pointer;
  }
  #frame-close:before, #frame-close:after {
    position:absolute; width:.125em; height:70%;
    top:15%; left:calc(50% - .0625em); border-radius:.125em;
    background:currentcolor; transform:rotate(45deg); content: '';
  }
  #frame-close:after { transform:rotate(-45deg); }
  #frame-close:hover { background:rgba(127, 127, 127, .1); }

  #frame-content { border:0px; width:100%; height:100%; }

-->