michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: body, html {
michael@0:   height: 100%;
michael@0:   width: 100%;
michael@0:   overflow: hidden;
michael@0: }
michael@0: 
michael@0: body {
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0: }
michael@0: 
michael@0: #header {
michael@0:   box-sizing: border-box;
michael@0:   width: 100%;
michael@0:   padding: 6px 9px;
michael@0:   display: -moz-box;
michael@0:   vertical-align: top;
michael@0: }
michael@0: 
michael@0: #header:-moz-dir(rtl) {
michael@0:   -moz-box-direction: reverse;
michael@0: }
michael@0: 
michael@0: #header > span {
michael@0:   display: -moz-box;
michael@0: }
michael@0: 
michael@0: #element-size {
michael@0:   -moz-box-flex: 1;
michael@0: }
michael@0: 
michael@0: #element-size:-moz-dir(rtl) {
michael@0:   -moz-box-pack: end;
michael@0: }
michael@0: 
michael@0: #main {
michael@0:   margin: 0 10px 10px 10px;
michael@0:   box-sizing: border-box;
michael@0:   width: calc(100% - 2 * 10px);
michael@0:   position: absolute;
michael@0:   border-width: 1px;
michael@0: }
michael@0: 
michael@0: @media (min-width: 320px) {
michael@0:   body {
michael@0:     position: absolute;
michael@0:     width: 320px;
michael@0:     left: -160px;
michael@0:     margin-left: 50%;
michael@0:   }
michael@0: }
michael@0: 
michael@0: #content,
michael@0: #borders {
michael@0:   border-width: 1px;
michael@0: }
michael@0: 
michael@0: #content {
michael@0:   height: 25px;
michael@0: }
michael@0: 
michael@0: #margins,
michael@0: #padding {
michael@0:   border-style: solid;
michael@0:   border-width: 25px;
michael@0: }
michael@0: 
michael@0: #borders {
michael@0:   padding: 25px;
michael@0: }
michael@0: 
michael@0: #main > p {
michael@0:   position: absolute;
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: #main > p {
michael@0:   margin: 0;
michael@0:   text-align: center;
michael@0: }
michael@0: 
michael@0: #main > p > span {
michael@0:   vertical-align: middle;
michael@0:   pointer-events: auto;
michael@0: }
michael@0: 
michael@0: .size > span {
michael@0:   cursor: default;
michael@0: }
michael@0: 
michael@0: .editable {
michael@0:   -moz-user-select: text;
michael@0: }
michael@0: 
michael@0: .top,
michael@0: .bottom {
michael@0:   width: calc(100% - 2px);
michael@0:   text-align: center;
michael@0: }
michael@0: 
michael@0: .padding.top {
michael@0:   top: 55px;
michael@0: }
michael@0: 
michael@0: .padding.bottom {
michael@0:   bottom: 57px;
michael@0: }
michael@0: 
michael@0: .border.top {
michael@0:   top: 30px;
michael@0: }
michael@0: 
michael@0: .border.bottom {
michael@0:   bottom: 31px;
michael@0: }
michael@0: 
michael@0: .margin.top {
michael@0:   top: 5px;
michael@0: }
michael@0: 
michael@0: .margin.bottom {
michael@0:   bottom: 6px;
michael@0: }
michael@0: 
michael@0: .size,
michael@0: .margin.left,
michael@0: .margin.right,
michael@0: .border.left,
michael@0: .border.right,
michael@0: .padding.left,
michael@0: .padding.right {
michael@0:   top: 22px;
michael@0:   line-height: 132px;
michael@0: }
michael@0: 
michael@0: .size {
michael@0:   width: calc(100% - 2px);
michael@0: }
michael@0: 
michael@0: .margin.right,
michael@0: .margin.left,
michael@0: .border.left,
michael@0: .border.right,
michael@0: .padding.right,
michael@0: .padding.left {
michael@0:   width: 25px;
michael@0: }
michael@0: 
michael@0: .padding.left {
michael@0:   left: 52px;
michael@0: }
michael@0: 
michael@0: .padding.right {
michael@0:   right: 51px;
michael@0: }
michael@0: 
michael@0: .border.left {
michael@0:   left: 26px;
michael@0: }
michael@0: 
michael@0: .border.right {
michael@0:   right: 26px;
michael@0: }
michael@0: 
michael@0: .margin.right {
michael@0:   right: 0;
michael@0: }
michael@0: 
michael@0: .margin.left {
michael@0:   left: 0;
michael@0: }
michael@0: 
michael@0: .rotate.left:not(.editing) {
michael@0:   transform: rotate(-90deg);
michael@0: }
michael@0: 
michael@0: .rotate.right:not(.editing) {
michael@0:   transform: rotate(90deg);
michael@0: }
michael@0: 
michael@0: .tooltip {
michael@0:   position: absolute;
michael@0:   bottom: 0;
michael@0:   right: 2px;
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: body.dim > #header > #element-position,
michael@0: body.dim > #main > p,
michael@0: body.dim > #main > .tooltip {
michael@0:   visibility: hidden;
michael@0: }