/* See license.txt for terms of usage */

.panelNode-layout {
    overflow: hidden !important;
}

.outerLayoutBox {
    overflow: hidden !important;
    position: relative;
    margin: 0 auto;
    width: 300px;
    height: 100%;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.layoutBox {
    position: absolute;
    border: 1px solid #888888;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    color: #333333;
}

.positionLayoutBox {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 15px;
    right: 25px;
    max-height: 260px;
    min-height: 180px;
}

.marginLayoutBox {
    border: 1px dashed #BBBBBB;
    background: #FFFFFF;
}

.borderLayoutBox {
    background-color: #BBBBBB;
}

.paddingLayoutBox {
    background-color: #DDDDDD;
}

.contentLayoutBox {
    background: #DDDDDD;
}

.layoutBox.editing,
.layoutBox.highlighted {
    background-color: Highlight;
}

.layoutBox.editing,
.layoutBox.editing > .layoutCaption,
.layoutBox.editing > .layoutLabel,
.layoutBox.highlighted,
.layoutBox.highlighted > .layoutCaption,
.layoutBox.highlighted > .layoutLabel {
    color: HighlightText;
    opacity: 1.0;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.layoutCaption {
    position: absolute;
    left: 2px;
    top: 2px;
    font-size: 9px;
    color: #555555;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.layoutLabel {
    position: absolute;
}

.layoutLabel.invisible {
    opacity: 0.2;
}

.layoutLabelTop {
    left: 0;
    top: 2px;
    width: 100%;
    text-align: center;
}

.layoutLabelBottom {
    left: 0;
    bottom: 2px;
    width: 100%;
    text-align: center;
}

.layoutLabelPosition,
.layoutBoxSizing,
.layoutZIndex {
    display: block;
}

.layoutLabelPosition {
    bottom: 2px;
    float: left;
}

.layoutBoxSizing {
    top: 14px;
    left: 90px;
}

.layoutZIndex {
    float: right;
}

.layoutLabelLeft {
    top: 50%;
    left: 0;
    width: 20px;
    margin-top: -0.5em;
    text-align: center;
}

.layoutLabelRight {
    top: 50%;
    right: 0;
    width: 20px;
    margin-top: -0.5em;
    text-align: center;
}

.layoutLabelCenter {
    left: 0;
    top: 50%;
    width: 100%;
    margin-top: -0.5em;
    text-align: center;
}

.layoutLabelWidth,
.layoutLabelHeight {
    position: static;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.layoutEdge {
    position: absolute;
}

.parentLeft > .layoutEdgeLeft,
.parentRight > .layoutEdgeRight,
.parentTop > .layoutEdgeTop,
.parentBottom > .layoutEdgeBottom {
    background: #EEEEEE;
}

.siblingLeft > .layoutEdgeLeft {
    border-left: 1px dashed #BBBBBB;
}

.siblingRight > .layoutEdgeRight {
    border-right: 1px dashed #BBBBBB;
}

.siblingTop > .layoutEdgeTop {
    border-top: 1px dashed #BBBBBB;
}

.siblingBottom > .layoutEdgeBottom {
    border-bottom: 1px dashed #BBBBBB;
}

.siblingLeft > .layoutEdgeTop,
.siblingLeft > .layoutEdgeBottom {
    left: 0;
}

.siblingRight > .layoutEdgeTop,
.siblingRight > .layoutEdgeBottom {
    right: 0;
}

.siblingTop > .layoutEdgeLeft,
.siblingTop > .layoutEdgeRight {
    top: 0;
}

.siblingBottom > .layoutEdgeLeft,
.siblingBottom > .layoutEdgeRight {
    bottom: 0;
}

.parentLeft.parentTop > .layoutEdgeLeft,
.parentRight.parentTop > .layoutEdgeRight {
    top: 0;
}

.parentLeft.parentBottom > .layoutEdgeLeft,
.parentRight.parentBottom > .layoutEdgeRight {
    bottom: 0;
}

.layoutEdgeTop {
    left: 20px;
    right: 20px;
    top: 0;
    height: 20px;
}

.layoutEdgeBottom {
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 20px;
}

.layoutEdgeLeft {
    left: 0;
    top: 20px;
    bottom: 20px;
    width: 20px;
}

.layoutEdgeRight {
    right: 0;
    top: 20px;
    bottom: 20px;
    width: 20px;
}

.useA11y .focusGroup:focus {
    outline: 2px solid #FF9933;
}
