html{
      height: 100%;
      padding: 0;
      margin: 0;
   }
    body {
      padding-top: 80px;
      margin: 0;
      height: 300px;
      font-size: 12px;
      line-height: 1.5em; 
      font-family: "Lucida Grande", Verdana, Arial;
      background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(#777));
      background-image: -moz-linear-gradient(0% 100% 90deg,#555555, #777777);
      min-height: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
    }
    h2{
       text-align: center;
       color: #eee;
       text-shadow:     1px 1px 3px rgba(0,0,0,0.6);
       text-transform: uppercase;
    }
    #wrapper{
       margin: 0 auto;
       width: 620px;
       height: 500px;
    }
   .flip-container {
     position: relative;
     margin: 20px;
     width: 165px;
     height: 239px;
     z-index: 1;
     float: left;
     text-align: center;
     color: #eee;
     font-weight: bold;
   }
   .face.back {
     display: none;
   }
   @media all and (-webkit-transform-3d) {
     /* Use the media query to determine if 3D transforms are supported */
     .flip-container {
       -webkit-perspective: 800;
       -webkit-transform-origin: 50% 50% 0;
     }
     .flip-card {
       width: 100%;
       height: 100%;
       -webkit-transform-style: preserve-3d;
       -webkit-transition: -webkit-transform 0.8s;
       -webkit-transform-origin: 50% 50% 0;
       
     }
     .flip-container.active .flip-card,
     .flip-container.hover:hover .flip-card {
       -webkit-transform: rotateY(-180deg);
     }
     .flip-container.right.active .flip-card,
     .flip-container.right.hover:hover .flip-card {
         -webkit-transform: rotateY(180deg);
      }
     .face {
       position: absolute;
       width: 100%;
       height: 100%;
       -webkit-backface-visibility: hidden;
     }
     .face.back {
       display: block;
       -webkit-transform: rotateY(180deg);
       -webkit-box-sizing: border-box;
       width: 165px;
       height: 239px;
       background: url('../back.png');
       color: white;
       text-shadow:   1px 1px 3px rgba(0,0,0,0.9);
       font-size: 16px;
       font-weight: bold;
       text-align: center;
       padding: 20px;
       line-height: 20px;
     }
   }
   
.ui-slider-horizontal{
   height: 4px;
   -webkit-border-radius:  4px;
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbb), to(#ddd));
}
.ui-slider .ui-slider-handle{
   height: 13px;
   width: 13px;
   padding: 0;
   -webkit-border-radius:  13px;
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbb), to(#fff));
   -webkit-box-shadow:  0px 1px 3px rgba(0,0,0,0.6);
   border: 1px solid #fff;
}
.ui-slider-horizontal .ui-slider-handle{
   top: -6px;
}
   
#properties{
   float: left;
   padding: 20px;
   color: #eee;
}
#properties:after { content: ""; display: block; height: 0; clear: both; }
#properties h5{
   color: #4791f3;
   text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
   margin-bottom: 5px;
   margin-top: 15px;
}

#properties h5 span{
   font-size: 10px;
   color: #333;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.2);
   text-align: center;
   padding: 0 0 0 5px;
}
#properties a{
   outline: none;
}
.dir-toggle{
   display: block;
   width: 70px;
   height: 23px;
   background: url('../dir-toggle.png') no-repeat left top;
}
.dir-toggle.right{
   background-position: left bottom;
}