You are here

lightbox-rtl.css in Lightbox2 5.2

#lightbox {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 100;
  text-align: center;
  line-height: 0;
}

#lightbox a img {
  border: none;
}

#outerImageContainer {
  position: relative;
  background-color: #fff;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  min-width: 240px;
  overflow: hidden;
}

#imageContainer, #frameContainer, #modalContainer {
  padding: 10px;
}

#modalContainer {
  line-height: 1em;
  overflow: auto;
}

#loading {
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
  position: absolute;
  top: 40%;
  left: 45%;
  *left: 0%;
}

#hoverNav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

#imageContainer>#hoverNav {
  left: 0;
}

#frameHoverNav {
  z-index: 10;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
  position: relative;
  top: -60px;
}

#imageData>#frameHoverNav {
  left: 0;
}

#hoverNav a, #frameHoverNav a {
  outline: none;
}

#prevLink, #nextLink {
  width: 49%;
  height: 100%;
  background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
  display: block;
}

#prevLink, #framePrevLink {
  left: 0;
  float: left;
}

#nextLink, #frameNextLink {
  right: 0;
  float: right;
}

#prevLink:hover, #prevLink:visited:hover, #prevLink.force_show_nav, #framePrevLink {
  background: url(../images/prev.gif) left 15% no-repeat;
}

#nextLink:hover, #nextLink:visited:hover, #nextLink.force_show_nav, #frameNextLink {
  background: url(../images/next.gif) right 15% no-repeat;
}

#prevLink:hover.force_show_nav, #prevLink:visited:hover.force_show_nav,
#framePrevLink:hover, #framePrevLink:visited:hover {
  background: url(../images/prev_hover.gif) left 15% no-repeat;
}

#nextLink:hover.force_show_nav, #nextLink:visited:hover.force_show_nav,
#frameNextLink:hover, #frameNextLink:visited:hover {
  background: url(../images/next_hover.gif) right 15% no-repeat;
}

#framePrevLink, #frameNextLink {
  width: 45px;
  height: 45px;
  display: block;
  margin-bottom: -60px;
  position: relative;
  top: 60px;
}

#imageDataContainer {
  font: 10px Verdana, Helvetica, sans-serif;
  background-color: #fff;
  margin: 0 auto;
  line-height: 1.4em;
  min-width: 240px;
}

#imageData {
  padding: 0 10px;
}

#imageData #imageDetails {
  width: 70%;
  float: right;
  text-align: right;
}

#imageData #caption {
  font-weight: bold;
}

#imageData #numberDisplay {
  display: block;
  clear: left;
  padding-bottom: 1.0em;
}

#imageData #node_link_text {
  display: block;
  padding-bottom: 1.0em;
}

#imageData #bottomNav {
  height: 66px;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 500px;
  background-color: #000;
}

#overlay_default {
  opacity: 0.6;
}

#overlay_macff2 {
  background: transparent url(../images/overlay.png) repeat;
}


.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

* html>body .clearfix {
  display: inline;
  width: 100%;
}

* html .clearfix {
  /* Hides from IE-mac \*/
  height: 1%;
  /* End hide from IE-mac */
}


/* Image location mod */
#bottomNavClose {
  display: block;
  background: url(../images/close.gif) left no-repeat;
  margin-top: 33px;
  float: left;
  padding-top: 0.7em;
  height: 26px;
  width: 26px;
}

#bottomNavClose:hover {
  background-position: right;
}

#loadingLink {
  display: block;
  background: url(../images/loading.gif) no-repeat;
  width: 32px;
  height: 32px;
}

#bottomNavZoom {
  display: none;
  background: url(../images/expand.gif) no-repeat;
  width: 34px;
  height: 34px;
  position: relative;
  left: -30px;
  float: left;
}

#bottomNavZoomOut {
  display: none;
  background: url(../images/contract.gif) no-repeat;
  width: 34px;
  height: 34px;
  position: relative;
  left: -30px;
  float: left;
}

#lightshowPlay {
  margin-top: 42px;
  float: left;
  margin-left: 5px;
  margin-bottom: 1px;
  height: 20px;
  width: 20px;
  background: url(../images/play.png) no-repeat;
}

#lightshowPause {
  margin-top: 42px;
  float: left;
  margin-left: 5px;
  margin-bottom: 1px;
  height: 20px;
  width: 20px;
  background: url(../images/pause.png) no-repeat;
}

.lightbox_hide_image {
  display: none;
}

#lightboxImage {
  -ms-interpolation-mode: bicubic;
}

File

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