/* CSS Document */
.battleground {
	background-image: url('../media/sand.jpg');
}

.logo {
	right:0px;
	position:absolute;
}

.explosion {
	z-index:400;
	position:absolute;
	left:0px;
	top:0px;
}

#controller {
	right:0px;
	top:300px;
	position:fixed;
	z-index:300;
	opacity: 0.8;
}
.tank_top {
	background-image:url(../media/tank-turret.png);
	width: 64px;
	height:64px;
}
.tank_laser {
	background-color: #F00;
	left: 32px;
	bottom: 60px;
	position:absolute;
	width: 4px;
	height: 0px;
	transition: all 0.5s;
	opacity: 0.0;
}

.tank_laser_fire {
	width:33px;
	height:68px;
	/*bottom:60px;
	position:fixed;*/
	top:0px;
	margin-top:-45px;
	margin-left:-14px;
	background-image: url(../media/fire.gif);
	border-radius:5px;
}

.ui-footer {
	position: absolute;
	bottom: 0px;
	height: 20px;
	width: 100%;
	opacity: 0.8;
}

.ui-header {
	opacity: 0.8;
}

.tank_base {
	position:relative;
	top: 0px;
	left: 0px;
	z-index:99;
}

.tank_top {
	position:absolute;
	left: 0px;
	top: 0px;
	transform: rotate(0deg);
	z-index:100;
	transition: all 1s;
}

.item {
	position: relative;
	width:64px;
	height:64px;
}

.tank {
	position: absolute;
	width:64px;
	height:64px;
	left:100px;
	top:100px;
	transition: all 1s;	
}

.inner_tank {
	position: absolute;
	transition: all 1s;	
}
.grid_table {
	border:none;
}
.grid_cell {
	width:64px;
	min-width:64px;
	height:64px;
	border-style:dashed;
	border-width:0;
	border-color:#000;
	font-size:x-small;
	text-align: center;
	position:relative;
}

.grid_cell:hover {
	background-color: rgba(200,255,200,0.3);
	border-radius: 5px;
	opacity:1.0;
}

.tank_spacer {
	height:64px;
}

.tank_stats {
	background-color: rgba(255,255,255,0.3);
	font-size:smaller;
}
.tank_color {
	width:64px;
	text-align: center;
	background-color: rgba(255,0,0,0.5);
	border-radius:5px;
}

.popup {
	background-image:url('../media/steel.png');
	padding:20px;
}

.popup_contents {
	background-color:rgba(255,255,255,0.5);
	border-radius:5px;
	padding:10px;
}

#tankDetails {
	max-width: 200px;
}

#tankInfo-popup {
	opacity: 0.8;
}

.tank_command {
	width:10px;
}

.list_tick {
	list-style-image:url(../media/tick.png);
}

.list_cross {
	list-style-image:url(../media/cross.png);
}
.progress_holder {
	width:100%;
	height:5px;
	background:linear-gradient(to right, #F00,#0A0);
	display:block;
}
.progress_bar {
	width:50%;
	height:5px;
	background:linear-gradient(to right, #0C0,#0F0);
	display:block;
	transition: all 1.0s;
	border-radius:5px;
}

.item_description {
	width: 32px;
	height: 32px;
}

.water {
	width:88px;
	height:88px;
	margin:-12px;
}


#ram_contents {
	width: 100px;
	height: 445px;
	top:0px;
	position:relative;
	overflow-y:scroll;
}

#ram_editor {
	width: 350px;
	height: 400px;
	background-color:transparent;
}

.memory_location {
	border-style:solid;
	border-color:#000;
	border-width:medium;
	background:linear-gradient(#FFF,#FF0);
}

.memory_address {
	color:#666;
	font-family:"Courier New", Courier, monospace;
	font-size:small;
}

.memory_value {
	color:#00F;
	font-family:"Courier New", Courier, monospace;
	background-color:#FFF;
	border-radius:5px;
	margin:5px;
}

#code_status {
	position: absolute;
	top: 0px;
	right: 10px;	
	z-index: 100;
	margin: 10px;
	background-color: rgba(200,255,200,0.7);
	padding:5px;
	border-radius:5px;
	box-shadow: 0px 0px 10px rgba(200,255,200,0.7);
	font-size:small;
}

.spinner {
	width:16px;
	height:16px;
	display:inline-block;
	background-image:url(../media/ajax-loader.gif);
}

.mem_current_line {
	background:linear-gradient(#FFF,#0F6);
}

#control_holder {
	display: inline-block;
	vertical-align:top;
	width:300px;
}

.register {
	border-style:solid;
	border-color:#000;
	border-width:thin;
	background-color: #6FF;
	font-size:xx-small;
	padding: 5px;
}

.register_value {
	background-color: #FFF;
	font-size:medium;
	font-family:"Courier New", Courier, monospace;
	border-radius: 5px;
	padding: 3px;
	border-style:solid;
	border-color:#000;
}

#help {
	z-index:10000;
}

.ins_description {
	font-size:x-small;
}

#help table,th,td {
	border: 1px solid black;
	border-collapse:collapse;
}

#control_status {
	display:block;
	font-size: smaller;
	max-width: 300px;
	padding: 5px;
	border-radius: 5px;
	background-color: #CCC;
	
}

#fetch_execute_cycle {
	transition: all 0.5s;
	float:left;	
	opacity: 0;
}

.memory_label {
	background-color:#EEE;
	background: linear-gradient(#CCC, #FFF); /* Standard syntax */
	font-size:x-small;
	font-style:italic;
	font-weight:bold;
	text-align:center;
	border-radius:5px;
}
#ram_editor_holder {
	display:inline-block;
	position:relative;
	background:linear-gradient(45deg,#FFF,#FFE);
	box-shadow: 5px 5px 5px #888888;
}
#ram_contents_holder {
	display:inline-block;
	vertical-align:top;
	margin:10px;
	background:linear-gradient(45deg,#FFF,#EFF);
	box-shadow: 5px 5px 5px #888888;
}


h2 {
	margin-top:0;
}
#ram h2 {
	background:linear-gradient(#DDD, #FFF);
	border-radius:5px 5px 0px 0px;
	text-align:center;	
}
.ui-header {
	background:linear-gradient(#DDD, rgba(255,255,255,0));
	border-radius:5px 5px 0px 0px;
}

.code_sample {
	background-color:#FFF;
	font-family:"Courier New", Courier, monospace;
	font-size:x-small;
	width: 100%;
	height:50px;
}

.device_table {
	border-collapse:collapse;
	font-size:smaller;
	background-color:#FFF;
}
#dlg {
	background-color:rgba(255,255,255,0.5);
}
#cpu_controller {
	background-image:url(../media/lmccontroller.png);
	width: 399px;
	height: 193px;
	text-align:right;
}

.tank_quote {
	position:absolute;
	display:none;
	left:0px;
	bottom:80px;
	background-color:#FFF;
	border-radius: 5px;
	padding:10px;
}

.tank_quote:after {
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 15px 15px 0;
	border-color: #FFFFFF transparent;
	display: block;
	width: 0;
	z-index: 1;
	bottom: -15px;
	left: 12px;
}

.tank_code {
	background-color:#FF9;
	padding:5px;
	border-radius: 5px;
}
.tank_pc {
	background-color:#6FF;
	padding:5px;
	border-radius: 5px;
}
.tank_ac {
	background-color:#9F0;
	padding:5px;
	border-radius: 5px;
}
.tank_explain {
	font-size:smaller;
}
.tank_dis {
	font-family:"Courier New", Courier, monospace;
	background-color:#EEE;
}
.white {
	padding:10px;
	border-radius:5px;
	margin:10px;
	background-color:#FFF;
}
#levelEditor {
	width:100%;
	height:300px;
}