#joyRideTipContent { display: none; }

/* Default styles for the container */
.joyride-tip-guide { display: none; position: absolute; background: $tipBgIE8; background: $tipBg; color: $tipFontColor; width: $tipDefaultWidth; z-index: 101; top: 0; left: 0; font-family: inherit; font-weight: normal; @include border-radius($tipBorderRadius); }
.joyride-content-wrapper { padding: $tipPadding; }

/* Add a little css triangle pip, older browser just miss out on the fanciness of it */
.joyride-tip-guide {
  span.joyride-nub { display: block; position: absolute; left: 22px; width: 0; height: 0; border: solid $tipNubSize;
    &.top { border-color: $tipBgIE8; border-color: $tipBg; border-top-color: transparent !important; border-left-color: transparent !important; border-right-color: transparent !important; top: -($tipNubSize*2); bottom: none; }
    &.bottom { border-color: $tipBgIE8; border-color: $tipBg !important; border-bottom-color: transparent !important; border-left-color: transparent !important; border-right-color: transparent !important; bottom: -($tipNubSize*2); bottom: none; }
    &.right { border-color: $tipBgIE8; border-color: $tipBg !important; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; top: 22px; bottom: none; left: auto; right: -($tipNubSize*2); }
    &.left { border-color: $tipBgIE8; border-color: $tipBg !important; border-top-color: transparent !important; border-left-color: transparent !important; border-bottom-color: transparent !important; top: 22px; left: -($tipNubSize*2); right: auto; bottom: none; }
  }
}

/* Typography */
.joyride-tip-guide h1,
.joyride-tip-guide h2,
.joyride-tip-guide h3,
.joyride-tip-guide h4,
.joyride-tip-guide h5,
.joyride-tip-guide h6 { line-height: 1.25; margin: 0; font-weight: $tipHeaderWeight; color: $tipFontColor }
.joyride-tip-guide p { margin: 0 0 18px 0; font-size: $tipFontSize; line-height: 1.3; }

.joyride-timer-indicator-wrap { width: $tipTimerWidth; height: $tipTimerHeight; border: $tipTimerBorder; position: absolute; right: 17px; bottom: 16px; }
.joyride-timer-indicator { display: block; width: 0; height: inherit; background: $tipTimerColor; }

.joyride-close-tip { position: absolute; right: 10px; top: 10px; color: $tipCloseColor !important; text-decoration: none; font-size: $tipCloseSize; font-weight: $tipCloseWeight; line-height: .5 !important;
  &:hover { color: #eee !important; }
}

.joyride-modal-bg { position: fixed; height: 100%; width: 100%; background: $tipScreenFill; z-index: 100; display: none; top: 0; left: 0; cursor: pointer; }