.silex-page-tool {
  padding: 0;
  float: left;
  left:0;
  width: @pageToolWidth;
  position: absolute;
  top: @menuHeight;
  bottom: 0;
  overflow-y: auto;
  background-color: @silexlightgrey;
  -moz-box-shadow: inset 0px 0px 6px 0px #000;
  -webkit-box-shadow: inset 0px 0px 6px 0px #000;
  -o-box-shadow: inset 0px 0px 6px 0px #000;
  box-shadow: inset 0px 0px 6px 0px #000;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#000, Direction=NaN, Strength=6);

  .page-preview {
    border: 1px solid @silexdarkgrey;
    width: 131px;
    height: 80px;
    position: relative;
    margin: auto;
    cursor: default;
    background-color: #FFF;
    transition: all .3s;

    &:hover {
      border: 1px solid #000;

      .delete {
        opacity: 1;
      }

    }

    .delete {
      opacity: 0;
      right: 4px;
      top: 3px;
      position: absolute;
      cursor: pointer;
      color: #333;
      font-size: 18px;
      transition: all .2s;

      &:hover {
        color: #F00;
      }

    }

  }

  .page-tool-container {

    .ui-selected {

      .page-preview {
        width: 141px;
        height: 89px;
        border: 1px solid @silexdarkgrey;
        background-color: #FFF;
        box-shadow: 1px 1px 6px 1px @silexdarkgrey;
        filter:progid:DXImageTransform.Microsoft.Shadow(color=@silexdarkgrey, Direction=134, Strength=6);
        transition: all .3s;

        &:before {
          pointer-events: none;
          position: absolute;
          content: '';
          height: 0;
          width: 0;
          top: 0;
          left: 0;
          background: white;
          /* IE9 */
          background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
          filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
          /*For IE7-8-9*/
          z-index: 1000;
          box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
          -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
          -webkit-transition-property: width, height;
          transition-property: width, height;
        }

        &:hover:before,&:focus:before,&:active:before {
          width: 25px;
          height: 25px;
        }

        .label {
          font-weight: bold;
        }

      }

    }

  }

  .page-container {
    overflow-x: visible;
    overflow-y: auto;
    overflow: visible;
    text-align: center;
    margin: 10px;
    text-decoration: none;
    outline: none;

    .label {
      bottom: 0;
      padding: 5px;
      position: absolute;
      cursor: text;
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box;
      text-align: center;
      color: #333;
      border-top: 1px dashed transparent;
      transition: all .4s;

      &:hover {
        border-top: 1px dashed #333;
        background-color: #FFF;
      }

    }

  }

}