body {
  margin: 0px;
  padding: 0px;
  /*background: #5e8edc url("landing/images/landing_gradient.png") repeat-x;*/
  background: #5e8edc;
  background: linear-gradient(180deg, #35507d 0px, #5e8edc 450px);
  font-family: verdana, helvetica, sans-serif;
  color: white;
  font-size: 0.9em;
}
/*
.webp body {
  background-image: url("landing/images/landing_gradient.webp");
}
*/

img {
  border: 0px;
}

a {
  color: white;
}

#head {
  position: relative;
  /*background: url("landing/images/head.jpg") no-repeat;*/
  background: url("landing/images/gen2/head20th.png") no-repeat;
  width: 980px;
  height: 330px; /* was 357px - qaisjp 2019-04-29 */
}
.webp #head {
  /*background-image: url("landing/images/head.webp");*/
  background-image: url("landing/images/gen2/head20th.webp");
}

#body {
  margin: 15px auto 0;
  padding: 0px;
  position: relative;
  /*background: url("landing/images/body_back.png") repeat-y top center;*/
  /*width: 100%;*/
  width: 980px;
  min-height: 300px;
  min-width: 980px;
  overflow: visible;
  box-shadow: 0 0 10px #000;
  border-radius: 5px;
}
/*
.webp #body {
  background-image: url("landing/images/body_back.webp");
}
*/

#top-corners-fixup {
  background: url("landing/images/top_corners_fixup.jpg") no-repeat top center;
  width: 100%;
  height: 31px;
  min-width: 980px;
  margin-bottom: -31px;
  zoom: 1;
}
.webp #top-corners-fixup {
  background-image: url("landing/images/top_corners_fixup.webp");
}

#bottom-corners-fixup {
  background: url("landing/images/bottom_corners_fixup.jpg") no-repeat top
    center;
  width: 100%;
  height: 35px;
  min-width: 980px;
  margin-bottom: -31px;
  z-index: 1;
}
.webp #bottom-corners-fixup {
  background-image: url("landing/images/bottom_corners_fixup.webp");
}

#page {
  background-color: #000000;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
  width: 980px;
}

#nav-bar {
  position: relative;
  width: 980px;
  height: 77px;
  top: 257px;
  left: 0px;
  background: url("landing/images/gen2/nav_bar_back.png");
}
.webp #nav-bar {
  background-image: url("landing/images/gen2/nav_bar_back.webp");
}

#download-button {
  width: 240px;
  height: 77px;
  top: 0px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#maps-and-modes-button {
  position: absolute;
  left: 20px;
  top: 0px;
}

#forums-button {
  position: absolute;
  left: 200px;
  top: 0px;
}

#documentation-button {
  position: absolute;
  left: 295px;
  top: 0px;
}

#developers-button {
  position: absolute;
  left: 603px;
  top: 0px;
}

#heroes-button {
  position: absolute;
  left: 740px;
  top: 0px;
}

#hosting-button {
  position: absolute;
  left: 845px;
  top: 0px;
}

.down {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  -moz-opacity: 0;
  filter: alpha (opacity=0.0);
}

.up {
  position: absolute;
  top: 0px;
  left: 0px;
}

#below-head {
  position: relative;
}

#intro {
  position: relative;
  left: 0px;
  width: 980px;
  height: 844px;
  overflow: hidden;
}

#welcome-box {
  position: absolute;
  left: 550px;
  width: 350px;
}

#news {
  height: 267px;
}

#news-box {
  position: absolute;
  left: 30px;
  width: 470px;
}

#news-button {
  position: absolute;
  left: 347px;
  top: 7px;
}

#ryden-pic {
  background: url("landing/images/ryden_uber_pic.jpg") no-repeat;
  position: absolute;
  top: 250px;
  width: 980px;
  height: 676px;
}
.webp #ryden-pic {
  background-image: url("landing/images/ryden_uber_pic.webp");
}

#ryden-pic-left {
  background: url("landing/images/ryden_uber_pic_left.jpg") no-repeat;
  position: absolute;
  margin-top: 107px;
  margin-left: -107px;
  width: 107px;
  height: 200px;
  display: inline;
}
.webp #ryden-pic-left {
  background-image: url("landing/images/ryden_uber_pic_left.webp");
}

#ryden-pic-right {
  background: url("landing/images/ryden_uber_pic_right.jpg") no-repeat;
  position: absolute;
  margin-top: 59px;
  margin-left: 980px;
  width: 30px;
  height: 107px;
  display: inline;
}
.webp #ryden-pic-right {
  background-image: url("landing/images/ryden_uber_pic_right.webp");
}

#ryden-pic-blurb {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 750px;
  top: 530px;
  text-align: justify;
}

#news-details {
  font-size: 0.8em;
}

#social-sites {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 800px;
  height: 85px;
  margin-top: 75px;
}

#social-sites > picture img {
  position: relative;
}

#social-sites .button {
  float: left;
  position: relative;
  height: 56px;
}

#potd {
  background-color: #232323;
  padding: 10px 40px 10px 40px;
  position: relative;
  height: 150px;
  cursor: pointer;
}

#potd #potd-right {
  position: absolute;
  top: 55px;
  right: 39px;
  z-index: 99;
}

#potd #potd-left {
  position: absolute;
  top: 55px;
  left: -19px;
  z-index: 99;
}

#potd-wrapper {
  position: relative;
  overflow: hidden;
  height: 150px;
}

#potd #potd-inner {
  overflow: hidden;
  width: 900px;
}

#potd #potd-inner div {
  height: 150px;
  white-space: nowrap;
  position: absolute;
  left: 0px;
}

#potd #potd-inner img {
  margin-right: 40px;
}

.potd-preview {
  position: fixed;
  background-color: #000000;
  opacity: 0.6;
  -moz-opacity: 0.6;
  filter: alpha(opacity=60);
  z-index: 100;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.potd-img {
  position: fixed;
  vertical-align: center;
  left: 15%;
  top: 10%;
  width: 70%;
  z-index: 101;
}

#talidan-pic {
  position: relative;
  background: url("landing/images/talidan_pic.jpg") no-repeat;
  width: 980px;
  height: 834px;
  font-size: 105%;
}
.webp #talidan-pic {
  background-image: url("landing/images/talidan_pic.webp");
}

#talidan-pic a {
  text-decoration: none;
  font-weight: bold;
}

#talidan-pic a:hover {
  text-decoration: underline;
}

#talidan-pic-right {
  background: url("landing/images/talidan_pic_right.jpg") no-repeat 5px 5px;
  position: absolute;
  margin-top: 468px;
  margin-left: 975px;
  width: 48px;
  height: 155px;
}
.webp #talidan-pic-right {
  background-image: url("landing/images/talidan_pic_right.webp");
}

#reliable-and-accurate {
  width: 550px;
  float: right;
  /* not gonna work
	background-color: #000000;
	opacity: 0.6;
	-moz-opacity: 0.6;
	filter:alpha(opacity=60);
	*/
  background: url("landing/images/box.png");
  margin-top: 10px;
  margin-right: 10px;
}
.webp #reliable-and-accurate {
  background-image: url("landing/images/box.webp");
}

#reliable-and-accurate div {
  clear: both;
  padding: 60px 8px 8px 8px;
  background: url("landing/images/title_sync.png") no-repeat 8px 8px;
}
.webp #reliable-and-accurate div {
  background-image: url("landing/images/title_sync.webp");
}

#great-community {
  float: left;
  margin-top: 160px;
  background: url("landing/images/title_community.png") no-repeat 50px 8px;
  padding: 70px 8px 8px 50px;
  width: 400px;
}
.webp #great-community {
  background-image: url("landing/images/title_community.webp");
}

#open-source {
  margin-left: auto;
  margin-right: auto;
  width: 350px;
  padding-top: 60px;
  clear: both;
}

#footer {
  margin-top: 15px;
  color: black;
  font-size: 10px;
  text-align: center;
}

#moddb-left {
  background: url("landing/images/click_second.png") no-repeat;
  position: absolute;
  margin-top: 1471px;
  margin-left: -50px;
  width: 163px;
  height: 141px;
  display: inline;
  z-index: 100;
}
.webp #moddb-left {
  background-image: url("landing/images/click_second.webp");
}

#moddb-right {
  background: url("landing/images/click_first.png") no-repeat;
  position: absolute;
  margin-top: 1355px;
  margin-left: 860px;
  width: 178px;
  height: 94px;
  display: inline;
  z-index: 100;
}
.webp #moddb-right {
  background-image: url("landing/images/click_first.webp");
}

#head-moddb {
  position: relative;
  background: url("landing/images/head_moddb.jpg") no-repeat;
  width: 980px;
  height: 387px;
}
.webp #head-moddb {
  background-image: url("landing/images/head_moddb.webp");
}

#a-moddb {
  position: absolute;
  top: 0;
  left: 0;
  width: 980px;
  height: 220px;
}

#nav-bar-moddb {
  position: relative;
  width: 980px;
  height: 77px;
  top: 287px;
  left: 0px;
  background: url("landing/images/nav_nobg_bar_back.png");
}
.webp #nav-bar-moddb {
  background-image: url("landing/images/nav_nobg_bar_back.webp");
}

#moddb-vote-button {
  position: absolute;
  left: 700px;
  top: 216px;
}

#jump-to-content {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  padding: 1em;
  background: #000;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

#jump-to-content:hover,
#jump-to-content:focus {
  cursor: pointer;
  pointer-events: initial;
  opacity: 1;
}

#onlinePlayers {
  padding-left: 1em;
  position: relative;
}

@media (min-width: 980px) {
  #onlinePlayers {
    margin-left: auto;
  }
}

@keyframes onlinePlayers {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#onlinePlayers:not(:empty)::before {
  animation: onlinePlayers 1s infinite forwards alternate;
  background: lightgreen;
  border-radius: 100px;
  content: "";
  display: block;
  height: 6px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 7px;
  width: 6px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  border: 2px solid white;
  min-width: 186px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  margin-top: 58px;
  margin-left: 26px;
  z-index: 2;
  border-radius: 5px;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
  color: black;
}