/* =============================================================================
  磁贴
========================================================================== */

.gridster * {
    margin: 0;
    padding: 0;
}

.gridster article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}

.gridster [hidden] {
    display: none;
}

.gridster ul, ol {
    list-style: none;
}

.gridster {
    margin: 5px 0px;

}

    .gridster .gs-w {
        /*background: #FFF;*/
        cursor: pointer;
        /*-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
        box-shadow: 0 0 5px rgba(0,0,0,0.3);*/
    }
    .gridster .gs-w:hover {
        -webkit-box-shadow: 0px 3px 8px 1px rgba(0,0,0,0.3);
        box-shadow: 0px 3px 8px 1px rgba(0,0,0,0.3);
        border: 4px solid #fff;
    }

    .gridster .player {
        -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
        box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    }

    .gridster .preview-holder {
        border: none!important;
        border-radius: 0!important;
        background: rgba(255,255,255,.2)!important;
    }

.tile-message {
    font-size: 14px;
    margin:5px;
}

.tile-title {
    margin: 5px;
    font-size: 14px;
}

#vertical {
    height: 500px;
    width: 100%;
    margin: 0 0;
    border: 0px;
}


#bottom-pane {
    background-color: rgba(60, 70, 80, 0.15);
}


.pane-content {
    padding: 0 0px;
}





body ul li{
list-style:none;
}

/* =============================================================================
 jQuery.ContextFrame
========================================================================== */
.ContextFrame {
    margin:0px;
    padding:0px;
}

        .ContextFrame .Frame {
        box-sizing: border-box;
        margin:0px;
        top:0px;
        left:0px;
        width:100%;
        padding:0px;
        border:0px none ;
        overflow:auto;
        height:100%;
    }

/* =============================================================================
jQuery.slidepage
========================================================================== */

.slidePageInFromLeft{
  animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards;
  }
.openpage{ 
  animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards;
}
.slidePageBackLeft{
  opacity:1; 
  left:0;
  animation: slidePageBackLeft .8s ease-out 1 normal forwards;
}
.slidePageLeft{
  opacity:1;
  transform: rotateY(0) translateZ(0) ; 
  animation:slidePageLeft .8s ease-out 1 normal forwards;
}
.fadeOutback{
  animation: fadeOutBack 0.3s ease-out 1 normal forwards;
}
.fadeInForward-1, .fadeInForward-2, .fadeInForward-3 {
  opacity:0;
  transform: translateZ(-5em) scale(0.75);
  animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards;
}
.fadeInForward-2{
  animation-delay: .55s;
}
.fadeInForward-3{
  animation-delay: .7s;
}


@keyframes fadeOutBack{
  0%{transform: translateX(-2em) scale(1); opacity:1;}
  50% {transform: translateZ(-5em) scale(0.6); opacity:0.5;}
  100% {transform: translateZ(-5em) scale(0); opacity:0;}
}

@keyframes fadeInForward{
  
  0%{transform: translateZ(-5em) scale(0); opacity:0;}
  100% {transform: translateZ(0) scale(1); opacity:1;}
}

@keyframes rotatePageInFromRight{
  0% {transform:rotateY(-90deg) translateZ(5em);opacity:0}
  30%{opacity:1}
  100%{transform: rotateY(0deg) translateZ(0) ; opacity:1}
}

@keyframes slidePageLeft{
  0%{left:0; transform: rotateY(0deg) translateZ(0) ; opacity:1}
  70%{opacity:1;}
  100%{opacity:0; left:-150%; transform: rotateY(0deg)}
}

@keyframes slidePageInFromLeft{
  0%{opacity:0; }
  30%{opacity:1}
  100%{opacity:1; left:0;}
}

@keyframes slidePageBackLeft{
  0%{opacity:1; left:0; transform: scale(0.95);}
  10%{transform: scale(0.9);}
  70%{opacity:1;}
  100%{opacity:0; left:-150%;}
}