/*!
 * Fancytree "Win7" skin.
 *
 * DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
 * the LESS templates.
 */

// Dynatree Vista styles

// both: 
//    unselected background: #FCFCFC 'nearly white'
//    hover bar (unselected, inactive): #F8FCFE..#EFF9FE (border: #D8F0FA) 'very light blue'
//         background: #f8fcfe; //
//         background: -moz-linear-gradient(top, #f8fcfe 0%, #eff9fe 100%); 

//    active node: #F6FBFD..#D5EFFC (border: #99DEFD)  'light blue'
//         background: #f6fbfd; 
//         background: -moz-linear-gradient(top, #f6fbfd 0%, #d5effc 100%);

//    active node with hover: #F2F9FD..#C4E8FA (border: #B6E6FB) 
//         background: #f2f9fd; 
//         background: -moz-linear-gradient(top, #f2f9fd 0%, #c4e8fa 100%); 

// Tree view:
//    active node, tree inactive: #FAFAFB..#E5E5E5 (border: #D9D9D9) 'light gray, selected, but tree not active'
//         background: #fafafb; 
//         background: -moz-linear-gradient(top, #fafafb 0%, #e5e5e5 100%); 

// List view:
//    selected bar: --> active bar
//    focus  bar: active + border 1px dotted #090402 (inside the blue border)
   
//    table left/right border: #EDEDED 'light gray'

// Import common styles
@import "../skin-common.less";


/*******************************************************************************
 * Styles specific to this skin.
 *
 * This section is automatically generated from the `ui-fancytree.less` template.
 ******************************************************************************/

// Override the variable after the import. 
// NOTE: Variables are always resolved as the last definition, even if it is 
// after where it is used.
@useSprites: true;  
@hideConnectors: true;
@iconWidth: 16px;
@iconHeight: 16px;
@lineHeight: 16px;
@iconMarginLeft: 3px;


/*******************************************************************************
 * Node titles
 */
span.fancytree-title {
  border: @nodeBorderWidth solid transparent;  // avoid jumping, when a border is added on hover
  border-radius: 3px;
}
span.fancytree-title:hover {
  .spanStyleMixin(inherit, #f8fcfe, #D8F0FA, #f8fcfe, #eff9fe);
}
span.fancytree-focused span.fancytree-title {
  outline: 1px dotted black;
}


// Safari does not support outline on a tags?
// @media screen and (-webkit-min-device-pixel-ratio:0) {
//   span.fancytree-focused a:link
//   {
//     border: 1px dotted black;
//   }
// }


// active nodes inside an UN-focused tree are gray instead of blue
span.fancytree-active .fancytree-title {
  .spanStyleMixin(inherit, #e5e5e5, #d9d9d9, #fafafb, #e5e5e5);
}

.fancytree-treefocus span.fancytree-active .fancytree-title,
span.fancytree-selected .fancytree-title {
  .spanStyleMixin(inherit, #f6fbfd, #99defd, #f6fbfd, #d5effc);
}

span.fancytree-active .fancytree-title:hover,
span.fancytree-active.fancytree-focused .fancytree-title,
span.fancytree-selected .fancytree-title:hover,
span.fancytree-selected.fancytree-focused .fancytree-title {
  .spanStyleMixin(inherit, #f2f9fd, #B6E6FB, #f2f9fd, #c4e8fa);
}

// File Explorer does not distinguish selected and active (if multiple nodes are selected)
// span.fancytree-active .fancytree-title,
// span.fancytree-active.fancytree-focused .fancytree-title {
//   .spanStyleMixin(inherit, #daedff, #3399FF, #daedff, #b4d9ff);
// }

.fancytree-selected .fancytree-title {
  font-style: italic;
}
.fancytree-has-children .fancytree-title {
}
.fancytree-expanded .fancytree-title {
}


/*******************************************************************************
 * 'table' extension
 */

table.fancytree-ext-table tbody {
  tr td {
    border: 1px solid #EDEDED;
  }
  tr:hover  {
    .spanStyleMixin(inherit, #f8fcfe, inherit, #f8fcfe, #eff9fe);
    outline: 1px solid #D8F0FA;
  }
  // tr:hover td {
  //   outline: 1px solid #D8F0FA;
  // }
  tr.fancytree-focused {
    // background-color: #99DEFD;
    outline: 1px dotted #090402;
  }
  span.fancytree-focused span.fancytree-title {
    outline: solid dotted black;
  }

  // Title get's a white background, when hovered. Undo standard node formatting
  span.fancytree-title:hover {
    border: 1px solid transparent;
    background: inherit;
    background: transparent;
    background: none;
    filter: none;
  }

  tr.fancytree-active:hover,
  tr.fancytree-selected:hover {
    .spanStyleMixin(inherit, #f2f9fd, inherit, #f2f9fd, #c4e8fa);
    outline: 1px solid #B6E6FB;
  }
  tr.fancytree-active,
  tr.fancytree-selected {
    .spanStyleMixin(inherit, #f6fbfd, inherit, #f6fbfd, #d5effc);
    outline: 1px solid #99DEFD;
  }
  // tr.fancytree-selected .fancytree-title {
  //   font-style: italic;
  // }

}
