/* generic pane rules */
body { margin: 0; -webkit-text-size-adjust: 100%; }
.page { left: 0; right: 0; top: 0; bottom: 0; }
.row, .col, .page { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fill, .pane { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100% }
.pane { display: none; }

.float { position: relative; left: 0; top: 0; right: 0; bottom: 0; width: 600px; height: 100% }


/* Large Pane configuration */
.left.col { left: 0px; width: 100px; }
.middle.col { left: 100px; right: 149px; }
.right.col { right: 0px; width: 149px; }
.header.row { height: 60px; }
.menu.row { top: 60px; height: 30px; }
.body.row { top: 90px; bottom: 70px; }
.footer.row { height: 70px; bottom: 0px; }

/* landscape workaround mode, IE-mobile makes bottom toolbar overlap the page, so shorten the page by 75px to compensate */
.iemobile .page { bottom: -6px; }
@media screen and (orientation:landscape) { .iemobile .page { bottom: 75px; } }