/* https://github.com/LearnBoost/CSS3-Overlay/ */

body.overlaid {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

body.overlaid div.overlay {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  transform: translateY(0);
}

  div.overlay {    
    /* using display none to hide the overlay nullifies -webkit-transition */
    -webkit-transform: translateY(-50000px);
    -moz-transform: translateY(-50000px);
    transform: translateY(-50000px);

    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);

    -webkit-user-select: auto;
    -moz-user-select: auto;
    user-select: auto;
  }
    div.overlay > div.wrap-outer {
      position: relative;
      width: 100%;
      height: 100%;

      display: -webkit-box;
      display: -moz-box;
      display: box;

      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
      box-orient: horizontal;

      -webkit-box-align: stretch;
      -moz-box-align: stretch;
      box-align: stretch;

      -webkit-box-pack: center;
      -moz-box-pack: center;
      box-pack: center;
    }
      div.overlay > div.wrap-outer > div.wrap {
      	display: -webkit-box;
      	display: -moz-box;
      	display: box;
      	
      	-webkit-box-orient: vertical;
      	-moz-box-orient: vertical;
      	box-orient: vertical;

      	-webkit-box-align: stretch;
      	-moz-box-align: stretch;
      	box-align: stretch;

      	-webkit-box-pack: center;
      	-moz-box-pack: center;
      	box-pack: center;
      }

        div.overlay > div.wrap-outer > div.wrap > * {
        	-webkit-box-flex: 0;
        	-moz-box-flex: 0;
        	box-flex: 0;

        	display: block;
        }

div.overlay > div.wrap-outer > div.wrap > div.dialog {
	padding: 21px;
	background-color: #fff;
}