.dialog-box {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	overflow: auto;
}
.dialog {
	position: absolute;
	box-sizing: border-box;
	background: #fefefe;
	transition: all .3s;
}
.dialog-box:not(.slideright) .dialog {
	margin-bottom: 50px;
}
.slideup .dialog {
	left: 50%;
	top: -100px;
	opacity: 0;
	border-bottom-left-radius: .5em;
	border-bottom-right-radius: .5em;
}
.slideright .dialog {
	top: 0;
	bottom: 0;
	right: -1500px;
}
.dialog > .title {
	padding: 1em;
	font-weight: bold;
	font-size: 120%;
	background: #ccc;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}
.dialog:not(.slim) > .content {
	padding: 1em;
}
.slideright .dialog > .title {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 50px;
	box-sizing: border-box;
}
.slideright .dialog > .content {
	position: absolute;
	left: 0;
	top: 50px;
	bottom: 0;
	width: 100%;
	overflow: auto;
	box-sizing: border-box;
}
.dialog-box.slideup.opened .dialog {
	opacity: 1;
}
.dialog-box.slideup.opened .dialog {
	top: 0;
}
.dialog-box.slideright.opened .dialog {
	right: 0;
}