html{
  overflow-y: scroll;
}
#bg-image {
  background: url('/img/screenshot-bg-adjusted.jpg') no-repeat center center;
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -1;
}

.collapsing
{
  transition: none;
}
table { background-color: #141414; }
#combatTable > tbody > tr > td:nth-child(1) { font-weight: bold; font-size: 1.1em; }
#goodsTable > tbody > tr > td:nth-child(1) { font-weight: bold; font-size: 1.1em; }

#combatTable > tbody > tr:nth-child(1) > td:nth-child(1) { color: #db0000; }
#combatTable > tbody > tr:nth-child(2) > td:nth-child(1) { color: #c75f00; }
#combatTable > tbody > tr:nth-child(3) > td:nth-child(1) { color: #e7e700; }
#combatTable > tbody > tr:nth-child(4) > td:nth-child(1) { color: #3337dc; }
#combatTable > tbody > tr:nth-child(5) > td:nth-child(1) { color: #898c89; }
#combatTable > tbody > tr:nth-child(6) > td:nth-child(1) { color: #a901a8; }
#combatTable > tbody > tr:nth-child(7) > td:nth-child(1) { color: #0cd6d6; }
#combatTable > tbody > tr:nth-child(8) > td:nth-child(1) { color: #05cb03; }

#goodsTable > tbody > tr:nth-child(1) > td:nth-child(1) { color: #db0000; }
#goodsTable > tbody > tr:nth-child(2) > td:nth-child(1) { color: #c75f00; }
#goodsTable > tbody > tr:nth-child(3) > td:nth-child(1) { color: #e7e700; }
#goodsTable > tbody > tr:nth-child(4) > td:nth-child(1) { color: #3337dc; }
#goodsTable > tbody > tr:nth-child(5) > td:nth-child(1) { color: #898c89; }
#goodsTable > tbody > tr:nth-child(6) > td:nth-child(1) { color: #a901a8; }
#goodsTable > tbody > tr:nth-child(7) > td:nth-child(1) { color: #0cd6d6; }
#goodsTable > tbody > tr:nth-child(8) > td:nth-child(1) { color: #05cb03; }

/* Responsive Tables */
@media only screen and (max-width: 768px) {
  .responsiveTable table, .responsiveTable thead, .responsiveTable tbody, .responsiveTable th, .responsiveTable td, .responsiveTable tr {
  	display: block;
  }
  .responsiveTable thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .responsiveTable tr {
    border: 1px solid #ccc;
  }
  .responsiveTable td {
  	/* Behave  like a "row" */
  	border: none;
  	border-bottom: 1px solid #eee;
  	position: relative;
  	padding-left: 50% !important;
  }
  .responsiveTable td:before {
  	/* Now like a table header */
  	position: absolute;
  	/* Top/left values mimic padding */
  	top: 6px;
  	left: 6px;
  	width: 45%;
  	padding-right: 10px;
  	white-space: nowrap;
  }


  /*
  Label the data
  */
  table#combatTable>tbody>tr>td:nth-of-type(1):before { content: "Name"; }
  table#combatTable>tbody>tr>td:nth-of-type(2):before { content: "Troops Killed"; }
  table#combatTable>tbody>tr>td:nth-of-type(3):before { content: "Troops Produced"; }
  table#combatTable>tbody>tr>td:nth-of-type(4):before { content: "Troops Lost"; }
  table#combatTable>tbody>tr>td:nth-of-type(5):before { content: "Buildings Lost"; }
  table#combatTable>tbody>tr>td:nth-of-type(6):before { content: "Buildings Razed"; }
  table#combatTable>tbody>tr>td:nth-of-type(7):before { content: "Efficiency"; }
  table#combatTable>tbody>tr>td:nth-of-type(8):before { content: "K/D"; }

  table#goodsTable>tbody>tr>td:nth-of-type(1):before { content: "Name"; }
  table#goodsTable>tbody>tr>td:nth-of-type(2):before { content: "Gold Produced"; }
  table#goodsTable>tbody>tr>td:nth-of-type(3):before { content: "Highest Population"; }
  table#goodsTable>tbody>tr>td:nth-of-type(4):before { content: "Gold per Peasant"; }
  table#goodsTable>tbody>tr>td:nth-of-type(5):before { content: "Food Produced"; }
  table#goodsTable>tbody>tr>td:nth-of-type(6):before { content: "Iron Produced"; }
  table#goodsTable>tbody>tr>td:nth-of-type(7):before { content: "Stone Produced"; }
  table#goodsTable>tbody>tr>td:nth-of-type(8):before { content: "Wood Produced"; }
  table#goodsTable>tbody>tr>td:nth-of-type(9):before { content: "Pitch Produced"; }

  .responsiveTable table {
  	width: 100%;
  	border-collapse: collapse;
  }
  /* Zebra striping */
  .responsiveTable tr:nth-of-type(odd) {
  	background: #343434;
  }
  .responsiveTable th {
  	background: #333;
  	color: white;
  	font-weight: bold;
  }
  .responsiveTable td, th {
  	padding: 6px;
  	border: 1px solid #ccc;
  	text-align: left;
  }
}
/* END Responsive Tables */