@charset "utf-8";

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
.window-frame {
	position: absolute;
	background: #fff;
	border: 1px solid #707070;
	width: 400px;
	height: 400px;
	top: 100px;
	left: 100px;
}
.fr {
	position: relative;
	width: 100%;
	height: 100%;
}
.fr > * {
	position: absolute;
}
.fr > .fhead {
	top: 0;
	width: 100%;
	height: 29px;
	user-select: none;
	cursor: default;
	background: #dee1e6;
}
.fr > .fhead > * {
	line-height: 29px;
	padding: 0 8px;
}
.fr > .fhead > h3 {
	display: block;
	float: left;
	width: calc(100% - 45px);
	font-weight: normal;
	font-size: 12px;
}
.fr > .fhead > button {
	display: block;
	float: right;
	border: 0;
	background: #dee1e6;
	width: 45px;
	font-size: 24px;
	transition: 0.2s;
}
.fr > .fhead > button:after {
	content: "×";
	font-family: Arial;
}
.fr > .fhead > button:hover {
	background: #e81123;
	color: #fff;
}
.fr > iframe,
.fr > .cover {
	top: 29px;
	width: 100%;
	height: calc(100% - 29px);
	border: 0;
}
.fr > .cover { display: none; }
.fr > .border {
	position: absolute;
	user-select: none;
}
.fr > .border.t  { top: -1px; left:  0  ; right: 45px;                            height: 8px; }
.fr > .border.tr { top: -1px;             right: -8px;               width:  8px; height: 8px; }
.fr > .border.r  { top:  7px;             right: -8px; bottom:  0  ; width:  8px;              }
.fr > .border.br {                        right: -8px; bottom: -8px; width:  8px; height: 8px; }
.fr > .border.b  {            left:  0  ; right:  0  ; bottom: -8px;              height: 8px; }
.fr > .border.bl {            left: -8px;              bottom: -8px; width:  8px; height: 8px; }
.fr > .border.l  { top:  7px; left: -8px;              bottom:  0  ; width:  8px;              }
.fr > .border.tl { top: -1px; left: -8px;                            width:  8px; height: 8px; }
.resizable > .fr > .border.t  { cursor: n-resize; }
.resizable > .fr > .border.tr { cursor:ne-resize; }
.resizable > .fr > .border.r  { cursor: e-resize; }
.resizable > .fr > .border.br { cursor:se-resize; }
.resizable > .fr > .border.b  { cursor: s-resize; }
.resizable > .fr > .border.bl { cursor:sw-resize; }
.resizable > .fr > .border.l  { cursor: w-resize; }
.resizable > .fr > .border.tl { cursor:nw-resize; }

#cover {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
}