/*
These are styles for the grid layout reusable component
Please see GridLayout.js for more information.
*/

/*
The basic grid structure
Widgets live inside the .Columns
so the widget can fill 100% without layout issues
*/
.GridLayout {
    position: relative;
}
.GridLayout > .Row {
    position: relative;
    display: block;
    padding: 0.75em 0;
}
.GridLayout > .Row > .Column {
    position: relative;
    display: inline-block;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0.1em  0.75em;
    overflow: hidden;
}

/*
A grid layout can be in editing or viewing mode
*/

/* jQuery UI draggable disabled state (during View mode) has lower opacity; we don't want this */
.GridLayout > .Row > .Column  .Widget.ui-state-disabled,
.GridLayout > .Row > .Column  .WidgetBase.ui-state-disabled,
.GridLayout > .Row.ui-state-disabled
{
    opacity: 1;
}
/* in View mode, we also want to always hide the resizer element */
.MockDashboardLayout.Viewing .GridLayout > .Row > .Resize,
.MockDashboardLayout.Viewing .GridLayout > .Row > .Column > .Widget.GridLayoutPlaceholder,
.DashboardLayout.Viewing .GridLayout > .Row > .Resize,
.DashboardLayout.Viewing .GridLayout > .Row > .Column > .Widget.GridLayoutPlaceholder {
    display: none;
}

/*
Items in the layout, while being moved, are translucent
*/
.GridLayout > .Row > .Column > .Dragging {
    filter: alpha(opacity=40); /*IE8*/
    opacity: 0.4; /*everybody else*/
}


/*
Styles for the helper element, which is shown within the row to indicate where a dragged
element would go once it is dropped.  It also is used to indicate whether or not that 
drop will be accepted or declined (e.g. because there's already too many rows)
*/
.GridLayout > .Row > .InsertIndicator {
    position: absolute;
    background: #aaa;
}
.GridLayout > .Row > .InsertIndicator.Accept {
    background: #666;
}
.GridLayout > .Row > .InsertIndicator.Decline {
    background: #a1070d;
}
/* A vertical indicator that runs from top to bottom */
.GridLayout > .Row > .InsertIndicator.V {
    top: 0;
    bottom: 0;
    height:100%;
    width: 4px;
    margin-left: -2px;
    left: 0; /*this will change in js*/
}
/* A horizontal indicator that runs from left to right */
.GridLayout > .Row > .InsertIndicator.H {
    left: 0;
    right: 0;
    width:100%;
    height: 4px;
    margin-top: -2px;
    top: 0; /*this will change in js*/
}

/*
The special "placeholder" empty dropzone widget that's put into an
entirely empty grid layout to create an area where the user can drop whatever
*/
.GridLayout > .Row > .Column > .GridLayoutPlaceholder.Widget {
    padding: 2em;
    color: #666;
    border-top:4px solid White;
}
.GridLayout > .Row > .Column > .GridLayoutPlaceholder.Widget.Accept 
{
    border-top:4px solid #4e9e19;
}
.GridLayout > .Row > .Column > .GridLayoutPlaceholder.Widget .Wrap {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    position:relative;
}
.GridLayout > .Row > .Column > .GridLayoutPlaceholder.Widget .Wrap p {
    margin: 0;
    padding: .25em;
    text-align:left;
}
.GridLayout > .Row > .Column > .GridLayoutPlaceholder.Widget .GalleryArrow {
    width:65px;
    height:50px;
    background: url("themes/classic/images/widget-gallery-arrow.png") no-repeat top left;
    position:absolute;
    top: -25px;
    right: -70px;
}
/*
A narrow, vertical, skinny placeholder
Useful for e.g. showing an insertion point for a sidebar
*/
.GridLayout.Skinny > .Row {
    padding-top: 0;
}
.GridLayout.Skinny > .Row > .Column {
    padding: 0 0.85em;
}
.GridLayout.Skinny > .Row > .Column > .GridLayoutPlaceholder.Widget {
    width: 4px;
    padding: 0;
    height: 600px;
    border: none;
    -webkit-transition: 0.2s linear background;
    -moz-transition: 0.2s linear background;
    transition: 0.2s linear background;
}
.GridLayout.Skinny > .Row           > .Column > .GridLayoutPlaceholder.Widget.Accept,
.GridLayout.Skinny > .Row.DragHover > .Column > .GridLayoutPlaceholder.Widget.Accept {
    background: #666;
}
.GridLayout.Skinny > .Row           > .Column > .GridLayoutPlaceholder.Widget.Reject,
.GridLayout.Skinny > .Row.DragHover > .Column > .GridLayoutPlaceholder.Widget.Reject {
    background: #a1070d;
}
/*
For showing ghost feedback when dragging near (but not on) the placeholder
When actually dragging over the placeholder, the previous styles with .DragHover
will take precedence over these rules
*/
.GridLayout.Skinny > .Row > .Column > .GridLayoutPlaceholder.Widget.GhostAccept {
    background: #C5DFB2;
}
.GridLayout.Skinny > .Row > .Column > .GridLayoutPlaceholder.Widget.GhostReject  {
    background: #E8C1C2;
}
.GridLayout.Skinny > .Row > .Column > .GridLayoutPlaceholder.Widget > .Wrap {
    display: none !important;
}



/*
This is the little element that follows your mouse while you're
dragging around a widget.  It has to be just a class-level selector
because the element gets appended to document.body
*/
.WidgetDragHelper {
    padding: 0.5em;
    background: white;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: 1px 2px 5px rgba(0,0,0,.2);
    z-index: 1001;
    display: table-row; /*needed for icons to work right when text is really long*/
    overflow: hidden;
}
/*
Inside the drag helper are two icons and some text
The icons are status (accept/reject drop) and item type
Item type sometimes disappears during the drag
*/
.WidgetDragHelper > * {
    display: table-cell; /*needed for icons to work right when text is really long*/
    vertical-align: middle;
}
.WidgetDragHelper > .Icon {
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: center center;
}
.WidgetDragHelper > .Status.Icon {
    margin-right: 0.5em;
    background-image: url("themes/classic/images/icons/icons_dragdropdash.png");
    background-repeat: no-repeat;
    background-position: 25px 0px;
    display: none;
}
.WidgetDragHelper > .WidgetType.Icon {
	margin-right: 0.5em;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAFGUlEQVRYR52W2UucVxjG3WJWk9g0LU3GKU2hRPCmNwWvAkEq9KLgXcnf0BY3tEgpolYwbWi1Ki64olYFkdrWqoiCFvd935Vq3XGN+3L6PKdzJt98c8bYfvCDmTPfeZ/nvO97zhk3i8XyvxFCeAAv3W+XRTt4GSD8KRgDq+AL4Kl773VoBy8CQh+AP4D56QdPdHMuQjuo4/z83AcCz8ER1Y6OjkRra6uor68XOzs7HOJzDkoBpujjmNEOGkEwd/AM/A3E2dmZGBsbEyUlJSI3N1dSUFAguru7xcnJCV/h8xJ8BdPeuphGtIMKBAkAjYzIZ21t7byqqsoubKa8vFzMzs7a3pYPe+RjXWyFdhDOfTHxJyCXdHBwIJqbm0VeXp5W2ExNTY3Y3NzkVPX8gpiPdFpOA9PT0+8jzX9xFtM9NDQkioqKtEIXkZ+fL9rb28Xx8bF0gGcPJp6a9Ry+kKmpqW/m5+dlk01MTFx61a5oa2uT6uyP3d3dcrOewxcCA3Gs49zcnOzuxcVFUVZWpg1+EYWFhXIBWLUsIWOBX8169g9+fn5uVqvVHZO+pYHGxkYxODgoVldXxf7+vmhoaNAK6WCjbm9vi9PTU9kLXV1d0gDGfqMGcDRAceAOPAYGBpJpoLS0VMTExMh9rkoyPj4uV6YTJSxXZ2enFOb76CeRmZkpYxkMeBhNKANSHHgNDw8nKQNhYWESBp+cnJRBtra25ArN4iwTy8WU7+3tiaamJpGWliYNENvc3yHspUyYDXgCb6T9udkAiY+PFx0dHbIk7Gx+Vg3KLLHObLSVlRV5SBnFs7KypIGNjY1qCF+1mZBZUOnn6q+A6/39/d/rDISHh4vIyEhRWVlpL8nCwoI8Fbnqw8ND2TOpqakiIyNDogyoDKyvr9dA9Aa4ApgFBwPe4BYMfKczYCQ5OVmMjIzIoDwr2HDV1dUOoubPfBcnaS1EfQCz4Gk2cBX49Pb2ajMQGhrq8J0Nyr5AWuVBlZ6ebhc0oowYDNwB12wG3JUB1p8Gbvf09Lx4XQZIRESE3BU0YBQyfjaO2QzUQfSuKwPXjAZ4seiEFewJowGFUVSRnZ1tNnAdyEZ0ygD28dc0wPTyPNeJK3QGjNBMcXGx3Bk0sLS0VG4z4JQBew8EBwc/RDfn0QSpq6vTipOLDFCcpycblOLLy8uNsbGxjyGq7QH7LgBvAguEP5+ZmdmlCTSmiIuLc2pEswGKEp4Bo6OjUhgGTrFjXvj7+7+LuPch6nIXyHMA3AVvA2tSUtJT3A0jqiQ5OTlaA8a6c0dgtVIcv63g1HyGWBR/B/hC9CZ4dQ6YTkKWgVl4A9CEX1BQ0OO+vr4SVZLa2loRFRWlNcCzgEe1rd5/RkdHf4QQVkDxexBUq391EprvAqBMMBP3wQNgxXH7JUrykiawU0RCQoLdAC8odTCBM4z/EBAQ8B7mPQRvAV9wC4KsvVq9w12gM3ED+ABmg0EepKSkPEEpRmmCdz3+O0gD2F5SHFfvKnrnM7xLYWaQc28DHr9q5c63ocYEy8GeUEYYRBoJCQl5hF3ysyoJDVAcl1RLYmLih3iHwvfAHXATqFWz6RzEHQwoMMGVEQazG8GfVJbkgAbw7+nHwMBAlurSwgqnAQUC6IzwtFRGfCsqKgJbWlo+4WfbGDucwt7AId1Ep6MdNIKgrjLCLcvy0BBr/J+EFdpBHRAxG2Gz0gzTTFFjqrXp1qEddAXEjEaUGQfRywr/i8XtH4vU5rpvb/BMAAAAAElFTkSuQmCC");
}
.WidgetDragHelper > .Text {
    padding-left: 5px;
}
/*
While dragging, the helper will get either the Accept or Reject class
depending on whether or not the drop will be allowed in current position.
*/
.WidgetDragHelper.Accept > * {
    color: #4e9e19;
}
.WidgetDragHelper.Accept > .Status.Icon {
    display: table-cell;
    background-position: -25px 0px;
}

.WidgetDragHelper.Reject > * {
    color: #a1070d;
}
.WidgetDragHelper.Reject > .Status.Icon {
    display: table-cell;
    background-position: 0px 0px;
}


/*
The horizontal resizer element for two-column rows
*/
.GridLayout > .Row > .Resize {
    position: absolute;
    width: 16px;
    top: 0.75em; /*must match patting on the .Row */
    bottom: 0.75em;
    left: 50%;
    margin-left: -8px;
    z-index: 5 !important;   
    cursor: e-resize;
    background-image: url("themes/classic/images/icons/Splitter-Dashboard.png");
    background-repeat: repeat-y;
    background-position: center top;
    opacity: 0;
    /* show a nice gentle fade in/out of opacity */
    -webkit-transition: 0.2s linear opacity;
    -moz-transition: 0.2s linear opacity;
    transition: 0.2s linear opacity;
}
.GridLayout > .Row:hover > .Resize {
    opacity: 0.4;
}
.GridLayout > .Row > .Resize:hover,
.GridLayout > .Row > .Resize.Dragging {
    opacity: 1;
}
/*
While dragging a widget over a row, always hide the resizer
*/
.GridLayout > .Row.DragHover > .Resize,
.GridLayout > .Row.DragHover:hover > .Resize {
    opacity: 0 !important;
    cursor: inherit !important;
}

/*
While in *nice* browsers we can use the opacity, in IE8 we have to
instead use visibility (because opacity filter in IE8 look awful)
*/
body.IE8 .GridLayout > .Row > .Resize {
    visibility: hidden;
}
body.IE8 .GridLayout > .Row:hover > .Resize,
body.IE8 .GridLayout > .Row > .Resize:hover,
body.IE8 .GridLayout > .Row > .Resize.Dragging {
    visibility: visible;
}
body.IE8 .GridLayout > .Row.DragHover > .Resize,
body.IE8 .GridLayout > .Row.DragHover:hover > .Resize {
    display: none !important;
}