html, body, [canvas=container], [off-canvas] {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%; } [canvas] {
z-index: 1;
}
[canvas=container] {
width: 100%;
height: 100%;
overflow-y: auto;
position: relative;
background-color: white; -webkit-overflow-scrolling: touch; }
[canvas=container]:before, [canvas=container]:after {
clear: both;
content: '';
display: table;
} [off-canvas] {
display: none;
position: fixed;
overflow: hidden;
overflow-y: auto;
background-color: black; color: white; -webkit-overflow-scrolling: touch; }
[off-canvas*=top] {
width: 100%;
height: 255px;
top: 0;
}
[off-canvas*=right] {
width: 255px;
height: 100%;
top: 0;
right: 0;
}
[off-canvas*=bottom] {
width: 100%;
height: 255px;
bottom: 0;
}
[off-canvas*=left] {
width: 255px;
height: 100%;
top: 0;
left: 0;
}
[off-canvas*=reveal] {
z-index: 0;
}
[off-canvas*=push] {
z-index: 1;
}
[off-canvas*=overlay] {
z-index: 9999;
}
[off-canvas*=shift] {
z-index: 0;
} [canvas], [off-canvas] {
-webkit-transform: translate( 0px, 0px );
-ms-transform: translate( 0px, 0px );
transform: translate( 0px, 0px );
-webkit-transition: -webkit-transform 300ms;
transition:         transform 300ms;
-webkit-backface-visibility: hidden; }
[off-canvas*=shift][off-canvas*=top] {
-webkit-transform: translate( 0px, 50% );
transform: translate( 0px, 50% );
}
[off-canvas*=shift][off-canvas*=right] {
-webkit-transform: translate( -50%, 0px );
transform: translate( -50%, 0px );
}
[off-canvas*=shift][off-canvas*=bottom] {
-webkit-transform: translate( 0px, -50% );
transform: translate( 0px, -50% );
}
[off-canvas*=shift][off-canvas*=left] {
-webkit-transform: translate( 50%, 0px );
transform: translate( 50%, 0px );
} @media print {
[canvas] {
-webkit-transform: translate( 0px, 0px ) !important;
-ms-transform: translate( 0px, 0px ) !important;
transform: translate( 0px, 0px ) !important;
}
[off-canvas] {
display: none !important;
}
}