@-webkit-keyframes heightIncrease {
  from {
    -webkit-transform: scale(1, 1); }
  to {
    -webkit-transform: scale(1.05, 1.05); } }
@keyframes heightIncrease {
  from {
    transform: scale(1, 1); }
  to {
    transform: scale(1.05, 1.05); } }
@-webkit-keyframes heightDecrease {
  from {
    -webkit-transform: scale(1.05, 1.05); }
  to {
    -webkit-transform: scale(1, 1); } }
@keyframes heightDecrease {
  from {
    transform: scale(1.05, 1.05); }
  to {
    transform: scale(1, 1); } }
div,
form,
input,
textarea {
  box-sizing: border-box; }

body {
  font-size: 18px;
  text-align: center;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  min-width: 61em;
  background-image: url("../img/bg_tex.gif");
  height: 100%; }
  @media (min-width: 1600px) {
    body .background .bg-left, body .background .bg-right {
      display: block; } }

.dots {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.placeholder {
  width: 59em;
  position: relative;
  height: 1px;
  display: inline; }

.background {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -27.5em;
  width: 55em; }
  .background .bg-left,
  .background .bg-right {
    background-size: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    height: 27em;
    width: 20em;
    display: none; }
  .background .bg-left {
    left: 50%;
    margin-left: -45em;
    background-position: right bottom;
    background-image: url("../img/bg-left.png"); }
  .background .bg-right {
    top: 0;
    right: 50%;
    margin-right: -45em;
    background-position: left top;
    background-image: url("../img/bg-right.png"); }

.float-left {
  float: left; }
.float-right {
  float: right; }
.float-clear {
  float: clear; }

.inline {
  display: inline; }

.center {
  text-align: center !important; }

.justify {
  text-align: justify !important; }

.width-half {
  display: inline-block;
  width: 50%; }
.width-full {
  width: 100%; }
.width-50 {
  float: left;
  width: 50%; }
.width-100 {
  float: left;
  width: 100%; }
.width-40 {
  float: left;
  width: 40%; }
.width-60 {
  float: left;
  width: 60%; }
.width-30 {
  float: left;
  width: 30%; }
.width-20 {
  float: left;
  width: 20%; }
.width-70 {
  float: left;
  width: 70%; }
.width-80 {
  float: left;
  width: 80%; }

.rel {
  position: relative !important; }

.vtop {
  vertical-align: top; }

a {
  color: inherit;
  text-decoration: none; }
  a.link {
    color: #F05B6C; }

form input[type="text"],
form input[type="password"],
form textarea,
form select {
  margin: 0.5em 0 1em 0;
  padding: 0.2em;
  width: 100%;
  border: 1px solid #d2d2d2; }
form input[type="radio"]:after {
  display: block; }
form textarea {
  min-width: 100%;
  max-width: 100%; }
form input[type="checkbox"] + label:after {
  content: "\A";
  white-space: pre; }

button,
input[type="submit"],
.button {
  border: 0;
  background-color: #F05B6C;
  color: #fff;
  padding: 0.5em;
  border-radius: 0.2em;
  cursor: pointer;
  margin: 0.2em;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out; }
  button:hover,
  input[type="submit"]:hover,
  .button:hover {
    background-color: #fff;
    color: #424242; }

table {
  background-color: #fff;
  color: #424242;
  border-collapse: collapse;
  width: 100%; }
  table input[type="text"] {
    width: 100%; }
  table th {
    font-size: 1.2em;
    font-weight: bold;
    padding-top: 0.5em; }
    table th:first-child {
      padding-left: 0.5em; }
    table th:last-child {
      padding-right: 0.5em; }
  table tr td {
    padding: 0.2em;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out; }
    table tr td:first-child {
      padding-left: 0.5em; }
    table tr td:last-child {
      padding-right: 0.5em; }
  table tr:hover .link {
    color: #fff; }
  table tr:hover td,
  table tr:hover th {
    background-color: #F05B6C;
    color: #fff; }

.base-padding {
  padding: 0.5em; }
  .base-padding-left {
    padding-left: 0.5em; }
  .base-padding-right {
    padding-right: 0.5em; }
  .base-padding-top {
    padding-top: 0.5em; }
  .base-padding-bottom {
    padding-bottom: 0.5em; }

.mainmenu {
  margin: 0 -2em 0 -2em;
  position: relative;
  background-color: #2C2C2C;
  z-index: 9999;
  white-space: nowrap;
  text-align: center; }
  .mainmenu .language {
    position: absolute;
    top: 0.3em;
    right: 0.3em; }
    .mainmenu .language .button {
      float: left; }
  .mainmenu .avatar {
    background-size: 50px;
    background-position: 5px center;
    padding-left: 66px;
    background-repeat: no-repeat; }
  .mainmenu .item {
    padding: 20px;
    margin: 0;
    display: inline-block;
    color: #eeeeee;
    cursor: pointer; }
    .mainmenu .item:hover, .mainmenu .item.active {
      background-color: #6980D2; }
  .mainmenu .languages {
    position: absolute;
    right: 0;
    top: 0; }
  .mainmenu .login {
    position: absolute;
    left: 0;
    top: 0; }
  .mainmenu,
  .mainmenu ul {
    padding: 0 2em 0 0;
    list-style: none; }
  .mainmenu li {
    display: inline-block;
    position: relative;
    text-align: left;
    padding: 0 20px;
    line-height: 58px;
    margin: 0;
    color: #eeeeee;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -webkit-animation: heightDecrease 0.2s ease-out both;
    animation: heightDecrease 0.2s ease-out both; }
    .mainmenu li:hover {
      -webkit-animation: heightIncrease 0.2s ease-out both;
      animation: heightIncrease 0.2s ease-out both; }
    .mainmenu li:hover, .mainmenu li.active {
      background-color: #6980D2; }
    .mainmenu li.divider {
      cursor: default;
      padding: 0 0 0 10px;
      margin: 0 10px 0 0; }
      .mainmenu li.divider:hover {
        background-color: inherit; }
    .mainmenu li a {
      display: block; }
    .mainmenu li > ul {
      min-width: 100px;
      display: none;
      position: absolute;
      z-index: 999;
      left: 0;
      background-color: #2C2C2C; }
      .mainmenu li > ul > li, .mainmenu li > ul > a > li {
        display: block;
        white-space: nowrap; }
    .mainmenu li:hover ul {
      display: block; }

.content-bg {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -27.5em;
  width: 55em;
  background-color: rgba(44, 44, 44, 0.5);
  color: #eeeeee;
  min-height: 100%; }

.background > .content {
  text-align: left;
  width: 55em;
  color: #eeeeee;
  -webkit-filter: drop-shadow(2px 2px 5px #2C2C2C);
  filter: drop-shadow(2px 2px 5px #2C2C2C); }
  .background > .content > .header {
    height: 10em;
    text-align: center;
    padding: 2.5em;
    position: relative; }
    .background > .content > .header .title {
      font-size: 4em; }
    .background > .content > .header .language,
    .background > .content > .header .profile {
      position: absolute;
      background-color: #2C2C2C;
      padding: 0.5em;
      top: 1em; }
    .background > .content > .header .feedback {
      position: absolute;
      bottom: 0.5em;
      margin-left: -4em;
      left: 50%; }
    .background > .content > .header .profile {
      right: 0;
      margin-right: -2em; }
      .background > .content > .header .profile .user-container {
        position: relative;
        min-height: 2em; }
        .background > .content > .header .profile .user-container img {
          max-height: 7.2em; }
        .background > .content > .header .profile .user-container .username {
          position: absolute;
          bottom: 0.5em;
          text-align: center;
          text-shadow: 2px 2px 4px #000;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap; }
      .background > .content > .header .profile .actions {
        display: none;
        overflow: hidden;
        left: 0;
        margin-left: -4em;
        position: absolute;
        bottom: 0.5em;
        text-align: right;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out; }
      .background > .content > .header .profile:hover .actions {
        display: block; }
        .background > .content > .header .profile:hover .actions:hover .actions {
          height: auto; }
    .background > .content > .header .button {
      display: inline-block;
      background-color: #F05B6C;
      color: #fff;
      border: 0;
      margin: 0 0.2em;
      padding: 0.5em;
      cursor: pointer;
      border-radius: 0.2em; }
      .background > .content > .header .button:hover {
        background-color: #fff;
        color: #424242; }

.news {
  padding: 0.5em; }
  .news .item {
    margin: 0 0 0.5em 0;
    background-color: #F05B6C;
    color: #fff;
    padding: 0.5em;
    text-align: justify;
    -moz-box-shadow: 0.2em 0.2em 0.5em #2C2C2C;
    -webkit-box-shadow: 0.2em 0.2em 0.5em #2C2C2C;
    box-shadow: 0.2em 0.2em 0.5em #2C2C2C;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -webkit-animation: heightDecrease 0.2s ease-out both;
    animation: heightDecrease 0.2s ease-out both; }
    .news .item:hover {
      -webkit-animation: heightIncrease 0.2s ease-out both;
      animation: heightIncrease 0.2s ease-out both; }
    .news .item .title {
      font-size: 1.5em;
      margin-bottom: 0.2em; }
    .news .item .content {
      text-align: justify;
      margin-bottom: 0.2em; }
    .news .item .dateinfo {
      margin-top: 0.5em;
      padding-top: 0.5em;
      border-top: 1px solid #fff;
      text-align: right;
      font-size: 0.8em;
      font-style: italic; }
    .news .item:hover {
      z-index: 1; }

.main .news .item {
  margin: 0 0 0.5em -2em; }
.main .servers {
  padding: 0.5em 0.5em 0.5em 0; }
  .main .servers .item {
    float: left;
    width: 48%;
    margin: 0 0.5em 0.5em 0;
    background-color: #fff;
    color: #424242;
    -moz-box-shadow: 0.2em 0.2em 0.5em #2C2C2C;
    -webkit-box-shadow: 0.2em 0.2em 0.5em #2C2C2C;
    box-shadow: 0.2em 0.2em 0.5em #2C2C2C;
    -webkit-animation: heightDecrease 0.2s ease-out both;
    animation: heightDecrease 0.2s ease-out both; }
    .main .servers .item:hover {
      -webkit-animation: heightIncrease 0.2s ease-out both;
      animation: heightIncrease 0.2s ease-out both; }
    .main .servers .item .content {
      padding: 0.5em; }
    .main .servers .item .title {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 1.5em; }
    .main .servers .item .image {
      height: 10em;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: auto 100%;
      background-image: url(../img/archeblade.jpg);
      -webkit-transition: all 0.2s ease-out;
      -moz-transition: all 0.2s ease-out;
      -o-transition: all 0.2s ease-out;
      transition: all 0.2s ease-out; }
      .main .servers .item .image.rm_steamcanal {
        background-position: center;
        background-image: url(../img/SteamCanal.jpg); }
      .main .servers .item .image.nagaspit {
        background-position: center;
        background-image: url(../img/NagasPit.jpg); }
      .main .servers .item .image.om_netherdale {
        background-position: center;
        background-image: url(../img/NetherDale.jpg); }
      .main .servers .item .image.rm_altarofwar {
        background-position: center;
        background-image: url(../img/AltarOfWar.jpg); }
      .main .servers .item .image.om2_thebridge {
        background-position: center;
        background-image: url(../img/TheBridge.jpg); }
      .main .servers .item .image.tdm_undersiege {
        background-position: center;
        background-image: url(../img/UnderSiege.jpg); }
      .main .servers .item .image.dm_summerisland {
        background-position: center;
        background-image: url(../img/SummerIsland.jpg); }
      .main .servers .item .image.dm_duelingarenav1_2 {
        background-position: center;
        background-image: url(../img/duelarena.png); }
    .main .servers .item:hover {
      z-index: 1; }
      .main .servers .item:hover .image {
        background-size: auto 120%; }

.functional,
.functional-users {
  padding-top: 0.5em; }
  .functional h2,
  .functional-users h2 {
    margin: 0 0 0.5em 0; }
  .functional .group,
  .functional-users .group {
    background-color: #6980D2;
    color: #eeeeee;
    padding: 0.5em;
    margin-bottom: 0.5em; }
  .functional .item,
  .functional-users .item {
    cursor: pointer;
    margin: 0 -2em 0.5em 0;
    background-color: #fff;
    color: #424242;
    padding: 0.5em;
    -moz-box-shadow: 0.2em 0.2em 0.5em #2C2C2C;
    -webkit-box-shadow: 0.2em 0.2em 0.5em #2C2C2C;
    box-shadow: 0.2em 0.2em 0.5em #2C2C2C;
    -webkit-animation: heightDecrease 0.2s ease-out both;
    animation: heightDecrease 0.2s ease-out both;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear; }
    .functional .item.avatar,
    .functional-users .item.avatar {
      padding-left: 3em;
      background-position: left center;
      background-size: auto 100%;
      background-repeat: no-repeat; }
    .functional .item:hover,
    .functional-users .item:hover {
      -webkit-animation: heightIncrease 0.2s ease-out both;
      animation: heightIncrease 0.2s ease-out both; }
    .functional .item:hover,
    .functional-users .item:hover {
      background-color: #F05B6C;
      color: #fff; }
      .functional .item:hover .link,
      .functional-users .item:hover .link {
        color: #fff; }
  .functional h2 ~ a .item,
  .functional-users h2 ~ a .item {
    margin: 0 -2em 0.5em 0.5em; }

.pager {
  text-align: center; }
  .pager a {
    margin: 0 0.1em;
    font-size: 1.2em;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear; }
    .pager a:hover {
      font-size: 1.5em; }

.about {
  background-color: #fff;
  color: #424242; }

.user-profile {
  background-color: #fff;
  color: #424242;
  min-height: 11em; }
  .user-profile .profile-image {
    text-align: right; }
    .user-profile .profile-image .avatar {
      max-width: 10em;
      max-height: 10em; }

/*# sourceMappingURL=stylesheet.css.map */