html, body {
	overflow: hidden;
	height: 100%;
}

.logo {
	width: 32px;
	height: 32px;
	margin: 10px 0;
	background: url(../img/logo.png);
}

#wrapper {
	width: 100%;
	height: 100%;
	background: #bcbcbc;
	color: #444;
}

header, footer {
	position: relative;
	height: 53px;
	background: url(../img/bg-header.png);
	text-align: center;
}

footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: url(../img/bg-footer.png);
}

.region {
	overflow: hidden;
	position: absolute;
	top: 0;
	height: 100%;
	text-align: left;

	&.tl, &.bl {
		left: 0;
	}
	&.tr, &.br {
		right: 0;
	}
	&.bm, &.tm {
		position: relative;
		display: inline-block;
	}
	ul {
		float: left;
	}
}

#body {
	overflow: hidden;
	position: absolute;
	top: 58px;
	right: 5px;
	bottom: 58px;
	left: 5px;
}

section {
	overflow: hidden;
	position: absolute;
	left: 0;
	z-index: 1;
}
.inner {
	position: absolute;
	top: 5px;
	right: 5px;
	bottom: 5px;
	left: 5px;
}

.frame {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 1px solid #9b9b9b;
	background: #fff;
	box-shadow: inset 0px 1px 0 #dedede;
	font: 12px 'bitstream vera sans mono', monospace;

	&.focused {
		border-color: #666;

		.settings {
			opacity: 0;
		}
	}
	textarea {
		margin: 0;
		padding: 4px;
		border: 0;
		background: transparent;
		box-sizing: border-box;
		font: inherit;
		resize: none;

		&.is-hidden {
			display: none;
		}
		&:focus {
			outline: none;
		}
	}
	iframe {
		width: 100%;
		height: 100%;
		border: 0;
	}
	.settings {
		position: absolute;
		z-index: 2;
		top: 7px;
		right: 7px;
		height: 19px;
		padding: 0 5px;
		border-radius: 3px;
		border: 1px solid #9b9b9b;
		background: #fff;
		line-height: 20px;
		opacity: .6;
		.transition(opacity .3s);
	}
	.active_line {
		background: #f5f5f5;
	}
}

.handle {
	position: absolute;
	z-index: 3;
	width: 10px;
	height: 10px;
	background: rgba(0, 0, 0, .1);
	cursor: move;

	&.vert {
		background: rgba(255, 0, 0, .3);
		background: url(../img/handle-vert.png) no-repeat center;
		cursor: ew-resize;
	}
	&.horz {
		background: rgba(0, 0, 255, .3);
		background: url(../img/handle-horz.png) no-repeat center;
		cursor: ns-resize;
	}
}

/**
 * Codemirror overrides
 */
.CodeMirror {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	font: inherit;
}

.CodeMirror-scroll {
	overflow: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: auto;
}
