html * {
  -webkit-transition-property: all;
  -webkit-transition-duration: 400ms;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

a img {
  border: none;
  outline: none;
}

.page_backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
}
  .the_page, .introduction {
    -webkit-transition-property: none;
    position: absolute;
    left: 20%; right: 20%;
    top: 0; bottom: 0;
    z-index: 5;
  }
    .text, .fake_backer, .introduction {
      -webkit-transition-property: none;
      outline: 0;
      font-size: 12px;
      font-family: "Monaco","Courier New",monospace;
      line-height: 18px;
      position: absolute;
      left: 0; right: 0;
      margin: 0;
      padding: 0px 20px 0px 20px;
      overflow: hidden;
      resize: none;
    }
      .introduction {
        z-index: 100;
        text-align: center;
        line-height: 25px;
      }
        .introduction .logo {
          width: 515px;
          height: 212px;
          margin: 40px 0 10px 0;
  \      }
        .introduction br {
          display: block;
          height: 20px;
        }
        .introduction .safari {
          margin-top: 40px;
        }
      .text {
        bottom: 0;
      }
      .fake_backer {
        top: 0; bottom: 0;
      }
  
.fade_top, .fade_bottom {
  position: absolute;
  left: 1px; right: 1px;
  height: 60px;
  z-index: 10;
}
  .fade_top {
    top: 0;
  }
  .fade_bottom {
    bottom: 0;
  }
  
.left_edge {
  position: absolute;
  width: 20%;
  top: 0px; bottom: 0px;
  left: 0px;
  height: 100%;
  overflow: auto;
  display: table;
  z-index: 0;
}
  .left_wrapper {
    display: table-cell;
    vertical-align: middle;
  }
    .the_menu {
      font: 10px "Monaco","Courier New",monospace;
    }
    .the_menu * {
      -webkit-transition: none;
    }
      .menu_page {
        margin-left: -10px;
        padding: 0 35px 0 0px;
        z-index: 1;
        -webkit-transition-property: all, top;
        -webkit-transition-duration: 400ms, 0s;
      }
        .menu_page:hover {
          margin-left: 0px;
        }
        .menu_page .grabber {
          width: 25px; height: 22px;
          position: absolute;
          left: 8px;
          margin-top: 2px;
          opacity: 0;
          cursor: move;
        }
          .menu_page .grabber:hover {
            display: block;
            opacity: 1;
          }
        .menu_page .title {
          height: 18px;
          line-height: 20px;
          padding: 4px 0 4px 36px;
          overflow: hidden;
          cursor: pointer;
        }
        .menu_page .arrow {
          position: absolute;
          width: 15px; height: 20px;
          right: 10px;
          top: 3px;
          opacity: 0;
          background: url(../images/active.png);
          -webkit-transition: all 400ms;
        }
          .menu_page:hover .arrow {
            right: 0px;
          }
          .menu_page.active .arrow {
            opacity: 1;
          }

  
.right_edge {  
  position: absolute;
  width: 20%;
  top: 0px; bottom: 0px;
  right: 0px;
  height: 100%;
  display: table;
}
  .right_wrapper {
    display: table-cell;
    vertical-align: middle;
  }
    .the_dock {
    }
      .the_dock a {
        display: block;
        width: 80px; height: 80px;
        cursor: pointer;
        margin: 0 auto;
        margin-top: 45px;
        margin-bottom: 45px;
        outline: none;
        text-decoration: none;
        -webkit-transform: scale(0.84);
      }
        .the_dock a:hover {
          -webkit-transform: scale(1);
        }
        a.dock_page {
          margin-top: 0px;
        }
        a.dock_light {
        }
        a.dock_recycle {
          margin-bottom: 0px;
          position: relative;
        }
          a.dock_recycle .really_button {
            position: absolute;
            width: 80px;
            height: 73px;
            font: bold 22px Helvetica, Arial, sans-serif;
            text-align:center;
            padding-top: 7px;
            line-height: 22px;
            opacity: 0.8;
          }