/* General */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
-webkit-print-color-adjust:exact;
  vertical-align: top;
}
*:after {
  box-sizing: border-box; 
}
span {
  vertical-align: baseline;
}

@media screen {
  .print {
    display: none;
  }
}
@media print {
  @page {
    size:297mm 210mm; /* landscape */
    size: landscape;
    size: A4 landscape;
    /*size:210mm 297mm; /* portrait */
  }
  .print.division {
    height: 2em;
  }
  .invisitext {
    opacity: 0.1;
    font-size: 4pt;
  }
}
 
.to_be_superimposed_on {
  position: relative;
}
.superimposed {
  position: absolute;
}
.centred {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
img:not([src]) {
  display: none;
}
.invisible {
  visibility: hidden;
}
.emphasis {
  font-weight: bold;
  font-style: italic;
}
/* Icons */
.icon {
  background-repeat: no-repeat;
  background-size: 100%;
}
div.inline, div.icon {
  display: inline-block;
  vertical-align: middle;
}
.inline.icon, .inline.wrapper {
}
.wrapper {
  position: relative;
}

.cube { 
  width: 1.5em;
  height: 1.5em;
  font-size: 18px;
  display: inline-block;
  vertical-align: middle;
  padding: 0.3em 0.3em 0 0;
  font-weight: bold;
  text-align: center;
}
.cube { background-image: url(cube_white.png); color: black; }
.cube.X { text-align: left; }
.cube.X:after { content: "X"; line-height: 32px; padding-left: 3px; font-family: "Black Chancery"; }
.cube.wood { background-image: url(cube_brown.png); color: white; }
.cube.silk { background-image: url(cube_blue.png); color: white; }

.icon.bridge {
  background-image: url(bridge.png);
  width: 3em;
  height: 1.1em;
}
.icon.hammer {
  background-image: url(hammer.png);
  width: 2em;
  height: 2em;
}

.cash { display: inline-block; width: 2em; height: 2em; border-radius: 1em; 
  border: 1px solid black;
  background-color: #ff0;
  text-align: center; line-height: 2em;
  font-weight: bold;
  margin-top: -0.2em;
  vertical-align: middle;
  font-family: "Mongolian Baiti";
  position: relative;
  color: black;
}
.cash:before {
  content: "£";
}


.icon.vp {
  background-image: url(vp.png);
  width: 2em;
  height: 2em;
  height: 2em;
  /* margin-right: 0.25em; */
}
.manyvpwrapper {
  display: inline-block;
  position: relative;
  /* top: -0.5em; */
}
.icon.floateddown {
  position: absolute;
  left: 1em;
  top: 1em;
}


.slash {
  font-size: 24pt;
  vertical-align: middle;
}
.slash:after {
  content: "/";
}


.gain, .plus {
  font-size: 24pt;
  vertical-align: middle;
}
.gain:after, .plus:after {
  content: "+";
  font-weight: bold;
}
.colon, .minus {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 8px;
}
.colon:before, .colon:after {
  content: " ";
  width: 4px;
  height: 4px;
  background-color: black;
  border-radius: 2px;
  position: absolute;
}
.colon:before {
  top: 2px;
}
.colon:after {
  bottom: 2px;
}
.details .colon {
  width: 4px;
}
.details .colon:before, .details .colon:after {
  width: 2px;
  height: 2px;
}
.minus:after {
  content: " ";
  width: 8px;
  height: 2px;
  background-color: black;
  border-radius: 2px;
  position: absolute;
}

.vertical.icon, .horizontal.icon {
  width:  30px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
.vertical.icon:before, .vertical.icon:after, .horizontal.icon:before, .horizontal.icon:after {
  position: absolute;
  content: " ";
  border-style: solid;
  background: transparent;
}
.vertical.icon {
  background-color: #aaa;
  color: black;
}
.horizontal.icon {
  background-color: #007;
}
.vertical.icon:before {
  top: 4px;
  border-width: 0 7px 8px;
  border-color: black transparent;
  left: 8px;
}
.vertical.icon:after {
  top: 12px;
  left: 12px;
  width: 6px;
  height: 14px;
  background-color: black;
}
.horizontal.icon:after {
  right: 4px;
  border-width: 7px 0 7px 8px;
  border-color: transparent #9BCDEF;
  top: 8px;
}
.horizontal.icon:before {
  right: 12px;
  top: 12px;
  height: 0;
  width: 8px;
  border-color: #9BCDEF;
}

/*
 Buildings tiles
 */
 
.building {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border: 1px solid black;
  text-align: center;
  overflow: hidden; 
  position: relative;
}
.building.icon {
  width: 2em;
  height: 2em;
  position: relative;
  text-align: left;
}
.building.icon:before {
  position: absolute;
  right: 0;
  top: calc(40 / 200 * 2em - 1px);
  width: calc(80 / 200 * 2em);
  height: calc(40 / 200 * 2em);
  background-color: #faa;
  border: 1px solid #900;
  content: " ";
}
.building.icon:after {
  position: absolute;
  top: 0;
  width: 100%;
  height: calc(2em * 40 / 200);
  background-color: #aaa;
  border-bottom: 1px solid black;
  content: " ";
}

.building .name {
  padding: 12px;
  background-color: #aaa;
  height: 40px;
  text-shadow: 1px -1px #222;
}
 
.construction .name {
  background-color: #063; /* #bdf; */
  color: white;
  text-shadow: 1px -1px #0a6;
}
.upgrading .name {
  background-color: #88f;
  text-shadow: 1px -1px #ccc;
}
.horiz .name {
  /* background-color: #f06;
  text-shadow: 1px -1px #a02; */
  background-color: #007;
  text-shadow: 1px -1px #06A;
  color: white;
}
.vert .name {
  background-color: #aaa;
  text-shadow: 1px -1px #ccc;
}
.horiz.vert .name {
  /* background: -webkit-gradient(linear, left top, right bottom, from(#f06), color-stop(0.4, #f06), color-stop(0.6, #c0f), to(#c0f));
  background: -moz-linear-gradient(left,  #f06, #f06, #c0f, #c0f); */
  background: -webkit-gradient(linear, left top, right bottom, from(#007), color-stop(0.4, #007), color-stop(0.6, #aaa), to(#aaa));
  background: -moz-linear-gradient(left,  #007, #007, #aaa, #aaa);
  text-shadow: 1px -1px #06A;
}
.misc .name {
  background-color: #c0f;
  text-shadow: 1px -1px #608;
  color: white;
}
.givesmoney .name {
  background-color: #dd0;
  text-shadow: 1px -1px #ff2;
}
.giveswood .name {
  background-color: #b68642;
  text-shadow: 1px -1px #c97;
}
.givessilk .name {
  background-color: #3547cf;
  color: white;
}
.giveswood.givessilk .name {
  background: -webkit-gradient(linear, left top, right bottom, from(#b68642), color-stop(0.4, #b68642), color-stop(0.6, #3547cf), to(#3547cf));
  background: -moz-linear-gradient(left,  #b68642, #b68642, #3547cf, #3547cf);
  text-shadow: 1px -1px #333;
}
.givesmoney.givessilk .name {
  background: -webkit-gradient(linear, left top, right bottom, from(#dd0), color-stop(0.25, #dd0), color-stop(0.45, #3547cf), to(#3547cf));
  background: -moz-linear-gradient(left,  #dd0, #dd0, #3547cf, #3547cf);
  text-shadow: 1px -1px #333;
}
.givesmoney.giveswood.givessilk .name {
  background: -webkit-gradient(linear, left top, right bottom, from(#dd0), color-stop(0.25, #dd0), color-stop(0.4, #b68642), color-stop(0.6, #b68642), color-stop(0.75, #3547cf), to(#3547cf));
  background: -moz-linear-gradient(left,  #b68642, #b68642, #3547cf, #3547cf);
  text-shadow: 1px -1px #333;
}
.victory .name {
  background-color: #f9f5d8; /*  #f90; */
  text-shadow: 1px -1px #ccb694; /* #fc9; */
}

.building .cost {
  float: right;
  width: 80px;
  height: 40px;
  background-color: #faa;
  border: 1px solid #900;
  padding: 5px;
}
.building.starting .cost {
  display: none;
}

.building .content {
  position: absolute;
  bottom: 0;
  padding-bottom: 30px;
  width: 100%;
}


.building .content:before {
  position: absolute;
    left: 14px;
    bottom: 144px;
  font: 8px serif;
    border: 1px solid #666;
    text-align: center;
    width:       1.5em;
    height:      1.5em;
    line-height: 1.5em; /* vertical centreing */
    border-radius: 1em;
}
.building.starting .content:before {
  /* Omit */
  border-color: transparent;
}
.building.age1 .content:before {
  content: "I";
  background: #bbb;
  color: black;
}
.building.age2 .content:before {
  content: "II";
  background-color: black;
  color: white;
}




/* 
  Building track 
  */
.track {
  background-color: #def;
  border: 2px solid black;
  width: 3000px;
}

.track_space {
  display: inline-block;
  margin-right: 10px;
  padding-top: 10px;
}
.track .building {
  border-color: #888;
  background-color: white;
}
.track .building .cost {
  background-color: #fcc;
  border-color: #e99;
}
.track .reward {
  width: 200px;
  height: 3em;
  background-color: #fdb;
  text-align: center;
  padding: 10px;
  margin-top: 10px;
}
.track .reward.extragain {
  background-color: #bfb;
}
.track .reward.extracost {
  background-color: #fbb;
}

/* Tech grid */
.grid {
  position: relative;
  margin: 20px;
  display: inline-block;
  z-index: -2;
  background: -webkit-gradient(linear, right bottom, left top, from(#007), color-stop(0.2, #007), color-stop(0.7, #aaa), to(#aaa));
  background: -moz-linear-gradient(-45deg,  #aaa 0%, #aaa 20%, #007 70%, #007 100%); /* FF3.6+ */

}
.grid table {
  position: relative;
  z-index: -1;
  border-spacing: 30px;
}
.grid td {
  width:  40px;
  height: 40px;
  vertical-align: middle;
  text-align: center;
  background-color: white;
  border: 2px solid #9BCDEF;
}
.grid .low {
  background-color: #cfc;
}
.grid .starting {
  width:  80px;
  height: 80px;
  border: 4px solid #060;
  position: relative;
  top: -85px;
  text-align: center;
  line-height: 70px;
}
.grid div.reward {
  position: absolute;
}
.grid .reward.line {
  width:  8px;
  height: 8px;
}
.grid .reward.wide {
  width: calc(8 * (40px + 30px) + 20px);
}
.grid .reward.high {
  height: calc((40px + 30px) * 8 + 20px);
}
.grid .reward.diag {
  width: 800px;
}
.grid .reward.diag {
  transform: rotate(45deg);
}
.grid .reward.line.money {
  background-color: #ff0;
  border: 1px solid #aaa;
}
.grid .reward.line.wood {
  background-color: #b68642;
}
.grid .reward.line.silk {
  background-color: #3547cf;
}
.grid .reward.line.woodsilk {
  background: -webkit-gradient(linear, left top, left bottom, from(#b68642), color-stop(0.4, #b68642), to(#3547cf));
  background: -moz-linear-gradient(left,  #b68642, #3547cf);
}
.grid .reward.line.silkwood {
  background: -webkit-gradient(linear, left top, right top, from(#b68642), color-stop(0.6, #3547cf), to(#3547cf));
  background: -moz-linear-gradient(left,  #b68642, #3547cf);
}
.grid img.reward {
  position: absolute;
}
.grid .reminder {
  width: 100%;
  text-align: center;
  vertical-align: middle;
  position: relative;
  top: -30px;
  color: #9bcdef;
}
.grid .reminder .spacer {
  width: 50px;
}
.grid .reminder .colon:before, .grid .reminder .colon:after {
  background-color: #9bcdef;
}