1 body:after { 2 content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png); 3 display: none; 4 } { 7 position: absolute; 8 top: 0; 9 left: 0; 10 z-index: 9999; 11 background-color: black; 12 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 13 opacity: 0.8; 14 display: none; 15 } { 18 position: absolute; 19 left: 0; 20 width: 100%; 21 z-index: 10000; 22 text-align: center; 23 line-height: 0; 24 font-weight: normal; 25 } { 28 display: block; 29 height: auto; 30 max-width: inherit; 31 -webkit-border-radius: 3px; 32 -moz-border-radius: 3px; 33 -ms-border-radius: 3px; 34 -o-border-radius: 3px; 35 border-radius: 3px; 36 } { 39 border: none; 40 } { 43 position: relative; 44 background-color: white; 45 *zoom: 1; 46 width: 250px; 47 height: 250px; 48 margin:5em auto 0.5em auto; 49 -webkit-border-radius: 4px; 50 -moz-border-radius: 4px; 51 -ms-border-radius: 4px; 52 -o-border-radius: 4px; 53 border-radius: 4px; 54 } { 57 content: ""; 58 display: table; 59 clear: both; 60 } { 63 padding: 4px; 64 } { 67 position: absolute; 68 top: 43%; 69 left: 0; 70 height: 25%; 71 width: 100%; 72 text-align: center; 73 line-height: 0; 74 } { 77 display: block; 78 width: 32px; 79 height: 32px; 80 margin: 0 auto; 81 background: url(../images/loading.gif) no-repeat; 82 } { 85 position: absolute; 86 top: 0; 87 left: 0; 88 height: 100%; 89 width: 100%; 90 z-index: 10; 91 } { 94 left: 0; 95 } { 98 outline: none; 99 background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); 100 } { 103 height: 100%; 104 cursor: pointer; 105 display: block; 106 } { 109 width: 34%; 110 left: 0; 111 float: left; 112 background: url(../images/prev.png) left 48% no-repeat; 113 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 114 opacity: 0; 115 -webkit-transition: opacity 0.6s; 116 -moz-transition: opacity 0.6s; 117 -o-transition: opacity 0.6s; 118 transition: opacity 0.6s; 119 } { 122 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 123 opacity: 1; 124 } { 127 width: 64%; 128 right: 0; 129 float: right; 130 background: url(../images/next.png) right 48% no-repeat; 131 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 132 opacity: 0; 133 -webkit-transition: opacity 0.6s; 134 -moz-transition: opacity 0.6s; 135 -o-transition: opacity 0.6s; 136 transition: opacity 0.6s; 137 } { 140 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 141 opacity: 1; 142 } { 145 margin: 0 auto; 146 padding-top: 5px; 147 *zoom: 1; 148 width: 100%; 149 -moz-border-radius-bottomleft: 4px; 150 -webkit-border-bottom-left-radius: 4px; 151 border-bottom-left-radius: 4px; 152 -moz-border-radius-bottomright: 4px; 153 -webkit-border-bottom-right-radius: 4px; 154 border-bottom-right-radius: 4px; 155 } { 158 content: ""; 159 display: table; 160 clear: both; 161 } { 164 padding: 0 4px; 165 color: #ccc; 166 } { 169 width: 85%; 170 float: left; 171 text-align: left; 172 line-height: 1.1em; 173 } { 176 font-size: 13px; 177 font-weight: bold; 178 line-height: 1em; 179 } { 182 display: block; 183 clear: left; 184 padding-bottom: 1em; 185 font-size: 12px; 186 color: #999999; 187 } { 190 display: block; 191 float: right; 192 width: 30px; 193 height: 30px; 194 background: url(../images/close.png) top right no-repeat; 195 text-align: right; 196 outline: none; 197 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 198 opacity: 0.7; 199 -webkit-transition: opacity 0.2s; 200 -moz-transition: opacity 0.2s; 201 -o-transition: opacity 0.2s; 202 transition: opacity 0.2s; 203 } { 206 cursor: pointer; 207 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 208 opacity: 1; 209 }