style.css

html, div, a, p{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  box-sizing: inherit;
  text-align: inherit;
  text-decoration: inherit;
  vertical-align: inherit;
  color: inherit;
  background: transparent;
}

ul {
  list-style: none;
}

h1 {
  color: white;
  font-size: 36px;
  text-align: center;
	font-family: 'Limelight';
}

body {
  background: black;
  width: 800px;
  margin: 0px auto 0 auto;
  font-family: 'Permanent Marker';
}

.kbd {
padding:0.1em 0.6em;
border:1px solid #ccc;
font-size:11px;
font-family:Arial,Helvetica,sans-serif;
background-color:#f7f7f7;
color:#333;
-moz-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
-webkit-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
display:inline-block;
margin:0 0.1em;
text-shadow:0 1px 0 #fff;
line-height:1.4;
white-space:nowrap;
}


.logo {
  	font-family: 'Limelight';
  margin: 0 auto;
  /*border: 1px solid red;*/
  color: white;
  display: block;
  width: 125px;
  text-align: center;
}

.logo:hover {
  text-decoration: underline;
}

.home {
  margin: 0 auto;
  background-color: #0077b5;
  color: white;
  display: block;
  width: 100px;
  text-align: center;
}

#page1 {
  visibility: visible;
  float: left;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 1000;
  background-color: black;
  /*font-family: 'Permanent Marker';*/
}

#page1 div {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  /*opacity: 0.6;*/
  z-index: 1000;
  background-color: black;
  color: white;
  border: 1px solid #000;
  text-align: center;

  /*border: 1px solid white;*/
}

#page1 p {
  width: 300px;
  margin: 220px auto 250px auto;
  opacity: 1.0;
  border: 1px solid red;
}

.next{
  background-color: yellow;
  color: black;
  border: 1px solid white;
}


#page2 {
  visibility: hidden;
  float: left;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 1000;
  background-color: black;
}

#page2 .overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: black;
  color: white;
  border: 1px solid #000;
  text-align: center;

  /*border: 1px solid white;*/
}

#page .keymap{
  width: 500px;
  margin: 0 auto;
}

#page2 p {
  width: 200px;
  opacity: 1.0;
  text-align: left;
}

#page2 .left {
  border: 1px solid red;
  float: left;
}
#page2 .right {
  border: 1px solid red;
  float: left;
}

#page2 .next{
  /*position: absolute;
  top: 250px;
  left: 450px;*/
  background-color: yellow;
  color: black;
  border: 1px solid white;
  z-index: 1001;
}

#page3 {
  visibility: hidden;
  float: left;
  /*position: absolute;
  left: 0px;
  top: 0px;*/
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 1000;
  background-color: black;
}

#page3 div {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  /*opacity: 0.6;*/
  z-index: 1000;
  background-color: black;
  color: white;
  border: 1px solid #000;
  text-align: center;
  /*border: 1px solid white;*/
}

#page3 p {
  width: 600px;
  margin: 220px auto 250px auto;
  opacity: 1.0;
  border: 1px solid red;
}

.launch{
  background-color: yellow;
  color: black;
  border: 1px solid white:
}

#startGame {
  visibility: hidden;
  float: left;
  /*position: absolute;
  left: 0px;
  top: 0px;*/
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 1000;
  background-color: black;
}

#startGame div {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  /*opacity: 0.6;*/
  z-index: 1000;
  background-color: black;
  color: white;
  border: 1px solid #000;
  text-align: center;
  /*border: 1px solid white;*/
}

#startGame p {
  width: 500px;
  margin: 220px auto 250px auto;
  opacity: 1.0;
  border: 1px solid red;
}

.launch{
  background-color: yellow;
  color: black;
  border: 1px solid white:
}



#gameOver {
  visibility: hidden;
  float: left;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 1000;
  background-color: black;
  /*font-family: 'Permanent Marker';*/
}

#winner-player {
  visibility: hidden;
}
#winner-nemesis {
  visibility: hidden;
}


#ending {
  width: 300px;
  margin: 220px auto 250px auto;
  opacity: 1.0;
  border: 1px solid red;
  color: white;
  position: relative;
  top: -600px;
}





#game-canvas{
  margin: 0 auto;
}




/*Status Display Overlay*/
/*div display container*/
.display {
  position: absolute;
  top: 100px;

  color: white;
  font-size: 24px;
  font-family: "Verdana";
}

/*left*/
.shields {
  position: absolute;
  top: -75px;
  left: 25px;
  width: 125px;

}
.shield-status {
  float: right;

}

.lives {
  position: absolute;
  top: -50px;
  left: 25px;
  width: 120px;
}
.lives-count {
  float: right;
}

/*center*/


.rounds {
  position: absolute;
  top: -40px;
  left: 350px;
  width: 120px;
}
.rounds-count {
  float: right;
}

/*right*/
.shields_p2 {
  position: absolute;
  top: -75px;
  left: 550px;
  width: 125px;

}
.shield-status_p2 {
  float: right;

}

.lives_p2 {
  position: absolute;
  top: -50px;
  left: 550px;
  width: 120px;
}
.lives-count_p2 {
  float: right;
}

/*End Status Display*/