#ToolTip {
  
  @maximumWidth: 300px;
  @minimumWidth: 130px;
  
  float: left;
  position: fixed;
  z-index: 5000;

  .ToolTipBubble {
    position: relative;
    background-color: white;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.50);
    border: 4px solid rgba(0,0,0,0.33);
    min-width: @minimumWidth;
    max-width: @maximumWidth;

    .stem {
      background-repeat: no-repeat;
      background-position: right top;
      background-size: 100% 100%;
      width: 24px;
      height: 44px;
      
      position: absolute;
      
      &.left {
        background-image: url("/styles/base/img/ToolTipBubble_stem.png");
        float: left;
      }

      &.right {
        background-image: url("/styles/base/img/ToolTipBubble_stemRight.png");
        float: right;
      }

      &.top {
        top: 8px;
      }

      &.bottom {
        // Warning - positioning for this style is handled by the js class
      }

    }

    .title {
      padding: 12px 12px 0;
    }

    .subTitle {
      padding: 0 12px 12px 12px;
    }
    
    .toolTipTitleUnderline {

      position: relative;
      background-image: url("/styles/base/img/seperator_light_bg.png");
      width: 100%;
      height: 2px;      
      background-repeat: no-repeat;
      background-size: 100% 100%;

    }

    .dateNode {
      margin: 12px;
    }

    .content {
    
      padding: 12px;
      background-image: url("/styles/base/img/tooltip_content_bg.png");
    
    }

    .PhotoGallery.content {
      min-height: 0;
      display: none;
    }

    .image {
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 118px;
      height: 66px;
      border-radius: 2px;
      border: 1px solid rgba(0,0,0,0.5);
      box-shadow: 1px 1px 3px rgba(0,0,0,0.33);
      background-color: rgba(0,0,0,0.2);
    }

  }
}



// Font Settings

#ToolTip {
  color: black;

  .title {
    line-height: 1.5;
  }

  .subTitle {
    line-height: 1.5;
    color: rgba(0,0,0,0.5);
  }
}