HTML, BODY
{
	height: 100%;
	width: 100%;
	margin: 0;
	top: 0px;
	left: 0px;
}
#leftpanel
{
	position:absolute;
	left: 0;
	top: 30px;
	bottom: 0;
	width: 50%;
	height: 100%;
	float: left;
}
#righttophalf
{
	position: absolute;
	top: 30px;
	right: 0;
	bottom: 50%;
	left: 50%;
	float: right;
}
#rightbottomhalf
{
	position: absolute;
	top: 50% + 3px;
	right: 0;
	bottom: 0;
	left: 50%;
	float: right;
	
}
#uppertoolbar
{
	position: absolute;
	display: block;
	left: 2px;
	right: 0px;
	height: 30px;
	top: 0px;
	background-color: #444444;
	overflow: hidden;
}
.upperarea
{
	height: 100%;
	width: 100%;
}
.lowertoolbar
{
	display: block;
	left: 2px;
	right: 0px;
	height: 20px;

	padding-top:1px;
	background-color:#444444;
}
.lowerarea
{
	color: #808080;
	background-color: #0F192A;
	position: absolute;
	top: 21px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	overflow: auto;
	word-wrap: normal;
}
#verticaldragbar {
	position: absolute;
	top: 30px;
	left: 50%;
	background-color:#555555;
	height: 100%;
	float: left;
	width: 3px;
	cursor: col-resize;
}
#horizontaldragbar {
	position: absolute;
	background-color:#555555;
	top: 50%;
	left: 50%;
	right: 0;
	float: right;
	height: 3px;
	cursor: row-resize;
}

.generatedgif {
	max-width: 200px;
	max-height: 200px;
}