.linear-gradient(@start, @finish) {
	background: -moz-linear-gradient(top, @start 0%, @finish 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @start), color-stop(100%, @finish));
	background: -webkit-linear-gradient(top, @start 0%, @finish 100%);
	background: -o-linear-gradient(top, @start 0%, @finish 100%);
	background: -ms-linear-gradient(top, @start 0%, @finish 100%);
	background: linear-gradient(top, @start 0%, @finish 100%);
}

.transition(@property) {
	-moz-transition: @property;
	-webkit-transition: @property;
}

@import "base";
@import "state";

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

.tabs {
	overflow: hidden;
	z-index: 2;
	float: left;
	margin: 10px 0 0 24px;
	li {
		display: inline-block;
	}
	a {
		display: block;
		padding: 0 12px;
		border: 1px solid transparent;
		border-bottom: 0;
		color: #555;
		line-height: 24px;

		&.is-active {
			border-color: #b1b1b1;
			border-radius: 3px 3px 0 0;
			background: #fff;
			color: #222;
		}
	}
}

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

header {
	position: relative;
	height: 34px;
	.linear-gradient(#f7f7f7, #dcdcdc);
	border-bottom: 1px solid #b1b1b1;
	text-align: center;
}

.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: 35px;
	right: 0;
	bottom: 0;
	left: 0;
}

section {
	overflow: hidden;
	position: absolute;
	left: 0;
	z-index: 1;
}
.inner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.frame {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	font: 12px 'bitstream vera sans mono', monospace;

	&.focused {
		border-color: #666;

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

		&: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;
	}
}

