lightbox_alt.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. /* $Id: lightbox_alt.css,v 1.1.4.22 2010/09/22 10:47:15 snpower Exp $ */
  2. /**
  3. * Based on a design created by Nicolas Borda:
  4. * http://www.ipwa.net/assets/myslimbox/
  5. */
  6. #lightbox {
  7. position: absolute;
  8. top: 40px;
  9. left: 0;
  10. width: 100%;
  11. z-index: 100;
  12. text-align: center;
  13. line-height: 0;
  14. }
  15. #lightbox a img {
  16. border: none;
  17. }
  18. #outerImageContainer {
  19. position: relative;
  20. background-color: #fff;
  21. width: 250px;
  22. height: 250px;
  23. margin: 0 auto;
  24. min-width: 240px;
  25. overflow: hidden;
  26. }
  27. #imageContainer, #frameContainer, #modalContainer {
  28. padding: 10px;
  29. }
  30. #modalContainer {
  31. line-height: 1em;
  32. overflow: auto;
  33. }
  34. #loading {
  35. height: 25%;
  36. width: 100%;
  37. text-align: center;
  38. line-height: 0;
  39. position: absolute;
  40. top: 40%;
  41. left: 45%;
  42. *left: 0%;
  43. }
  44. #hoverNav {
  45. z-index: 10;
  46. }
  47. #imageData>#hoverNav {
  48. left: 0;
  49. }
  50. #hoverNav a {
  51. outline: none;
  52. }
  53. #prevLink, #nextLink {
  54. width: 45px;
  55. height: 45px;
  56. display: block;
  57. }
  58. #prevLink {
  59. left: 0;
  60. float: left;
  61. background: url(../images/prev_alt.gif) left 15% no-repeat;
  62. }
  63. #nextLink {
  64. right: 0;
  65. float: right;
  66. background: url(../images/next_alt.gif) right 15% no-repeat;
  67. }
  68. #prevLink:hover, #prevLink:visited:hover {
  69. background-position: right 15%;
  70. }
  71. #nextLink:hover, #nextLink:visited:hover {
  72. background-position: left 15%;
  73. }
  74. #imageDataContainer {
  75. font: 10px Verdana, Helvetica, sans-serif;
  76. background-color: #fff;
  77. margin: 0 auto;
  78. line-height: 1.4em;
  79. min-width: 240px;
  80. }
  81. #imageData {
  82. padding: 0 10px;
  83. }
  84. #imageData #imageDetails {
  85. width: 70%;
  86. margin-right: auto;
  87. margin-left: auto;
  88. text-align: center;
  89. }
  90. #imageData #caption {
  91. font-weight: bold;
  92. }
  93. #imageData #numberDisplay {
  94. display: block;
  95. padding-bottom: 1.0em;
  96. }
  97. #imageData #lightbox2-node-link-text {
  98. display: block;
  99. padding-bottom: 1.0em;
  100. }
  101. #lightbox2-overlay {
  102. position: absolute;
  103. top: 0;
  104. left: 0;
  105. z-index: 90;
  106. width: 100%;
  107. height: 500px;
  108. background-color: #000;
  109. }
  110. #overlay_default {
  111. opacity: 0.6;
  112. }
  113. #overlay_macff2 {
  114. background: transparent url(../images/overlay.png) repeat;
  115. }
  116. .clearfix:after {
  117. content: ".";
  118. display: block;
  119. height: 0;
  120. clear: both;
  121. visibility: hidden;
  122. }
  123. * html>body .clearfix {
  124. display: inline;
  125. width: 100%;
  126. }
  127. * html .clearfix {
  128. /* Hides from IE-mac \*/
  129. height: 1%;
  130. /* End hide from IE-mac */
  131. }
  132. /* Image location mod */
  133. #bottomNavClose {
  134. display: block;
  135. z-index: 200;
  136. background: url(../images/close.gif) left no-repeat;
  137. position: absolute;
  138. top: 0px;
  139. right: 0px;
  140. height: 26px;
  141. width: 26px;
  142. }
  143. #bottomNavClose:hover {
  144. background-position: right;
  145. }
  146. #loadingLink {
  147. display: block;
  148. background: url(../images/loading.gif) no-repeat;
  149. width: 32px;
  150. height: 32px;
  151. }
  152. #bottomNavZoom {
  153. display: block;
  154. background: url(../images/expand.gif) no-repeat;
  155. width: 34px;
  156. height: 34px;
  157. position: absolute;
  158. bottom: 25px;
  159. right: 5px;
  160. }
  161. #bottomNavZoomOut {
  162. display: block;
  163. background: url(../images/contract.gif) no-repeat;
  164. width: 34px;
  165. height: 34px;
  166. position: absolute;
  167. bottom: 25px;
  168. right: 5px;
  169. }
  170. #lightshowPlay {
  171. background: url(../images/play.png) no-repeat;
  172. display: block;
  173. margin-right: auto;
  174. margin-left: auto;
  175. margin-bottom: 5px;
  176. height: 20px;
  177. width: 20px;
  178. }
  179. #lightshowPause {
  180. background: url(../images/pause.png) no-repeat;
  181. display: block;
  182. margin-right: auto;
  183. margin-left: auto;
  184. margin-bottom: 5px;
  185. height: 20px;
  186. width: 20px;
  187. }
  188. .lightbox_hide_image {
  189. display: none;
  190. }
  191. #lightboxImage {
  192. -ms-interpolation-mode: bicubic;
  193. }