ykill/web/static/css/kill.ccss

#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
		position: relative // for .tooltip
		&:hover .tooltip:
			display: block

	.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

	th:
		&:nth-child(1):
			width: 33px
		&:nth-child(2):
			width: 200px
		&:nth-child(3):
			width: 33px
		&:nth-child(4):
			width: 70px

	td:
		height: 66px
		&:nth-child(1):
			white-space: normal
			line-height: 0
		&:nth-child(2):
			padding-left: 5px
		&:nth-child(3):
			white-space: normal
			line-height: 0
			overflow: visible
			> div:
				position: relative // for .tooltip
				&:hover .tooltip:
					display: block
		&:nth-child(4):
			text-align: right
			padding-right: 8px

	td.attacker_type:
		height: auto
		line-height: normal
		background-color: #222
		padding: 2px 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: 285px
	th:nth-child(3):
		width: 65px
	th:nth-child(4):
		width: 117px

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

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

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

.tooltip:
	display: none
	position: absolute
	top: 32px
	left: 8px
	line-height: 1em
	padding: 8px 10px
	background-color: rgba(40, 40, 40, 0.9)
	white-space: nowrap
	text-align: center
	z-index: 1
	pointer-events: none