+.padding.bottom {
+ bottom: 57px;
+}
+
+.border.top {
+ top: 30px;
+}
+
+.border.bottom {
+ bottom: 31px;
+}
+
+.margin.top {
+ top: 5px;
+}
+
+.margin.bottom {
+ bottom: 6px;
+}
+
+.size,
+.margin.left,
+.margin.right,
+.border.left,
+.border.right,
+.padding.left,
+.padding.right {
+ top: 22px;
+ line-height: 132px;
+}
+
+.size {
+ width: calc(100% - 2px);
+}
+
+.margin.right,
+.margin.left,
+.border.left,
+.border.right,
+.padding.right,
+.padding.left {
+ width: 25px;
+}
+
+.padding.left {
+ left: 52px;
+}
+
+.padding.right {
+ right: 51px;
+}
+
+.border.left {
+ left: 26px;
+}
+
+.border.right {
+ right: 26px;
+}
+
+.margin.right {
+ right: 0;
+}
+
+.margin.left {
+ left: 0;
+}
+
+.rotate.left:not(.editing) {
+ transform: rotate(-90deg);
+}
+
+.rotate.right:not(.editing) {
+ transform: rotate(90deg);
+}
+
+/* Coordinates should be different when the window is small, because we make
+ the regions smaller then */
+
+@media (max-height: 228px) {
+ .padding.top {
+ top: 37px;
+ }
+
+ .padding.bottom {
+ bottom: 38px;
+ }
+
+ .border.top {
+ top: 19px;
+ }
+
+ .border.bottom {
+ bottom: 20px;
+ }
+
+ .margin.top {
+ top: 1px;
+ }
+
+ .margin.bottom {
+ bottom: 2px;
+ }
+
+ .size,
+ .margin.left,
+ .margin.right,
+ .border.left,
+ .border.right,
+ .padding.left,
+ .padding.right {
+ line-height: 80px;
+ }
+
+ .margin.right,
+ .margin.left,
+ .border.left,
+ .border.right,
+ .padding.right,
+ .padding.left {
+ width: 21px;
+ }
+
+ .padding.left {
+ left: 35px;
+ }
+
+ .padding.right {
+ right: 35px;
+ }
+
+ .border.left {
+ left: 16px;
+ }
+
+ .border.right {
+ right: 17px;
+ }
+}
+
+/* Legend, displayed inside regions */
+
+.legend {
+ position: absolute;
+ margin: 5px 6px;
+ z-index: 1;
+}
+
+.legend[data-box="margin"] {
+ color: #000000;
+}
+
+@media (max-height: 228px) {
+ .legend {
+ margin: 2px 6px;
+ }
+}
+
+/* Editable fields */
+
+.editable {
+ border: 1px dashed transparent;
+ -moz-user-select: text;
+}
+
+.editable:hover {
+ border-bottom-color: #E7ADE7;
+}
+
+.styleinspector-propertyeditor {
+ border: 1px solid #008484;
+ padding: 0;
+}
+
+/* Make sure the content size doesn't appear as editable like the other sizes */
+
+.size > span {
+ cursor: default;
+}
+
+/* Hide all values when the view is inactive */
+
+body.inactive > #header > #element-position,
+body.inactive > #header > #element-size,
+body.inactive > #main > p {
+ visibility: hidden;