@import "config";
@import "reset";
@import "mixins";
@import "typography";
@import "table";
@import "form";
@import "posts";
@import "helpdesk";
@import "rankings";
@import "panel";
@import "grid";
@import "util";
@import "progress";
@import "box-panel";
@import "tabs";

body {
  font: 11px Arial, Tahoma;
  background: #0d1517 url(../images/bg.jpg) top center no-repeat;
}

a {
  text-decoration: none;
  color: #4d4d4d;
  
  &:hover {
    color: #25992d;
    text-decoration: underline;
  }
}

a.btn, a.morpheus-popup-btn, button.btn {
  border-style: solid!important;
  border-width: 6px!important;
  .border-image-important('../images/button-border.png', 6);
  display: inline-block!important;
  text-align: center!important;
  color: #fff!important;
  text-decoration: none!important;
  padding: 0 10px!important;
  line-height: initial!important;
  border-radius: 4px;

  &:hover {
    text-decoration: none;
    color: #fff;
    .opacity(90);
  }

  &.disabled {
    .opacity(40);
  }

  &:focus {
    outline: none;
  }
}

.wrap {
  width: 1007px;
  margin: 0 auto;
  position: relative;

  .language {
    position: absolute;
    right: 10px;
    top: 10px;

    a {
      display: inline-block;
      border: 2px solid transparent;
    }

    .active {
      border: 2px solid #000;
    }
  }

  .header {
    height: 250px;

    .onlines {
      width: 627px;
      height: 76px;
      position: absolute;
      left: 188px;
      position: relative;

      img {
        position: absolute;
      }

      .progress-bar {
        width: 580px;
        height: 17px;
        position: absolute;
        left: 24px;
        top: 30px;
        background: #000;

        .line {
          background: url('../images/line.png');
          height: 100%;
        }
      }

      .status {
        background: #000 url('../images/status.png');
        width: 55px;
        height: 54px;
        position: absolute;
        left: 286px;
        top: 10px;
        font-weight: bold;
        color: #fff;
        text-align: center;
        line-height: 54px;
        font-size: 20px;
        border-radius: 50px;

        a {
          color: #fff;
        }
      }
    }

    .logotipo {
      width: 100%;
      position: absolute;
      left: 0;
      text-align: center;
      height: 140px;
      top: 100px;
    }
  }
  
  .main {
    width: 1007px;
    
    .top {
      background: url(../images/bg-main-top.png);
      position: relative;
      margin-bottom: -21px;
      width: 1007px;
      height: 77px;
      z-indez: -1;
    }
    
    .sidebar {
      width: 205px;
    
      .container {
        position: relative;
        z-index: 1;
      }

      &.left {
        background: url(../images/bg-sidebar-left.gif);
        float: left;
        
        .container {
          margin-left: -2px;
          
          .title {
            width: 184px;
            height: 28px;
            font-size: 12px;
            position: relative;
            color: #fff;
            margin: 0;
            margin-left: 14px;
            line-height: 26px;
            padding-left: 10px;
            background: url(../images/bg-h1-sidebar-left.png) no-repeat;
          }
          
          .box {
            width: 184px;
            margin-left: 14px;
            color: #fff;
            background: url(../images/bg-box-sidebar-left.gif) repeat-y;
            margin-bottom: -3px;

            .events-spotlight {
              margin-bottom: 10px;
            }

            .event {
              padding: 3px;
              line-height: 12px;
              color: #ccc;
              border-bottom: 1px solid #2d373d;

              &:last-child {
                background: none;
              }

              span {
                &.time {
                  color: #6c8f1b;
                  float: right;
                }
              }
            }

            ul {
              list-style: none;
              margin: 0;
              
              li {
                line-height: 12px; 
                background: url(../images/separator.gif) bottom no-repeat;
                
                &:last-child {
                  background: none;
                }
                
                a {
                  display: block;
                  background: url(../images/arrow.gif) 0 5px no-repeat;
                  padding: 3px 3px 5px 20px;
                  color: #719A71;
                }
              }
            }
          }
          
          .box-bottom {
            height: 7px;
            width: 184px;
            margin-left: 14px;
            background: url(../images/bg-box-bottom-sidebar-left.gif);
          }
          
          .space {
            height: 7px;
          }
        }
        
        .sidebar-bottom {
          background: url(../images/bg-sidebar-left-bottom.png);
          height: 10px;
        }
      }
      
      &.right {
        background: url(../images/bg-sidebar-right.gif);
        width: 204px;
        float: right;
        
        .container {
          margin-left: 7px;
          position: relative;
          
          .title {
            margin: 0;
            background: url(../images/bg-h1-sidebar-right.png) no-repeat;
            height: 27px;
            line-height: 27px;
            color: #fff;
            font-size: 12px;
            padding-left: 10px;
          }
          
          .box {
            width: 179px;
            color: #fff;
            padding: 0 9px;
            background: url(../images/bg-box-sidebar-right.gif) repeat-y;

            .forgot-password {
              text-align: center;
              margin-top: 5px;
            }

            .login-input {
              font-size: 10px;
              height: 15px;
              background: #08232a;
              border: 1px solid #41645e;
              color: #2f606d;
              margin-bottom: 3px;
              width: 104px;
              padding: 1px 3px;

              &:focus {
                outline: none;
              }
            }
            
            .login-submit {
              background-image: url(../images/go.png);
              background-repeat: no-repeat;
              border: none;
              width: 53px;
              height: 43px;
              cursor: pointer;
              position: absolute;
              right: 21px;
              top: 26px;

              &:focus {
                outline: none;
              }
            }

            .loading-login {
              width: 53px;
              height: 43px;
              position: absolute;
              right: 14px;
              top: 32px;
            }

            .remember-login {
              margin-top: 4px;
            }

            .social-login {
              margin-top: 5px;
            }
            
            ul {
              margin: 0;
              list-style: none;
              width: 165px;
              
              li {
                padding: 3px;
                line-height: 12px;
                color: #ccc;
                border-bottom: 1px solid #2d373d;

                .notification {
                  background: red;
                  color: #fff;
                  padding: 0px 3px;
                  .border-radius(5px);
                  font-size: 8px;
                  position: absolute;
                  margin-top: -4px;
                }
                
                span {
                  &.text {
                    color: #6c8f1b;
                    float: right;
                  }
                  
                  &.online {
                    color: green;
                    float: right;
                  }
                  
                  &.offline {
                    color: red;
                    float: right;
                  }
                }

                a {
                  color: #719A71;
                  background: url(../images/arrow.gif) -9px 4px no-repeat;
                  padding: 3px 3px 5px 11px;
                }
              }
            }
          }
          
          .space {
            height: 7px;
          }
        
          .box-bottom {
            height: 10px;
            width: 184px;
            background: url(../images/bg-box-bottom-sidebar-right.gif);
          }
        }
        
        .sidebar-bottom {
          background: url(../images/bg-sidebar-right-bottom.png);
          height: 10px;
        }
      }
    }
    
    .content {
      width: 600px;
      float: left;
      margin-left: -2px;
      
      .container {
        background: url(../images/bg-content.gif);
        min-height: 520px;
        
        .c {
          position: relative;
          z-index: 10;
          margin-top: -5px;
          margin-left: 22px;
          margin-right: 22px;
        }
        
        h1.title {
          margin: 0;
          height: 30px;
          margin-bottom: 7px;
          width: 556px;
          font-weight: bold;
          line-height: 30px;
          font-size: 12px;
          padding-left: 30px;
          color: #fff;
          background: url(../images/bg-h1-content.png) no-repeat;
        }
        
        h2.title {
          display: block;
          margin: 0;
          margin-bottom: 10px;
          font-size: 11px;
          font-weight: bold;
          text-transform: uppercase;
          padding: 5px;
          color: #fff;
          border-style: solid;
          border-width: 5px;
          .border-image('../images/title-border.png');
        }
        
        h2.margin-top {
          margin-top: 10px;
        }
      }
      
      .content-middle {
        height: 66px;
        margin-left: -14px;
        margin-top: -23px;
        width: 626px;
        position: relative;
        background: url(../images/bg-content-bottom.png);
      }
    }
  }
}

.footer {
  width: 1007px;
  text-align: center;
  float: left;
  padding-top: 20px;
  padding-bottom: 20px;

  p {
    color: #fff;
    position: relative;
    z-index: 1;
    line-height: 15px;
  }
}

.rates {
  padding: 5px;
  background: #F7F7B7;
  border: 2px solid #B9B988;
  margin-bottom: 10px;

  .title {
    font-weight: bold;
    margin-bottom: 5px;
  }

  ul {
    margin: 0 0 0 20px;
    list-style: circle;

    li {
      line-height: 1.3em;
    }
  }
}

.overlay {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  z-index: 99;
  background: rgba(255, 255, 255, .3);

  .progress {
    margin: 0;
    position: absolute;
    top: 50px;
    width: 200px;
    left: 50%;
    margin-left: -100px;
  }
}

.breadcrumber {
  list-style: none;
  margin: -5px 0 5px;
  padding: 0;

  li {
    display: inline;
    font-weight: 400;

    & + li::before {
      content: "\2192  ";
    }
  }
}

.paginator {
  text-align: right;

  .pagination {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      display: inline;
      margin: 2px;

      a {
        padding: 3px;
      }
    }
  }
}

.castle-siege {
  position: relative;
  width: 556px;
  height: 188px;

  .siege {
    position: absolute;
  }

  .mark {
    position: absolute;
    width: 126px;
    height: 126px;
    top: 48px;
    left: 5px;
  }

  .image {
    position: absolute;
    width: 68px;
    height: 74px;
    right: 58px;
    top: 77px;
  }

  .next {
    position: absolute;
    bottom: 53px;
    font-weight: bold;
    color: #fff;
    left: 175px;
    height: 19px;
    line-height: 19px;
    text-align: center;
    width: 191px;
  }

  .owner {
    position: absolute;
    font-weight: bold;
    color: #fff;
    top: 18px;
    width: 113px;
    height: 19px;
    line-height: 19px;
    text-align: center;
    left: 10px;
  }

  .master {
    position: absolute;
    font-weight: bold;
    color: #fff;
    bottom: 12px;
    width: 68px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    right: 58px;
  }
}

.btn-secondary {
  #gradient > .vertical(#768d87, #6c7c7c);
  .border-radius(4px);
  border: 1px solid #566963;
  display: inline-block;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 12px;
  text-shadow: 0px 1px 0px #2b665e;
  margin: 2px;
  margin-bottom: 4px;

  &:hover {
    #gradient > .vertical(#6c7c7c, #768d87);
    text-decoration: none;
    color: #fff;
  }

  &.active {
    #gradient > .vertical(#234040, #768d87);
  }
}

.equipments {
  background: #d4c0a1!important;

  .mapping {
    margin-left: 70px;
  }
}

.morpheus-popup-btn {
  padding: 0 10px!important;
}

.slider-container {
  margin-bottom: 10px;
}

@import "vip";
@import "item";

//plugins
@import "shop";
@import "market";
@import "credit-shop";
@import "poll";
@import "top-ranking";
@import "workshop";
@import "webshop";
@import "lootbox";
@import "achievements";
@import "donate";
@import "events";
@import "vote-reward";
@import "auction";
@import "social-network";
@import "tracker";
@import "guides";
@import "raffle";
@import "account-market";