jquery.pagewalkthrough.css 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. #jpwClose,
  2. #jpwNext,
  3. #jpwPrevious,
  4. #jpwFinish {
  5. color: #00c7ff;
  6. cursor: pointer;
  7. font-family: 'GochiHand';
  8. font-size: 18px;
  9. font-weight: lighter;
  10. }
  11. #jpwOverlay {
  12. background: rgba(0, 0, 0, 0.6);
  13. position: fixed;
  14. z-index: 999999;
  15. top: 0;
  16. width: 100%;
  17. height: 100%;
  18. display: block;
  19. }
  20. #jpwOverlay.transparent {
  21. background: none;
  22. }
  23. #jpWalkthrough.jpw-scrolling .overlay-hole > div {
  24. box-shadow: inset 0 0 10px 1000px rgba(0, 0, 0, 0.6);
  25. }
  26. #jpWalkthrough .overlay-hole > div {
  27. box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.6);
  28. }
  29. #jpWalkthrough #jpwTooltip {
  30. overflow: visible;
  31. padding: 10px;
  32. background: none;
  33. }
  34. #jpWalkthrough #jpwTooltip #tooltipWrapper {
  35. overflow: visible;
  36. }
  37. #jpWalkthrough #jpwTooltip #bottom-scratch {
  38. background: url("images/scratch-border.png") no-repeat left top;
  39. width: 358px;
  40. height: 42px;
  41. display: block;
  42. top: 25px;
  43. clear: both;
  44. }
  45. #jpWalkthrough #jpwTooltip .draggable-area {
  46. display: block;
  47. width: 44px;
  48. height: 40px;
  49. position: absolute;
  50. top: -35px;
  51. right: -30px;
  52. background: url("images/drag.png") no-repeat;
  53. z-index: 10000;
  54. }
  55. #jpWalkthrough #jpwTooltip .top {
  56. background: url("images/arrow-bottom.png") no-repeat scroll 0 0 transparent;
  57. bottom: -86px;
  58. height: 86px;
  59. left: 130px;
  60. position: absolute;
  61. width: 75px;
  62. display: block;
  63. z-index: 1000;
  64. }
  65. #jpWalkthrough #jpwTooltip .right {
  66. background: url("images/arrow-left.png") no-repeat scroll 0 0 transparent;
  67. height: 56px;
  68. left: -105px;
  69. position: absolute;
  70. top: 35px;
  71. width: 105px;
  72. display: block;
  73. z-index: 1000;
  74. }
  75. #jpWalkthrough #jpwTooltip .bottom {
  76. background: url("images/arrow-top.png") no-repeat scroll 0 0 transparent;
  77. height: 86px;
  78. left: 130px;
  79. position: absolute;
  80. top: -86px;
  81. width: 75px;
  82. display: block;
  83. z-index: 1000;
  84. }
  85. #jpWalkthrough #jpwTooltip .left {
  86. background: url("images/arrow-right.png") no-repeat scroll 0 0 transparent;
  87. height: 56px;
  88. position: absolute;
  89. right: -105px;
  90. top: 35px;
  91. width: 105px;
  92. display: block;
  93. z-index: 1000;
  94. }
  95. #jpWalkthrough #jpwTooltip #tooltipInner {
  96. font-family: 'GochiHand';
  97. color: #ffffff;
  98. text-align: center;
  99. font-size: 22px;
  100. }
  101. #jpWalkthrough #jpwTooltip #tooltipInner a {
  102. font-size: 22px;
  103. }
  104. #jpWalkthrough #jpwTooltip #tooltipInner .tooltipTitle {
  105. font-size: 40px;
  106. }
  107. #jpWalkthrough .killOverlay {
  108. background-image: none !important;
  109. background-color: none !important;
  110. }
  111. #jpwClose {
  112. position: fixed;
  113. top: 65px;
  114. right: 25px;
  115. z-index: 1000000;
  116. color: #ffffff;
  117. text-align: center;
  118. display: block;
  119. }
  120. #jpwClose:hover {
  121. color: #7eff00;
  122. }
  123. #jpwClose:before {
  124. content: '';
  125. display: inline-block;
  126. *display: inline;
  127. *zoom: 1;
  128. width: 44px;
  129. height: 40px;
  130. background: url("images/close.png") no-repeat;
  131. position: absolute;
  132. top: -45px;
  133. left: -5px;
  134. }
  135. #jpwNext,
  136. #jpwFinish {
  137. float: right;
  138. }
  139. #jpwPrevious {
  140. float: left;
  141. }
  142. @font-face {
  143. font-family: 'GochiHand';
  144. src: url('font/GochiHand-Regular.eot');
  145. font-weight: normal;
  146. font-style: normal;
  147. font-family: 'GochiHand';
  148. src: url('font/GochiHand-Regular.ttf') format('truetype');
  149. font-weight: normal;
  150. font-style: normal;
  151. }