/***
* Author: Erwin Yusrizal
* Created On: 27/02/2013
* Version: 1.0.0
***/
/*#jpwClose {
    display: none;
}*/
#jpWalkthrough .next-step:hover {
  color: #7eff00;
}
#jpWalkthrough .prev-step:hover {
  color: #7eff00;
}
#jpwOverlay {
  background: url(../images/page-walkthrough/overlay.png) repeat;
  position: fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#jpWalkthrough .overlay {
  background: url(../images/page-walkthrough/overlay.png) repeat;
  position: absolute;
  z-index: 9999;
}
#jpWalkthrough .noOverlay {
  background: none;
  position: absolute;
  z-index: 9999;
}
#jpWalkthrough #overlayTop {
  width: 100%;
  top: 0;
  left: 0;
}
#jpWalkthrough #overlayLeft {
  left: 0;
}
#jpWalkthrough #highlightedArea {
  position: absolute;
  z-index: 1111;
}
#jpWalkthrough #overlayBottom {
  width: 100%;
  left: 0;
}
#jpWalkthrough #topAccessable,
#jpWalkthrough #middleAccessable,
#jpWalkthrough #bottomAccessable {
  z-index: 9999;
}
#jpWalkthrough #highlightedArea #topLeft,
#jpWalkthrough #topAccessable #topLeft {
  background: url(../images/page-walkthrough/rounded.png) no-repeat left top;
  height: 30px;
  width: 30px;
  float: left;
}
#jpWalkthrough #highlightedArea #topCenter,
#jpWalkthrough #topAccessable #topCenter {
  background: url(../images/page-walkthrough/borderTop.png) repeat-x 0 0;
  height: 30px;
  float: left;
}
#jpWalkthrough #highlightedArea #topRight,
#jpWalkthrough #topAccessable #topRight {
  background: url(../images/page-walkthrough/rounded.png) no-repeat right top;
  height: 30px;
  width: 30px;
  float: left;
}
#jpWalkthrough #highlightedArea #middleLeft,
#jpWalkthrough #middleAccessable #middleLeft {
  background: url(../images/page-walkthrough/borderLeft.png) repeat-y left top;
  width: 30px;
  height: 30px;
  float: left;
}
#jpWalkthrough #highlightedArea #middleCenter,
#jpWalkthrough #middleAccessable #middleCenter {
  background: transparent;
  float: left;
  overflow: hidden;
}
#jpWalkthrough #highlightedArea #middleRight,
#jpWalkthrough #middleAccessable #middleRight {
  background: url(../images/page-walkthrough/borderRight.png) repeat-y right top;
  width: 30px;
  height: 30px;
  float: left;
}
#jpWalkthrough #highlightedArea #bottomLeft,
#jpWalkthrough #bottomAccessable #bottomLeft {
  background: url(../images/page-walkthrough/rounded.png) no-repeat left bottom;
  height: 30px;
  width: 30px;
  float: left;
}
#jpWalkthrough #highlightedArea #bottomCenter,
#jpWalkthrough #bottomAccessable #bottomCenter {
  background: url(../images/page-walkthrough/borderBottom.png) repeat-x 0 bottom;
  height: 30px;
  float: left;
}
#jpWalkthrough #highlightedArea #bottomRight,
#jpWalkthrough #bottomAccessable #bottomRight {
  background: url(../images/page-walkthrough/rounded.png) no-repeat right bottom;
  height: 30px;
  width: 30px;
  float: left;
}
/*** tooltip ***/
#jpWalkthrough #jpwTooltip {
  overflow: visible;
  padding: 10px;
  background: none;
}
#jpWalkthrough #jpwTooltip #tooltipWrapper {
  overflow: visible;
}
#jpWalkthrough #jpwTooltip #bottom-scratch {
  background: url("../images/page-walkthrough/scratch-border.png") no-repeat left top;
  width: 358px;
  height: 42px;
  display: block;
  top: 25px;
  clear: both;
}
#jpWalkthrough #jpwTooltip .draggable-area {
  display: block;
  width: 44px;
  height: 40px;
  position: absolute;
  top: -35px;
  right: -30px;
  background: url("../images/page-walkthrough/drag.png") no-repeat;
  z-index: 10000;
}
/*#jpWalkthrough #jpwTooltip #tooltipWrapper{

    margin: 3px 29px 20px 3px;
    background: url(../images/page-walkthrough/skin.png) no-repeat left top;
    overflow: visible;
}

#jpWalkthrough #jpwTooltip #tooltipWrapper #tooltipTop{
    position: relative;
    display: block;
    background: url(../images/page-walkthrough/skin.png) no-repeat center top;
}

#jpWalkthrough #jpwTooltip #tooltipWrapper #tooltipTop #topRight{
    height: 30px;
    width: 30px;
    right: -30px;
    margin-bottom: -32000px;
    overflow: hidden;
    float: right;
    background: url(../images/page-walkthrough/skin.png) no-repeat right top;
    position: relative;
    display: block;
}

#jpWalkthrough #jpwTooltip #tooltipWrapper #tooltipTop #topLeft, #jpWalkthrough #jpwTooltip #tooltipWrapper #tooltipBottom #bottomRight{
    display: none;
}

#jpWalkthrough #jpwTooltip #tooltipWrapper #tooltipInner
{
    bottom: -30px;
    padding: 0 30px 30px 0;
    right: -30px;
    position: relative;
    background: url(../images/page-walkthrough/skin.png) no-repeat right bottom;
}

#jpWalkthrough #jpwTooltip #tooltipWrapper #tooltipInner .draggable-hover{
    cursor: move;
}

#jpWalkthrough #jpwTooltip #tooltipWrapper #tooltipBottom{
    position: relative;
    display: block;
    background: url(../images/page-walkthrough/skin.png) no-repeat center bottom;
}

#jpWalkthrough #jpwTooltip #tooltipWrapper #tooltipBottom #bottomLeft{
    background: url(../images/page-walkthrough/skin.png) no-repeat left bottom;
    bottom:-10px;
    float: left;
    width: 30px;
    height: 30px;
}

/*** tooltip position ***/
#jpWalkthrough #jpwTooltip .top {
  background: url("../images/page-walkthrough/arrow-bottom.png") no-repeat scroll 0 0 transparent;
  bottom: -86px;
  height: 86px;
  left: 130px;
  position: absolute;
  width: 75px;
  display: block;
  z-index: 1000;
}
#jpWalkthrough #jpwTooltip .right {
  background: url("../images/page-walkthrough/arrow-left.png") no-repeat scroll 0 0 transparent;
  height: 56px;
  left: -105px;
  position: absolute;
  top: 35px;
  width: 105px;
  display: block;
  z-index: 1000;
}
#jpWalkthrough #jpwTooltip .bottom {
  background: url("../images/page-walkthrough/arrow-top.png") no-repeat scroll 0 0 transparent;
  height: 86px;
  left: 130px;
  position: absolute;
  top: -86px;
  width: 75px;
  display: block;
  z-index: 1000;
}
#jpWalkthrough #jpwTooltip .left {
  background: url("../images/page-walkthrough/arrow-right.png") no-repeat scroll 0 0 transparent;
  height: 56px;
  position: absolute;
  right: -105px;
  top: 35px;
  width: 105px;
  display: block;
  z-index: 1000;
}
/*** close button ***/
#jpwClose {
  position: fixed;
  top: 25px;
  right: 25px;
  z-index: 10000;
}
#jpwClose a {
  text-align: center;
  font-family: 'GochiHand';
  color: #fff;
  font-size: 16px;
  display: block;
  font-weight: lighter;
}
#jpwClose a:hover {
  color: #7EFF00;
}
#jpwClose a span {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  width: 44px;
  height: 40px;
  background: url("../images/page-walkthrough/close.png") no-repeat;
}
#jpWalkthrough .killOverlay {
  background-image: none !important;
  background-color: none !important;
}
/*** tooltip content ****/
@font-face {
  font-family: 'GochiHand';
  src: url('../fonts/GochiHand-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'GochiHand';
  font-weight: normal;
  font-style: normal;
}
#jpWalkthrough #jpwTooltip #tooltipInner {
  font-family: 'GochiHand';
  color: #fff;
  text-align: center;
  font-size: 16px;
}
#jpWalkthrough #jpwTooltip #tooltipInner a {
  font-size: 16px;
}
#jpWalkthrough #jpwTooltip #tooltipInner .tooltipTitle {
  font-size: 40px;
}