Want more features on Pastebin? Sign Up, it's FREE!
Guest

Galleriffic CSS

By: a guest on Nov 8th, 2010  |  syntax: CSS  |  size: 3.30 KB  |  views: 84  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. div.content {
  2.         /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
  3.         display: none;
  4.         float: right;
  5.         width: 611px;
  6. }
  7. div.content a, div.navigation a {
  8.         text-decoration: none;
  9.         color: #777;
  10. }
  11. div.content a:focus, div.content a:hover, div.content a:active {
  12.         text-decoration: underline;
  13. }
  14. div.controls {
  15.         margin-top: 5px;
  16.         height: 23px;
  17. }
  18. div.controls a {
  19.         padding: 5px;
  20. }
  21. div.ss-controls {
  22.         float: left;
  23. }
  24. div.nav-controls {
  25.         float: right;
  26. }
  27. div.slideshow-container {
  28.         position: relative;
  29.         clear: both;
  30.         height: 332px; /* This should be set to be at least the height of the largest image in the slideshow */
  31. }
  32. div.loader {
  33.         position: absolute;
  34.         top: 0;
  35.         left: 0;
  36.         background-image: url('loader.gif');
  37.         background-repeat: no-repeat;
  38.         background-position: center;
  39.         width: 611px;
  40.         height: 332px; /* This should be set to be at least the height of the largest image in the slideshow */
  41. }
  42. div.slideshow {
  43.  
  44. }
  45. div.slideshow span.image-wrapper {
  46.         display: block;
  47.         position: absolute;
  48.         margin-top: -362px;
  49.         margin-left: -1px;
  50.         top: 0;
  51.         left: 0;
  52. }
  53. div.slideshow a.advance-link {
  54.         display: block;
  55.         width: 611px;
  56.         height: 332px; /* This should be set to be at least the height of the largest image in the slideshow */
  57.         line-height: 332px; /* This should be set to be at least the height of the largest image in the slideshow */
  58.         text-align: center;
  59. }
  60. div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
  61.         text-decoration: none;
  62. }
  63. div.slideshow img {
  64.         vertical-align: middle;
  65. }
  66. div.download {
  67.         float: right;
  68. }
  69. div.caption-container {
  70.         position: relative;
  71.         clear: left;
  72.         height: 75px;
  73.         color: #fff;
  74. }
  75. span.image-caption {
  76.         display: block;
  77.         position: absolute;
  78.         width: 611px;
  79.         top: 0;
  80.         left: 0;
  81. }
  82. div.caption {
  83.         padding: 12px;
  84. }
  85. div.image-title {
  86.         font-weight: bold;
  87.         font-size: 1.4em;
  88. }
  89. div.image-desc {
  90.         line-height: 1.3em;
  91.         padding-top: 12px;
  92. }
  93. div.navigation {
  94.         /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
  95. }
  96. ul.thumbs {
  97.         clear: both;
  98.         margin: 0;
  99.         padding: 0;
  100.         width: 160px;
  101.         margin-top: 10px;
  102. }
  103. ul.thumbs li {
  104.         float: left;
  105.         padding: 0;
  106.         margin: 2px 3px 2px 0;
  107.         list-style: none;
  108. }
  109. a.thumb {
  110.         display: block;
  111.         border: 1px solid #ccc;
  112. }
  113. ul.thumbs li.selected a.thumb {
  114.         background: #000;
  115. }
  116. a.thumb:focus {
  117.         outline: none;
  118. }
  119. ul.thumbs img {
  120.         border: none;
  121.         display: block;
  122. }
  123. div.pagination {
  124.         clear: both;
  125. }
  126. div.navigation div.top {
  127.         margin-bottom: 12px;
  128.         height: 11px;
  129. }
  130. div.navigation div.bottom {
  131.         margin-top: 12px;
  132. }
  133. div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
  134.         display: block;
  135.         float: left;
  136.         margin-right: 2px;
  137.         padding: 4px 7px 2px 7px;
  138.         border: 1px solid #ccc;
  139. }
  140. div.pagination a:hover {
  141.         background-color: #eee;
  142.         text-decoration: none;
  143. }
  144. div.pagination span.current {
  145.         font-weight: bold;
  146.         background-color: #000;
  147.         border-color: #000;
  148.         color: #fff;
  149. }
  150. div.pagination span.ellipsis {
  151.         border: none;
  152.         padding: 5px 0 3px 2px;
  153. }
  154. div.navigation a.prev {
  155.         background-image: url(prevPageArrowWhite.gif);
  156. }
  157. div.navigation a.next {
  158.         background-image: url(nextPageArrowWhite.gif);
  159. }
clone this paste RAW Paste Data