#dialogOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 20000;
  background-color: #000;
}
#dialogContainer {
  position: fixed;
  overflow: auto;
  z-index: 20001;
  left:0;
  top:0;
  right:0;
  bottom:0;
  padding-bottom: 30px;
}
#dialogContent {
  padding: 10px;
  position: relative;
  background-color: white;
}
#dialogHeader {
  position:relative;
  background-color: #999999;
  color: white;
  text-align: left;
  font-size: 17px;
  padding-top: 12px;
  padding-bottom: 8px;
}
#dialogCloseButton {
  position: absolute;
  z-index: 100;
  right: 15px;
  top: 11px;
  background: transparent url('/lib/prube/img/closebutton.png') no-repeat center -13px;
  width: 13px;
  height: 13px;
  cursor: pointer;
}
#dialogCloseButton:hover {
  background-position: bottom;
}
#dialogContentWrapper {
  background-color: white;
  padding: 20px;
  margin: 20px auto 0;
}

/* When the modal is active, don't scroll the body element */
body.modalActive{
  overflow:hidden;
}

/*
  On a landscape iPad, we want to make sure we show full screen modals 
*/
@media (max-width: 1024px) {
  /* When the screen is smaller, the both needs to behave a little differently */
  body.userAgentIOS.modalActive{
    overflow:auto;
    padding:0 !important;
  }
  /* And all the elements that are under the body that aren't part of the modal system need to be hidden */
  body.userAgentIOS.modalActive > .dialogNotDialog, body.userAgentIOS #dialogOverlay {
    display:none !important;
  }
  /* the dialog container needs to be adjusted so it scrolls properly */
  body.userAgentIOS #dialogContainer{
    position:static;
    overflow:visible;
  }

  body.userAgentIOS #dialogContentWrapper{
    width:auto !important;
    margin: 0px auto 0;     
  } 

}

/*
 On any other device kick in the full screen modals below 800px (including desktops)
*/
@media (max-width: 799px) {
  /* When the screen is smaller, the both needs to behave a little differently */
  body.userAgentOther.modalActive{
    overflow:auto;
    padding:0 !important;
  }
  /* And all the elements that are under the body that aren't part of the modal system need to be hidden */
  body.userAgentOther.modalActive > .dialogNotDialog, body.userAgentOther #dialogOverlay {
    display:none !important;
  }
  /* the dialog container needs to be adjusted so it scrolls properly */
  body.userAgentOther #dialogContainer{
    position:static;
    overflow:visible;
  }

  body.userAgentOther #dialogContentWrapper{
    width:auto !important;
    margin: 0px auto 0; 
  } 

}