style.css

* {
	margin: 0px;
	padding: 0px;
}

body {
	background-color: #444444;
	font-family: Verdana, Arial;
	font-size: 12px;
}

table {
	border: 0;
}

#wrapper {
	z-index: 0;
	width: 640px;
	height: 530px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	overflow: hidden;
}

#wrapper.startScreen {
	background-image: url("images/ui/start.png");
}

#wrapper.credits {
	background-image: url("images/ui/credits.png");
}

.startScreen .intro {
	width: 640px;
	height: 530px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 10;
	background-image: url("images/ui/intro.png");
}

#map {
	z-index: 1;
	width: 640px;
	height: 480px;
	position: absolute;
	top: 50px;
	background-color: grey;
    pointer-events: all;
}

#map div {
    width: 32px;
    height: 32px;
    float: left;
    background-image: url('images/Sprite-Kevin.png');
    cursor: pointer;
}

#map div[data-blocker = 'true']:hover {
    box-shadow: inset 0 0 10px red;
}

#map div[data-blocker = 'false']:hover {
    box-shadow: inset 0 0 10px green;
}

#map .blueBoxShadow {
    box-shadow: inset 0 0 10px blue;
}

#objects {
	z-index: 500;
	width: 640px;
	height: 480px;
	position: absolute;
	top: 50px;
    pointer-events: none;
}

#objects .lifebar {
	z-index: 3000;
	width: 20px;
	height: 3px;
	background: red;
	position: absolute;
}

#objects .lifebar .currentLife {
	width: 20px;
	height: 3px;
	position: relative;
	float: left;
	background: green;
}

#particles {
	z-index: 3;
}

#shroud {
	z-index: 50000;
	width: 640px;
	height: 530px;
	position: absolute;
	top: 0px;
	background: black;
	opacity: 0.7;
	display: none;
}

.overlay {
	z-index: 60000;
	width: 265px;
	height: 125px;
	position: absolute;
	top: 190px;
	left: 164px;
	background-image: url("images/ui/overlay.png");
	font-size: 40px;
	padding: 20px;
	color: white;
	display: none;
	line-height: 125px;
	text-align: center;
}

#overlayWon {
	z-index: 100000;
	width: 640px;
	height: 530px;
	position: absolute;
	top: 0px;
	left: 0px;
	background-image: url("images/ui/win.png");
	display: none;
}

.button {
	width: 150px;
	height: 45px;
	position: absolute;
	cursor: pointer;
	display: block;
	color: white;
}

.button.visual {
	width: 156px;
	height: 47px;
	background-image: url("images/ui/button.png");
	top: 173px;
	left: 70px;
	line-height: 47px;
	font-size: 14px;
	text-align: center;
	text-weight: bold;
}

.button#startGame {
	top: 353px;
	left: 151px;
}

.button#viewCredits {
	top: 353px;
	left: 339px;
}

.button#backToStartMenu {
	top: 453px;
	left: 84px;
}

#interface {
	z-index: 5000;
}

#interface {
	width: 640px;
	height: 50px;
	position: relative;
	left: 0px;
	top: 0px;
	background-color: green;
}

#interface #combatInterface {
    background-image: url('images/ui/titlebar-empty.png');
    width: 640px;
    height: 50px;
}

#interface #fullTitleBar {
    background-image: url('images/ui/titlebar-full.png');
    width: 20px;
    height: 50px;
}

#interface #combatInterface #lifeIcon {
    position: absolute;
    top: 13px;
    left: 385px;
    font-size: 20px;
    color: lightgrey;
}

#interface #combatInterface #creditIcon {
    position: absolute;
    top: 13px;
    left: 504px;
    font-size: 20px;
    color: lightgrey;
}

#objects .enemy {
	width: 32px;
	height: 32px;
	position: absolute;
}

#objects .marine {
	background-image: url("images/units/marine.png");
}

#objects .elite {
	background-image: url("images/units/elite.png");
}

#objects .tank {
	background-image: url("images/units/tank.png");
}

#objects .hoverBike {
	background-image: url("images/units/hoverbike.png");
}

#objects .jeep {
	background-image: url("images/units/jeep.png");
}

#objects .spaceKnight {
	background-image: url("images/units/spaceknight.png");
}

#objects .rocketeer {
	background-image: url("images/units/rocketeer.png");
}

#objects .jet {
	background-image: url("images/units/jet.png");
}

#objects .ironclad {
	background-image: url("images/units/ironClad.png");
}

#objects .specOps {
	background-image: url("images/units/specOps.png");
}

#objects .tower {
    position: absolute;
    width: 32px;
}

#objects .tower .turret {
    position: absolute;
    float: left;
    width: 32px;
}

#objects .tower .base {
    margin-top: 4px;
}

#objects .projectile {
	position: absolute;
}

#objects .laser {
	width: 32px;
	height: 32px;
	background-image: url("images/bullets/blaster.png");
}

#objects .rocket {
    width: 32px;
    height: 32px;
    background-image: url("images/bullets/rocket.png");
}

#objects .shockwave {
	width: 32px;
    height: 32px;
    background-image: url("images/bullets/freeze.png");
}

#objects .bolt {
	width: 32px;
    height: 32px;
    background-image: url("images/bullets/plasma.png");
}

#objects .bloodSplash {
	width: 32px;
	height: 32px;
	position: absolute;
	background-image: url("images/animation/splatter.png");
}

#objects .explosion {
	width: 32px;
	height: 32px;
	position: absolute;
	background-image: url("images/animation/explosion.png");
}

#objects .summon {
	z-index: 4000;
	width: 32px;
	height: 32px;
	position: absolute;
	background-image: url("images/animation/summon.png");
}

#buildMenu {
    display: none;
    top: 50px;
    left: 375px;
    position: absolute;
    width: 265px;
    height: 480px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-image: url("images/ui/menu-background.png");
    color: lightgray;
}

#buildMenu div {
    border-bottom: 2px solid grey;
    cursor: pointer;
}

#buildMenu #price {
    border: none;
    float: right;
}

#buildMenu div ul {
    list-style-type: none;
    margin-top: 5px;
}

#buildMenu div ul li {
   width:136px;
}

#buildMenu div ul li div {
    background: url('images/ui/icons-sprite.png') no-repeat;
    width: 20px;
    height: 20px;
    border: none;

}

#buildMenu .damageIcon {
    background-position: 0 0;
    display: inline-block;
    width: 20px;
    height: 20px;
}

#buildMenu .firerateIcon {
    background-position: -20px 0;
    display: inline-block;
    width: 20px;
    height: 20px;
}

#buildMenu .rangeIcon {
    background-position: -40px 0;
    display: inline-block;
    width: 20px;
    height: 20px;
}

#buildMenu .weaknessIcon {
    background-position: -60px 0;
    display: inline-block;
    width: 20px;
    height: 20px;
}

#buildMenu div h4 {
    padding-left: 5px;
}

#buildMenu div img {
    float: right;
    margin: 40px 37px 0 0;
}

#buildMenu div .price {
    float: right;
    margin: 45px 50px 0 0;
}

#buildMenu .redState {
    background-color: red;
    opacity: 0.2;
}

#buildMenu .close {
    cursor: pointer;
    background: url('images/ui/icons-sprite.png') -80px 0;
    width: 20px;
    height: 20px;
    border: none;
}