nxhtml/nxhtml/doc/js/smoothgallery/css/jd.gallery.css

   1 #myGallery
   2 {
   3         width: 460px;
   4         height: 345px;
   5         z-index:5;
   6         display: none;
   7         border: 1px solid #000;
   8 }
   9
  10 .jdGallery
  11 {
  12         overflow: hidden;
  13         position: relative;
  14 }
  15
  16 .jdGallery img
  17 {
  18         border: 0;
  19         margin: 0;
  20 }
  21
  22 .jdGallery .slideElement
  23 {
  24         width: 100%;
  25         height: 100%;
  26         background-color: #000;
  27         background-repeat: no-repeat;
  28 }
  29
  30 .jdGallery .loadingElement
  31 {
  32         width: 100%;
  33         height: 100%;
  34         position: absolute;
  35         left: 0;
  36         top: 0;
  37         background-color: #000;
  38         background-repeat: no-repeat;
  39         background-position: center center;
  40         background-image: url('img/loading-bar-black.gif');
  41 }
  42
  43 .jdGallery .slideInfoZone
  44 {
  45         position: absolute;
  46         z-index: 10;
  47         width: 100%;
  48         margin: 0px;
  49         left: 0;
  50         bottom: 0;
  51         height: 40px;
  52         background: #333;
  53         color: #fff;
  54         text-indent: 0;
  55         overflow: hidden;
  56 }
  57
  58 * html .jdGallery .slideInfoZone
  59 {
  60         bottom: -1px;
  61 }
  62
  63 .jdGallery .slideInfoZone h2
  64 {
  65         padding: 0;
  66         font-size: 80%;
  67         margin: 0;
  68         margin: 2px 5px;
  69         font-weight: bold;
  70         color: inherit;
  71 }
  72
  73 .jdGallery .slideInfoZone p
  74 {
  75         padding: 0;
  76         font-size: 80%;
  77         margin: 2px 5px;
  78         color: #eee;
  79 }
  80
  81 .jdGallery div.carouselContainer
  82 {
  83         position: absolute;
  84         height: 135px;
  85         width: 100%;
  86         z-index: 10;
  87         margin: 0px;
  88         left: 0;
  89         top: 0;
  90 }
  91
  92 .jdGallery a.carouselBtn
  93 {
  94         position: absolute;
  95         bottom: 0;
  96         right: 30px;
  97         height: 20px;
  98         /*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
  99         text-align: center;
 100         padding: 0 10px;
 101         font-size: 13px;
 102         background: #333;
 103         color: #fff;
 104         cursor: pointer;
 105 }
 106
 107 .jdGallery .carousel
 108 {
 109         position: absolute;
 110         width: 100%;
 111         margin: 0px;
 112         left: 0;
 113         top: 0;
 114         height: 115px;
 115         background: #333;
 116         color: #fff;
 117         text-indent: 0;
 118         overflow: hidden;
 119 }
 120
 121 .jdGallery .carousel .carouselWrapper
 122 {
 123         position: absolute;
 124         width: 100%;
 125         height: 78px;
 126         top: 10px;
 127         left: 0;
 128         overflow: hidden;
 129 }
 130
 131 .jdGallery .carousel .carouselInner
 132 {
 133         position: relative;
 134 }
 135
 136 .jdGallery .carousel .carouselInner .thumbnail
 137 {
 138         cursor: pointer;
 139         background: #000;
 140         background-position: center center;
 141         float: left;
 142         border: solid 1px #fff;
 143 }
 144
 145 .jdGallery .carousel .label
 146 {
 147         font-size: 13px;
 148         position: absolute;
 149         bottom: 5px;
 150         left: 10px;
 151         padding: 0;
 152         margin: 0;
 153 }
 154
 155 .jdGallery .carousel .label .number
 156 {
 157         color: #b5b5b5;
 158 }
 159
 160 .jdGallery a
 161 {
 162         font-size: 100%;
 163         text-decoration: none;
 164         color: inherit;
 165 }
 166
 167 .jdGallery a.right, .jdGallery a.left
 168 {
 169         position: absolute;
 170         height: 99%;
 171         width: 25%;
 172         cursor: pointer;
 173         z-index:10;
 174         filter:alpha(opacity=20);
 175         -moz-opacity:0.2;
 176         -khtml-opacity: 0.2;
 177         opacity: 0.2;
 178 }
 179
 180 * html .jdGallery a.right, * html .jdGallery a.left
 181 {
 182         filter:alpha(opacity=50);
 183 }
 184
 185 .jdGallery a.right:hover, .jdGallery a.left:hover
 186 {
 187         filter:alpha(opacity=80);
 188         -moz-opacity:0.8;
 189         -khtml-opacity: 0.8;
 190         opacity: 0.8;
 191 }
 192
 193 .jdGallery a.left
 194 {
 195         left: 0;
 196         top: 0;
 197         background: url('img/fleche1.png') no-repeat center left;
 198 }
 199
 200 * html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }
 201
 202 .jdGallery a.right
 203 {
 204         right: 0;
 205         top: 0;
 206         background: url('img/fleche2.png') no-repeat center right;
 207 }
 208
 209 * html .jdGallery a.right { background: url('img/fleche2.gif') no-repeat center right; }
 210
 211 .jdGallery a.open
 212 {
 213         left: 0;
 214         top: 0;
 215         width: 100%;
 216         height: 100%;
 217 }
 218
 219 .withArrows a.open
 220 {
 221         position: absolute;
 222         top: 0;
 223         left: 25%;
 224         height: 99%;
 225         width: 50%;
 226         cursor: pointer;
 227         z-index: 10;
 228         background: none;
 229         -moz-opacity:0.8;
 230         -khtml-opacity: 0.8;
 231         opacity: 0.8;
 232 }
 233
 234 .withArrows a.open:hover { background: url('img/open.png') no-repeat center center; }
 235
 236 * html .withArrows a.open:hover { background: url('img/open.gif') no-repeat center center;
 237         filter:alpha(opacity=80); }
 238