1 | html, body, div, span, applet, object, iframe, h2, h1, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, |
---|
2 | del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, |
---|
3 | form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td |
---|
4 | { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; } |
---|
5 | |
---|
6 | body { line-height: 1; } |
---|
7 | ol, ul { list-style: none } |
---|
8 | blockquote, q { quotes: none } |
---|
9 | blockquote:before, |
---|
10 | blockquote:after, |
---|
11 | q:before, |
---|
12 | q:after { content: ''; content: none } |
---|
13 | :focus { outline: 0 }/* remember to define focus styles! */ |
---|
14 | ins { text-decoration: none }/* remember to highlight inserts somehow! */ |
---|
15 | del { text-decoration: line-through } |
---|
16 | table { border-collapse: collapse; border-spacing: 0 }/* tables still need 'cellspacing="0"' in the markup */ |
---|
17 | |
---|
18 | /* FORM */ |
---|
19 | fieldset, form, label, legend { margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit; vertical-align:baseline; } |
---|
20 | fieldset { margin: 0; padding-right: 2em; } |
---|
21 | legend { padding: 0; } |
---|
22 | label { float:left; width:12em; clear:left; text-align:left; cursor:hand; } |
---|
23 | textarea, input, select, label, button, optgroup { margin-top:5px; } |
---|
24 | input[type="checkbox"] ,input[type="radio"] { margin-bottom:7px; } |
---|
25 | |
---|
26 | fieldset { border:0px; } |
---|
27 | legend { display: none; } |
---|
28 | label { color:#999; } |
---|
29 | textarea { border: 1px solid #666; } |
---|
30 | textarea:focus, |
---|
31 | input:focus { border: 1px solid #666; } |
---|
32 | select { background-color: #fff; color: #000; } |
---|
33 | input { border: 1px solid #444; background-color: #222; color: #666; } |
---|
34 | input[type="submit"] { background-color: #666; color: #222; } |
---|
35 | input[type="submit"]:hover { background-color: #222; color: #666; cursor: hand; } |
---|
36 | input[type="checkbox"] { color: #000; border: 0 none; vertical-align: middle; } |
---|
37 | input[type="radio"] { background-color: transparent; border:0 none; color: #000; } |
---|
38 | option { background-color:#222; color:#000; } |
---|
39 | optgroup { background-color:#ccc; color:#000; } |
---|
40 | |
---|
41 | form.properties fieldset { border: 1px solid; margin: 15px; padding: 1em;} |
---|
42 | form.properties legend { display: block; padding:5px;} |
---|
43 | form.properties li { clear:left; line-height:1.8em; margin-bottom:0.5em; padding:0; } |
---|
44 | form.properties span.property { float:left; font-weight:bold; margin:0; padding:0 0.5em 0 0; text-align:right; width:50%; } |
---|
45 | form.properties span.property label { float:left; width:98%; display:block; clear:left; text-align:right; margin-top:0; } |
---|
46 | form #themeSelect, form #languageSelect { float: left; line-height:0.8em; padding:0.3em 0 0.7em 0; cursor:pointer;} |
---|
47 | |
---|
48 | /***** STYLE ****/ |
---|
49 | html, body { |
---|
50 | background-color: #111; |
---|
51 | color: #666; |
---|
52 | font-family: |
---|
53 | Corbel, |
---|
54 | "Lucida Grande", |
---|
55 | "Lucida Sans Unicode", |
---|
56 | "Lucida Sans", |
---|
57 | "DejaVu Sans", |
---|
58 | "Bitstream Vera Sans", |
---|
59 | "Liberation Sans", |
---|
60 | Verdana, |
---|
61 | sans-serif; |
---|
62 | } |
---|
63 | |
---|
64 | p { margin: 10px;} |
---|
65 | a, a:visited { color: #ddd; text-decoration: none; } |
---|
66 | a:hover { color: #fff } |
---|
67 | |
---|
68 | #the_page { position: relative; width: 1024px; margin: 0 auto; text-align: center } |
---|
69 | #theHeader,.content { text-align: left } |
---|
70 | |
---|
71 | #theHeader { padding-top: 20px; } |
---|
72 | #theHeader h1 { color: #fff; font-size: 1.4em } |
---|
73 | #theHeader h1, |
---|
74 | #theHeader h1 a, |
---|
75 | #theHeader h1 a:visited, |
---|
76 | #theHeader h1 a:hover {color: #fff; border: none } |
---|
77 | |
---|
78 | #theHeader p { margin-left: 20px; margin-top: -4px; margin: -4px 0 10px 20px; color: #666; border: none } |
---|
79 | |
---|
80 | #headerMenu { position: absolute; top: 40px; right: 0 } |
---|
81 | #headerMenu li { float: left; margin-left: 40px } |
---|
82 | |
---|
83 | #imagerotator {position: relative; margin-top: 0px; height: 100px } |
---|
84 | #imagerotator img {position: absolute; top: 0; left: 0 } |
---|
85 | |
---|
86 | #copyright { clear: both; margin: 20px 0 5px 0; padding-top: 5px; border-top: 2px solid #222; text-align: left; text-align: right; line-height: 1.2em } |
---|
87 | #copyright span { color: #444; } |
---|
88 | #copyright a, |
---|
89 | #copyright a:visited, |
---|
90 | #copyright a:hover { color: #444; } |
---|
91 | #copyright a:hover { color: #666; } |
---|
92 | #copyright .cName { color: #555; font-weight: bold } |
---|
93 | |
---|
94 | /***** LAYOUT GALLERY ****/ |
---|
95 | |
---|
96 | #rss { position: absolute; top: 10px; right: 0; } |
---|
97 | #rss a { display: block; width: 28px; height: 28px; text-indent: -2000px; border: 0; background: transparent url('icon/rss.png'); } |
---|
98 | |
---|
99 | .content { float: right; width: 1024px; margin: 20px 0; padding-bottom: 10px; position: relative; background: transparent url(skin/1024darkBottom.png) bottom left; } |
---|
100 | .content .titrePage { background: transparent url(skin/1024darkTop.png) no-repeat; } |
---|
101 | .content dl { margin: 25px; } |
---|
102 | |
---|
103 | BODY#theCategoryPage .content { width: 750px; background: transparent url(skin/750darkBottom.png) bottom left; } |
---|
104 | BODY#theCategoryPage .content .titrePage { background: transparent url(skin/750darkTop.png) no-repeat; } |
---|
105 | |
---|
106 | #menubar { float: left; width: 264px; margin: 10px 0 20px 0; text-align: left; color: #888; } |
---|
107 | #menubar dl { width: 264px; background: transparent url(skin/264grey3.png); margin-top: 10px; } |
---|
108 | #menubar dt { margin-left: 10px; padding-top: 10px; margin-bottom: 10px; font-size: 1.2em; font-weight: 700 } |
---|
109 | |
---|
110 | #menubar dd { width: 264px; background: transparent url(skin/264grey3.png) bottom left; } |
---|
111 | #menubar dd a, |
---|
112 | #menubar dd a:visited { color: #eee; } |
---|
113 | #menubar dd a:hover { color: #f70; } |
---|
114 | |
---|
115 | #menubar dt a, |
---|
116 | #menubar dt a:visited { color: #f70; } |
---|
117 | #menubar dt a:hover { color: #eee; } |
---|
118 | |
---|
119 | #menubar dd ul, |
---|
120 | #menubar form, |
---|
121 | #menubar #menuTagCloud { padding: 0 0 10px 30px; } |
---|
122 | |
---|
123 | #menubar dd ul ul { padding-left: 15px; } |
---|
124 | |
---|
125 | #menubar #quickconnect div { margin-bottom: 3px; } |
---|
126 | |
---|
127 | #menubar .totalImages { margin:0 10px; padding-bottom:10px; } |
---|
128 | #menubar .actions { padding:0; } |
---|
129 | #menubar .button { float:right; margin-right:10px; } |
---|
130 | |
---|
131 | /* ELEMENTS */ |
---|
132 | |
---|
133 | .titrePage { padding: 10px 0 5px 10px; height: 30px; } |
---|
134 | .titrePage h1 { float: left; } |
---|
135 | .additional_info { clear: both; padding: 10px; text-indent: 50px; color: #333; text-align:justify;} |
---|
136 | .thumbnailCategories { margin-left: 10px; clear:both; } |
---|
137 | |
---|
138 | .thumbnailCategories li { background: transparent url(skin/catBg.png) 0 0; width: 355px; height: 170px; float: left; margin-right: 15px; margin-top: 10px } |
---|
139 | |
---|
140 | .thumbnailCategories li.hover { background: transparent url(skin/catBg.png) 0 -170px; } |
---|
141 | |
---|
142 | .thumbnailCategories .illustration { float: left; width: 150px; margin: 10px; } |
---|
143 | .thumbnailCategories .description { float: right; width: 180px; margin-top: 10px; height: 160px; overflow:hidden; } |
---|
144 | .thumbnailCategories .description h3 { margin-bottom: 10px; font-weight: 700; color: #f70; } |
---|
145 | .thumbnailCategories .dates { } |
---|
146 | .thumbnailCategories .Nb_images { font-size: 0.8em; margin-bottom: 10px; } |
---|
147 | .thumbnailCategories .desc { font-size: 0.9em; } |
---|
148 | |
---|
149 | .thumbnails { margin-left: 10px; min-height: 540px; height: auto !important; height: 540px; text-align: center;} |
---|
150 | .thumbnails li { float: left; display: inline; width: 170px; height: 170px; margin-left: 10px; margin-bottom: 10px; background: transparent url(skin/thumbBg.png) 0 0;} |
---|
151 | .thumbnails li.hover { background: transparent url(skin/thumbBg.png) 0 -170px; } |
---|
152 | .thumbnails li .wrap2 { width:170px; height:172px; display:table-cell; vertical-align:middle;} |
---|
153 | .thumbnails li img { margin: 10px; border: 1px solid #222; border-left: 1px solid #444; border-bottom: 1px solid #444;} |
---|
154 | .thumbnails li.hover img { border: 1px solid #111; border-left: 1px solid #222; border-bottom: 1px solid #222; } |
---|
155 | |
---|
156 | .thumbnails .thumbLegend { display:none; } |
---|
157 | |
---|
158 | .categoryActions { float:right; margin-right: 10px; } |
---|
159 | .categoryActions li { float: left; margin-left:5px; display: inline; } |
---|
160 | #order { float: left; margin: 2px 5px 0 0;} |
---|
161 | #orderText { float: left; margin: 2px 8px 0 0; } |
---|
162 | #playSlideshow { width: 200px; float: left; margin-left: 20px; margin-top: 10px; } |
---|
163 | #playSlideshow a { color: #666; } |
---|
164 | |
---|
165 | .navigationBar { clear: both; color:#444; text-align: right; padding: 10px 30px } |
---|
166 | .navigationBar span, |
---|
167 | .navigationBar a { border: 1px solid; padding: 0px 5px; } |
---|
168 | .navigationBar a, |
---|
169 | .navigationBar a:visited { color: #999} |
---|
170 | .navigationBar a:hover { color: #eee} |
---|
171 | |
---|
172 | .navigationBarSimple { color:#666; text-align: center; } |
---|
173 | |
---|
174 | .navigationBarSimple span, |
---|
175 | .navigationBarSimple a { height: 150px; width: 20px; border: 0; padding: 0; text-indent: -3000px; } |
---|
176 | |
---|
177 | .navigationBarSimple .prew { position: absolute; top: 235px; left: 0px; background: transparent url(icon/prew.png) no-repeat scroll; } |
---|
178 | .navigationBarSimple .next { position: absolute; top: 235px; right: 0px; background: transparent url(icon/next.png) no-repeat scroll; } |
---|
179 | .navigationBarSimple a.prew:hover { background: transparent url(icon/prew.png) 0 -150px no-repeat scroll; } |
---|
180 | .navigationBarSimple a.next:hover { background: transparent url(icon/next.png) 0 -150px no-repeat scroll; } |
---|
181 | |
---|
182 | /****** PHOTO */ |
---|
183 | #imageHeaderBar { height: 30px;} |
---|
184 | |
---|
185 | #slidshowToolBar { position: absolute; top: 60px; margin-left: 400px; height: 33px; } |
---|
186 | |
---|
187 | #imageHeaderBar .imageNumber { width: 70px; font-size: 3em; font-style: italic; color: #222; position: absolute; top: 80px; left: 20px; } |
---|
188 | #imageHeaderBar .browsePath { float: left; } |
---|
189 | .randomButtons { float: right; } |
---|
190 | .randomButtons li { float: left; margin-left: 15px;} |
---|
191 | |
---|
192 | #theImage { clear: left; text-align: left; margin-top: 20px; } |
---|
193 | #imageContainer { position: relative; width: 1024px; height: 600px; } |
---|
194 | #theImg { display: block; margin: 0 auto; border: none; text-align: center; } |
---|
195 | |
---|
196 | #linkThumbs { position: absolute; top: 0; left: 400px; width: 224px; height: 600px; } |
---|
197 | #linkPrev { position: absolute; top: 0; left: 0; width: 150px; height: 600px; text-align: left; background: transparent url(icon/thumbPrev.png) center left no-repeat; } |
---|
198 | #linkNext { position: absolute; top: 0; left: 874px; width: 150px; height: 600px; text-align: right; background: transparent url(icon/thumbNext.png) center right no-repeat; } |
---|
199 | #linkPrev img { margin-left: 0; margin-top: 225px; border: 1px solid #f70; } |
---|
200 | #linkNext img { margin-right: 0; margin-top: 225px; border: 1px solid #f70; } |
---|
201 | |
---|
202 | #imageInfo { margin-top: 10px; } |
---|
203 | #imageInfoLeft { float: left; width: 500px; text-align: left; margin-bottom: 10px; } |
---|
204 | #imageInfoRight { float: right; width: 250px; height: 40px; text-align: right; margin-bottom: 10px; } |
---|
205 | |
---|
206 | #ratingSummary { margin-bottom: 3px; } |
---|
207 | |
---|
208 | #rateForm input { height: 25px; margin: 0} |
---|
209 | |
---|
210 | .rateButtonEmpty, |
---|
211 | .rateButtonReset, |
---|
212 | .rateButtonHalf, |
---|
213 | .rateButtonFull, |
---|
214 | .rateButtonUserFull, |
---|
215 | .rateButtonUserEmpty, |
---|
216 | .rateButtonUserHalf { padding:0; border:0; cursor: pointer;} |
---|
217 | |
---|
218 | .rateButtonSelected { font-weight:bold; font-size:120%; } |
---|
219 | .rateButtonEmpty { width:25px; background: url('icon/star.png') 0 0 no-repeat scroll; } |
---|
220 | .rateButtonReset { width:25px; background: url('icon/star.png') 0 -25px no-repeat scroll; } |
---|
221 | .rateButtonHalf { width:25px; background: url('icon/star.png') 0 -50px no-repeat scroll; } |
---|
222 | .rateButtonFull { width:25px; background: url('icon/star.png') 0 -75px no-repeat scroll; } |
---|
223 | .rateButtonUserFull { width:25px; background: url('icon/star.png') 0 -100px no-repeat scroll; } |
---|
224 | .rateButtonUserEmpty { width:25px; background: url('icon/star.png') 0 -125px no-repeat scroll; } |
---|
225 | .rateButtonUserHalf { width:25px; background: url('icon/star.png') 0 -150px no-repeat scroll; } |
---|
226 | |
---|
227 | .rateButtonEmpty2 { width:25px; background: url('icon/star.png') 0 0 no-repeat scroll; } |
---|
228 | .rateButtonHalf2 { width:25px; background: url('icon/star.png') 0 -50px no-repeat scroll; } |
---|
229 | .rateButtonFull2 { width:25px; background: url('icon/star.png') 0 -75px no-repeat scroll; } |
---|
230 | .rateButtonUserFull2 { width:25px; background: url('icon/star.png') 0 -100px no-repeat scroll; } |
---|
231 | .rateButtonUserEmpty2 { width:25px; background: url('icon/star.png') 0 -125px no-repeat scroll; } |
---|
232 | .rateButtonUserHalf2 { width:25px; background: url('icon/star.png') 0 -150px no-repeat scroll; } |
---|
233 | |
---|
234 | .rateShow { float: right; width: 125px; height: 25px; background: url('icon/star.png') repeat-x scroll;} |
---|
235 | .rateFull1 { display: block; float: left; width: 25px; height: 25px; background: url('icon/star.png') 0 -75px repeat-x scroll;} |
---|
236 | .rateFull2 { display: block; float: left; width: 50px; height: 25px; background: url('icon/star.png') 0 -75px repeat-x scroll;} |
---|
237 | .rateFull3 { display: block; float: left; width: 75px; height: 25px; background: url('icon/star.png') 0 -75px repeat-x scroll;} |
---|
238 | .rateFull4 { display: block; float: left; width: 100px; height: 25px; background: url('icon/star.png') 0 -75px repeat-x scroll;} |
---|
239 | .rateFull5 { display: block; float: left; width: 125px; height: 25px; background: url('icon/star.png') 0 -75px repeat-x scroll;} |
---|
240 | .rateHalf { display: block; float: left; width: 25px; height: 25px; background: url('icon/star.png') 0 -50px repeat-x scroll;} |
---|
241 | |
---|
242 | /* OTHERS */ |
---|
243 | |
---|
244 | .content form { margin: 10px; } |
---|
245 | |
---|
246 | .errors, |
---|
247 | .infos { margin: 10px; color: #fff; font-weight: 700; } |
---|
248 | .errors p, |
---|
249 | .infos p { margin: 30px 0 10px ; color: #900; } |
---|
250 | .errors li, |
---|
251 | .infos li { list-style: decimal; margin-left: 30px;} |
---|
252 | |
---|
253 | .idLink { margin-top: 20px; } |
---|
254 | |
---|
255 | /* MOOTOOLS PLUGIN */ |
---|
256 | |
---|
257 | .elSelect { width: 160px; height: 20px; background: transparent url(elSelect/select_bg.png) no-repeat 0 0; } |
---|
258 | .elSelect .clear { clear: both; } |
---|
259 | |
---|
260 | .elSelect .selected { color: #333 !important; background-color: #999 !important; } |
---|
261 | .elSelect .selectedOption { color: #222; float: left; padding: 4px 0 0 6px; width: 87px; font-weight: bold; font-size: 12px; overflow: hidden; cursor:pointer; } |
---|
262 | .elSelect .option { color: #555; background-color: #bbb; border-left: solid 1px #555; border-right: solid 1px #555; padding: 4px 0 5px 5px; text-align: left; font-weight: bold; font-size: 12px; } |
---|
263 | .elSelect .disabled { color:#999; background-color: #333; border-left: solid 1px #555; border-right: solid 1px #555; } |
---|
264 | .elSelect .dropDown { width: 23px; height: 20px; float: right; background: url(elSelect/select_arrow.png) no-repeat 0% 0%; cursor:pointer;} |
---|
265 | .elSelect .optionsContainerTop { background: url(elSelect/top_center.gif) repeat-x 0% 0%; position: absolute; width: 100%; height: 5px; } |
---|
266 | .elSelect .optionsContainerTop div { background: url(elSelect/top_left.gif) no-repeat 0% 0%; width: 100%; height: 5px; } |
---|
267 | .elSelect .optionsContainerTop div div { background: url(elSelect/top_right.gif) no-repeat 100% 0%; width: 100%; height: 5px; } |
---|
268 | .elSelect .optionsContainerBottom { position: absolute; margin: -5px 0 0 0; width: 100%; height: 5px; background: url(elSelect/bottom_center.gif) repeat-x 0% 0%;} |
---|
269 | .elSelect .optionsContainerBottom div { background: url(elSelect/bottom_left.gif) no-repeat 0% 0%; width: 100%; height: 5px; } |
---|
270 | .elSelect .optionsContainerBottom div div { background: url(elSelect/bottom_right.gif) no-repeat 100% 0%; width: 100%; height: 5px; } |
---|
271 | .elSelect .optionsContainer { position: absolute; display: none; z-index: 1; } |
---|
272 | .icon_1 { background: url(elSelect/icon_1.gif) no-repeat 4px 50%; padding-left: 20px !important; } |
---|
273 | .icon_2 { background: url(elSelect/icon_2.gif) no-repeat 4px 50%; padding-left: 20px !important; } |
---|