orbit-1.2.3.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. /* CSS for jQuery Orbit Plugin 1.2.3
  2. * www.ZURB.com/playground
  3. * Copyright 2010, ZURB
  4. * Free to use under the MIT license.
  5. * http://www.opensource.org/licenses/mit-license.php
  6. /* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY
  7. ================================================== */
  8. #featured {
  9. width: 940px;
  10. height: 450px;
  11. background: #000 url('orbit/loading.gif') no-repeat center center;
  12. overflow: hidden; }
  13. #featured>img,
  14. #featured>div,
  15. #featured>a { display: none; }
  16. /* CONTAINER
  17. ================================================== */
  18. div.orbit-wrapper {
  19. width: 1px;
  20. height: 1px;
  21. position: relative; }
  22. div.orbit {
  23. width: 1px;
  24. height: 1px;
  25. position: relative;
  26. overflow: hidden }
  27. div.orbit>img {
  28. position: absolute;
  29. top: 0;
  30. left: 0;
  31. display: none; }
  32. div.orbit>a {
  33. border: none;
  34. position: absolute;
  35. top: 0;
  36. left: 0;
  37. line-height: 0;
  38. display: none; }
  39. .orbit>div {
  40. position: absolute;
  41. top: 0;
  42. left: 0;
  43. width: 100%;
  44. height: 100%; }
  45. /* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */
  46. /* TIMER
  47. ================================================== */
  48. div.timer {
  49. width: 40px;
  50. height: 40px;
  51. overflow: hidden;
  52. position: absolute;
  53. top: 10px;
  54. right: 10px;
  55. opacity: .6;
  56. cursor: pointer;
  57. z-index: 1001; }
  58. span.rotator {
  59. display: block;
  60. width: 40px;
  61. height: 40px;
  62. position: absolute;
  63. top: 0;
  64. left: -20px;
  65. background: url(orbit/rotator-black.png) no-repeat;
  66. z-index: 3; }
  67. span.mask {
  68. display: block;
  69. width: 20px;
  70. height: 40px;
  71. position: absolute;
  72. top: 0;
  73. right: 0;
  74. z-index: 2;
  75. overflow: hidden; }
  76. span.rotator.move {
  77. left: 0 }
  78. span.mask.move {
  79. width: 40px;
  80. left: 0;
  81. background: url(orbit/timer-black.png) repeat 0 0; }
  82. span.pause {
  83. display: block;
  84. width: 40px;
  85. height: 40px;
  86. position: absolute;
  87. top: 0;
  88. left: 0;
  89. background: url(orbit/pause-black.png) no-repeat;
  90. z-index: 4;
  91. opacity: 0; }
  92. span.pause.active {
  93. background: url(orbit/pause-black.png) no-repeat 0 -40px }
  94. div.timer:hover span.pause,
  95. span.pause.active {
  96. opacity: 1 }
  97. /* CAPTIONS
  98. ================================================== */
  99. .orbit-caption {
  100. display: none;
  101. font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }
  102. .orbit-wrapper .orbit-caption {
  103. background: #000;
  104. background: rgba(0,0,0,.6);
  105. z-index: 1000;
  106. color: #fff;
  107. text-align: center;
  108. padding: 7px 0;
  109. font-size: 13px;
  110. position: absolute;
  111. right: 0;
  112. bottom: 0;
  113. width: 100%; }
  114. /* DIRECTIONAL NAV
  115. ================================================== */
  116. div.slider-nav {
  117. display: block }
  118. div.slider-nav span {
  119. width: 78px;
  120. height: 100px;
  121. text-indent: -9999px;
  122. position: absolute;
  123. z-index: 1000;
  124. top: 50%;
  125. margin-top: -50px;
  126. cursor: pointer; }
  127. div.slider-nav span.right {
  128. background: url(orbit/right-arrow.png);
  129. right: 0; }
  130. div.slider-nav span.left {
  131. background: url(orbit/left-arrow.png);
  132. left: 0; }
  133. /* BULLET NAV
  134. ================================================== */
  135. .orbit-bullets {
  136. position: absolute;
  137. z-index: 1000;
  138. list-style: none;
  139. bottom: -40px;
  140. left: 50%;
  141. margin-left: -50px;
  142. padding: 0; }
  143. .orbit-bullets li {
  144. float: left;
  145. margin-left: 5px;
  146. cursor: pointer;
  147. color: #999;
  148. text-indent: -9999px;
  149. background: url(orbit/bullets.jpg) no-repeat 4px 0;
  150. width: 13px;
  151. height: 12px;
  152. overflow: hidden; }
  153. .orbit-bullets li.active {
  154. color: #222;
  155. background-position: -8px 0; }
  156. .orbit-bullets li.has-thumb {
  157. background: none;
  158. width: 100px;
  159. height: 75px; }
  160. .orbit-bullets li.active.has-thumb {
  161. background-position: 0 0;
  162. border-top: 2px solid #000; }