body
{
  margin: 0;
  padding: 0;
  border: 0;
}

#overlay
{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: white -webkit-gradient(linear, right top, left bottom, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(190,190,190)) );
}

#door
{
  position: absolute;
  width: 426px;
  height: 705px;
  top: 0;
  -webkit-background-size: 426px 705px;
}

.left { background: transparent url('door-left.png') 1px 0px no-repeat; z-index: 12; right: 50%; -webkit-transition: margin-right 2s, opacity 2s, -webkit-background-size 2s, width 2s; }
.right { background: transparent url('door-right.png') 1px 0px no-repeat; z-index: 11; left: 50%; -webkit-transition: margin-left 2s, opacity 2s, -webkit-background-size 2s, width 2s; }

#colorful
{
  z-index: 2;
  position: absolute;
  top: 0;
  left: 50%;
  width: 850px;
  margin-left: -425px;
  height: 705px;
  background: transparent url('colorful.png');
}

#exquisite
{
  z-index: 2;
  position: absolute;
  top: 779px;
  left: 50%;
  width: 280px;
  margin-left: -140px;
  height: 49px;
  background: transparent url('EXQUISITE.png');
}

#colorful:hover #door.left { margin-right: 426px; opacity: 1; width: 0;  -webkit-background-size: 0px 705px; }
#colorful:hover #door.right { margin-left: 426px; opacity: 1; width: 0;  -webkit-background-size: 0px 705px; }