main.css

/* ----------
   main.css
   ---------- */

/* ---------- General Elements ---------- */

* 
{
    margin: 0;
    padding: 0;
}

body
{
    background-image: url('images/background.jpg');
    background-repeat: repeat;
    font-family: /*"Segoe UI Light",*/ Tahoma, Arial;
    font-size: 11pt;
    font-weight: normal;
    font-style: normal;
    color: #444;
}

img
{
	vertical-align: middle;
}

.background
{
	position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
}

.container
{
	position: absolute;
	margin: 0 8px 8px 0;
}

.separator-h 
{
    width: 1000px;
    height: 2px;
    background-image: url('images/separator-h.png');
    background-repeat: repeat-y;
}

.separator, hr
{
	clear: both;
}

.headerButton
{
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
}

#mainContainer
{
	position: relative;
	margin: auto;
    width: 1000px;
}

/* ---------- The header/banner ---------- */

.banner
{
	position: absolute;
	left: 275px;
	top: 10px;
	width: 429px;
	height: 91px;
}

#mBanner
{
	display: block;
	opacity: 1.0;
	background-image: url('images/banner.png');
}

#kBanner
{
	display: block;
	opacity: 0.0;
	background-image: url('images/klingon-banner.png');
}

#tableBanner
{
	padding: 0 12px;
	width: 1000px;
    height: 100px;
    background-position: center 10px;
    background-repeat: no-repeat;
}

#tableBanner tr td
{
    width: 500px;
    vertical-align: bottom;
}

#banner
{
    width: 389px;
    height: 100px;
    text-align: center;
}

/* Status area */
#statusBar
{
    text-align: right;
    font-size: 11pt;
}

/* Buttons */

#btnStartOS
{
    background-image: url('images/button-power.png');
}

#btnStartOS:hover
{
    background-image: url('images/button-power-hover.png');
}

#btnStartOS:disabled
{
    background-image: url('images/button-power-disabled.png');
}

#btnReset
{
    background-image: url('images/button-restart.png');
}

#btnReset:hover
{
    background-image: url('images/button-restart-hover.png');
}

#btnReset:disabled
{
    background-image: url('images/button-restart-disabled.png');
}

#btnHaltOS
{
    background-image: url('images/button-halt.png');
}

#btnHaltOS:hover
{
    background-image: url('images/button-halt-hover.png');
}

#btnHaltOS:disabled
{
    background-image: url('images/button-halt-disabled.png');
}

/* ---------- Main Content ---------- */

#mainContent
{
	margin: auto;
	position: relative;
    width: 900px;
    min-height: 600px;
}

#mainContent div
{
	margin-bottom: 5px;
}

#utilsContainer
{
	left: 520px;
}

/* Shell */
#display
{
    border: 2px solid #666; 
    cursor: default;
}

#kShellBackground
{
	position: absolute;
	top: 26px;
	left: 2px;
	width: 500px;
	height: 580px;
	opacity: 0.0;
	z-index: -1;
	background-image: url('images/klingon-shell-bg.png');
}

/* Utilities */

/* The Log */
#log
{
    padding: 0 2px;
    width: 371px;
    height: 200px;
    border: 2px solid #666;
    overflow: scroll;
    white-space: nowrap;
    font-size: 11pt;
}

/* CPU display */
#cpuDisplay
{
	margin: 0 0 5px 0;
	width: 108px;
	height: 132px;
	border: 2px solid #666;
	border-collapse: collapse;
}

#cpuDisplayTable
{
	width: 100%;
	height: 100%;
	border-collapse: collapse;
}

#cpuDisplayTable tr td
{
	padding-right: 5px;
	border-bottom: 1px solid #666;
	text-align: right;
}

#cpuDisplayTable tr td:last-of-type /* The last column. */
{
	width: 40px;
}

#cpuDisplayTable tr:last-of-type td /* The last row. */
{
	border: none;
}

#chkbxSingleStep, #chkbxAutoscroll
{
	margin: 0;
	padding-left: 28px;
	line-height: 22px;
	background-image: url('images/check-empty.png');
	background-position-y: center;
	background-repeat: no-repeat;
}

#chkbxSingleStep:hover, #chkbxAutoscroll:hover
{
	cursor: pointer;
	background-image: url('images/check-hover.png') !important;
}

#btnSingleStep
{
	width: 108px;
	line-height: 20px;
	border: 2px solid #666;
	text-align: center;
}

#btnSingleStep:hover
{
	cursor: pointer;
	background-color: #AAAAAA;
}	

/* Memory/HDD Display */
#memoryContainer
{
	background-image: url('images/background.jpg');
	position: absolute;
	top: 233px;
	left: 125px;
}

#memoryHeader
{
	width: 100%;
	height: 17px;
	background-image: url('images/memory-header.png');
	background-repeat: no-repeat;
}

#memoryHeader:hover
{
	background-image: url('images/memory-header-hover.png');
	cursor: pointer;
}

#hddHeader
{
	display: none;
	width: 100%;
	height: 17px;
	background-image: url('images/hdd-header.png');
	background-repeat: no-repeat;
}

#hddHeader:hover
{
	background-image: url('images/hdd-header-hover.png');
	cursor: pointer;
}

#hddExpandedHeader
{
	width: 100%;
	height: 17px;
	display: none;
	background-image: url('images/hdd-header-nomem.png');
	background-repeat: no-repeat;
}

#memoryDisplay
{
	position: relative;
	padding: 0 2px;
	width: 246px;
	height: 218px;
	border: 2px solid #666;
	overflow-x: hidden;
	overflow-y: scroll;
    white-space: nowrap;
}

#memoryDisplayTable /* The table created by the display script. */
{
	border-spacing: 0;
	font-family: monospace;
}

#memoryDisplayTable tr td
{
	width: 25px;
	height: 18px;
}

#memoryDisplayTable tr td:first-child /* The address label */
{
	width: 55px;
}

#hddDisplay
{
	position: relative;
	display: none;
	padding: 0 2px;
	width: 246px;
	height: 218px;
	border: 2px solid #666;
	overflow-x: hidden;
	overflow-y: scroll;
    white-space: nowrap;
    font-family: monospace;
    font-size: 10pt;
}

#hddDisplay div, #hddDisplay div *
{
	margin: 0;
	float: left;
}

#hddDisplay div:hover
{
	background-color: yellow !important;
}

#hddOptions
{
	position: absolute;
	display: none;
	margin-left: 2px;
	padding: 2px 3px 3px 2px;
	top: 30px;
	left: 252px;
	border: 2px solid #666;
	border-left: none;
	opacity: 0.5;
}

#hddOptions:hover
{
	opacity: 1;
}

.hddButton
{
	width: 16px;
	height: 16px;
	border: none;
	cursor: pointer;
}

#btnRefreshHdd 
{
	background-image: url('images/hdd-refresh.png');
}

#btnRefreshHdd:hover
{
	background-image: url('images/hdd-refresh-hover.png');
}

#btnExpandHdd
{
	background-image: url('images/hdd-expand.png');
}

#btnExpandHdd:hover
{
	background-image: url('images/hdd-expand-hover.png');
}

#btnRestoreHdd
{
	display: none;
	background-image: url('images/hdd-restore.png');
}

#btnRestoreHdd:hover
{
	background-image: url('images/hdd-restore-hover.png');
}

#hddHoverInfo
{
	display: none;
	position: absolute;
	background-image: url('images/background.jpg');
	border: 2px solid #666;
	z-index: 200;
	font-family: monospace;
	font-size: 10pt;
}

#hddHoverInfo table
{
	border-collapse: collapse;
}

#hddHoverInfo table tr td
{
	padding: 0 5px;
	border-right: 1px solid #666;
	text-align: center;
}

#hddHoverInfo table tr:first-of-type td /* First row */
{
	font-family: Tahoma, Arial;
}

#hddHoverInfo table tr td:last-of-type /* Last column */
{
	border: none;
}


/* Ready Queue */
#readyQueueContainer
{
	position: absolute;
	top: 484px;
	left: 125px;
}

#readyQueueDisplay
{
	width: 250px;
	height: 96px;
	border: 2px solid #666;
	overflow-x: hidden;
	overflow-y: scroll;
    white-space: nowrap;
}

#readyQueueDisplayTable
{
	border-spacing: 7px 0;
	font-family: monospace;
}

#readyQueueDisplayTable tr td
{
	text-align: right;
}

#readyQueueDisplayTable tr:first-of-type td /* Header row */
{
	border-bottom: 1px solid #666;
}

/* Program Input */
#programInputContainer
{
	position: absolute;
	top: 484px;
	left: 0;
	background-image: url('images/background.jpg');
    background-repeat: repeat;
    z-index: 10;
}

#programInputSubContainer
{
	margin: 0;
	width: 108px;
	height: 96px;
	border: 2px solid #666;
	overflow: hidden;
}

#programInput
{
	padding: 0 2px;
	width: 372px;
	height: 178px;
    background-image: url('images/background.jpg');
    background-repeat: repeat;
    border: none;
    color: #444;
}