.dialog{
  position: absolute;
  left: 20vw;
  top: 20vh;
  border-radius: 0.5em;
  width: 60vw;
  height: 60vh;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.15);
}

table.dlgframe{
  height: 100%;
  width: 100%;
  border: none;
  border-collapse: collapse;
  margin: 0;
}

table.dlgframe > tbody > tr > td{
  padding: 0;
}

table.dlgframe tr:nth-child(1),
table.dlgframe tr:nth-child(3){
  height: 1px;
}

.dialog .caption{
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  border-style: solid;
  border-color: gray;
  border-width: 1px 1px 0 1px;
  padding: 0.5em;
  background-color: #580;
  color: white;
  text-align: right;
}

.dialog .caption .captionTitle{
  float: left;
  width: 90%;
  text-align: center;
}

.dialog .caption .close{
  cursor: default;
  margin: -0.5em;
  padding: 0.5em; /* maakt het kruisje makkelijker te raken */
  border-top-right-radius: 0.5em;
}
.dialog .caption .close:hover{
  background-color: #240;
}

.dialog .contents{
  background-color: white;
  border-style: solid;
  border-color: gray;
  border-width: 0 1px 0 1px; /* links en rechts */
  padding: 0.5em;
  width: 100%;
  height: 100%;
}

.dialog .buttonbar{
  background-color: #eee;
  border-style: solid;
  border-color: gray;
  border-width: 0 1px 1px 1px; /* links en rechts */
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  text-align: right;
  padding: 0.5em;
}

.dialog .buttonbar button{
  padding-right: 1.5em;
  padding-left: 1.5em;
}
.dialog .buttonbar button:hover{
  background-color: #580;
  color: white;
}