You are here

orbit.css in Sassy 7.3

/* CSS for jQuery Orbit Plugin 1.2.3
 * www.ZURB.com/playground
 * Copyright 2010, ZURB
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 
 
 
/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY
   ================================================== */
#caseStudies { 
	width: 1000px;
	height: 210px;
	background: #fff url('../images/orbit/loading.gif') no-repeat center center;
	overflow: hidden; }
#caseStudies>img,  
#caseStudies>div,
#caseStudies>a { display: none; }




/* CONTAINER
   ================================================== */

div.orbit-wrapper {
    width: 1px;
    height: 1px;
    position: relative; }

div.orbit {
    width: 1px;
    height: 1px;
    position: relative;
    overflow: hidden }
    
div.orbit.with-bullets {
    margin-bottom: 40px;
}

div.orbit>img {
    position: absolute;
    top: 0;
    left: 0;
    /* display: none; */ }

div.orbit>a {
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 0; 
    display: none; }

.orbit>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/* 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 */


/* TIMER
   ================================================== */

div.timer {
    width: 40px;
    height: 40px;
    overflow: hidden;
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: .6;
    cursor: pointer;
    z-index: 1001; }

span.rotator {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: -20px;
    background: url(../images/orbit/rotator-black.png) no-repeat;
    z-index: 3; }

span.mask {
    display: block;
    width: 20px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    overflow: hidden; }

span.rotator.move {
    left: 0 }

span.mask.move {
    width: 40px;
    left: 0;
    background: url(../images/orbit/timer-black.png) repeat 0 0; }

span.pause {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/orbit/pause-black.png) no-repeat;
    z-index: 4;
    opacity: 0; }

span.pause.active {
    background: url(../images/orbit/pause-black.png) no-repeat 0 -40px }

div.timer:hover span.pause,
span.pause.active {
    opacity: 1 }


/* CAPTIONS
   ================================================== */

.orbit-caption {
    display: none;
    font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }

.orbit-wrapper .orbit-caption {
    background: #000;
    background: rgba(0,0,0,.6);
    z-index: 1000;
    color: #fff;
	text-align: center;
	padding: 7px 0;
    font-size: 13px;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%; }


/* DIRECTIONAL NAV
   ================================================== */

div.slider-nav {
    display: block }

div.slider-nav span {
    width: 78px;
    height: 100px;
    text-indent: -9999px;
    position: absolute;
    z-index: 1000;
    top: 50%;
    margin-top: -50px;
    cursor: pointer; }

div.slider-nav span.right {
    background: url(../images/orbit/right-arrow.png);
    right: 0; }

div.slider-nav span.left {
    background: url(../images/orbit/left-arrow.png);
    left: 0; }

/* BULLET NAV
   ================================================== */

.orbit-bullets {
    position: absolute;
    z-index: 1000;
    list-style: none;
    bottom: -40px;
    left: 50%;
	margin-left: -50px;
    padding: 0; }

.orbit-bullets li {
    float: left;
    margin-left: 5px;
    cursor: pointer;
    color: #999;
    text-indent: -9999px;
    background: url(../images/orbit/bullets.jpg) no-repeat 4px 0;
    width: 13px;
    height: 12px;
    overflow: hidden; }

.orbit-bullets li.active {
    color: #222;
    background-position: -8px 0; }
    
.orbit-bullets li.has-thumb {
    background: none;
    width: 100px;
    height: 75px; }

.orbit-bullets li.active.has-thumb {
    background-position: 0 0;
    border-top: 2px solid #000; }
    
/* FLUID LAYOUT
   ================================================== */
.orbit .fluid-placeholder {
  visibility: hidden;
  position: static;
  display: block;
  width: 100%;
}

.orbit, .orbit-wrapper { width: 100% !important; }

.orbit-bullets {
    position: absolute;
    z-index: 1000;
    list-style: none;
    bottom: -50px;
    left: 50%;
	margin-left: -50px;
    padding: 0; }

.orbit-bullets li {
    float: left;
    margin-left: 5px;
    cursor: pointer;
    color: #999;
    text-indent: -9999px;
    background: url(../images/orbit/bullets.jpg) no-repeat 4px 0;
    width: 13px;
    height: 12px;
    overflow: hidden; }

.orbit-bullets li.has-thumb {
    background: none;
    width: 100px;
    height: 75px; }

.orbit-bullets li.active {
    color: #222;
    background-position: -8px 0; }

.orbit-bullets li.active.has-thumb {
    background-position: 0 0;
    border-top: 2px solid #000; }

File

sassy_foundation/foundation/stylesheets/orbit.css
View source
  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; }