@color-base: #ffffff;
@palette-color-2: #ffffff;
@palette-color-3: #ffffff;
@palette-color-20: #ffffff;
@theme-background-image: url(#);

@color-title-bar: @color-base;

@color-msg-header: @palette-color-2;
@color-msg-unread: @palette-color-20;

@color-link: #4282b8;

#msg-center {
  background:  @theme-background-image @color-title-bar 0px -30px no-repeat;

  /****************** 标准导航栏换肤 ******************/
  @color-sub-nav-background: lightness(@color-base, 0.98);
  @color-sub-tab-active: @palette-color-3;

  .page-header {
    background: rgba(255, 255, 255, 0.15);
  }

  .pop-window {
    background: @theme-background-image @color-title-bar 0px -30px no-repeat;
  }

  .main-nav-tab {

    li {
      &:hover {
        background-color: rgba(255,255,255, 0.5);
      }

      &.active {
        background-color: rgba(0,0,0,0.3);
        color: white;
        box-shadow: inset 0 0 4px #666;
      }
    }
  }

  .content-area {
    background-color: @color-sub-nav-background;
    .content-wrap {
      border-left: 1px solid #f2f4f6;
      background-color: white;
    }
  }

  .sub-nav-tab {
    &:hover {
      background: lighten(@color-sub-tab-active, 4%);
    }

    &.active {
      background-color: @color-sub-tab-active;
    }
  }
  /****************** 标准导航栏换肤 - end ******************/

  .msg-unread {
    .msg-status {
      background: @color-msg-unread;
    }
  }

  .msg-header {
    background: @color-msg-header;
  }

  .msg-detail {
    background-color: #fcf4e8;
    border: 1px solid #fae4c2;

    a {
      color: @color-link;
    }
  }

  .up-arrow {
    border-bottom-color: darken(#F5EEC2, 5%);
  }
  .up-arrow:after {
    border-bottom-color: #fcf4e8;
  }

  .msg-footer {
    background:@color-msg-header;
  }

  .pagination {
    .page-prev, .page-next {
      color: @color-link;
    }
  }
}