html, body{height:100%; width:100%; padding:0; margin:0;}
body{position:relative; transition: all 500ms ease; -ms-content-zoom-boundary-max: 100%; -ms-content-zoom-boundary-min: 100%;}

.edge-menu{position:fixed; z-index:9999; background:#EEE; width:270px; transition: all 500ms ease;}

/* FULL SCREEN */
.edge-menu.full{left:0; right:0; width:100%; height:100%;}

/* OPEN LEFT */
.edge-menu.left{top:0; bottom:0;}
.edge-menu.left.menu-closed{left:-270px;}
.edge-menu.left.menu-open{ top:0; bottom:0; left:0;}

/* OPEN RIGHT */
.edge-menu.right{top:0; bottom:0;}
.edge-menu.right.menu-closed{right:-270px;}
.edge-menu.right.menu-open{right:0;}

/* OPEN TOP */
.edge-menu.top{width:100%; height:270px; overflow:auto;}
.edge-menu.top.menu-closed{top:-270px;/* override height if using push*/}
.edge-menu.top.menu-open{top:0;}

/* OPEN BOTTOM */
.edge-menu.bottom{width:100%;}
.edge-menu.bottom.menu-closed{bottom:-270px;}
.edge-menu.bottom.menu-open{bottom:0; height:100%;}

/* OPEN TOP FULL */
.edge-menu.top.full.menu-closed{bottom:100%; height:100%; top:-100%;}
.edge-menu.top.full.menu-open{bottom:0; height:100%;}

/* OPEN BOTTOM FULL */
.edge-menu.bottom.full.menu-closed{top:100%; height:100%; bottom:-100%;}
.edge-menu.bottom.full.menu-open{top:0; height:100%;}

/* OPEN LEFT FULL */
.edge-menu.left.full.menu-closed{right:100%; left:auto; height:100%; width:100%;}
.edge-menu.left.full.menu-open{right:0; left:auto; height:100%; width:100%;}

/* OPEN right FULL */
.edge-menu.right.full.menu-closed{left:100%; right:auto; height:100%; width:100%;}
.edge-menu.right.full.menu-open{left:0; right:auto; height:100%; width:100%;}

/* CONTROL */
.edge-control{cursor:pointer;}


body.menu-open{overflow:hidden;}

/* PUSH LEFT */
body.push-left.menu-open{left:270px;}
body.push-left.menu-closed{left:0;}

/* PUSH RIGHT */
body.push-right.menu-open{right:270px;}
body.push-right.menu-closed{right:0;}

/* PUSH TOP */
body.push-top{left:0; right:0;}
body.push-top.menu-open{top:270px;}
body.push-top.menu-closed{top:0;}

/* PUSH BOTTOM */
body.push-bottom{left:0; right:0;}
body.push-bottom.menu-open{bottom:270px;}
body.push-bottom.menu-closed{bottom:0;}

body.menu-open:before{content:" "; position:absolute; width:100%; height:100%; cursor:pointer;}