styles.css

body 
{
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
}
	
	
.cf:before,
.cf:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.cf:after {
	clear: both;
}
	
p 
{
	margin: 0;
	padding-bottom: 5px;
}
	
a, a:active, a:hover 
{
	text-decoration:none;
	color:#533787;
}
	
a:hover
{
	text-decoration:underline;
}
	
#editor-container
{
	position:relative;
}
	
#imageMask
{
	width: 704px;
	height: 480px;
	position: relative;
	float: left;
}
#imgCursor, #selectedBlock
{
	width: 14px;
	height: 14px;
	position: absolute;
}
#imgCursor
{
	border: 1px solid green;
}
#selectedBlock
{
	border: 1px solid red;
}
	
#imageLegend 
{
	position:absolute;
	top:0;
	left:0;
}
	
#imageLegend .blockError
{
	width:14px;
	height:14px;
	border:1px solid yellow;
	position:absolute;
}
	
#imageInfo 
{
	height: 15px;
	margin-bottom: 6px;
	width: 702px;
	position:relative;
	float:left;
}
	
	
#imageInfo p
{
	padding:0;
}
		
#errorOverview
{
	float:right;
}
	
#errorOverview input
{
	margin: 0 6px 0 4px;
}
	
#spinner 
{
	background: url("./ajax-loader.gif") no-repeat scroll center center rgba(0, 0, 0, 0);
	position:absolute;
	top:9px;
	left:374px;
	width:208px;
	height:13px;
	visibility: hidden;
}
#spinner.visible 
{
	visibility:visible;
}
	
select 
{
	border: 1px solid #DEDEDE;
	margin: 5px;
	width: 170px;
}
	
input 
{
	border: 1px solid #DEDEDE;
	margin: 5px;
}
	
#frameMmb
{
	border: 1px solid #DEDEDE;
	height: 70px;
	margin: 5px;
	resize: none;
	width: 993px;
}
	
#globalMmb
{
	border: 1px solid #DEDEDE;
	height: 70px;
	margin: 5px;
	resize: none;
	width: 993px;
}
	
#selectedFrame 
{
	width:1000px;
}
	
#operations 
{
	background-color: #FAFAFA;
	border: 1px solid #DEDEDE;
	float: right;
	height: 647px;
	padding: 10px;
	width: 255px;
	overflow-y:scroll;
}
	
#globalOperations 
{
	margin-bottom:30px;
}
	
#bitShiftOp 
{
	text-align:center;
}
	
#log 
{
	border: 1px solid #DEDEDE;
	float: left;
	height: 160px;
	margin: 5px 0;
	width: 701px;
	resize:vertical;
}
	
#imgLink
{
	float: left;
	margin: 5px 0 0;
	padding: 0;
}
	
.op
{
	background-color: #EBEBEB;
	border: 1px solid #DEDEDE;
	padding: 5px;
	margin-bottom:8px;
	position:relative;
}
	
.op-title 
{
	cursor:pointer;
	text-decoration:underline;
	color:blue;
}
	
.op-remove
{
	position:absolute;
	top:6px;
	right:5px;
	font-size:12px;
	color:blue;
	cursor:pointer;
}
	
.xor-bitpos
{
	padding-top:22px;
}
	
.xor-bitpos .pos 
{
	display:inline-block;
	width:93px;
}
	
.xor-bitpos .mask 
{
	display:inline-block;
	width:93px;
}
	
.mb-op .pos
{
	float:left;
	width:212px;
}
	
.mb-op .l1
{
	float:left;
	clear:left;
	width:99px;
}
	
.mb-op .l2
{
	float:left;
	width:99px;
}
	
.mb-op .l3
{
	float:left;
	width:99px;
}
	
.mb-op .l4
{
	float:left;
	width:99px;
}
	
.mb-op .c1
{
	float:left;
	width:99px;
}
	
.mb-op .c2
{
	float:left;
	width:99px;
}
	
.mb-op .dir
{
	float:left;
	width:99px;
}
	
#newVersion
{
	border: 1px solid red;
	font-size: 18px;
	text-align: center;
	padding: 7px;
}
	
#scrubber
{
	position:relative;
	width: 643px;
	height:10px;
	border:1px solid #000;
	float:left;
	margin:10px 0;
}
	
#scrubHandle
{
	position:absolute;
	width: 10px;
	height:20px;
	top:-5px;
	background-color:#dedede;
}
	
#scrubber.disabled
{
	border-color:#dedede;
}
	
#scrubber.disabled #scrubHandle
{
	display:none;
}
	
#playPause
{
	display: block;
	float: left;
	margin: 6px;
}
	
#frameNumber 
{
	float: left;
	margin: 7px;
	width: 24px;
}