html {
  font-size: 100%; }

html body {
  background-color: #f6f6f6;
  color: #2d2d2d;
  font-family: Segoe UI,Arial,Verdana,Helvetica,Sans-Serif;
  overflow-y: scroll;
  padding: 0; }

html body, html body > form {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0;
  min-height: calc(100vh - 65px); }

html body > div.body, html body > form > div.body {
  font-size: .875rem;
  -ms-flex-positive: 1;
  flex-grow: 1; }

html body > div.body a, html body > form > div.body a {
  color: #004b8d;
  text-decoration: none; }

html body > div.body a:hover, html body > form > div.body a:hover {
  text-decoration: underline; }

html body > div.body a.anchor, html body > form > div.body a.anchor {
  display: block;
  position: relative;
  top: -55px;
  visibility: hidden; }

html body > div.body form.simple > .row, html body > form > div.body form.simple > .row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row; }

html body > div.body form.simple > .row input[type=email], html body > form > div.body form.simple > .row input[type=email] {
  border: 1px solid #004b8d;
  box-sizing: border-box;
  height: 34px;
  margin-right: 1em;
  padding-left: 10px;
  max-width: 300px; }

html body > div.body form.simple .response, html body > form > div.body form.simple .response {
  margin-top: 1rem; }

html body > div.body form.simple .response.success h2, html body > form > div.body form.simple .response.success h2 {
  color: green; }

html body > div.body form.simple .response.error h2, html body > form > div.body form.simple .response.error h2 {
  color: red; }

html body > footer, html body > form > footer {
  background-color: #666;
  color: #fff;
  font-size: .75rem; }

html body > footer a, html body > form > footer a {
  color: #fff;
  text-decoration: none; }

html body > footer a:hover, html body > form > footer a:hover {
  text-decoration: underline; }

html body > footer div.container, html body > form > footer div.container {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1420px;
  padding: 1em; }

@media (min-width: 768px) {
  html body > footer div.container, html body > form > footer div.container {
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: justify;
    justify-content: space-between; } }

html body > footer div.container.columns, html body > form > footer div.container.columns {
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: start;
  justify-content: flex-start; }

@media (min-width: 768px) {
  html body > footer div.container.columns, html body > form > footer div.container.columns {
    -ms-flex-pack: justify;
    justify-content: space-between; } }

html body > footer div.container.columns > div, html body > form > footer div.container.columns > div {
  -ms-flex-align: start;
  align-items: flex-start;
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 20%;
  flex: 1 1 20%;
  -ms-flex-direction: column;
  flex-direction: column; }

@media (max-width: 767px) {
  html body > footer div.container.columns > div:nth-child(odd), html body > form > footer div.container.columns > div:nth-child(odd) {
    -ms-flex: 1.5 1 40%;
    flex: 1.5 1 40%; }
  html body > footer div.container.columns > div:nth-child(2n), html body > form > footer div.container.columns > div:nth-child(2n) {
    -ms-flex: 1.5 1 60%;
    flex: 1.5 1 60%; } }

@media (max-width: 767px) {
  html body > footer div.container.columns > div:not(:last-child), html body > form > footer div.container.columns > div:not(:last-child) {
    padding-bottom: 2rem;
    padding-right: 1rem; } }

@media (min-width: 768px) {
  html body > footer div.container.columns > div:not(:last-child), html body > form > footer div.container.columns > div:not(:last-child) {
    padding-right: 2rem; } }

html body > footer div.container.columns > div h3, html body > form > footer div.container.columns > div h3 {
  font-weight: 400;
  margin: 0 0 .5em;
  text-transform: uppercase; }

html body > footer div.container.columns > div a, html body > form > footer div.container.columns > div a {
  line-height: 2;
  white-space: nowrap; }

html body > footer div.container.second, html body > form > footer div.container.second {
  position: relative; }

@media (max-width: 767px) {
  html body > footer div.container.second > div:not(:last-child), html body > form > footer div.container.second > div:not(:last-child) {
    margin-bottom: 1rem; } }

html body > footer div.container.second div.social, html body > form > footer div.container.second div.social {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row; }

@media (max-width: 767px) {
  html body > footer div.container.second div.social, html body > form > footer div.container.second div.social {
    -ms-flex-pack: center;
    justify-content: center; } }

html body > footer div.container.second div.social > a:not(:last-child), html body > form > footer div.container.second div.social > a:not(:last-child) {
  margin-right: .5rem; }

html body > footer div.container.second div.social > a > img, html body > form > footer div.container.second div.social > a > img {
  height: 30px;
  transition: transform .25s ease-in-out; }

html body > footer div.container.second div.social > a:hover > img, html body > form > footer div.container.second div.social > a:hover > img {
  transform: scale(1.3); }

html body > footer div.container.second div.subscribe, html body > form > footer div.container.second div.subscribe {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column; }

@media (min-width: 768px) {
  html body > footer div.container.second div.subscribe, html body > form > footer div.container.second div.subscribe {
    -ms-flex-direction: row;
    flex-direction: row; } }

html body > footer div.container.second div.subscribe h3, html body > form > footer div.container.second div.subscribe h3 {
  font-weight: 400;
  margin: 0 0 .5em;
  text-transform: uppercase; }

@media (min-width: 768px) {
  html body > footer div.container.second div.subscribe h3, html body > form > footer div.container.second div.subscribe h3 {
    margin: 0 .5em 0 0;
    text-align: right; }
  html body > footer div.container.second div.subscribe h3:after, html body > form > footer div.container.second div.subscribe h3:after {
    content: ":"; } }

html body > footer div.container.second div.subscribe > div.frmEmailList, html body > footer div.container.second div.subscribe > form, html body > form > footer div.container.second div.subscribe > div.frmEmailList, html body > form > footer div.container.second div.subscribe > form {
  -ms-flex-align: stretch;
  align-items: stretch;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row; }

html body > footer div.container.second div.subscribe > div.frmEmailList > input[type=email], html body > footer div.container.second div.subscribe > form > input[type=email], html body > form > footer div.container.second div.subscribe > div.frmEmailList > input[type=email], html body > form > footer div.container.second div.subscribe > form > input[type=email] {
  border: 1px solid #666;
  margin-right: .5em;
  padding-left: 1em;
  padding-right: 1em; }

html body > footer div.container.second div.subscribe > div.frmEmailList > button, html body > footer div.container.second div.subscribe > form > button, html body > form > footer div.container.second div.subscribe > div.frmEmailList > button, html body > form > footer div.container.second div.subscribe > form > button {
  background: #444;
  border: 0;
  color: #fff;
  padding: 3px 5px;
  text-transform: uppercase; }

html body > footer > div.accent, html body > form > footer > div.accent {
  background-color: #444; }

html body > footer > div.accent > div.container, html body > form > footer > div.accent > div.container {
  -ms-flex-align: center;
  align-items: center; }

@media (max-width: 767px) {
  html body > footer > div.accent > div.container > div:not(:last-child), html body > form > footer > div.accent > div.container > div:not(:last-child) {
    margin-bottom: 1rem; } }

html body > footer > div.accent div.copyright, html body > form > footer > div.accent div.copyright {
  margin-right: 1em;
  text-align: center; }

html body > footer > div.accent div.links, html body > form > footer > div.accent div.links {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row; }

html body > footer > div.accent div.links > a:not(:last-child), html body > form > footer > div.accent div.links > a:not(:last-child) {
  border-right: 1px solid #fff;
  margin-right: 1em;
  padding-right: 1em;
  white-space: nowrap; }

html body .bvlbutton {
  color: #fff !important;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  height: 34px;
  line-height: 34px;
  margin: 0;
  min-width: 76px;
  padding: 0 24px;
  position: relative;
  text-align: center;
  text-decoration: none; }

html body .bvlbutton .small {
  height: 18px;
  line-height: 18px; }

html body .bvlbutton.small, html body .bvlbutton .small {
  font-size: 11px;
  margin: 0;
  min-width: 34px;
  padding: 0 7px;
  vertical-align: top; }

html body .bvlbutton.small {
  height: 22px;
  line-height: 22px; }

html body .bvlbutton.large {
  font-size: 16px;
  height: 42px;
  line-height: 42px;
  min-width: 148px; }

html body .bvlbutton.blue {
  background-color: #0d4d8b;
  background: linear-gradient(#0161c1, #0d4d8b);
  box-shadow: inset 0 0 4px #488ed3;
  border: 1px solid #0d4e8d; }

html body .bvlbutton.blue:hover {
  background-color: #1061b2;
  background: linear-gradient(#007efb, #1061b2);
  box-shadow: inset 0 0 4px #4798e9;
  border: 1px solid #0d4e8d;
  color: #fff;
  text-decoration: none; }

html body .bvlbutton.green {
  background-color: #0d4d8b;
  background: linear-gradient(#50bf41, #39892f);
  box-shadow: inset 0 0 4px #afdba9;
  border: 1px solid #39892f; }

html body .bvlbutton.green:hover {
  background-color: #49b03c;
  background: linear-gradient(#60e54e, #49b03c);
  box-shadow: inset 0 0 4px #b7efb0;
  border: 1px solid #39892f;
  color: #fff;
  text-decoration: none; }

html body .bvlbutton.gray {
  background-color: #9a9a9a;
  background: linear-gradient(#bcbcbc, #777);
  box-shadow: inset 0 0 4px #cacaca;
  border: 1px solid #919191; }

html body .bvlbutton.gray:hover {
  background-color: #c2c2c2;
  background: linear-gradient(#d6d6d6, #acacac);
  box-shadow: inset 0 0 4px #eee;
  border: 1px solid #919191;
  color: #fff;
  text-decoration: none; }

html body .bvlbutton.ltblue {
  background: linear-gradient(180deg, #86bcef, #3491f7);
  box-shadow: inset 0 0 4px #d6ebfe;
  border: 1px solid #4aa4fe; }

html body .bvlbutton.ltblue:hover {
  background: linear-gradient(180deg, #97c2ec, #4e9df4); }

html .hidden {
  display: none !important; }

html .offscreen {
  border: 0;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

html .featherlight {
  color: #000; }

html .featherlight.noscroll .featherlight-content {
  overflow: hidden; }

html .strike {
  color: red;
  text-decoration: line-through; }

.nowrapper .featherlight-content {
  background-color: #000;
  border: 0;
  margin: 0;
  padding: 0; }

.nowrapper .featherlight-content .featherlight-previous {
  left: 0;
  top: 0; }

.nowrapper .featherlight-content .featherlight-next {
  right: 0;
  top: 0; }

.formresponse .featherlight-content {
  max-width: 400px; }

.notice {
  background-attachment: scroll;
  background-repeat: no-repeat;
  border-style: solid;
  border-width: 1px;
  line-height: 1.25em;
  margin: 1em 0;
  min-height: calc(48px + 2em);
  padding: 1rem 1rem 1rem 68px; }

.notice.error {
  background-color: #fcc;
  background-image: url(https://www.stardock.com/games/siegeofcentauri/images/error.svg);
  border-color: red;
  color: red; }

.notice.error, .notice.warning {
  background-position: 10px;
  background-size: 48px 48px; }

.notice.warning {
  background-color: #feefb3;
  background-image: url(https://www.stardock.com/games/siegeofcentauri/images/warning.svg);
  border-color: #9f6000;
  color: #9f6000; }

.notice.warning.small {
  background-size: 21px 21px;
  font-size: .9em;
  padding-left: 41px; }

.notice.success {
  background-color: #dff2bf;
  border-color: #4f8a10;
  color: #4f8a10;
  padding-left: 1em; }

.notice.info {
  background-color: #bde5f8;
  border-color: #00529b;
  color: #00529b; }

.notice p {
  margin-bottom: 1em; }

.notice ul {
  margin-left: 25px; }

.notice ul li:first-child {
  margin-top: 0; }

aside.goldenkey {
  background: #ffd475;
  box-sizing: border-box;
  color: #000;
  display: none;
  -ms-flex-direction: column;
  flex-direction: column;
  font-family: Verdana,Geneva,Tahoma,sans-serif;
  font-size: 1.1em;
  margin: 1rem;
  max-width: 938px;
  padding: 20px 40px 20px 20px;
  position: relative; }

aside.goldenkey.show {
  display: -ms-flexbox;
  display: flex; }

aside.goldenkey > span {
  margin-right: 3em; }

aside.goldenkey > span > strong {
  display: block; }

aside.goldenkey a {
  color: #000 !important;
  font-weight: 400;
  text-decoration: underline !important; }

aside.goldenkey > a.close {
  position: absolute;
  right: 20px;
  text-decoration: none !important;
  transition: .3s;
  top: 20px; }

aside.goldenkey > a.close:hover {
  color: #000 !important;
  text-decoration: none; }

@media (min-width: 768px) {
  aside.goldenkey {
    -ms-flex-direction: row;
    flex-direction: row; } }

@media (min-width: 1024px) {
  aside.goldenkey {
    margin-left: auto;
    margin-right: auto; } }

.sy-controls li a:after {
  background-image: url(https://www.stardock.com/games/siegeofcentauri/images/arrows.svg) !important; }