// This is ".less" file, not ".scss", using Twitter's Bootstrap variables. 

body {
  // CSS3 BOOK
  #css3book {
	  font-family:Georgia, "Times New Roman", Times, serif;
    line-height: 1.5;
    
    @rotX: 5deg;
    @-webkit-keyframes odd-prev {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 100;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(180deg) translate3d(0,0,0);
        z-index: 0;
      }
    }
    @-webkit-keyframes odd-next {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(180deg) translate3d(0,0,0);
        z-index: 10;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 100;
      }
    }
    @-webkit-keyframes odd-in {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,0);
        z-index: 0;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 100;
      }
    }
    @-webkit-keyframes odd-out {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 10;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,0);
        z-index: 0;
      }
    }

    @-webkit-keyframes even-prev {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(-180deg) translate3d(0,0,0);
        z-index: 0;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 100;
      }
    }
    @-webkit-keyframes even-next {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 100;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(-180deg) translate3d(0,0,0);
        z-index: 0;
      }
    }
    @-webkit-keyframes even-in {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,0);
        z-index: 0;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 100;
      }
    }
    @-webkit-keyframes even-out {
      0% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,1px);
        z-index: 10;
      }
      100% {
        -webkit-transform: rotateX(@rotX) rotateY(0deg) translate3d(0,0,0);
        z-index: 10;
      }
    }
  
    padding-top: 20px;
    .book-host {
      -webkit-perspective: 1200;
      width: 800px;
      height: 500px;
      
      .book {
        .book-cover {
          -webkit-transform-style: preserve-3d;
          position: absolute;
          background-image: -webkit-linear-gradient(top, #ddd, #c78b33);
          -webkit-transform: rotateX(@rotX) translate3d(-25px, 4px, -2px);
          width: 850px;
          height: 500px;
          z-index: -2;
        }

        .dummy-page {
          .box-sizing(border-box);
          -webkit-transform-style: preserve-3d;
          position: absolute;
          background-color: @white;
          -webkit-transform: rotateX(@rotX);
          @shadowsize: 0 0 50px fade(#999,10%) inset,0 0 1px 1px fade(#555,50%);
          .box-shadow(@shadowsize);
          z-index: -1;          
          &#dummy-page0 {
            width: 840px;
            height: 496px;
            -webkit-transform: rotateX(@rotX) translate3d(-20px, 4px, -1.5px);
          }
          &#dummy-page1 {
            width: 830px;
            height: 497px;
            -webkit-transform: rotateX(@rotX) translate3d(-15px, 3px, -1.4px);
          }
          &#dummy-page2 {
            width: 820px;
            height: 498px;
            -webkit-transform: rotateX(@rotX) translate3d(-10px, 2px, -1.3px);
          }
          &#dummy-page3 {
            width: 810px;
            height: 499px;
            -webkit-transform: rotateX(@rotX) translate3d(-5px, 1px, -1.2px);
          }
          &#dummy-page4 {
            width: 800px;
            height: 500px;
            -webkit-transform: rotateX(@rotX) translate3d(0px, -1px, -1.1px);
          }
        }
        .title-page {
          .box-sizing(border-box);
          -webkit-transform-style: preserve-3d;
          width: 400px;
          height: 500px;
          padding: 20px;
          position: absolute;
          top: 0;
          -webkit-transform: rotateX(@rotX) translate3d(0px, 0px, 0px);
          background-color: @white;
          @shadowsize: -50px 0px 50px fade(#333,10%) inset;
          .box-shadow(@shadowsize);
          padding: 200px 40px 0 30px;
        }
        .end-page {
          .box-sizing(border-box);
          -webkit-transform-style: preserve-3d;
          width: 400px;
          height: 500px;
          padding: 30px;
          position: absolute;
          top: 0;
          left: 400px;
          -webkit-transform: rotateX(@rotX) translate3d(0px, 0px, 0px);
          @shadowsize: 50px -0px 50px fade(#333,10%) inset;
          .box-shadow(@shadowsize);
        }

        .page {
          .box-sizing(border-box);
          -webkit-transform-style: preserve-3d;
          -webkit-animation-duration: 1s;
          -webkit-animation-iteration-count: 1;
          -webkit-animation-timing-function: ease-out;
          -webkit-animation-fill-mode: both;
          -webkit-backface-visibility: visible;
          width: 400px;
          height: 500px;
          padding: 20px;
          position: absolute;
          top: 0;
          background-color: @white;
          color: @black;
          
          &:hover {
            cursor: pointer;
          }
          
          &.odd {
            padding-right: 40px;
            @shadowsize: -50px -0px 50px fade(#333,10%) inset, 0px 0 0px 0px fade(#333,50%);
            .box-shadow(@shadowsize);
            -webkit-transform-origin: right center 0;
          }
          &.even {
            padding-left: 40px;
            @shadowsize: 50px -0px 50px fade(#333,10%) inset, -1px 0px -1px 1px fade(#666,50%);
            .box-shadow(@shadowsize);
            -webkit-transform-origin: left center 0;

            left: 400px;
          }
          > div {
            height: 100%;
          }
          .pageNum {
            position: absolute;
            bottom: -10px;
            width: 100%;
            text-align: center;
          }
        }
      }
    }
  }
}