* {
 margin: 0;
 }

body {
  background: #595959;
  margin:0;
  padding:0;
  border:none;
  height: 100%;
  font-family: Tahoma, sans-serif;
}

body.instructions #content {
    background: #ffffff;
	width: 60%;
	height: 100%;
	display: block;
	margin: 20px auto;
	padding: 20px;
}

body.instructions p {
	text-align: left;	
}

#col_left {
	background-color: #f0f0f0;
	width: 30%;
	height: 100%;
	display: block;
	float: left;
	border-right: 3px solid #000000;
	padding: 20px 0px 0px 0px;
}




h1 {
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

p {
	text-align: center;	
}

p.card {
	background-color: #ffffff;
	text-align: left;	
	font-size: 15pt;
	border: 3px solid #000000;
	padding: 10px;
	width: 80%;
	min-height: 200px;
	margin: 10px auto;
}



#col_right {
	background-color: #595959;
	width: 65%;
	display: block;
	float: left;
}


#board { 
     background: url(images/board.jpg) no-repeat;
	 background-size: contain;
	 background-position: center;
	 display: block;
	width: 100%;
	max-width: 1000px;
	height: 100%;
	max-height: 1000px;
	position: relative;
    margin: 0px auto;
}


#container {
  position: relative;
   display: block;
	width: 100%;
	height: 100%;
    margin: 0px auto;
}

	


#pawn_red1_header, #pawn_red2_header, #pawn_red3_header, #pawn_red4_header {
  padding: 10px;
  cursor: move;
  z-index: 10;
}

#pawn_red1 {
  position: absolute;
  z-index: 9;
  top: 74%;
  left: 44%;
  text-align: center;
}

#pawn_red2 {
  position: absolute;
  top: 74%;
  left: 39%;
  z-index: 9;
  text-align: center;
}

#pawn_red3 {
  position: absolute;
  top: 74%;
  left: 34%;
  z-index: 9;
  text-align: center;
}

#pawn_red4 {
  position: absolute;
  top: 74%;
  left: 29%;
  z-index: 9;
  text-align: center;
}


#pawn_blue1_header, #pawn_blue2_header, #pawn_blue3_header, #pawn_blue4_header {
  padding: 10px;
  cursor: move;
  z-index: 10;
}

#pawn_blue1 {
  position: absolute;
  top: 40%;
  left: 19%;
  z-index: 9;
  text-align: center;
}

#pawn_blue2 {
  position: absolute;
  top: 31%;
  left: 19%;
  z-index: 9;
  text-align: center;
}

#pawn_blue3 {
  position: absolute;
  top: 22%;
  left: 19%;
  z-index: 9;
  text-align: center;
}

#pawn_blue4 {
  position: absolute;
  top: 13%;
  left: 19%;
  z-index: 9;
  text-align: center;
}



#pawn_yellow1_header, #pawn_yellow2_header, #pawn_yellow3_header, #pawn_yellow4_header {
  padding: 10px;
  cursor: move;
  z-index: 10;
}

#pawn_yellow1 {
  position: absolute;
  top: 12%;
  left: 49%;
  z-index: 9;
  text-align: center;
}

#pawn_yellow2 {
  position: absolute;
  top: 12%;
  left: 54%;
  z-index: 9;
  text-align: center;
}

#pawn_yellow3 {
  position: absolute;
  top: 12%;
  left: 59%;
  z-index: 9;
  text-align: center;
}

#pawn_yellow4 {
  position: absolute;
  top: 12%;
  left: 64%;
  z-index: 9;
  text-align: center;
}



#pawn_green1_header, #pawn_green2_header, #pawn_green3_header, #pawn_green4_header {
  padding: 10px;
  cursor: move;
  z-index: 10;
}

#pawn_green1 {
  position: absolute;
  top: 47%;
  left: 74%;
  z-index: 9;
  text-align: center;
}

#pawn_green2 {
  position: absolute;
  top: 56%;
  left: 74%;
  z-index: 9;
  text-align: center;
}

#pawn_green3 {
  position: absolute;
  top: 65%;
  left: 74%;
  z-index: 9;
  text-align: center;
}

#pawn_green4 {
  position: absolute;
  top: 74%;
  left: 74%;
  z-index: 9;
  text-align: center;
}