set list-container display none

set list-container display none

@txtColor:#ae8e72;
@assetTitleColor:#757575;
@bdColor:#c0c0c0;
@bodyBGColor:#E1E1E1;
@coverTxtColor:#ffca43;
@listTxtColor:#aa8a72;
@increaseTxtColor:#ff504d;
@listBdColor:#e5e5e5;
@subTxtColor:#acacac;

html, body {
  margin: 0;
  padding: 0;
  font-family: "PingFang SC","STHeitiSC-Light","Helvetica Neue","Helvetica","Arial",sans-serif,"Mircosoft YaHei";
  background: @bodyBGColor;
  height: 100%;
  font-weight: 200;
}
:global {
  .extend {
    position: relative;
  }
  .extend:before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    z-index: 10;
  }
  .hide {
    display: none;
  }
}
/***** Mixin *****/
.flex {
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}
.flex-justify {
  -webkit-box-pack:justify;
  -webkit-justify-content:space-between;
  -ms-flex-pack:justify;
  justify-content:space-between;
}
.flex-vertical {
  -webkit-box-orient:vertical;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
}
.flex-item-auto {
  -webkit-box-flex:auto;
  -webkit-flex:auto;
  -ms-flex:auto;
  flex:auto;
}
.flex-item-none {
  -webkit-box-flex:none;
  -webkit-flex:none;
  -ms-flex:none;
  flex:none;
}
.flex-align-center {
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
}
.flex-center {
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
}

main{
  /** 首页头部 **/
  .top-container {
		width: 100%;
		height: 240px;
		overflow: hidden;
		position: relative;
		background: #000;
    /** 头部仪表盘 **/
    .dash-container {
      margin: 20px auto 0;
      width: 240px;
      height: 170px;
      overflow: hidden;
      z-index: 2;
    }
    .dash {
      display: block;
      z-index: 2;
      position: relative;
      width: 240px;
      height: 210px;
    }
    .top-bg {
      background: #000 url('static/imgs/home/top-bg.png') no-repeat;
      background-size: cover;
      width: 100%;
      height: 280px;
      position: absolute;
      top: -35px;
      z-index: 0;
      // -webkit-animation: bg-ani 10s linear infinite;
      // animation: bg-ani 10s linear infinite;
    }
    .content {
      position: absolute;
      text-align: center;
      color: @txtColor;
      z-index: 3;
      top: 60px;
      left: 0;right: 0;
      line-height: 1;

      h1,h3,h5,p {
        margin: 0;
      }
      h5 {
        font-size: 12px;
        margin-bottom: 3px;
        opacity: .5;
      }
      h3 {
        font-size: 14px;
        font-weight: normal;
        margin-bottom: 3px;
        opacity: .7;
      }
      h1 {
        font-size: 64px;
        font-weight: 100;
        font-family: "PingFang SC";
        height: 64px;
        &.nothing {
          font-size: 38px;
          line-height: 1.5;
        }
      }
      p {
        font-size: 10px;
        font-weight: 200;
        opacity: .5;
        line-height: 2;
      }

      .btn-group {
        margin-top: 12px;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        z-index: 5;
        .btn {
          display: -webkit-flex;
          display: -ms-flex;
          display: flex;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-align-items: center;
          align-items: center;
          width: 100px;
          height: 30px;
          border: 1px solid @txtColor;
          border-radius: 3px;
          font-size: 13px;
          margin: 0 10px;
          z-index: 5;
          a{
            color: @txtColor;
          }
        }
      }
    }
	}
  /** 资产详情 **/
  .asset-container {
    width: 100%;
    height: 100px;
    background: #fff;
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    text-align: center;
    padding: 12px;
    .item {
      -webkit-flex:auto;
      flex: auto;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      -webkit-flex-direction: column;
      -webkit-justify-content: center;
      flex-direction: column;
      justify-content: center;
      &:first-child {
        border-right: 1px solid @bdColor;
      }

      span {
        color: @assetTitleColor;
        font-weight: 200;
        font-size: 14px;
      }
      h3 {
        margin: 0;
        color: @txtColor;
      }
    }
  }

  /** 首页列表 **/
  .list-container {
    display: none;
    margin-top: 10px;
    background: @bodyBGColor;
    .item {
      background: #fff;
      &:not(:last-child) {
        margin-bottom: 10px;
      }
      .banner {
        height: auto;
      }
      .title {
        font-size: 16px;
        height: 70px;
        padding: 15px 20px;
        box-sizing: border-box;
        position: relative;
        small {
          font-size: 12px;
          display: block;
          color: @listTxtColor;
          line-height: 22px;
          span {
            vertical-align: middle;
            margin-left: 5px;
          }
        }
      }
      .icon-item {
        width: 12px;
        height: 12px;
        vertical-align: middle;
      }
      .icon-arrow {
        width: 19px;
        height: 10px;
        position: absolute;
        top: 26px;
        right: 15px;
        -webkit-transform: rotateX(180deg);
        transition: -webkit-transform .5s;
        transform: rotateX(180deg);
        transition: transform .5s;
        &.active {
          -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
        }
      }
      .tag {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        height: 70px;
        padding-left: 20px;
        box-sizing: border-box;
        -webkit-align-items: center;
        align-items: center;
        .tag-item {
          -webkit-flex:auto;
          flex: auto;
          position: relative;
          .pointer {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 10px 10px 10px;
            border-color: transparent transparent @listBdColor transparent;
            position: absolute;
            bottom: -11px;
            left: 0;
            z-index: 1;
            visibility: hidden;
            &.active {
              visibility: visible;
            }
            &:before {
              content:"";
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 0 10px 10px 10px;
              border-color: transparent transparent #fff transparent;
              position: absolute;;
              top: 1px;
              left: -10px;
            }
          }
          .tag-name {
            font-size: 12px;
          }
          .tag-value {
            span {
              font-size: 24px;
            }
            .increase {
              color: @increaseTxtColor;
            }
            .count {
              margin-right: 3px;
              color: @listTxtColor;
            }
          }
        }
      }
      .info {
        height: 0px;
        visibility: hidden;;
        overflow: hidden;
        border-top: 1px solid @listBdColor;
        position: relative;
        transition: height .5s,visibility .5s;
        &.active {
          visibility: visible;
          height: 280px;
        }
        :global {
          .recharts-wrapper {
            margin: 0 auto;
          }
        }

        .info-title {
          color: #737373;
          font-size: 12px;
          margin-top: 20px;
          text-align: center;
          font-weight: 200;
        }
        .info-progress {
          display: -webkit-flex;
          display: -ms-flex;
          display: flex;
          box-sizing: border-box;
          -webkit-box-pack: center;
          -webkit-justify-content: space-around;
          justify-content: space-around;
          .count {
            font-size: 12px;
            line-height: 20px;
            span {
              display: inline-block;
            }
          }
          .progress-container {
            text-align: right;
          }

        }
      }
      .more {
        font-size: 14px;
        color: @listTxtColor;
        height: 50px;
        // line-height: 50px;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        border-top: 1px solid @listBdColor;
      }
    }
  }

  /** 最新资讯 **/
  .news-container {
    margin-top: 10px;
    background: #fff;
    padding: 0 15px;
    box-sizing: border-box;
    border-bottom: 1px solid @listBdColor;
    .title {
      font-size: 14px;
      height: 40px;
      line-height: 1em;
      -webkit-justify-content: space-between;
      -webkit-align-items: center;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name {
        -webkit-flex: auto;
        flex: auto;
      }
      .more {
        font-size: 12px;
        color: @subTxtColor;
        font-weight: 200;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        .icon {
          &.icon-arrow {
            width: 12px;
            height: 6px;
            transform: rotateZ(90deg);
          }
        }
      }
    }
    .item {
      height: 80px;
      padding: 5px;
      box-sizing: border-box;
      border-top: 1px solid @listBdColor;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;

      .img {
        width: 100px;
        height: 63px;
        overflow: hidden;
        .flex-item-none;
        img {
          width: 100%;
        }
      }
      .item-title {
        font-size: 14px;
        color: #000;
        -webkit-flex-direction: column;
        -webkit-justify-content: center;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 18px;
        small {
          font-size: 12px;
          color: @listTxtColor;
          display: block;
          margin-top: 3px;
        }
      }
    }
  }

  /** 底部 **/
  .bottom-container {
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
    background: url("static/imgs/home/bottom-bg.png") no-repeat center;
    background-size: cover;
    height: 67px;
    color: #b2b2b2;
    padding-top: 32px;
    box-sizing: border-box;
    font-weight: 200;
    position: relative;
    span {
      position: absolute;
      top: 35px;
      left: 0;
      right: 0;
      text-align: center;
    }
  }

  /** 了解QBII弹层 **/
  .cover-container {
    &.active {
      display: block;
    }
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 4;
    color: @coverTxtColor;
    text-align: center;
    font-weight: 200;
    padding-top: 50px;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;

    .img {
      background: url("static/imgs/home/qbii-bg.png") no-repeat center;
      background-size: contain;;
      height: 250px;
      margin: 15px 0;
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
    }
    p {
      font-size: 15px;
      margin: 0;
    }
    .txt {
      font-size: 13px;
    }
    h1 {
      margin: 0 0 20px;
      font-size: 55px;
      font-weight: 200;
      line-height: 1;
    }
    .btn-join {
      display: inline-block;
      border: 1px solid @coverTxtColor;
      border-radius: 20px;
      width: 150px;
      height: 40px;
      line-height: 40px;

    }
  }
}
/***** icon *****/
.icon {
  display: inline-block;
  &.icon-item {
    width: 12px;
    height: 12px;
    background: url("static/imgs/home/icon-item.png") no-repeat center;
    background-size: cover;
  }
  &.icon-arrow {
    width: 19px;
    height: 10px;
    background: url("static/imgs/home/icon-arrow.png") no-repeat center;
    background-size: cover;
  }
}
/***** ainimation *****/
@-webkit-keyframes bg-ani {
  0%{-webkit-transform:  perspective(0px) rotateY(0deg) scaleX(1.1);}
  10%{-webkit-transform:  perspective(1000px) rotateY(5deg) scaleX(1.11);}
  20%{-webkit-transform:  perspective(1000px) rotateY(10deg) scaleX(1.12);}
  25%{-webkit-transform:  perspective(1000px) rotateY(15deg) scaleX(1.15);}
  30%{-webkit-transform:  perspective(1000px) rotateY(10deg) scaleX(1.12);}
  40%{-webkit-transform:  perspective(1000px) rotateY(5deg) scaleX(1.11);}
  50%{-webkit-transform:  perspective(0px) rotateY(0deg) scaleX(1.1);}
  60%{-webkit-transform:  perspective(1000px) rotateY(-5deg) scaleX(1.1);}
  70%{-webkit-transform:  perspective(1000px) rotateY(-10deg) scaleX(1.12);}
  75%{-webkit-transform:  perspective(1000px) rotateY(-15deg) scaleX(1.15);}
  80%{-webkit-transform:  perspective(1000px) rotateY(-10deg) scaleX(1.12);}
  90%{-webkit-transform:  perspective(1000px) rotateY(-5deg) scaleX(1.11);}
  100%{-webkit-transform:  perspective(0px) rotateY(0deg) scaleX(1.1);}
}

@keyframes bg-ani {
  0%{transform: perspective(0px) rotateY(0deg) scaleX(1.1);}
  10%{transform: perspective(1000px) rotateY(5deg) scaleX(1.11);}
  20%{transform: perspective(1000px) rotateY(10deg) scaleX(1.15);}
  25%{transform: perspective(1000px) rotateY(15deg) scaleX(1.2);}
  30%{transform: perspective(1000px) rotateY(10deg) scaleX(1.15);}
  40%{transform: perspective(1000px) rotateY(5deg) scaleX(1.11);}
  50%{transform: perspective(0px) rotateY(0deg) scaleX(1.1);}
  60%{transform: perspective(1000px) rotateY(-5deg) scaleX(1.1);}
  70%{transform: perspective(1000px) rotateY(-10deg) scaleX(1.15);}
  75%{transform: perspective(1000px) rotateY(-15deg) scaleX(1.2);}
  80%{transform: perspective(1000px) rotateY(-10deg) scaleX(1.15);}
  90%{transform: perspective(1000px) rotateY(-5deg) scaleX(1.11);}
  100%{transform: perspective(0px) rotateY(0deg) scaleX(1.1);}
}

@txtColor:#ae8e72;
@assetTitleColor:#757575;
@bdColor:#c0c0c0;
@bodyBGColor:#E1E1E1;
@coverTxtColor:#ffca43;
@listTxtColor:#aa8a72;
@increaseTxtColor:#ff504d;
@listBdColor:#e5e5e5;
@subTxtColor:#acacac;

html, body {
  margin: 0;
  padding: 0;
  font-family: "PingFang SC","STHeitiSC-Light","Helvetica Neue","Helvetica","Arial",sans-serif,"Mircosoft YaHei";
  background: @bodyBGColor;
  height: 100%;
  font-weight: 200;
}
:global {
  .extend {
    position: relative;
  }
  .extend:before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    z-index: 10;
  }
  .hide {
    display: none;
  }
}
/***** Mixin *****/
.flex {
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}
.flex-justify {
  -webkit-box-pack:justify;
  -webkit-justify-content:space-between;
  -ms-flex-pack:justify;
  justify-content:space-between;
}
.flex-vertical {
  -webkit-box-orient:vertical;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
}
.flex-item-auto {
  -webkit-box-flex:auto;
  -webkit-flex:auto;
  -ms-flex:auto;
  flex:auto;
}
.flex-item-none {
  -webkit-box-flex:none;
  -webkit-flex:none;
  -ms-flex:none;
  flex:none;
}
.flex-align-center {
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
}
.flex-center {
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
}

main{
  /** 首页头部 **/
  .top-container {
		width: 100%;
		height: 240px;
		overflow: hidden;
		position: relative;
		background: #000;
    /** 头部仪表盘 **/
    .dash-container {
      margin: 20px auto 0;
      width: 240px;
      height: 170px;
      overflow: hidden;
      z-index: 2;
    }
    .dash {
      display: block;
      z-index: 2;
      position: relative;
      width: 240px;
      height: 210px;
    }
    .top-bg {
      background: #000 url('static/imgs/home/top-bg.png') no-repeat;
      background-size: cover;
      width: 100%;
      height: 280px;
      position: absolute;
      top: -35px;
      z-index: 0;
      // -webkit-animation: bg-ani 10s linear infinite;
      // animation: bg-ani 10s linear infinite;
    }
    .content {
      position: absolute;
      text-align: center;
      color: @txtColor;
      z-index: 3;
      top: 60px;
      left: 0;right: 0;
      line-height: 1;

      h1,h3,h5,p {
        margin: 0;
      }
      h5 {
        font-size: 12px;
        margin-bottom: 3px;
        opacity: .5;
      }
      h3 {
        font-size: 14px;
        font-weight: normal;
        margin-bottom: 3px;
        opacity: .7;
      }
      h1 {
        font-size: 64px;
        font-weight: 100;
        font-family: "PingFang SC";
        height: 64px;
        &.nothing {
          font-size: 38px;
          line-height: 1.5;
        }
      }
      p {
        font-size: 10px;
        font-weight: 200;
        opacity: .5;
        line-height: 2;
      }

      .btn-group {
        margin-top: 12px;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        z-index: 5;
        .btn {
          display: -webkit-flex;
          display: -ms-flex;
          display: flex;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-align-items: center;
          align-items: center;
          width: 100px;
          height: 30px;
          border: 1px solid @txtColor;
          border-radius: 3px;
          font-size: 13px;
          margin: 0 10px;
          z-index: 5;
          a{
            color: @txtColor;
          }
        }
      }
    }
	}
  /** 资产详情 **/
  .asset-container {
    width: 100%;
    height: 100px;
    background: #fff;
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    text-align: center;
    padding: 12px;
    .item {
      -webkit-flex:auto;
      flex: auto;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      -webkit-flex-direction: column;
      -webkit-justify-content: center;
      flex-direction: column;
      justify-content: center;
      &:first-child {
        border-right: 1px solid @bdColor;
      }

      span {
        color: @assetTitleColor;
        font-weight: 200;
        font-size: 14px;
      }
      h3 {
        margin: 0;
        color: @txtColor;
      }
    }
  }

  /** 首页列表 **/
  .list-container {
    margin-top: 10px;
    background: @bodyBGColor;
    .item {
      background: #fff;
      &:not(:last-child) {
        margin-bottom: 10px;
      }
      .banner {
        height: auto;
      }
      .title {
        font-size: 16px;
        height: 70px;
        padding: 15px 20px;
        box-sizing: border-box;
        position: relative;
        small {
          font-size: 12px;
          display: block;
          color: @listTxtColor;
          line-height: 22px;
          span {
            vertical-align: middle;
            margin-left: 5px;
          }
        }
      }
      .icon-item {
        width: 12px;
        height: 12px;
        vertical-align: middle;
      }
      .icon-arrow {
        width: 19px;
        height: 10px;
        position: absolute;
        top: 26px;
        right: 15px;
        -webkit-transform: rotateX(180deg);
        transition: -webkit-transform .5s;
        transform: rotateX(180deg);
        transition: transform .5s;
        &.active {
          -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
        }
      }
      .tag {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        height: 70px;
        padding-left: 20px;
        box-sizing: border-box;
        -webkit-align-items: center;
        align-items: center;
        .tag-item {
          -webkit-flex:auto;
          flex: auto;
          position: relative;
          .pointer {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 10px 10px 10px;
            border-color: transparent transparent @listBdColor transparent;
            position: absolute;
            bottom: -11px;
            left: 0;
            z-index: 1;
            visibility: hidden;
            &.active {
              visibility: visible;
            }
            &:before {
              content:"";
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 0 10px 10px 10px;
              border-color: transparent transparent #fff transparent;
              position: absolute;;
              top: 1px;
              left: -10px;
            }
          }
          .tag-name {
            font-size: 12px;
          }
          .tag-value {
            span {
              font-size: 24px;
            }
            .increase {
              color: @increaseTxtColor;
            }
            .count {
              margin-right: 3px;
              color: @listTxtColor;
            }
          }
        }
      }
      .info {
        height: 0px;
        visibility: hidden;;
        overflow: hidden;
        border-top: 1px solid @listBdColor;
        position: relative;
        transition: height .5s,visibility .5s;
        &.active {
          visibility: visible;
          height: 280px;
        }
        :global {
          .recharts-wrapper {
            margin: 0 auto;
          }
        }

        .info-title {
          color: #737373;
          font-size: 12px;
          margin-top: 20px;
          text-align: center;
          font-weight: 200;
        }
        .info-progress {
          display: -webkit-flex;
          display: -ms-flex;
          display: flex;
          box-sizing: border-box;
          -webkit-box-pack: center;
          -webkit-justify-content: space-around;
          justify-content: space-around;
          .count {
            font-size: 12px;
            line-height: 20px;
            span {
              display: inline-block;
            }
          }
          .progress-container {
            text-align: right;
          }

        }
      }
      .more {
        font-size: 14px;
        color: @listTxtColor;
        height: 50px;
        // line-height: 50px;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        border-top: 1px solid @listBdColor;
      }
    }
  }

  /** 最新资讯 **/
  .news-container {
    margin-top: 10px;
    background: #fff;
    padding: 0 15px;
    box-sizing: border-box;
    border-bottom: 1px solid @listBdColor;
    .title {
      font-size: 14px;
      height: 40px;
      line-height: 1em;
      -webkit-justify-content: space-between;
      -webkit-align-items: center;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name {
        -webkit-flex: auto;
        flex: auto;
      }
      .more {
        font-size: 12px;
        color: @subTxtColor;
        font-weight: 200;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        .icon {
          &.icon-arrow {
            width: 12px;
            height: 6px;
            transform: rotateZ(90deg);
          }
        }
      }
    }
    .item {
      height: 80px;
      padding: 5px;
      box-sizing: border-box;
      border-top: 1px solid @listBdColor;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;

      .img {
        width: 100px;
        height: 63px;
        overflow: hidden;
        .flex-item-none;
        img {
          width: 100%;
        }
      }
      .item-title {
        font-size: 14px;
        color: #000;
        -webkit-flex-direction: column;
        -webkit-justify-content: center;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 18px;
        small {
          font-size: 12px;
          color: @listTxtColor;
          display: block;
          margin-top: 3px;
        }
      }
    }
  }

  /** 底部 **/
  .bottom-container {
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
    background: url("static/imgs/home/bottom-bg.png") no-repeat center;
    background-size: cover;
    height: 67px;
    color: #b2b2b2;
    padding-top: 32px;
    box-sizing: border-box;
    font-weight: 200;
    position: relative;
    span {
      position: absolute;
      top: 35px;
      left: 0;
      right: 0;
      text-align: center;
    }
  }

  /** 了解QBII弹层 **/
  .cover-container {
    &.active {
      display: block;
    }
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 4;
    color: @coverTxtColor;
    text-align: center;
    font-weight: 200;
    padding-top: 50px;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;

    .img {
      background: url("static/imgs/home/qbii-bg.png") no-repeat center;
      background-size: contain;;
      height: 250px;
      margin: 15px 0;
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
    }
    p {
      font-size: 15px;
      margin: 0;
    }
    .txt {
      font-size: 13px;
    }
    h1 {
      margin: 0 0 20px;
      font-size: 55px;
      font-weight: 200;
      line-height: 1;
    }
    .btn-join {
      display: inline-block;
      border: 1px solid @coverTxtColor;
      border-radius: 20px;
      width: 150px;
      height: 40px;
      line-height: 40px;

    }
  }
}
/***** icon *****/
.icon {
  display: inline-block;
  &.icon-item {
    width: 12px;
    height: 12px;
    background: url("static/imgs/home/icon-item.png") no-repeat center;
    background-size: cover;
  }
  &.icon-arrow {
    width: 19px;
    height: 10px;
    background: url("static/imgs/home/icon-arrow.png") no-repeat center;
    background-size: cover;
  }
}
/***** ainimation *****/
@-webkit-keyframes bg-ani {
  0%{-webkit-transform:  perspective(0px) rotateY(0deg) scaleX(1.1);}
  10%{-webkit-transform:  perspective(1000px) rotateY(5deg) scaleX(1.11);}
  20%{-webkit-transform:  perspective(1000px) rotateY(10deg) scaleX(1.12);}
  25%{-webkit-transform:  perspective(1000px) rotateY(15deg) scaleX(1.15);}
  30%{-webkit-transform:  perspective(1000px) rotateY(10deg) scaleX(1.12);}
  40%{-webkit-transform:  perspective(1000px) rotateY(5deg) scaleX(1.11);}
  50%{-webkit-transform:  perspective(0px) rotateY(0deg) scaleX(1.1);}
  60%{-webkit-transform:  perspective(1000px) rotateY(-5deg) scaleX(1.1);}
  70%{-webkit-transform:  perspective(1000px) rotateY(-10deg) scaleX(1.12);}
  75%{-webkit-transform:  perspective(1000px) rotateY(-15deg) scaleX(1.15);}
  80%{-webkit-transform:  perspective(1000px) rotateY(-10deg) scaleX(1.12);}
  90%{-webkit-transform:  perspective(1000px) rotateY(-5deg) scaleX(1.11);}
  100%{-webkit-transform:  perspective(0px) rotateY(0deg) scaleX(1.1);}
}

@keyframes bg-ani {
  0%{transform: perspective(0px) rotateY(0deg) scaleX(1.1);}
  10%{transform: perspective(1000px) rotateY(5deg) scaleX(1.11);}
  20%{transform: perspective(1000px) rotateY(10deg) scaleX(1.15);}
  25%{transform: perspective(1000px) rotateY(15deg) scaleX(1.2);}
  30%{transform: perspective(1000px) rotateY(10deg) scaleX(1.15);}
  40%{transform: perspective(1000px) rotateY(5deg) scaleX(1.11);}
  50%{transform: perspective(0px) rotateY(0deg) scaleX(1.1);}
  60%{transform: perspective(1000px) rotateY(-5deg) scaleX(1.1);}
  70%{transform: perspective(1000px) rotateY(-10deg) scaleX(1.15);}
  75%{transform: perspective(1000px) rotateY(-15deg) scaleX(1.2);}
  80%{transform: perspective(1000px) rotateY(-10deg) scaleX(1.15);}
  90%{transform: perspective(1000px) rotateY(-5deg) scaleX(1.11);}
  100%{transform: perspective(0px) rotateY(0deg) scaleX(1.1);}
}


Don't use box shadow for borders.

Don't use box shadow for borders.

body {
  -webkit-font-smoothing: antialiased;
}
#app {
  &.aside-nil {
    .app-main {
      margin-left: 0;
    }
  }
}
.app-main {
  min-height: 100vh;
}
.main-head {
  .flexy(column);
  .head-user {
    .flexy(center, space-between);
    height: @tile;
    box-sizing: border-box;
    border-bottom: solid 1px @grayBoxBorder;
    .settings {
      .flexy(center, center);
      height: @tile;
      path {
        stroke: @grayLight;
        &:first-child {
          stroke-width: 5;
        }
      }
      padding: @padding-large-vertical @padding-large-horizontal;

      span {
        padding: @padding-xs-vertical @padding-xs-horizontal;
      }
      &:after {
        font-size: @baseFontSize;
      }
    }
    i.ico {
      .spinner {
        path {
          fill: @grayDark;
        }
      }
    }
  }
}
.main-body {
  .loading-spinner-big {
    @reserved_height: (@tile * 2);
    .flexy(center, center);
    height: ~"calc(100vh - @{reserved_height})";
  }
}
.main-foot {
  padding: @footerItemSize 0;
  border-top: 1px @panel-default-border solid;
  margin-top: auto;
  .logo {
    display: block;
    height: @footerItemSize;
    width: @footerItemSize;
    background-image: url("@{imgPath}/logomark.svg");
    background-size: @footerItemSize;
    background-position: center left;
    background-repeat: no-repeat;
  }
}

// .btn-primary {
//  @btnPrimaryBackground: #1f4d80;
//  @btnPrimaryBackgroundHighlight: darken(@btnPrimaryBackground, 5%);
//  .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
// }

a {
  &:hover {
    cursor: pointer;
    text-decoration: none;
  }
}
input {
  @height: 3em;
  &[type="text"],
  &[type="search"],
  &[type="email"] {
    .smart_label(@height, (@height / 2));
  }
}
textarea {
  .smart_label(13em, 3px);
}
.loading-spinner,
.loading-spinner-big {
  svg {
    display: inherit;
    width: 1em;
    height: 1em;
    [fill] {
      fill: @grayLighter;
    }
  }
  &:not(span) {
    svg {
      width: @spinnerSize;
      height: @spinnerSize;
    }
  }
}
button [spinner], button [data-spinner]{
  width:  @baseLineHeight;
  height: @baseLineHeight;
  vertical-align: top;
}
.fa.fa-spin {
  -moz-animation: spin 1s infinite linear;
  -o-animation: spin 1s infinite linear;
  -webkit-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
}
.github-icon-link {
  color: #333;
  .transition(all 0.1s ease-in);
  &:hover {
    text-decoration: none;
    color: #4183c4;
  }
}
.center{
  display: block;
  margin: 0 auto;
}
.center-text{
  text-align: center;
}
.contact-us {
  .notice {
    .error { color: @errorText; }
    .success { color: @successText; }
    margin: 0 0 15px;
  }

  button {
    display: block;
    width: 100px;
  }
}
#sticky-help-link {
  bottom: 0;
  border: 1px solid @black;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  max-height: 41px;
  overflow: hidden;
  position: fixed;
  right: 20px;
  transition: max-height .7s ease;
  z-index: @zindexStickyFooter;

  .dark-background {
    background: @grayDark;
    color: @white;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    padding: 10px 19px 11px;
    text-shadow: 0 1px 0 fade(@black, 50%);
  }

  .light-background {
    background: @white;
    padding: 10px 19px 11px;

    .contact-us {
      margin: 0px 0px 15px;
    }
  }

  &.isOpen {
    max-height: 1000px;
  }
}

.om-instrumentation {
  figure {
    margin: 0;
  }
  .admin-stats {
    .animation(admin-slide-down 200ms ease-in-out);
    width: 100%;
    color: white;
    background-color: black;
    z-index: 2000;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
  }
  table {
    font-family: monaco;
    font-size: 12px;
    width: calc(100% - 2em);
    margin: 0 1em 1em;
    th, td { text-align: left; }
    tr:not(:last-child) { border-bottom: 1px dashed fade(white, 10%); }
    .number { text-align: right; }
  }
}

@keyframes admin-slide-down {
  0%   { .translate(0, -100%);}
  100% { .translate(0, 0);}
}
@-webkit-keyframes admin-slide-down {
  0%   { .translate(0, -100%);}
  100% { .translate(0, 0);}
}

body {
  -webkit-font-smoothing: antialiased;
}
#app {
  &.aside-nil {
    .app-main {
      margin-left: 0;
    }
  }
}
.app-main {
  min-height: 100vh;
}
.main-head {
  .flexy(column);
  .head-user {
    .flexy(center, space-between);
    height: @tile;
    box-sizing: border-box;
    border-bottom: solid 1px @grayBoxBorder;
    .settings {
      .flexy(center, center);
      height: @tile;
      path {
        stroke: @grayLight;
        &:first-child {
          stroke-width: 5;
        }
      }
      padding: @padding-large-vertical @padding-large-horizontal;

      span {
        padding: @padding-xs-vertical @padding-xs-horizontal;
      }
      &:after {
        font-size: @baseFontSize;
      }
    }
    i.ico {
      .spinner {
        path {
          fill: @grayDark;
        }
      }
    }
  }
}
.main-body {
  .loading-spinner-big {
    @reserved_height: (@tile * 2);
    .flexy(center, center);
    height: ~"calc(100vh - @{reserved_height})";
  }
}
.main-foot {
  padding: @footerItemSize 0;
  box-shadow: 0 1px @grayLightest inset;
  margin-top: auto;
  .logo {
    display: block;
    height: @footerItemSize;
    width: @footerItemSize;
    background-image: url("@{imgPath}/logomark.svg");
    background-size: @footerItemSize;
    background-position: center left;
    background-repeat: no-repeat;
  }
}

// .btn-primary {
//  @btnPrimaryBackground: #1f4d80;
//  @btnPrimaryBackgroundHighlight: darken(@btnPrimaryBackground, 5%);
//  .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
// }

a {
  &:hover {
    cursor: pointer;
    text-decoration: none;
  }
}
input {
  @height: 3em;
  &[type="text"],
  &[type="search"],
  &[type="email"] {
    .smart_label(@height, (@height / 2));
  }
}
textarea {
  .smart_label(13em, 3px);
}
.loading-spinner,
.loading-spinner-big {
  svg {
    display: inherit;
    width: 1em;
    height: 1em;
    [fill] {
      fill: @grayLighter;
    }
  }
  &:not(span) {
    svg {
      width: @spinnerSize;
      height: @spinnerSize;
    }
  }
}
button [spinner], button [data-spinner]{
  width:  @baseLineHeight;
  height: @baseLineHeight;
  vertical-align: top;
}
.fa.fa-spin {
  -moz-animation: spin 1s infinite linear;
  -o-animation: spin 1s infinite linear;
  -webkit-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
}
.github-icon-link {
  color: #333;
  .transition(all 0.1s ease-in);
  &:hover {
    text-decoration: none;
    color: #4183c4;
  }
}
.center{
  display: block;
  margin: 0 auto;
}
.center-text{
  text-align: center;
}
.contact-us {
  .notice {
    .error { color: @errorText; }
    .success { color: @successText; }
    margin: 0 0 15px;
  }

  button {
    display: block;
    width: 100px;
  }
}
#sticky-help-link {
  bottom: 0;
  border: 1px solid @black;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  max-height: 41px;
  overflow: hidden;
  position: fixed;
  right: 20px;
  transition: max-height .7s ease;
  z-index: @zindexStickyFooter;

  .dark-background {
    background: @grayDark;
    color: @white;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    padding: 10px 19px 11px;
    text-shadow: 0 1px 0 fade(@black, 50%);
  }

  .light-background {
    background: @white;
    padding: 10px 19px 11px;

    .contact-us {
      margin: 0px 0px 15px;
    }
  }

  &.isOpen {
    max-height: 1000px;
  }
}

.om-instrumentation {
  figure {
    margin: 0;
  }
  .admin-stats {
    .animation(admin-slide-down 200ms ease-in-out);
    width: 100%;
    color: white;
    background-color: black;
    z-index: 2000;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
  }
  table {
    font-family: monaco;
    font-size: 12px;
    width: calc(100% - 2em);
    margin: 0 1em 1em;
    th, td { text-align: left; }
    tr:not(:last-child) { border-bottom: 1px dashed fade(white, 10%); }
    .number { text-align: right; }
  }
}

@keyframes admin-slide-down {
  0%   { .translate(0, -100%);}
  100% { .translate(0, 0);}
}
@-webkit-keyframes admin-slide-down {
  0%   { .translate(0, -100%);}
  100% { .translate(0, 0);}
}


Add will-change hint

Add will-change hint

/**
 *    Copyright 2015-2018 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

.profile-badges {
  @_top: profile-badges;

  @_width: @profile-avatar-size;
  @_padding: 3px;

  @_border-radius: @border-radius--extra;

  @_badge-margin: 3px;
  @_badge-natural-width: 86px;
  @_badge-natural-height: 34px;
  @_badge-width: @_width - ((@_padding + @_badge-margin) * 2);
  @_badge-height: @_badge-natural-height / @_badge-natural-width * @_badge-width;

  .own-layer();
  background-color: #333;
  margin-bottom: 5px;
  border-radius: @_border-radius;
  min-width: @_width;
  max-width: @_width;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: @_padding;

  &:hover {
    @media @desktop {
      max-width: 100%;
    }
  }

  &__badge {
    flex: none;
    width: @_badge-width;
    height: @_badge-height;
    border-radius: (@_border-radius - @_padding - @_badge-margin);
    background-size: cover;
    background-position: center;
    margin: @_badge-margin;
  }

  &__counter {
    color: #fff;
    font-size: @font-size--small;
    padding-top: @_padding;
    text-align: center;
    margin: 0 @_padding;
  }

  &__stripe {
    display: flex;
    align-self: flex-start;
    transition: transform 500ms ease-in-out;
    will-change: transform;

    .@{_top}:hover & {
      @media @desktop {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
      }
    }
  }
}

/**
 *    Copyright 2015-2018 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

.profile-badges {
  @_top: profile-badges;

  @_width: @profile-avatar-size;
  @_padding: 3px;

  @_border-radius: @border-radius--extra;

  @_badge-margin: 3px;
  @_badge-natural-width: 86px;
  @_badge-natural-height: 34px;
  @_badge-width: @_width - ((@_padding + @_badge-margin) * 2);
  @_badge-height: @_badge-natural-height / @_badge-natural-width * @_badge-width;

  .own-layer();
  background-color: #333;
  margin-bottom: 5px;
  border-radius: @_border-radius;
  min-width: @_width;
  max-width: @_width;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: @_padding;

  &:hover {
    @media @desktop {
      max-width: 100%;
    }
  }

  &__badge {
    flex: none;
    width: @_badge-width;
    height: @_badge-height;
    border-radius: (@_border-radius - @_padding - @_badge-margin);
    background-size: cover;
    background-position: center;
    margin: @_badge-margin;
  }

  &__counter {
    color: #fff;
    font-size: @font-size--small;
    padding-top: @_padding;
    text-align: center;
    margin: 0 @_padding;
  }

  &__stripe {
    display: flex;
    align-self: flex-start;
    transition: transform 500ms ease-in-out;

    .@{_top}:hover & {
      @media @desktop {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
      }
    }
  }
}


remove min-height. why?

remove min-height. why?

.btn {
    display: inline-block;
    padding: 0.35em 0.7em;
    border: 2px solid transparent;
    border-radius: 2px;
    min-width: 3.5rem;
    text-align: center;
    text-decoration: none;
    position: relative;
    z-index: 2;
    overflow: hidden;
    cursor: pointer;
    transition: color .1s, background-color .2s, border-color .2s, transform .2s;
    vertical-align: middle;
    font-weight: 500;
    margin: 0;

    + & {
        margin-left: 1em;
    }

    &:hover,
    &:focus,
    &:active {
        z-index: 100;
    }
}

.btn-backdrop {
    color: white;
    transform-origin: 50% 50%;
    padding: 0;
    min-width: 0;
    transition: transform .2s;
    background-color: transparent;

    &:hover,
    &:focus,
    &:active {
        transform: scale(1.1);
    }
}

.btn-ts {
    overflow: visible;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.btn-default {
    border-color: @color-text-default;
    color: @color-text-default;
    background-color: white;

    &:hover,
    &:focus {
        border-color: @brand-primary;
        color: @brand-primary;
    }
}

.btn-link {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: .03em;
    background-color: transparent;
    color: @brand-primary;

    &:hover,
    &:active,
    &:focus {
        text-decoration: underline;
    }
}

.btn-sm {
    font-size: @font-size-small;
}

.btn-primary {
    border-color: @brand-primary;
    background-color: @brand-primary;
    color: white;
}

.btn-toolbar {
    display: flex;
    align-items: center;

    &:empty {
        display: none;
    }

    > * + *:not(.btn-link) {
        margin-left: .7em;
    }

    h3 {
        margin: 0;
    }
}

.btn-toolbar-spread {
    justify-content: space-between;
}

.btn-toolbar-fixed {
    position: absolute;
    padding: 0.625rem 1rem;
    left: 0;
    right: 0;

    &.btn-toolbar-bottom {
        bottom: 0;
    }
}

.btn-toolbar-right {
    justify-content: flex-end;
}

.btn-toolbar-centered {
    justify-content: center;
}

.btn-group {
    display: flex;
    position: relative;

    .btn {
        margin: 0;
        border-radius: 0;
    }

    > :first-child ~ * {
        margin-left: -2px;
    }

    > :first-child {
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
    }

    > :last-child {
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }
}

.btn-more {
    .sg-dots();

    &:after {
        .sg();
        transform: translateY(1px);
    }
}

.btn {
    display: inline-block;
    padding: 0.35em 0.7em;
    border: 2px solid transparent;
    border-radius: 2px;
    min-width: 3.5rem;
    text-align: center;
    text-decoration: none;
    position: relative;
    z-index: 2;
    overflow: hidden;
    cursor: pointer;
    transition: color .1s, background-color .2s, border-color .2s, transform .2s;
    vertical-align: middle;
    font-weight: 500;
    margin: 0;

    + & {
        margin-left: 1em;
    }

    &:hover,
    &:focus,
    &:active {
        z-index: 100;
    }
}

.btn-backdrop {
    color: white;
    transform-origin: 50% 50%;
    padding: 0;
    min-width: 0;
    transition: transform .2s;
    background-color: transparent;

    &:hover,
    &:focus,
    &:active {
        transform: scale(1.1);
    }
}

.btn-ts {
    overflow: visible;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.btn-default {
    border-color: @color-text-default;
    color: @color-text-default;
    background-color: white;

    &:hover,
    &:focus {
        border-color: @brand-primary;
        color: @brand-primary;
    }
}

.btn-link {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: .03em;
    background-color: transparent;
    color: @brand-primary;

    &:hover,
    &:active,
    &:focus {
        text-decoration: underline;
    }
}

.btn-sm {
    font-size: @font-size-small;
    min-height: 34px;
}

.btn-primary {
    border-color: @brand-primary;
    background-color: @brand-primary;
    color: white;
}

.btn-toolbar {
    display: flex;
    align-items: center;

    &:empty {
        display: none;
    }

    > * + *:not(.btn-link) {
        margin-left: .7em;
    }

    h3 {
        margin: 0;
    }
}

.btn-toolbar-spread {
    justify-content: space-between;
}

.btn-toolbar-fixed {
    position: absolute;
    padding: 0.625rem 1rem;
    left: 0;
    right: 0;

    &.btn-toolbar-bottom {
        bottom: 0;
    }
}

.btn-toolbar-right {
    justify-content: flex-end;
}

.btn-toolbar-centered {
    justify-content: center;
}

.btn-group {
    display: flex;
    position: relative;

    .btn {
        margin: 0;
        border-radius: 0;
    }

    > :first-child ~ * {
        margin-left: -2px;
    }

    > :first-child {
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
    }

    > :last-child {
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }
}

.btn-more {
    .sg-dots();

    &:after {
        .sg();
        transform: translateY(1px);
    }
}


More wikitable overrides.

More wikitable overrides.

/*
 * Overrides some of the CSS styles that are built into MediaWiki
 * This file is based on:
 * https://www.mediawiki.org/w/load.php?debug=true&lang=en&modules=mediawiki.legacy.shared&only=styles&skin=vector
 */
h2 {
        border: none;
}

/* Default style for semantic tags */
abbr[title],
.explain[title] {
        border-bottom: 1px dotted;
        cursor: help;
}

@supports (text-decoration: underline dotted) {
        abbr[title],
        .explain[title] {
                border-bottom: none;
                text-decoration: underline dotted;
        }
}

/* Colored watchlist and recent changes numbers */
.mw-plusminus-pos {
        color: #006400; /* dark green */
}

.mw-plusminus-neg {
        color: #8b0000; /* dark red */
}

.mw-plusminus-null {
        color: #aaa; /* gray */
}

/**
 * Add a bit of margin space between the preview and the toolbar.
 * This replaces the ugly

 we used to insert into the page source
 */
#wikiPreview.ontop {
        margin-bottom: @padding-large-vertical;
}

/* Stop floats from intruding into edit area in previews */
#editform,
#toolbar,
#wpTextbox1 {
        clear: both;
}

/**
 * rev_deleted stuff
 */
li span.deleted,
span.history-deleted {
        text-decoration: line-through;
        color: #888;
        font-style: italic;
}

/**
 * Forms
 */
td.mw-label {
        text-align: right;
}

td.mw-input {
        text-align: left;
}

td.mw-submit {
        text-align: left;
}

td.mw-label {
        vertical-align: middle;
}

td.mw-submit {
        white-space: nowrap;
}

input#wpSummary {
        width: 80%;
        margin-bottom: 1em;
}

.mw-input-with-label {
        white-space: nowrap;
}

/**
 * Image captions.
 *
 * This is only meant to provide the most basic of styles, visual settings shouldn't be added here.
 */

/* @noflip */
.mw-content-ltr .thumbcaption {
        text-align: left;
}

/* @noflip */
.mw-content-ltr .magnify {
        float: right;
}

/* @noflip */
.mw-content-rtl .thumbcaption {
        text-align: right;
}

/* @noflip */
.mw-content-rtl .magnify {
        float: left;
}

/**
 * Categories
 */
#catlinks {
        /**
         * Overrides text justification (user preference)
         * See bug 31990
         */
        text-align: left;
        .well();
}

.catlinks ul {
        .list-inline();
}

.catlinks li {
}

.catlinks li:first-child {
}

/* (bug 5346) make category redirects italic */
.catlinks li a.mw-redirect {
        font-style: italic;
}

/**
 * Hidden categories
 */
.mw-hidden-cats-hidden {
        display: none;
}

.catlinks-allhidden {
        display: none;
}

/**
 * Convenience links to edit delete and protect reasons
 */
p.mw-protect-editreasons,
p.mw-filedelete-editreasons,
p.mw-delete-editreasons {
        font-size: 90%;
        text-align: right;
}

/* Page history styling */

/* The auto-generated edit comments */
.autocomment {
        color: #808080;
}

#pagehistory .history-user {
        margin-left: 0.4em;
        margin-right: 0.2em;
}

#pagehistory li {
        border: 1px solid #fff;
}

#pagehistory li.selected {
        background-color: #f9f9f9;
        border: 1px dashed #aaa;
}

.mw-history-revisionactions {
        float: right;
}

/** Generic minor/bot/newpage styling (recent changes) */
.newpage,
.minoredit,
.botedit {
        font-weight: bold;
}

/**
 * Recreating deleted page warning
 * Reupload file warning
 * Page protection warning
 * incl. log entries for these warnings
 */
div.mw-warning-with-logexcerpt {
        padding: 3px;
        margin-bottom: 3px;
        border: 2px solid #2f6fab;
        clear: both;
}

div.mw-warning-with-logexcerpt ul li {
        font-size: 90%;
}

/* (show/hide) revision deletion links */
span.mw-revdelundel-link,
strong.mw-revdelundel-link {
        font-size: 90%;
}

span.mw-revdelundel-hidden,
input.mw-revdelundel-hidden {
        visibility: hidden;
}

td.mw-revdel-checkbox,
th.mw-revdel-checkbox {
        padding-right: 10px;
        text-align: center;
}

/* red links; see bug 36276 */
a.new {
        color: #ba0000;
}

/* Plainlinks - this can be used to switch
 * off special external link styling */
.plainlinks a.external {
        background: none !important;
        padding: 0 !important;
}

/* External URLs should always be treated as LTR (bug 4330) */
/* @noflip */ .rtl a.external.free,
.rtl a.external.autonumber {
        direction: ltr;
        unicode-bidi: embed;
}

/**
 * wikitable class for skinning normal tables
 * keep in sync with commonPrint.css
 */
table.wikitable {
        color: unset;
        background-color: unset;
        border: unset;
        border-collapse: unset;
        .table();

        tr {
                th, td {
                        border: unset;
                        padding: unset;
                        background-color: unset;
                        text-align: unset;
                }
        }

        tbody {
                tr {
                        th, td {
                                border: unset;
                                padding: unset;
                                background-color: unset;
                                text-align: unset;
                        }
                }
        }
}

table.wikitable > caption {
        font-weight: unset;
}

/* success and error messages */
.error,
.warning,
.success {
        font-size: inherit;
}

.error {
        color: @brand-danger;
}

.warning {
        color: @brand-warning;
}

.success {
        color: @brand-success;
}

.errorbox,
.warningbox,
.successbox {
        .alert();
}

.errorbox h2,
.warningbox h2,
.successbox h2 {
        font-size: unset;
        color: unset;
        font-weight: unset;
        display: unset;
        margin: unset;
        border: unset
}

.errorbox {
        .alert-danger();
}

.warningbox {
        .alert-warning();
}

.successbox {
        .alert-success();
}

/* general info/warning box for SP */
.mw-infobox {
        .alert();
        .alert-info();
}

.mw-infobox-left {
        .pull-left();
}

.mw-infobox-right {
        .pull-right();
}

/* Note on preview page */
.previewnote {
        color: #c00;
        margin-bottom: 1em;
}

.previewnote p {
        text-indent: 3em;
        margin: 0.8em 0;
}

.visualClear {
        clear: both;
}

/**
 * Data table style
 *
 * Transparent table with suddle borders
 * and blue row-highlighting.
 */
.mw-datatable {
        border-collapse: collapse;
}

.mw-datatable,
.mw-datatable td,
.mw-datatable th {
        border: 1px solid #aaa;
        padding: 0 0.15em 0 0.15em;
}

.mw-datatable th {
        background-color: #ddf;
}

.mw-datatable td {
        background-color: #fff;
}

.mw-datatable tr:hover td {
        background-color: #eef;
}

/* Classes for Exif data display */
table.mw_metadata {
        font-size: 0.8em;
        margin-left: 0.5em;
        margin-bottom: 0.5em;
        width: 400px;
}

table.mw_metadata caption {
        font-weight: bold;
}

table.mw_metadata th {
        font-weight: normal;
        text-align: center;
}

table.mw_metadata td {
        padding: 0.1em;
}

table.mw_metadata {
        border: none;
        border-collapse: collapse;
}

table.mw_metadata td,
table.mw_metadata th {
        border: 1px solid #aaa;
        padding-left: 5px;
        padding-right: 5px;
}

table.mw_metadata th {
        background-color: #f9f9f9;
}

table.mw_metadata td {
        background-color: #fcfcfc;
}

table.mw_metadata ul.metadata-langlist {
        list-style-type: none;
        list-style-image: none;
        padding-right: 5px;
        padding-left: 5px;
        margin: 0;
}

#toc ul, .toc ul {
        margin: .3em 0;
}

/* tooltip styles */
.mw-help-field-hint {
        display: none;
        margin-left: 2px;
        margin-bottom: -8px;
        padding: 0 0 0 15px;
        background-image: url(/w/resources/src/mediawiki.legacy/images/help-question.gif?346d8);
        background-position: left center;
        background-repeat: no-repeat;
        cursor: pointer;
        font-size: .8em;
        text-decoration: underline;
        color: #0645ad;
}

.mw-help-field-hint:hover {
        background-image: url(/w/resources/src/mediawiki.legacy/images/help-question-hover.gif?53eb5);
}

.mw-help-field-data {
        display: block;
        background-color: #d6f3ff;
        padding: 5px 8px 4px 8px;
        border: 1px solid #5dc9f4;
        margin-left: 20px;
}

/* Images */

/* @noflip */ div.tright,
div.floatright,
table.floatright {
        clear: right;
        float: right;
}

/* @noflip */ div.tleft,
div.floatleft,
table.floatleft {
        float: left;
        clear: left;
}

div.floatright,
table.floatright,
div.floatleft,
table.floatleft {
        position: relative;
}

/* Print footer should be hidden by default in screen. */
.printfooter {
        display: none;
}

/* Display editsection links smaller and next to headings */
.mw-editsection,
.mw-editsection-like {
        .small();
        .text-muted();
        .pull-right();
}

/*
 * Overrides some of the CSS styles that are built into MediaWiki
 * This file is based on:
 * https://www.mediawiki.org/w/load.php?debug=true&lang=en&modules=mediawiki.legacy.shared&only=styles&skin=vector
 */
h2 {
        border: none;
}

/* Default style for semantic tags */
abbr[title],
.explain[title] {
        border-bottom: 1px dotted;
        cursor: help;
}

@supports (text-decoration: underline dotted) {
        abbr[title],
        .explain[title] {
                border-bottom: none;
                text-decoration: underline dotted;
        }
}

/* Colored watchlist and recent changes numbers */
.mw-plusminus-pos {
        color: #006400; /* dark green */
}

.mw-plusminus-neg {
        color: #8b0000; /* dark red */
}

.mw-plusminus-null {
        color: #aaa; /* gray */
}

/**
 * Add a bit of margin space between the preview and the toolbar.
 * This replaces the ugly

 we used to insert into the page source
 */
#wikiPreview.ontop {
        margin-bottom: @padding-large-vertical;
}

/* Stop floats from intruding into edit area in previews */
#editform,
#toolbar,
#wpTextbox1 {
        clear: both;
}

/**
 * rev_deleted stuff
 */
li span.deleted,
span.history-deleted {
        text-decoration: line-through;
        color: #888;
        font-style: italic;
}

/**
 * Forms
 */
td.mw-label {
        text-align: right;
}

td.mw-input {
        text-align: left;
}

td.mw-submit {
        text-align: left;
}

td.mw-label {
        vertical-align: middle;
}

td.mw-submit {
        white-space: nowrap;
}

input#wpSummary {
        width: 80%;
        margin-bottom: 1em;
}

.mw-input-with-label {
        white-space: nowrap;
}

/**
 * Image captions.
 *
 * This is only meant to provide the most basic of styles, visual settings shouldn't be added here.
 */

/* @noflip */
.mw-content-ltr .thumbcaption {
        text-align: left;
}

/* @noflip */
.mw-content-ltr .magnify {
        float: right;
}

/* @noflip */
.mw-content-rtl .thumbcaption {
        text-align: right;
}

/* @noflip */
.mw-content-rtl .magnify {
        float: left;
}

/**
 * Categories
 */
#catlinks {
        /**
         * Overrides text justification (user preference)
         * See bug 31990
         */
        text-align: left;
        .well();
}

.catlinks ul {
        .list-inline();
}

.catlinks li {
}

.catlinks li:first-child {
}

/* (bug 5346) make category redirects italic */
.catlinks li a.mw-redirect {
        font-style: italic;
}

/**
 * Hidden categories
 */
.mw-hidden-cats-hidden {
        display: none;
}

.catlinks-allhidden {
        display: none;
}

/**
 * Convenience links to edit delete and protect reasons
 */
p.mw-protect-editreasons,
p.mw-filedelete-editreasons,
p.mw-delete-editreasons {
        font-size: 90%;
        text-align: right;
}

/* Page history styling */

/* The auto-generated edit comments */
.autocomment {
        color: #808080;
}

#pagehistory .history-user {
        margin-left: 0.4em;
        margin-right: 0.2em;
}

#pagehistory li {
        border: 1px solid #fff;
}

#pagehistory li.selected {
        background-color: #f9f9f9;
        border: 1px dashed #aaa;
}

.mw-history-revisionactions {
        float: right;
}

/** Generic minor/bot/newpage styling (recent changes) */
.newpage,
.minoredit,
.botedit {
        font-weight: bold;
}

/**
 * Recreating deleted page warning
 * Reupload file warning
 * Page protection warning
 * incl. log entries for these warnings
 */
div.mw-warning-with-logexcerpt {
        padding: 3px;
        margin-bottom: 3px;
        border: 2px solid #2f6fab;
        clear: both;
}

div.mw-warning-with-logexcerpt ul li {
        font-size: 90%;
}

/* (show/hide) revision deletion links */
span.mw-revdelundel-link,
strong.mw-revdelundel-link {
        font-size: 90%;
}

span.mw-revdelundel-hidden,
input.mw-revdelundel-hidden {
        visibility: hidden;
}

td.mw-revdel-checkbox,
th.mw-revdel-checkbox {
        padding-right: 10px;
        text-align: center;
}

/* red links; see bug 36276 */
a.new {
        color: #ba0000;
}

/* Plainlinks - this can be used to switch
 * off special external link styling */
.plainlinks a.external {
        background: none !important;
        padding: 0 !important;
}

/* External URLs should always be treated as LTR (bug 4330) */
/* @noflip */ .rtl a.external.free,
.rtl a.external.autonumber {
        direction: ltr;
        unicode-bidi: embed;
}

/**
 * wikitable class for skinning normal tables
 * keep in sync with commonPrint.css
 */
table.wikitable {
        .table();
}

table.wikitable > tr > th,
table.wikitable > tr > td,
table.wikitable > * > tr > th,
table.wikitable > * > tr > td {
        border: unset;
        padding: unset;
}

table.wikitable > tr > th,
table.wikitable > * > tr > th {
        background-color: unset;
        text-align: unset;
}

table.wikitable > caption {
        font-weight: unset;
}

/* success and error messages */
.error,
.warning,
.success {
        font-size: inherit;
}

.error {
        color: @brand-danger;
}

.warning {
        color: @brand-warning;
}

.success {
        color: @brand-success;
}

.errorbox,
.warningbox,
.successbox {
        .alert();
}

.errorbox h2,
.warningbox h2,
.successbox h2 {
        font-size: unset;
        color: unset;
        font-weight: unset;
        display: unset;
        margin: unset;
        border: unset
}

.errorbox {
        .alert-danger();
}

.warningbox {
        .alert-warning();
}

.successbox {
        .alert-success();
}

/* general info/warning box for SP */
.mw-infobox {
        .alert();
        .alert-info();
}

.mw-infobox-left {
        .pull-left();
}

.mw-infobox-right {
        .pull-right();
}

/* Note on preview page */
.previewnote {
        color: #c00;
        margin-bottom: 1em;
}

.previewnote p {
        text-indent: 3em;
        margin: 0.8em 0;
}

.visualClear {
        clear: both;
}

/**
 * Data table style
 *
 * Transparent table with suddle borders
 * and blue row-highlighting.
 */
.mw-datatable {
        border-collapse: collapse;
}

.mw-datatable,
.mw-datatable td,
.mw-datatable th {
        border: 1px solid #aaa;
        padding: 0 0.15em 0 0.15em;
}

.mw-datatable th {
        background-color: #ddf;
}

.mw-datatable td {
        background-color: #fff;
}

.mw-datatable tr:hover td {
        background-color: #eef;
}

/* Classes for Exif data display */
table.mw_metadata {
        font-size: 0.8em;
        margin-left: 0.5em;
        margin-bottom: 0.5em;
        width: 400px;
}

table.mw_metadata caption {
        font-weight: bold;
}

table.mw_metadata th {
        font-weight: normal;
        text-align: center;
}

table.mw_metadata td {
        padding: 0.1em;
}

table.mw_metadata {
        border: none;
        border-collapse: collapse;
}

table.mw_metadata td,
table.mw_metadata th {
        border: 1px solid #aaa;
        padding-left: 5px;
        padding-right: 5px;
}

table.mw_metadata th {
        background-color: #f9f9f9;
}

table.mw_metadata td {
        background-color: #fcfcfc;
}

table.mw_metadata ul.metadata-langlist {
        list-style-type: none;
        list-style-image: none;
        padding-right: 5px;
        padding-left: 5px;
        margin: 0;
}

#toc ul, .toc ul {
        margin: .3em 0;
}

/* tooltip styles */
.mw-help-field-hint {
        display: none;
        margin-left: 2px;
        margin-bottom: -8px;
        padding: 0 0 0 15px;
        background-image: url(/w/resources/src/mediawiki.legacy/images/help-question.gif?346d8);
        background-position: left center;
        background-repeat: no-repeat;
        cursor: pointer;
        font-size: .8em;
        text-decoration: underline;
        color: #0645ad;
}

.mw-help-field-hint:hover {
        background-image: url(/w/resources/src/mediawiki.legacy/images/help-question-hover.gif?53eb5);
}

.mw-help-field-data {
        display: block;
        background-color: #d6f3ff;
        padding: 5px 8px 4px 8px;
        border: 1px solid #5dc9f4;
        margin-left: 20px;
}

/* Images */

/* @noflip */ div.tright,
div.floatright,
table.floatright {
        clear: right;
        float: right;
}

/* @noflip */ div.tleft,
div.floatleft,
table.floatleft {
        float: left;
        clear: left;
}

div.floatright,
table.floatright,
div.floatleft,
table.floatleft {
        position: relative;
}

/* Print footer should be hidden by default in screen. */
.printfooter {
        display: none;
}

/* Display editsection links smaller and next to headings */
.mw-editsection,
.mw-editsection-like {
        .small();
        .text-muted();
        .pull-right();
}


Make pre blocks stand out more

Make pre blocks stand out more

.rounded-corners-top (@radius: 0px) {
    border-radius-topleft: @radius;
    border-radius-topright: @radius;
    -moz-border-radius-topleft: @radius;
    -moz-border-radius-topright: @radius;
    -webkit-border-radius-topleft: @radius;
    -webkit-border-radius-topright: @radius;
}

.rounded-corners-bottom (@radius: 0px) {
    border-radius-bottomleft: @radius;
    border-radius-bottomright: @radius;
    -moz-border-radius-bottomleft: @radius;
    -moz-border-radius-bottomright: @radius;
    -webkit-border-radius-bottomleft: @radius;
    -webkit-border-radius-bottomright: @radius;
}

.rounded-corners-both (@radius: 0px) {
    .rounded-corners-top(@radius);
    .rounded-corners-bottom(@radius);
}

.rounded-box (@radius: 6px, @color: black) {
    .rounded-corners-both(@radius);
    border: 1px solid @color;
    margin-bottom: 1em;
}

.rounded-box-h2 (@color: black) {
    background-color: @color;
    color: white;
    margin-top: 0;
    padding: 0.2em 0.4em;
}

@light-yellow: #ffffd9;
@light-blue: #a3d3e3;
@dark-blue: #13708f;
@dark-purple: #21379d;
@dark-green: #02501c;
@light-orange: #f9d5b0;
@orange-brown: #8f683f;
@light-orange-brown: @orange-brown + #222;
@dark-orange-brown: @orange-brown - #222;

@error-orange: #fcc841;

/* See http://colorschemedesigner.com/#3p61TsOsOK-K- for the scheme. */

html {
    background-color: white;
}

body {
    font-family: sans-serif;
}

/* There are two rules in YUI Base that fuck up nesting ol inside ul and vice
versa. These two more specific rules fix that problem. */
ol > li {
	list-style: decimal outside;
}

ul > li {
	list-style: disc outside;
}

/* No margin on sub-lists */
ul * ul, ul * ol, ol * ol, ol * ul {
    margin-top: 0;
    margin-bottom: 0;
}

h1 {
    margin: 0.3em 0 0.5em 0;
    font-size: 170%;
}

a {
    text-decoration: none;

    :hover {
        text-decoration: underline;
    }
}

#doc3 {
    background-color: white;
}

#hd, #bd, #ft {
    /* yui base defaults to relatively small fonts, putting this in
       the body or #doc4 selector destroys the yui layout */
    font-size: 120%;
}

#ft {
    background-color: white;
    color: black;
    font-size: 90%;
    padding: 1em 1em;
}

#global-nav {
    margin-bottom: 0.2em;
    text-align: right;

    #quick-search {
        display: inline;
        font-size: 90%;
        text-align: left;

        input {
            color: #999;
            display: inline;

            :focus {
                color: black;
            }
        }
    }

    ul {
        display: inline;
        font-size: 80%;

        li {
            display: inline;
            list-style: none;

            a {
                color: #111;
                padding-left: 1.1em;
            }
        }
    }
}

#tabs {
    background-color: @light-blue;
    line-height: 1.2;
    padding-top: 2em;
    .rounded-corners-top(6px);

    ul {
        border-bottom: 8px solid @dark-blue;
        margin: 0 0 0 0;
        padding: 0 0 0 0.5em;
    }

    li {
        background-color: white;
        display: inline;
        font-variant: small-caps;
        list-style: none;
        margin-right: 0.3em;
        padding: 0;

        a {
            background-color: white;
            color: #333;
            font-weight: bold;
            padding: 0.3em 1em 0 1em;
            .rounded-corners-top(6px);
            text-decoration: none;

            :hover {
                background-color: @dark-purple;
                color: white;
            }
        }
    }

    li.selected {
        a {
            background-color: @dark-blue;
            color: white;
            font-size: 110%;
            padding: 0.5em 1.2em 0 1.2em;

            :hover {
                background-color: @dark-blue;
                color: white;
            }
        }
    }

    /* This makes sure that the header is the same height with our without tabs */
    li.invisible {
        background-color: transparent;
        padding: 0.3em 1em 0 1em;
    }
}

#local-nav {
    background-color: #eee;
    padding: 0.4em 0 0.4em 0.7em;

    ul {
        display: inline;
        font-size: 90%;
        margin: 0;
        padding: 0;
        li {
            display: inline;
            list-style: none;
            margin-right: 1em;
            padding: 0;
        }
        a, a:visited {
            color: black;
            text-decoration: underline;
        }
    }
    .current {
        font-weight: bold;
    }
}

#messages {
    background-color: @light-yellow;
    font-size: 90%;
}

#content {
    background-color: white;
    padding: 0.5em;
}

#sidebar {
    margin-top: 1.5em;
}

.sidebar-box {
    .rounded-box(6px, @dark-green);

    h2 {
        .rounded-box-h2(@dark-green);
    }
}

img.user-image-mini {
    vertical-align: top;
}

/* === Page View === */

#table-of-contents {
    background-color: @light-yellow;
    border: 1px dotted @dark-blue;
    font-size: 90%;
}

#table-of-contents + p {
    margin-top: 1em;
}

#page-content {
    table {
        border-top: 1px solid @dark-purple;
        border-right: 1px solid @dark-purple;
        border-bottom: 1px solid @dark-purple;
        border-left: 5px solid @dark-purple;

        th, td {
            border: none;
            border-right: 1px dotted #999;
            text-align: left;
            vertical-align: top;
        }

        td {
            padding: 0.3em 0.5em;
        }

        thead tr {
            background-color: @dark-purple;
            color: white;
        }

        tbody tr {
            border-bottom: 1px solid @dark-purple;
        }
    }

    a.new-page {
        :after {
            color: red;
            content: "?";
            font-size: 80%;
            vertical-align: top;
        }
    }

    pre {
        background-color: #f0f0f0;
        padding: 0.1em 0 0.1em 1em;

        code {
            line-height: 1.21;
        }
    }
}

#tags {
    ul, form {
        margin-right: 1em;
        margin-left: 1em;
    }

    form {
        margin-bottom: 1em;
    }
}

#tags-list {
    margin: 0 0 1em 0;
    padding: 0;
    li {
        display: inline;
        margin-right: 0.5em;
        img {
            margin-right: 2px;
        }
        a {
            text-decoration: none;
        }
        a.view-tag {
            background: transparent url('/images/icons/tag_blue.png') no-repeat left bottom;
            padding-left: 18px;
        }
    }
}

#tags-form {
    font-size: 80%;
    p {
        margin: 0 0 0.1em 0;
    }
}

#incoming-links {
    p {
        font-size: 80%;
        margin-right: 1em;
        margin-left: 1em;
    }
}

#revision-controls {
    font-size: 90%;
}

#revision-controls h2 {
    font-size: 110%;
    margin-bottom: 0.3em;
}

#revision-controls p {
    margin: 0.2em 0;
}

#attribution {
    border-top: 2px solid #11a844;
    clear: both;
    font-size: 90%;
    font-style: italic;
    margin-top: 1em;
    padding: 0.1em 0;

    p {
        margin-bottom: 0.5em;
    }
}

/* === Dashboard === */

#dashboard {
    /* This is needed to avoid a too-large gap from the <h1> at
       the top of the page to the first dashboard item. */
    margin-top: -1em;
}

.dashboard-item {
    .rounded-box(6px, @dark-purple);
    margin-top: 1em;
    margin-bottom: 0;

    h2 {
        .rounded-box-h2(@dark-purple);
    }
}

#active-users {
    margin-left: 0.5em;
    padding-left: 0;

    li {
        list-style: none;
        margin-bottom: 0.2em;
    }
}

/* === Tables === */

table.standard-table {
    border-bottom: 1px solid @dark-purple;
    border-right: 1px solid @dark-purple;
    width: 100%;

    th, td {
        border: none;
        vertical-align: top;
    }

    th {
        text-align: left;
    }

    td {
        padding: 0.3em 0.5em;
    }

    thead tr {
        background-color: @dark-purple;
        border-left: 5px solid @dark-purple;
        color: white;
    }

    tbody tr {
        border-bottom: 1px solid @dark-purple;
    }

    tbody:hover tr {
        background-color: #EEE;
    }

    tr.odd {
        border-left: 5px solid #999;
    }

    tr.even {
        border-left: 5px solid @dark-purple;
    }

    tr.has-child-row {
        border-bottom: 0;
    }
}

table.revision-diff {
    border: 1px solid black;
    width: 100%;
}

table.revision-diff > thead > tr > th.rev1,
table.revision-diff > thead > tr > th.rev2 {
    width: 49%;
}

table.revision-diff > tbody > tr {
    border: 0;
}

table.revision-diff > tbody > tr.attribution {
    font-size: 90%;
    font-style: italic;
}

table.revision-diff > tbody > tr > td {
    border: 1px dashed #ccc;
    vertical-align: top;
}

table.revision-diff > tbody > tr.diff-changed > td {
    background-color: #ddf;
}

table.revision-diff > tbody > tr.diff-changed > td {
    background-color: #eee;
}

table.revision-diff > tbody > tr > td.diff-removed {
    background-color: #fdd;
}

table.revision-diff > tbody > tr > td.diff-added {
    background-color: #dfd;
}

table.revision-diff > tbody > tr > td.marker {
    background-color: white;
    font-weight: bold;
    text-align: center;
}

pre.log-blog {
    line-height: 110%;
    margin-top: 1em;
}

#attachments img {
    margin-top: 0.3em;
}

/* === Forms === */

fieldset {
    background-color: @light-orange;
    border-top: 1px solid @light-orange-brown;
    padding: 0.5em;
    padding-bottom: 1em;

    legend {
        background-color: @orange-brown;
        color: white;
        font-weight: bold;
        padding: 0.4em;
    }
}

fieldset.last {
    padding-bottom: 0;
}

form {
    div.form-error {
        background-color: @error-orange;
        border: 1px solid black;
        margin: 0.3em 0 0.3em 0;
        padding: 0.3em;

        p {
            margin: 0.1em 0;
        }
    }

    div.error {
        background-color: @error-orange;
        margin-top: 2px;

        p.error-message {
            margin-bottom: 0.2em;
            margin-left: 12.5em;
        }

        p span {
            font-size: 85%;
        }
    }

    div.form-item {
        padding: 0.4em 0 0.4em 0;

        /* Having the help-text div allows us to set the margin in ems, to
           match the width of the label tag. Without the div, we'd have to set
           the margin on the p tag, but this has a different font-size than
           the label, so the em size is not the same. */
        div.help-text {
            margin-top: 0.1em;

            p {
                font-size: 85%;
                margin-bottom: 0em;
            }
        }

        span.required {
            font-weight: bold;
        }
    }

    label {
        font-weight: bold;
    }

    label.for-radio {
        display: inline;
    }

    input.checkbox,
    input.text,
    input.file,
    select {
        border: 1px solid #333;
        color: black;
        display: block;
        font-weight: bold;
        padding: 0.2em;
    }

    textarea {
        display: block;
    }

    .text-for-hidden {
        color: black;
    }

    input.error,
    textarea.error,
    select.error,
    p.error {
        background-color: #FFCC66;
    }

    input.disabled,
    textarea.disabled,
    select.disabled {
        background-color: #CCC;
        border-color: #333;
    }

    input:focus,
    textarea:focus,
    select:focus {
        background-color: #FAFFCA;
        border-color: black;
    }

    input.narrow {
        width: 7em;
    }

    input.medium {
        width: 18em;
    }

    input.wide {
        width: 30em;
    }

    textarea.medium {
        height: 7em;
        width: 24em;
    }

    input.submit {
        background-color: @orange-brown;
        border-bottom: 2px solid @dark-orange-brown;
        border-left: 1px solid @light-orange-brown;
        border-right: 2px solid @dark-orange-brown;
        border-top: 1px solid @light-orange-brown;
        color: white;
        font-weight: bold;
        margin-top: 0.5em;
        padding: 0.1em;
        :hover {
            background-color: @orange-brown + #222;
        }
    }
}

form select optgroup {
    font-size: 110%;
    font-weight: bold;

    option {
        font-weight: normal;
        font-size: 91%;
    }
}

/* Page edit form */

#form-and-preview {
    width: 98%;
}

#toolbar {
    ul {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    li {
        display: inline;
        list-style: none;

        img {
            background-color: #f9f9f9;
            border-bottom: 2px solid #333;
            border-left: 1px solid #999;
            border-right: 2px solid #333;
            border-top: 1px solid #999;
            padding: 3px;
        }
    }
}

textarea#page-content {
    font-family: "courier new", courier, monospace;
    font-weight: normal;
    height: 20em;
    margin: 0;
    padding: 0.5em;
    width: 100%;
}

#preview {
    background-color: #f9f9f9;
    border: 1px solid black;
    margin-top: 1em;
    padding: 0.5em;
    width: 100%;
}

/* Attachments */

#file-upload-form {
    /* This makes its left border line up with the table below it */
    margin-left: -2px;
}

#upload-lightbox {
    text-align: center;
}

#file-view-iframe {
    border: 1px solid #bbb;
}

/* Users */

#profile-image {
    float: left;
    margin-right: 0.5em;
}

/* Help */

.advice {
    background-color: @light-yellow;
    font-style: italic;
    margin-left: 1em;
    padding: 0.5em;
}

.markdown-example {
    background-color: #eee;
    font-family: sans-serif;
    line-height: 1.21;
    padding: 0.5em;
}

.markdown-output {
    background-color: #eff;
    margin-bottom: 0.5em;
    padding: 0.5em;
}

.markdown-output table {
    border-top: 1px solid @dark-purple;
    border-right: 1px solid @dark-purple;
    border-bottom: 1px solid @dark-purple;
    border-left: 5px solid @dark-purple;

    th, td {
        border: none;
        border-right: 1px dotted #999;
        vertical-align: top;
    }

    td {
        padding: 0.3em 0.5em;
    }

    thead tr {
        background-color: @dark-purple;
        color: white;
    }

    tbody tr {
        border-bottom: 1px solid @dark-purple;
    }
}

.fixed {
    font-family: monospace;
}

.rounded-corners-top (@radius: 0px) {
    border-radius-topleft: @radius;
    border-radius-topright: @radius;
    -moz-border-radius-topleft: @radius;
    -moz-border-radius-topright: @radius;
    -webkit-border-radius-topleft: @radius;
    -webkit-border-radius-topright: @radius;
}

.rounded-corners-bottom (@radius: 0px) {
    border-radius-bottomleft: @radius;
    border-radius-bottomright: @radius;
    -moz-border-radius-bottomleft: @radius;
    -moz-border-radius-bottomright: @radius;
    -webkit-border-radius-bottomleft: @radius;
    -webkit-border-radius-bottomright: @radius;
}

.rounded-corners-both (@radius: 0px) {
    .rounded-corners-top(@radius);
    .rounded-corners-bottom(@radius);
}

.rounded-box (@radius: 6px, @color: black) {
    .rounded-corners-both(@radius);
    border: 1px solid @color;
    margin-bottom: 1em;
}

.rounded-box-h2 (@color: black) {
    background-color: @color;
    color: white;
    margin-top: 0;
    padding: 0.2em 0.4em;
}

@light-yellow: #ffffd9;
@light-blue: #a3d3e3;
@dark-blue: #13708f;
@dark-purple: #21379d;
@dark-green: #02501c;
@light-orange: #f9d5b0;
@orange-brown: #8f683f;
@light-orange-brown: @orange-brown + #222;
@dark-orange-brown: @orange-brown - #222;

@error-orange: #fcc841;

/* See http://colorschemedesigner.com/#3p61TsOsOK-K- for the scheme. */

html {
    background-color: white;
}

body {
    font-family: sans-serif;
}

/* There are two rules in YUI Base that fuck up nesting ol inside ul and vice
versa. These two more specific rules fix that problem. */
ol > li {
	list-style: decimal outside;
}

ul > li {
	list-style: disc outside;
}

/* No margin on sub-lists */
ul * ul, ul * ol, ol * ol, ol * ul {
    margin-top: 0;
    margin-bottom: 0;
}

h1 {
    margin: 0.3em 0 0.5em 0;
    font-size: 170%;
}

a {
    text-decoration: none;

    :hover {
        text-decoration: underline;
    }
}

#doc3 {
    background-color: white;
}

#hd, #bd, #ft {
    /* yui base defaults to relatively small fonts, putting this in
       the body or #doc4 selector destroys the yui layout */
    font-size: 120%;
}

#ft {
    background-color: white;
    color: black;
    font-size: 90%;
    padding: 1em 1em;
}

#global-nav {
    margin-bottom: 0.2em;
    text-align: right;

    #quick-search {
        display: inline;
        font-size: 90%;
        text-align: left;

        input {
            color: #999;
            display: inline;

            :focus {
                color: black;
            }
        }
    }

    ul {
        display: inline;
        font-size: 80%;

        li {
            display: inline;
            list-style: none;

            a {
                color: #111;
                padding-left: 1.1em;
            }
        }
    }
}

#tabs {
    background-color: @light-blue;
    line-height: 1.2;
    padding-top: 2em;
    .rounded-corners-top(6px);

    ul {
        border-bottom: 8px solid @dark-blue;
        margin: 0 0 0 0;
        padding: 0 0 0 0.5em;
    }

    li {
        background-color: white;
        display: inline;
        font-variant: small-caps;
        list-style: none;
        margin-right: 0.3em;
        padding: 0;

        a {
            background-color: white;
            color: #333;
            font-weight: bold;
            padding: 0.3em 1em 0 1em;
            .rounded-corners-top(6px);
            text-decoration: none;

            :hover {
                background-color: @dark-purple;
                color: white;
            }
        }
    }

    li.selected {
        a {
            background-color: @dark-blue;
            color: white;
            font-size: 110%;
            padding: 0.5em 1.2em 0 1.2em;

            :hover {
                background-color: @dark-blue;
                color: white;
            }
        }
    }

    /* This makes sure that the header is the same height with our without tabs */
    li.invisible {
        background-color: transparent;
        padding: 0.3em 1em 0 1em;
    }
}

#local-nav {
    background-color: #eee;
    padding: 0.4em 0 0.4em 0.7em;

    ul {
        display: inline;
        font-size: 90%;
        margin: 0;
        padding: 0;
        li {
            display: inline;
            list-style: none;
            margin-right: 1em;
            padding: 0;
        }
        a, a:visited {
            color: black;
            text-decoration: underline;
        }
    }
    .current {
        font-weight: bold;
    }
}

#messages {
    background-color: @light-yellow;
    font-size: 90%;
}

#content {
    background-color: white;
    padding: 0.5em;
}

#sidebar {
    margin-top: 1.5em;
}

.sidebar-box {
    .rounded-box(6px, @dark-green);

    h2 {
        .rounded-box-h2(@dark-green);
    }
}

img.user-image-mini {
    vertical-align: top;
}

/* === Page View === */

#table-of-contents {
    background-color: @light-yellow;
    border: 1px dotted @dark-blue;
    font-size: 90%;
}

#table-of-contents + p {
    margin-top: 1em;
}

#page-content {
    table {
        border-top: 1px solid @dark-purple;
        border-right: 1px solid @dark-purple;
        border-bottom: 1px solid @dark-purple;
        border-left: 5px solid @dark-purple;

        th, td {
            border: none;
            border-right: 1px dotted #999;
            text-align: left;
            vertical-align: top;
        }

        td {
            padding: 0.3em 0.5em;
        }

        thead tr {
            background-color: @dark-purple;
            color: white;
        }

        tbody tr {
            border-bottom: 1px solid @dark-purple;
        }
    }

    a.new-page {
        :after {
            color: red;
            content: "?";
            font-size: 80%;
            vertical-align: top;
        }
    }

    pre {
        code {
            line-height: 1.21;
        }
    }
}

#tags {
    ul, form {
        margin-right: 1em;
        margin-left: 1em;
    }

    form {
        margin-bottom: 1em;
    }
}

#tags-list {
    margin: 0 0 1em 0;
    padding: 0;
    li {
        display: inline;
        margin-right: 0.5em;
        img {
            margin-right: 2px;
        }
        a {
            text-decoration: none;
        }
        a.view-tag {
            background: transparent url('/images/icons/tag_blue.png') no-repeat left bottom;
            padding-left: 18px;
        }
    }
}

#tags-form {
    font-size: 80%;
    p {
        margin: 0 0 0.1em 0;
    }
}

#incoming-links {
    p {
        font-size: 80%;
        margin-right: 1em;
        margin-left: 1em;
    }
}

#revision-controls {
    font-size: 90%;
}

#revision-controls h2 {
    font-size: 110%;
    margin-bottom: 0.3em;
}

#revision-controls p {
    margin: 0.2em 0;
}

#attribution {
    border-top: 2px solid #11a844;
    clear: both;
    font-size: 90%;
    font-style: italic;
    margin-top: 1em;
    padding: 0.1em 0;

    p {
        margin-bottom: 0.5em;
    }
}

/* === Dashboard === */

#dashboard {
    /* This is needed to avoid a too-large gap from the <h1> at
       the top of the page to the first dashboard item. */
    margin-top: -1em;
}

.dashboard-item {
    .rounded-box(6px, @dark-purple);
    margin-top: 1em;
    margin-bottom: 0;

    h2 {
        .rounded-box-h2(@dark-purple);
    }
}

#active-users {
    margin-left: 0.5em;
    padding-left: 0;

    li {
        list-style: none;
        margin-bottom: 0.2em;
    }
}

/* === Tables === */

table.standard-table {
    border-bottom: 1px solid @dark-purple;
    border-right: 1px solid @dark-purple;
    width: 100%;

    th, td {
        border: none;
        vertical-align: top;
    }

    th {
        text-align: left;
    }

    td {
        padding: 0.3em 0.5em;
    }

    thead tr {
        background-color: @dark-purple;
        border-left: 5px solid @dark-purple;
        color: white;
    }

    tbody tr {
        border-bottom: 1px solid @dark-purple;
    }

    tbody:hover tr {
        background-color: #EEE;
    }

    tr.odd {
        border-left: 5px solid #999;
    }

    tr.even {
        border-left: 5px solid @dark-purple;
    }

    tr.has-child-row {
        border-bottom: 0;
    }
}

table.revision-diff {
    border: 1px solid black;
    width: 100%;
}

table.revision-diff > thead > tr > th.rev1,
table.revision-diff > thead > tr > th.rev2 {
    width: 49%;
}

table.revision-diff > tbody > tr {
    border: 0;
}

table.revision-diff > tbody > tr.attribution {
    font-size: 90%;
    font-style: italic;
}

table.revision-diff > tbody > tr > td {
    border: 1px dashed #ccc;
    vertical-align: top;
}

table.revision-diff > tbody > tr.diff-changed > td {
    background-color: #ddf;
}

table.revision-diff > tbody > tr.diff-changed > td {
    background-color: #eee;
}

table.revision-diff > tbody > tr > td.diff-removed {
    background-color: #fdd;
}

table.revision-diff > tbody > tr > td.diff-added {
    background-color: #dfd;
}

table.revision-diff > tbody > tr > td.marker {
    background-color: white;
    font-weight: bold;
    text-align: center;
}

pre.log-blog {
    line-height: 110%;
    margin-top: 1em;
}

#attachments img {
    margin-top: 0.3em;
}

/* === Forms === */

fieldset {
    background-color: @light-orange;
    border-top: 1px solid @light-orange-brown;
    padding: 0.5em;
    padding-bottom: 1em;

    legend {
        background-color: @orange-brown;
        color: white;
        font-weight: bold;
        padding: 0.4em;
    }
}

fieldset.last {
    padding-bottom: 0;
}

form {
    div.form-error {
        background-color: @error-orange;
        border: 1px solid black;
        margin: 0.3em 0 0.3em 0;
        padding: 0.3em;

        p {
            margin: 0.1em 0;
        }
    }

    div.error {
        background-color: @error-orange;
        margin-top: 2px;

        p.error-message {
            margin-bottom: 0.2em;
            margin-left: 12.5em;
        }

        p span {
            font-size: 85%;
        }
    }

    div.form-item {
        padding: 0.4em 0 0.4em 0;

        /* Having the help-text div allows us to set the margin in ems, to
           match the width of the label tag. Without the div, we'd have to set
           the margin on the p tag, but this has a different font-size than
           the label, so the em size is not the same. */
        div.help-text {
            margin-top: 0.1em;

            p {
                font-size: 85%;
                margin-bottom: 0em;
            }
        }

        span.required {
            font-weight: bold;
        }
    }

    label {
        font-weight: bold;
    }

    label.for-radio {
        display: inline;
    }

    input.checkbox,
    input.text,
    input.file,
    select {
        border: 1px solid #333;
        color: black;
        display: block;
        font-weight: bold;
        padding: 0.2em;
    }

    textarea {
        display: block;
    }

    .text-for-hidden {
        color: black;
    }

    input.error,
    textarea.error,
    select.error,
    p.error {
        background-color: #FFCC66;
    }

    input.disabled,
    textarea.disabled,
    select.disabled {
        background-color: #CCC;
        border-color: #333;
    }

    input:focus,
    textarea:focus,
    select:focus {
        background-color: #FAFFCA;
        border-color: black;
    }

    input.narrow {
        width: 7em;
    }

    input.medium {
        width: 18em;
    }

    input.wide {
        width: 30em;
    }

    textarea.medium {
        height: 7em;
        width: 24em;
    }

    input.submit {
        background-color: @orange-brown;
        border-bottom: 2px solid @dark-orange-brown;
        border-left: 1px solid @light-orange-brown;
        border-right: 2px solid @dark-orange-brown;
        border-top: 1px solid @light-orange-brown;
        color: white;
        font-weight: bold;
        margin-top: 0.5em;
        padding: 0.1em;
        :hover {
            background-color: @orange-brown + #222;
        }
    }
}

form select optgroup {
    font-size: 110%;
    font-weight: bold;

    option {
        font-weight: normal;
        font-size: 91%;
    }
}

/* Page edit form */

#form-and-preview {
    width: 98%;
}

#toolbar {
    ul {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    li {
        display: inline;
        list-style: none;

        img {
            background-color: #f9f9f9;
            border-bottom: 2px solid #333;
            border-left: 1px solid #999;
            border-right: 2px solid #333;
            border-top: 1px solid #999;
            padding: 3px;
        }
    }
}

textarea#page-content {
    font-family: "courier new", courier, monospace;
    font-weight: normal;
    height: 20em;
    margin: 0;
    padding: 0.5em;
    width: 100%;
}

#preview {
    background-color: #f9f9f9;
    border: 1px solid black;
    margin-top: 1em;
    padding: 0.5em;
    width: 100%;
}

/* Attachments */

#file-upload-form {
    /* This makes its left border line up with the table below it */
    margin-left: -2px;
}

#upload-lightbox {
    text-align: center;
}

#file-view-iframe {
    border: 1px solid #bbb;
}

/* Users */

#profile-image {
    float: left;
    margin-right: 0.5em;
}

/* Help */

.advice {
    background-color: @light-yellow;
    font-style: italic;
    margin-left: 1em;
    padding: 0.5em;
}

.markdown-example {
    background-color: #eee;
    font-family: sans-serif;
    line-height: 1.21;
    padding: 0.5em;
}

.markdown-output {
    background-color: #eff;
    margin-bottom: 0.5em;
    padding: 0.5em;
}

.markdown-output table {
    border-top: 1px solid @dark-purple;
    border-right: 1px solid @dark-purple;
    border-bottom: 1px solid @dark-purple;
    border-left: 5px solid @dark-purple;

    th, td {
        border: none;
        border-right: 1px dotted #999;
        vertical-align: top;
    }

    td {
        padding: 0.3em 0.5em;
    }

    thead tr {
        background-color: @dark-purple;
        color: white;
    }

    tbody tr {
        border-bottom: 1px solid @dark-purple;
    }
}

.fixed {
    font-family: monospace;
}