#wrapper:
	padding: 20px

#ship:
	float: left
	width: 356px // 256 + 32 * 2 + 32 (last 32 is for medium charges)
	height: 320px
	line-height: 0
	background-position: 32px 32px
	background-repeat: no-repeat

	#high:
		margin-left: 32px
	#high_charges:
		display: inline-block;
		margin-left: 32px
	#medium:
		width: 32px
		float: right
	#medium_charges:
		width: 32px
		float: right
	#rig:
		width: 32px
		float: left
		margin-top: 48px
	#subsystem:
		width: 32px
		float: left
		margin-top: 16px
	#low:
		margin-left: 32px
	#low_charges:
		display: inline-block
		margin: 16px 0 0 32px

	.slot:
		display: inline-block
		width: 32px
		height: 32px
	.avail:
		border: 1px solid #888

table#victim:
	float: right
	table-layout: fixed
	width: 336px
	background-color: #181818

	td:nth-child(1):
		width: 65px
		line-height: 0
	td:nth-child(2):
		width: 271px
		padding-left: 8px

table#attackers:
	float: right
	table-layout: fixed
	width: 336px
	margin-top: 10px

	td:
		height: 64px
		&:nth-child(1):
			width: 33px
			white-space: normal
			line-height: 0
		&:nth-child(2):
			width: 200px
			padding-left: 5px
		&:nth-child(3):
			width: 33px
			white-space: normal
			line-height: 0
		&:nth-child(4):
			width: 70px
			text-align: right
			padding-right: 8px

	tr:nth-child(even):
		background-color: #181818

table#items:
	table-layout: fixed
	width: 500px
	margin-top: 10px

	th:nth-child(1):
		width: 33px
	th:nth-child(2):
		width: 417px
	th:nth-child(3):
		width: 50px

	.slot:
		background-color: #222
		padding: 2px 8px

	tr:nth-child(odd):
		background-color: #181818

	td:nth-child(1):not(.slot):
		line-height: 0
	td:nth-child(3):
		text-align: right
		font-weight: bold
		padding-right: 8px
	.dropped:
		background-color: #050
	.destroyed:
		color: #a22