body {
  width: 95%;
  max-width: 1200px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
  background: black;
  background-image: url("../../images/background.jpg");
  background-attachment: fixed;
  background-repeat: repeat;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  text-align: center;
}


fieldset {
  border: none;
}

select {
  font-size: 1.1em;
}

input {
  font-size: 1.1em;
}

#header {
  width: 100%;
  height: 100px;
  background-image: url("../../images/banner.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: center;
  margin-bottom: 15px;
  border: 1px solid #333333;
}

#footer {
  color: white;
  margin-top: 10px;
  clear: left;
  border: 1px solid #333333;
}

#menu {
  float: left;
  width: 140px;
  margin-bottom: 20px;
}

.submenu h3 {
  margin-bottom: 0px;
  padding-top: 0px;
  margin-top: 0px;
  font-family: "Comic sans MS", "Times New Roman", Times, serif;
  border: none;
  border-left: #2c2c2c solid 1px;
  border-right: #2c2c2c solid 1px;
}

.submenu ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.submenu a {
  /* extend the link to the whole block to make it clickable */
  display: block;
  text-decoration: none;
  color: #888d88;
}

.submenu li {
  border: 1px solid #2c2c2c;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  padding: 2px;
}

.submenu li:hover {
  cursor: pointer;
}

.submenu li:hover a,
a:hover {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.menu_title {
  height: 2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #23465A;
  border-radius: 5px;
}

.page {
  margin-bottom: 15px;
  padding: 5px;
  padding-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  border-radius: 5px;
  background-color: rgba(17, 24, 39, 0.75)
}

.page_title {
  height: 2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #23465A;
  text-transform: capitalize;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.page h1 {
  color: red;
  font-family: "Times New Roman", "Comic sans MS", Times, serif;
}

.page h2 {
  margin: 0px;
  font-family: "Times New Roman", "Comic sans MS", Times, serif;
}

.page h3 {
  text-decoration: underline;
  color: blue;
}

.page a {
  color: #888d88;
  text-decoration: none;
}

.page a:hover {
  font-weight: bold;
  color: white;
}

.page a:active {
  text-decoration: underline;
  color: white;
  font-weight: bold;
}

.page a img {
  border: none;
}

.page img {
  text-align: center;
  margin: auto;
  border: none;
}

.page p {
  padding: 5px;
  text-indent: 0px;
}

.page table {
  border-collapse: collapse;
  margin: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 1px solid #333333;
}

.page td,
.page th {
  border-collapse: collapse;
  padding: 5px;
  border: 1px solid #333333;
}

.page th {
  font-size: 1.0rem;
}

ul.errorlist {
  color: red;
  list-style: none;
  padding-left: 0;
}

.error {
  color: red;
}

.submit_as_link {
  background: none;
  border: none;
  color: blue;
  cursor: pointer;
  text-decoration: none;
  color: #888d88;
  font-size: 0.9rem;
}

.submit_as_link:hover {
  font-weight: bold;
  color: white;
}

.submit_as_link:active {
  font-weight: bold;
  color: white;
}

.overlib {
  padding: 0px;
  z-index: 1000;
  filter: Alpha(Opacity=90);
  opacity: 0.9;
  visibility: hidden;
  position: absolute;
  text-align: left;
  width: 100%;
}

.overlib td {
  padding: 0; /* remove weird padding that doesn't match the inner tooltip */
}

.building_image,
.technology_image {
  width: 120px;
  height: 120px;
}

.building_image img,
.technology_image img {
  margin: 0px;
  padding: 0px;
}

.construction_hover {
  width: 350px;
  border: 2px solid #333333;
}

.construction_hover td {
  padding: 5px;
  vertical-align: top;
}

.construction_hover img {
  border: 2px solid #333333;
}

.construction_price {
  text-align: center;
}

.impossible {
  color: red;
}

.possible {
  color: green;
}

.prod_under {
  color: green;
}

#resource_production {
  width: 95%;
  table-layout: fixed;
}

#object_production {
  width: 95%;
  table-layout: fixed;
}

#technology_tree {
  width: 95%;
  text-align: left;
}

.control-menu {
  border: 1px solid #23465A;
  border-radius: 5px;
}

.control-menu h2 {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#technology_tree p {
  margin: 0;
  padding: 2px;
}

#technology_tree tr:nth-child(even) {
  background-color: #222;
}

#stargate_image {
  border: 1px solid #333333;
}

#stargate_menu {
  width: 95%;
  margin: auto;
  margin-top: 10px;
}

a#unread_messages {
  animation: blinker 1s step-start infinite;
  color: white;
  font-weight: bold;
}

a#incoming_attacks {
  animation: blinker 1s step-start infinite;
  color: red;
  font-weight: bold;
  font-size: 1.3rem;
}

a#incoming_space_probe {
  animation: blinker 1s step-start infinite;
  color: #a39408;
  font-weight: bold;
}

.under_attack {
  border: red solid 1px;
}

.form_warning {
  color: #a39408;
  font-weight: bold;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.page .message {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 80%;
}

#sensors_coordinates table {
  table-layout: fixed;
  width: 100%;
}

#sensors_coordinates input {
  text-align: center;
}

#sensors_planets table {
  width: 100%;
}

#sensors_planets tr:nth-child(even) {
  background-color: #222;
}

#sensors_planets tr .position_column {
  width: 30px;
}

#sensors_planets tr .thumbnail_column {
  width: 45px;
}

#sensors_planets tr .debris_field_column {
  width: 40px;
}

#sensors_planets tr .planet_name_column {
  width: 30%;
}

#sensors_planets tr .player_name_column {
  width: 30%;
}

#sensors_planets tr .player_name_ai {
  color: yellow;
}

#sensors_planets tr .action_column img {
  display: inline;
}

.planet_thumbnail {
  width: 42px;
  height: 42px;
  background: url("../../images/planet_thumbnails.png");
}

#ship_component_description table {
  table-layout: fixed;
  width: 50%;
}

table#create_ship_model_header {
  table-layout: fixed;
  width: 100%;
  text-align: left;
}

table#create_ship_model_header th {
  background-color: #222;
}

table#create_ship_model_preview {
  width: 100%;
  text-align: left;
}

table#create_ship_model_preview th {
  background-color: #222;
}

#create_ship_image {
  float: left;
}

table#create_ship_model_stats {
  width: 80%;
  table-layout: fixed;
  text-align: left;
}

table#create_ship_model_stats,
.page #create_ship_model_stats tr,
.page #create_ship_model_stats td {
  border: 0;
}


table.create_ship_model_components {
  width: 80%;
  text-align: left;
}

table.create_ship_model_components th {
  background-color: #222;
}

table.create_ship_model_components tr td:nth-child(1) {
  width: 20%;
}

table.create_ship_model_components tr td:nth-child(3) {
  width: 10%;
}

.ship_image, .device_image, .defense_image {
  width: 120px;
  height: 130px;
}

.ship_hover {
  width: 400px;
}

.ship_build_form input[type="number"],
.device_build_form input[type="number"],
.defense_build_form input[type="number"] {
  width: 4em;
}

.device_hover, .defense_hover {
  width: 300px;
  color: white;
  border: 2px solid #333333;
}

.device_description, .defense_description {
  vertical-align: top;
}

.device_price, .defense_price {
  text-align: center;
}

#fleet_image {
  border: 1px solid #333333;
}

#fleet_menu {
  width: 100%;
  margin: auto;
  margin-top: 10px;
}

table#fleet_form_ship_table tr:first-child {
  background-color: #222;
}

table#fleet_form_recycler_table tr:first-child {
  background-color: #222;
}

table#fleet_form_resource_table tr:first-child {
  background-color: #222;
}

table#fleet_form_shortcut_table tr:first-child {
  background-color: #222;
}

table#fleet_form_summary_table tr:first-child {
  background-color: #222;
}

#fleet_form_ship_total_row {
  background-color: #222;
}

.attack_color {
  color: red;
}
.shield_color {
  color: green;
}
.hull_color {
  color: #0033CC;
}
.fret_color {
  color: #6633FF;
}
.header_background {
  background-color: #222;
}

.highlight {
  color: #888d88;
}
.highlight:hover {
  color: white;
}

.fleet_attack_first_leg_row {
  background-color: #bf3638;
}
.fleet_attack_second_leg_row {
  background-color: #734f51;
}
.fleet_transport_first_leg_row, .fleet_transport_second_leg_row {
  background-color: #01033b;
}
.fleet_move_first_leg_row, .fleet_move_second_leg_row {
  background-color: #40024f;
}
.fleet_spy_first_leg_row {
  background-color: #a39408;
}
.stargate_colonization_first_leg_row {
  background-color: #015418;
}

.fleet_content_hover {
  border: 1px solid #404040;
  padding: 5px;
}

.debris_field_hover {
  border: 1px solid #404040;
  padding: 5px;
  width: 100%;
  background-color: #1F1F1F;
}

.debris_field_hover td {
  padding-right: 10px;
}

.resource_header_hover {
  border: 1px solid #404040;
  padding: 5px;
  width: 100%;
  background-color: #1F1F1F;
}

.resource_header_hover td {
  padding-right: 10px;
}

/* Tailwing overrides the defaults of inputs */
input {
  background-color: white;
  color: black;
  padding: 1px 2px 1px 2px;
}

input[type="text"], input[type="number"] {
  border: 2px solid black;
}

.page select {
  background-color: rgba(17, 24, 39, 0.75)
}

/* Disable firefox +/- buttons on type=number inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}


@media all and (min-width: 768px) {
  body {
    width: 80%;
  }

  .page {
    margin-left: 150px;
  }

  #header {
    height: 200px;
  }

  #technology_tree {
    width: 50%;
  }

  #object_production {
    width: 40%;
  }

  #resource_production {
    width: 60%;
    table-layout: fixed;
  }

  #sensors_coordinates table {
    width: 30%;
  }

  #sensors_planets table {
    width: 60%;
  }

  #stargate_menu {
    width: 40%;
  }

  #fleet_menu {
    width: 40%;
  }

  table#create_ship_model_header {
    width: 60%;
  }

  table#create_ship_model_preview {
    width: 80%;
  }
}

.message_actions {
  float: right;
}