/*
 Copyright 2014 Adobe Systems Incorporated.  All rights reserved.
 
 Purpose:
    CSS for Responsive Layout Manipulator
*/


body {
    margin: 0;
    padding: 0;
    pointer-events: none;
    overflow : hidden;
}
body.resizing {
    pointer-events: auto;
    cursor: ew-resize;
}
body.shifting {
    pointer-events: auto;
    cursor: e-resize;
}
div {
    position: absolute;
    -webkit-user-select: none;
}

/*Overlay Elements Styling*/
.overlayElement {
	border-width: 1px;
	outline-width: 1px;
    outline-color: #FFFFFF;
}
/*ROW Visual Feedback*/
.row {
    outline-style: dashed;
	border-color: grey; /*row-black*/
    border-style: dashed;
    border-radius:6px; 
}
/*COLUMN Visual Feedback*/
.column, .hidden {
    outline-style: dashed;
    border-color: #2D8CEB; /*blue*/
    border-style: dashed;

}
.hidden {
    background-image: url(../images/Checks.png);
}
.active {
	z-index: 999;
}
/*ACTIVE ROW Visual Feedback*/
.row.active {
	border-color: #2D8CEB;
    border-radius:0px;
}
/*ACTIVE Visual Feedback*/
.column.active, .hidden.active {
    border-color: #2D8CEB; /*blue*/
    -webkit-box-shadow: inset 1px 1px 12px 1px rgba(0,0,0,0.2);
}
/*SELECTED Visual Feedback*/
.column.selected, .row.selected, .hidden.selected {
    border-color: #2D8CEB; /*blue*/
    border-style: solid;
    -webkit-box-shadow: inset 1px 1px 12px 1px rgba(0,0,0,0);
}
/*END - Overlay Elements Styling*/

/*Overlay Controls Styling*/
.overlayControlButton {
    background-size: 20px;
    padding-top:2px;
    padding-bottom:2px;
    background-repeat: no-repeat;
    background-color:  #2D8CEB; /*blue*/
    pointer-events: auto;
    z-index: 30000;
    cursor:pointer;
	box-sizing: border-box;
}

.overlayRowColumnButton {
    width:  24px;
    height: 24px;
    float:  left;
   	background-repeat: no-repeat;
    margin-left: 2px;
    position: relative;
    left: 0;
    display:inline-block;
}

.overlayRowColumnButtonBorder {
    padding-right: 1px;
    border-right: 2px solid #0284b3;  /*blue*/
    margin-right: 1px;
}

.addRowShallow {
    background-image: url(../images/Add_Row.svg);
}

.addRowShallow:hover {
    background-image: url(../images/Add_Row_Hover.svg);
}

.addColumnShallow {
    background-image: url(../images/Add_Column.svg);
}

.addColumnShallow:hover {
    background-image: url(../images/Add_Column_Hover.svg);
}

.addRowColumnDeep {
    background-image: url(../images/DuplicateRowColumn_Normal.svg);
}

.addRowColumnDeep:hover {
    background-image: url(../images/DuplicateRowColumn_Hover.svg);
}

.unhide {
    background-image: url(../images/Normal_Unhide.svg);
    background-position: center;
   
}
.unhide:hover {
    background-image: url(../images/Hover_Unhide.svg);
}
.rowEdge {
    background-color: #EBEBEB; /*LIGHT GREY*/
    pointer-events: auto;
}
.columnEdge {
    z-index: 10001;
    pointer-events: auto;
    cursor: ew-resize;
}
.knob {
    z-index: 40000;
    background-repeat: no-repeat;
}
.knobResize {
    background-image: url(../images/Resize_Handle.svg);
}
.knobOffset {
    background-image: url(../images/Offset_Handle.svg);
}
.knobResize.selected {
    background-image: url(../images/Resize_Handle.svg);
}
.knobOffset.selected {
    background-image: url(../images/Offset_Handle.svg);
}
/*END - Overlay Controls Styling*/

/*Other Elements*/
#tooltip {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    font-family: Arial;
    font-size: 10pt;
    z-index: 20000;
}

.overlayOffsetDiv {
    background-size: 8px 8px;
    background-image: -webkit-linear-gradient(-45deg, #AAAAAA 25%, transparent 25%, transparent 50%, #AAAAAA 50%, #AAAAAA 75%, transparent 75%, transparent);
    opacity: 0.5;
    border: 1px solid #AAAAAA;
}
/*END - Other Elements*/