
.left-column {
  width: 574px;
  float: left;
}

.right-column {
  float: left;
}

table td {
  vertical-align: top;
}

#starfield-container {
  position: relative;
  width: 552px;
  height: 552px;
}
#starfield-container a {
  display: block;
  position: absolute;
 text-decoration: none;
 color: #fff;
}
#starfield-up-btn {
  top: 0; left: 20px; width: 512px; height: 20px;
  text-align: center;
}
#starfield-down-btn {
  bottom: 0; left: 20px; width: 512px; height: 20px;
  text-align: center;
}
#starfield-left-btn {
  top: 20px; left: 0; width: 20px; bottom: 20px;
  line-height: 512px;
}
#starfield-right-btn {
  top: 20px; right: 0; width: 20px; bottom: 20px;
  line-height: 512px;
}
#starfield {
  width: 512px;
  height: 512px;
  top: 20px;
  right: 20px;
  border: solid 1px #666;
  background: #000;
  position: absolute;
}

.starfield-star {
  position: absolute;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: url(../img/stars_small.png);
  transform: rotate(45deg) scale(0.5);
  cursor: pointer;
}

.starfield-label {
  position: absolute;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, 16px);
  font-size: 10pt;
  cursor: pointer;
  -webkit-user-select: none;
}

.starfield-empire {
  position: absolute;
  color: #fff;
  white-space: nowrap;
  font-size: 10pt;
  cursor: pointer;
  -webkit-user-select: none;
}

#star-details h1 {
  margin-left: 128px;
  margin-bottom: 0px;
}

#star-details div.details {
  margin-left: 128px;
}

.star-small {
  position: absolute;
  cursor: pointer;
  margin: -32px 0 0 -32px;
}

.star-big {
  margin: -128px 0 0 -128px;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

#search {
  width: 492px;
  margin-top: 10px;
  margin-left: 20px;
}

.stores {
  margin-top: 80px;
  border-top: 1px dotted #999;
  padding-left: 64px;
}

.store-details {
  width: 175px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.store-details .delta {
  font-size: 75%;
}

.store-details .delta.negative {
  color: red;
}
.store-details .delta.positive {
  color: green;
}

.planets {
  border-top: 1px dotted #999;
  margin-top: 20px;
}

.planets h2 {
  margin: 0;
}

.planet {
  clear: left;
  height: 64px;
}

.planet-icon {
  width: 64px;
  height: 64px;
  float: left;
}

.planets .planet-details {
  float: left;
}

.planets ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.planets ul li {
  float: left;
  margin-right: 10pt;
}

.planet .congeniality {
  display: inline-block;
  width: 50px;
  border: solid 1px white;
  height: 8px;
  line-height: 6px;
  margin-bottom: 3px;
}

.planet .congeniality span {
  display: inline-block;
  background: #0f0;
  height: 8px;
}

.colony {
  margin-left: 64px;
  margin-bottom: 10px;
}

.colony img {
  float: left;
  margin-right: 8px;
}

.fleets {
  height: 64px;
  padding-left: 64px;
  border-top: 1px dotted #999;
}

.fleet {
  height: 64px;
  clear: both;
}

.fleet-icon {
  position: relative;
  width: 64px;
  height: 64px;
  float: left;
}

.fleet-icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.simulate {
  clear: both;
}

.build-queue-entry {
  clear: both;
  width: 350px;
}

.building-entry {
  clear: both;
  width: 250px;
}

#modify-popup {
  display: none;
  position: fixed;
  left: 50%;
  margin-left: -300px;
  width: 600px;
  top: 100px;
  background: #000;
  padding: 10px;
  border: solid 1px #fff;
}

.simulate {
  padding-bottom: 64px;
}

.actions {
  padding-top: 24px;
  padding-left: 16px;
}