/*! gridster.js - v0.7.0 - 2016-02-26 - * https://dsmorse.github.io/gridster.js/ - Copyright (c) 2016 ducksboard; Licensed MIT */
.gridster {
    position: relative
}

    .gridster > * {
        -webkit-transition: height .4s,width .4s;
        -moz-transition: height .4s,width .4s;
        -o-transition: height .4s,width .4s;
        -ms-transition: height .4s,width .4s;
        transition: height .4s,width .4s
    }

    .gridster .gs-w {
        z-index: 2;
        position: absolute
    }

    .gridster .preview-holder {
        z-index: 1;
        position: absolute;
        background-color: #fff;
        border-color: #fff;
        opacity: .3
    }

    .gridster .player-revert {
        z-index: 10 !important;
        -webkit-transition: left .3s,top .3s !important;
        -moz-transition: left .3s,top .3s !important;
        -o-transition: left .3s,top .3s !important;
        transition: left .3s,top .3s !important
    }

    .gridster.collapsed {
        height: auto !important
    }

        .gridster.collapsed .gs-w {
            position: static !important
        }

.ready .gs-w:not(.preview-holder), .ready .resize-preview-holder {
    -webkit-transition: opacity .3s,left .3s,top .3s,width .3s,height .3s;
    -moz-transition: opacity .3s,left .3s,top .3s,width .3s,height .3s;
    -o-transition: opacity .3s,left .3s,top .3s,width .3s,height .3s;
    transition: opacity .3s,left .3s,top .3s,width .3s,height .3s
}

.gridster .dragging, .gridster .resizing {
    z-index: 10 !important;
    -webkit-transition: all 0s !important;
    -moz-transition: all 0s !important;
    -o-transition: all 0s !important;
    transition: all 0s !important
}

.gs-resize-handle {
    position: absolute;
    z-index: 1
}

.gs-resize-handle-both {
    width: 20px;
    height: 20px;
    bottom: -8px;
    right: -8px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=);
    background-position: top left;
    background-repeat: no-repeat;
    cursor: se-resize;
    z-index: 20
}

.gs-resize-handle-x {
    top: 0;
    bottom: 13px;
    right: -5px;
    width: 10px;
    cursor: e-resize
}

.gs-resize-handle-y {
    left: 0;
    right: 13px;
    bottom: -5px;
    height: 10px;
    cursor: s-resize
}

.gs-w:hover .gs-resize-handle, .resizing .gs-resize-handle {
    opacity: 1
}

.gs-resize-handle, .gs-w.dragging .gs-resize-handle {
    opacity: 0
}

.gs-resize-disabled .gs-resize-handle, [data-max-sizex="1"] .gs-resize-handle-x, [data-max-sizey="1"] .gs-resize-handle-y, [data-max-sizey="1"][data-max-sizex="1"] .gs-resize-handle {
    display: none !important
}
.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 .player {
    -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    background: #BBB;
}

.gridster .gs-w.try {
    background-image: url(../img/sprite.png);
    background-repeat: no-repeat;
    background-position: 37px -169px;
}

.gridster .preview-holder {
    border: none !important;
    border-radius: 0 !important;
    background: red !important;
}

.gridster ul {
    background-color: #EFEFEF;
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.gridster-box {
    position: relative;
    width: 100%;
    height: 100%;
}
.gridster li {
    font-size: 1em;
    font-weight: bold;
    line-height: 100%;
}