/* Sidebar-Styles OffCanvas
   Quelle: http://www.aidanzealley.com/offcanvas/
                            */

html.offcanvas {
    overflow: hidden;
}

body {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.offcanvas body {
    overflow: hidden;
}

.animatedSlide {
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    -ms-transition-property: -ms-transform;
    -ms-transition-duration: 0.3s;
    -ms-transition-timing-function: ease-out;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 0.3s;
    -moz-transition-timing-function: ease-out;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    -o-transition-property: -o-transform;
    -o-transition-duration: 0.3s;
    -o-transition-timing-function: ease-out;
}

.no-csstransforms3d .animatedSlide {
    transition: left 0.3s ease-out, right 0.3s ease-out;
    -ms-transition: left 0.3s ease-out, right 0.3s ease-out;
    -moz-transition: left 0.3s ease-out, right 0.3s ease-out;
    -webkit-transition: left 0.3s ease-out, right 0.3s ease-out;
    -o-transition: left 0.3s ease-out, right 0.3s ease-out;
}

.paddedLight {
    padding-right: 1.2em;
    padding-bottom: 1.2em;
    padding-left: 1.2em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.offcanvas .scrollableArea {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}


/* Styles for both sidebars */

.offcanvas .sidebarLeft,
.offcanvas .sidebarRight {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 300px;
}

.offcanvas .sidebarLeft .shutLeft,
.offcanvas .sidebarLeft .shutRight,
.offcanvas .sidebarRight .shutLeft,
.offcanvas .sidebarRight .shutRight {
    display: block;
}

.offcanvas .sidebarLeft .shutLeft {
    left: 0;
}

.offcanvas .sidebarRight {
    right: 0;
    transform: translate3d(7em, 0, 0);
    -ms-transform: translate3d(7em, 0, 0);
    -moz-transform: translate3d(7em, 0, 0);
    -webkit-transform: translate3d(7em, 0, 0);
    -o-transform: translate3d(7em, 0, 0);
}


/* Main central area styles */

.page {
    word-wrap: break-word;
    position: relative;
    z-index: 500;
}

.page .scrollableArea {
    position: absolute;
    bottom: 0;
}

.offcanvas .page {
    width: 100%;
    height: 100%;
}

.no-js .page {
    float: left;
    width: 60%;
}


/* Slid styles */

.page.slidRight {
    transform: translate3d(300px, 0, 0);
    -ms-transform: translate3d(300px, 0, 0);
    -moz-transform: translate3d(300px, 0, 0);
    -webkit-transform: translate3d(300px, 0, 0);
    -o-transform: translate3d(300px, 0, 0);
}

.page.slidLeft {
    transform: translate3d(-300px, 0, 0);
    -ms-transform: translate3d(-300px, 0, 0);
    -moz-transform: translate3d(-300px, 0, 0);
    -webkit-transform: translate3d(-300px, 0, 0);
    -o-transform: translate3d(-300px, 0, 0);
}

.no-csstransforms3d .page.slidLeft {
    left: -300px;
}

.sidebarLeft.slidRight,
.sidebarRight.slidLeft {
    transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
}

.no-csstransforms3d .sidebarRight.slidLeft {
    right: 0;
}