orbit.css 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  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. #caseStudies {
  9. width: 1000px;
  10. height: 210px;
  11. background: #fff url('../images/orbit/loading.gif') no-repeat center center;
  12. overflow: hidden; }
  13. #caseStudies>img,
  14. #caseStudies>div,
  15. #caseStudies>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.with-bullets {
  28. margin-bottom: 40px;
  29. }
  30. div.orbit>img {
  31. position: absolute;
  32. top: 0;
  33. left: 0;
  34. /* display: none; */ }
  35. div.orbit>a {
  36. border: none;
  37. position: absolute;
  38. top: 0;
  39. left: 0;
  40. line-height: 0;
  41. display: none; }
  42. .orbit>div {
  43. position: absolute;
  44. top: 0;
  45. left: 0;
  46. width: 100%;
  47. height: 100%; }
  48. /* 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 */
  49. /* TIMER
  50. ================================================== */
  51. div.timer {
  52. width: 40px;
  53. height: 40px;
  54. overflow: hidden;
  55. position: absolute;
  56. top: 10px;
  57. right: 10px;
  58. opacity: .6;
  59. cursor: pointer;
  60. z-index: 1001; }
  61. span.rotator {
  62. display: block;
  63. width: 40px;
  64. height: 40px;
  65. position: absolute;
  66. top: 0;
  67. left: -20px;
  68. background: url(../images/orbit/rotator-black.png) no-repeat;
  69. z-index: 3; }
  70. span.mask {
  71. display: block;
  72. width: 20px;
  73. height: 40px;
  74. position: absolute;
  75. top: 0;
  76. right: 0;
  77. z-index: 2;
  78. overflow: hidden; }
  79. span.rotator.move {
  80. left: 0 }
  81. span.mask.move {
  82. width: 40px;
  83. left: 0;
  84. background: url(../images/orbit/timer-black.png) repeat 0 0; }
  85. span.pause {
  86. display: block;
  87. width: 40px;
  88. height: 40px;
  89. position: absolute;
  90. top: 0;
  91. left: 0;
  92. background: url(../images/orbit/pause-black.png) no-repeat;
  93. z-index: 4;
  94. opacity: 0; }
  95. span.pause.active {
  96. background: url(../images/orbit/pause-black.png) no-repeat 0 -40px }
  97. div.timer:hover span.pause,
  98. span.pause.active {
  99. opacity: 1 }
  100. /* CAPTIONS
  101. ================================================== */
  102. .orbit-caption {
  103. display: none;
  104. font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }
  105. .orbit-wrapper .orbit-caption {
  106. background: #000;
  107. background: rgba(0,0,0,.6);
  108. z-index: 1000;
  109. color: #fff;
  110. text-align: center;
  111. padding: 7px 0;
  112. font-size: 13px;
  113. position: absolute;
  114. right: 0;
  115. bottom: 0;
  116. width: 100%; }
  117. /* DIRECTIONAL NAV
  118. ================================================== */
  119. div.slider-nav {
  120. display: block }
  121. div.slider-nav span {
  122. width: 78px;
  123. height: 100px;
  124. text-indent: -9999px;
  125. position: absolute;
  126. z-index: 1000;
  127. top: 50%;
  128. margin-top: -50px;
  129. cursor: pointer; }
  130. div.slider-nav span.right {
  131. background: url(../images/orbit/right-arrow.png);
  132. right: 0; }
  133. div.slider-nav span.left {
  134. background: url(../images/orbit/left-arrow.png);
  135. left: 0; }
  136. /* BULLET NAV
  137. ================================================== */
  138. .orbit-bullets {
  139. position: absolute;
  140. z-index: 1000;
  141. list-style: none;
  142. bottom: -40px;
  143. left: 50%;
  144. margin-left: -50px;
  145. padding: 0; }
  146. .orbit-bullets li {
  147. float: left;
  148. margin-left: 5px;
  149. cursor: pointer;
  150. color: #999;
  151. text-indent: -9999px;
  152. background: url(../images/orbit/bullets.jpg) no-repeat 4px 0;
  153. width: 13px;
  154. height: 12px;
  155. overflow: hidden; }
  156. .orbit-bullets li.active {
  157. color: #222;
  158. background-position: -8px 0; }
  159. .orbit-bullets li.has-thumb {
  160. background: none;
  161. width: 100px;
  162. height: 75px; }
  163. .orbit-bullets li.active.has-thumb {
  164. background-position: 0 0;
  165. border-top: 2px solid #000; }
  166. /* FLUID LAYOUT
  167. ================================================== */
  168. .orbit .fluid-placeholder {
  169. visibility: hidden;
  170. position: static;
  171. display: block;
  172. width: 100%;
  173. }
  174. .orbit, .orbit-wrapper { width: 100% !important; }
  175. .orbit-bullets {
  176. position: absolute;
  177. z-index: 1000;
  178. list-style: none;
  179. bottom: -50px;
  180. left: 50%;
  181. margin-left: -50px;
  182. padding: 0; }
  183. .orbit-bullets li {
  184. float: left;
  185. margin-left: 5px;
  186. cursor: pointer;
  187. color: #999;
  188. text-indent: -9999px;
  189. background: url(../images/orbit/bullets.jpg) no-repeat 4px 0;
  190. width: 13px;
  191. height: 12px;
  192. overflow: hidden; }
  193. .orbit-bullets li.has-thumb {
  194. background: none;
  195. width: 100px;
  196. height: 75px; }
  197. .orbit-bullets li.active {
  198. color: #222;
  199. background-position: -8px 0; }
  200. .orbit-bullets li.active.has-thumb {
  201. background-position: 0 0;
  202. border-top: 2px solid #000; }