
html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Courier New', Helvetica, Arial, 'Microsoft Yahei', 'Hiragino Sans GB', sans-serif;
  background-color: #eee;
  color: #505458;
  height: 100%;
}

.wrapper {
  height: 100%;
}

.header {
  font-size: 16px;
  background: rgba(255, 255, 255, .97);
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  color: #4a4a4a;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  height: 44px;
  line-height: 44px;
  overflow: hidden;

  .logo {
    float: left;
    margin-left: 18px;
    margin-top: 8px;
  }

  .button-fs,
  .button-efs{
    float: right;
    background: url("/public/images/default-skin@2x.png") no-repeat;
    background-position: 0 0;
    background-size: 268px 88px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    overflow: visible;
    -webkit-appearance: none;
    border: 0;
    margin-right: 14px;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    opacity: .2;

    &:hover {
      opacity: 1;
      background-position-y: -44px;
    }
  }

  .button-efs {
    background-position: -44px 0;
  }
}

.artboard-list {
  text-align: center;
  height: 100%;

  .document-list {
    width: 200px;
    position: absolute;
    top: 44px;
    bottom: 0;
    height: 100%;
    padding: 20px 0;
    border-right: 1px solid #ccc;

    p {
      margin: 0;
      line-height: 30px;
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
      list-style: none;

      li a {
        display: block;
        text-align: left;
        padding-left: 10px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        color: #333;
        text-decoration: none;

        &:hover {
          background: #ccc;
        }
      }

      .current > a {
        background: #39cccc;
      }

      li ul {
        padding-left: 20px;
      }
    }
  }

  .document {

    .artboard {
      padding: 35px;
    }

    .title {
      margin: 0 0 15px;
      padding: 0;
      font-size: 12px;
      cursor: default;

      span {
        color: #444;
        background-color: #fff;
        border-radius: 4px;
        padding: 3px 8px;
        -webkit-transition: color .4s;
        transition: color .4s
      }

    }

    img {
      box-shadow: rgba(0, 0, 0, .6) 0 1px 4px;
      width: 25vw;
      height: auto;
      cursor: pointer;
      -webkit-transition: box-shadow .2s;
      transition: box-shadow .2s
    }
  }

}