htmls {
    height: 100%;
    color: #fff;
    background: #222;
    background-image: -webkit-gradient(radial,
                              50% 0, 10,
                              50% 0, 400,
                              from(rgba(255, 255, 255, 0.3)),
                              to(rgba(255, 255, 255, 0))
                ); /* Safari 5 */
    -webkit-background-image: radial-gradient(
                center top, 
                circle, 
                rgba(255, 255, 255, 0.3) 0%, 
                rgba(255, 255, 255, 0) 50%
                );
                /* Chrome, WK Nightly */
    background-image: -moz-radial-gradient(
                center top, 
                circle, 
                rgba(255, 255, 255, 0.3) 0%, 
                rgba(255, 255, 255, 0) 50%
                );
    /* Gradient not supported on Opera */
      background-repeat: no-repeat;
  }
  h1 {
    text-shadow: rgba(255,255,255, .7) 0px 0px 10px;
    font-size: 2em;
  }
  img {
    border: 0;
  }
  #dock-container {
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 100%;
  }
  #dock {
    position: relative;
    display: inline-block;
    -webkit-perspective: 400;
    -moz-perspective: 400;
  }
  #dock .base {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45px;
    z-index: -10;
    background-color: #888;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#ccc));
    background-image: -webkit-linear-gradient(top, #333, #999); 
    background-image: -moz-linear-gradient(top, #333, #999); /* Gradient works on FF 3.6+ */
    opacity: .5;
    border-bottom: 2px #aaa solid;
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: rotateX(55deg); /* 3d - works on webkit only */
    -moz-transform-origin: 50% 100%;
    -moz-transform: rotateX(55deg); /* not supported on current 3.7 */
    -o-transform-origin: 50% 100%;
    -o-transform: rotateX(55deg); /* not supported on current 10.6 */
  }
  #dock ul {
    font-size: 14px;
    padding: 0 30px;
    margin: 0;
  }
  #dock li {
    list-style-type: none;
    display: inline-block;
    position: relative;   
  }
  #dock li span {
    display: none;
    position: absolute;
    bottom: 140px;
    left: 0;
    width: 100%;
    background-color: rgba(0,0,0,.75);
    padding: 4px 0;
    border-radius: 12px; /* webkit nightly */
    -webkit-border-radius: 12px; /* for safari */
    -moz-border-radius: 12px;
    color: #fff;
  }
  #dock li:hover span {
    display: block;
  }
  #dock li img {
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
    -webkit-box-reflect: below 2px
        -webkit-gradient(linear, left top, left bottom, from(transparent),
        color-stop(0.7, transparent), to(rgba(255,255,255,.5)));
    -webkit-box-reflect: below 2px -webkit-linear-gradient(top, transparent, rgba(255,255,255,.3));
    -webkit-transition: all 0.3s;
    -webkit-transform-origin: 50% 100%;
    -moz-transition: all 0.4s;
    -moz-transform-origin: 50% 100%;
    -o-transition: all 0.3s;
    -o-transform-origin: 50% 100%;
  }
  #dock li:hover img { 
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    margin: 0 2em 10px;
  }

  /* one element after and element before (with JS)*/
  #dock li:hover + li img,
  #dock li.prev img {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    margin: 0 1.4em 10px;
  }