/* Prepend expander icon to expandable nodes
 * ------------------------------------------------------------------------- */

/* NonExpandable nodes have no icon */
.treeTable tbody tr .icon-expander {
    visibility: hidden;
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
}

/* Collapsed branch: icon-chevron-right */
.treeTable tbody tr.parent.collapsed .icon-expander {
    background-position: -456px -72px;
    visibility: visible;
}

/* Expanded branch: icon-chevron-down */
.treeTable tbody tr.parent.expanded .icon-expander {
    background-position: -313px -119px;
    visibility: visible;
}

/* Non-transparent  helper row backgrounds
 * ------------------------------------------------------------------------- */
.nested-helper tr {
    background-color: #FFFFFF;
}

/* Fade out dragged helper rows
 * ============================
 * Requires: CSS3 support
 * Else: no fade out applied, all rows will be visible
 * ------------------------------------------------------------------------- */

/* Style 1'st displayed row */
.nested-helper tr:nth-child(1)
{ opacity: 0.80 !important; }
.nested-helper tr:nth-child(1) th,
.nested-helper tr:nth-child(1) td
{ border-top: 1px solid rgba(221, 221, 221, 0.80) !important; }

/* Style 2'nd displayed row */
.nested-helper tr:not(.ui-helper-hidden)~tr
{ opacity: 0.65 !important; }
.nested-helper tr:not(.ui-helper-hidden)~tr th,
.nested-helper tr:not(.ui-helper-hidden)~tr td
{ border-top: 1px solid rgba(221, 221, 221, 0.65) !important; }

/* Style 3'rd displayed row */
.nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr
{ opacity: 0.50 !important; }
.nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr th,
.nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr td
{ border-top: 1px solid rgba(221, 221, 221, 0.50) !important; }

/* Style 4'th displayed row */
.nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr
{ opacity: 0.35 !important; }
.nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr th,
.nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr td
{ border-top: 1px solid rgba(221, 221, 221, 0.35) !important; }

/* Style 5'th displayed row */
.nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr
{ opacity: 0.20 !important; }
.nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr th,
.nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr td
{ border-top: 1px solid rgba(221, 221, 221, 0.20) !important; }

/* Style 6'th displayed row */
.nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr
{ opacity: 0.05 !important; }
.nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr th,
.nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr td
{ border-top: 1px solid rgba(221, 221, 221, 0.05) !important; }

/* Style all displayed rows below 6'th */
.nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr
{ opacity: 0 !important; }
.nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr th,
.nested-helper tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr:not(.ui-helper-hidden)~tr td
{ border-top: 1px solid rgba(221, 221, 221, 0) !important; }

/* Droppable action highlight, Selected row highlight
 * ==================================================
 * Requires: CSS2 support
 * Else: expander and droppable action icons won't be visible
 * ------------------------------------------------------------------------- */

.treeTable tbody tr.droppable-before,
.treeTable tbody tr.droppable-after{
    box-shadow: 0 0 10px 5px rgba(73, 175, 205, 0.25);
}

.treeTable tbody tr.droppable-before > td:first-child:before,
.treeTable tbody tr.droppable-after > td:first-child:before {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    content: '';
    margin-top: 1px;
    margin-right: -14px;
    left: 5px;
    line-height: 14px;
    vertical-align: text-top;
    background-image: url("../img/glyphicons-halflings.png");
    background-position: 14px 14px;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* Insert before: icon-share-alt */
.treeTable tbody tr.droppable-before > td:first-child:before {
    background-position: -336px -96px;
    top: -14px;
}

/* Insert after: flipped icon-share-alt */
.treeTable tbody tr.droppable-after > td:first-child:before {
    background-position: -336px -96px;
    bottom: -14px;
    
    -webkit-transform:scaleY(-1);
    -moz-transform:scaleY(-1);
    -ms-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
}

/* Highlight selected row */
.treeTable tbody tr.selected,
.treeTable tbody tr.droppable-in {
    background-color: #0088CC;
    color: #fff;
}

/* Use white icon set in selected rows */
.treeTable tbody tr.selected [class^="icon-"],
.treeTable tbody tr.droppable-in [class^="icon-"],
.treeTable tbody tr.selected [class*=" icon-"],
.treeTable tbody tr.droppable-in [class*=" icon-"],
.treeTable tbody tr.parent.selected td:first-child:before,
.treeTable tbody tr.parent.droppable-in td:first-child:before {
    background-image: url("../img/glyphicons-halflings-white.png") !important;
}

/* Remove cell backgrounds to make row background visible */
.treeTable tbody tr.selected td, .treeTable tbody tr.droppable-in td, 
.treeTable tbody tr.selected th, .treeTable tbody tr.droppable-in th {
    background-color: transparent !important;
}

/* jQuery UI layout helpers
 * ========================
 * This way I don't have to require the full jQuery UI CSS to be loaded.
 * ------------------------------------------------------------------------- */
.ui-helper-hidden { display: none; }