source: extensions/hr_os/theme.css @ 16380

Last change on this file since 16380 was 16380, checked in by flop25, 12 years ago

drop down menu styled and successfully placed (relative positions changed)
custom size for the picture page :
pattern added
concatenation of the 'define derivative'
css to center the picture

File size: 13.2 KB
Line 
1/* ---------------------------------------------------------------------------
2Theme hr_os
3
4child-theme of hr_os
5
6by flop25 http://www.planete-flop.fr/
7------------------------------------------------------------------------------ */
8
9@import "menu.css";
10@import "iconset.css";
11
12* { margin: 0; padding: 0; border: 0; }
13
14body {
15        background-image: url(img/background.bg3.1.jpg);
16        background-repeat: repeat-y;
17        background-position: center center;
18        background-color:#7f7f7f;
19        font-size:0.7em;
20        font-family: Verdana,Arial,Helvetica,sans-serif;
21}
22/*body {
23        background-image: url(img/background.bg3.jpg);
24        background-repeat: repeat-y;
25        background-position: center center;
26        background-color:#a19fa0;
27        font-size:0.7em;
28        font-family: Verdana,Arial,Helvetica,sans-serif;
29}
30*/
31#comments H2, .titrePage h2 {
32background-image: url(img/fondMenu2_2.jpg);
33background-repeat:repeat-x;
34background-color:#000000;
35        color: #FFF;
36        border: 0;
37}
38.titrePage a, .categoryActions, .calendarViews {
39        color: #FFF;
40}
41
42/* Common styles
43-------------------------------------------------------- */
44h2, h3 { color:#696969; }
45ul { list-style: none; }
46ul li { list-style: none; }
47
48a, a:link { color:#0066CC; text-decoration: none; border:0; }
49a:hover { text-decoration: none; border-bottom:1px solid #0066CC;}
50/*a:visited { color:#333333;}*/
51
52pre { overflow: auto; width: 100%; height: auto; }
53.left { float: left; }
54.right { float: right; }
55
56img{ border: 0; }
57#derivativeSwitchBox, #sortOrderBox {
58        font-size: 11px;
59        color: #000033;
60        text-shadow: 0 0 2px #ccc;
61        padding: 4px 8px;
62        border: 1px solid rgba(255,255,255,0.25);
63        background-color: rgb(255,255,255);
64        background-color: rgba(255,255,255,0.92);
65        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#fff));
66        border-radius: 3px;
67        -webkit-border-radius: 3px;
68        -moz-border-radius: 3px;
69        box-shadow: 0 0 5px #555;
70        -webkit-box-shadow: 0 0 5px #555;
71        -moz-box-shadow: 0 0 5px #555;
72}
73#derivativeSwitchBox A, #sortOrderBox A {
74        color: #000;
75}
76
77#derivativeSwitchBox A:hover, #sortOrderBox A:hover {
78        text-shadow: 0 0 2px #000;
79}
80
81
82/* Page
83-------------------------------------------------------- */
84BODY#thePicturePage,BODY#theCategoryPage, BODY#theTagsPage {}
85
86#the_page {
87        width: 800px;
88        margin: 0 auto;
89        background: transparent url(img/back.jpg) repeat-y top center;
90}
91
92#content div.titrePage { padding: 10px 3px; }
93
94/* Header
95-------------------------------------------------------- */
96#theHeader {
97        background: transparent url(img/header.jpg) no-repeat center bottom;
98        height: 180px;
99        margin: 0 auto;
100}
101        #theHeader h1 {
102        font-size: 2em;
103        margin: 0;
104        /*      padding: 170px 34px 0 34px; */
105                color: #FFFFFF;
106        text-align: left;
107        position: absolute;
108        left: 30px;
109        top: 150px;
110        }
111        #theHeader p {display:none;}
112/*      #theHeader a:link, #theHeader a:visited, #theHeader a:hover { color: #FFF; text-decoration: none; }*/
113
114body#theCommentsPage .content, body#theUploadPage .content, body#theRegisterPage .content, body#theIdentificationPage .content, body#theProfilePage .content, body#theSearchPage .content, body#theAboutPage .content, body#thePopuphelpPage .content, body#thePasswordPage .content, body#theNotificationPage .content, body#theTagsPage .content, body#theNBMPage .content, #content, BODY#theAdminPage #content, BODY#theTagsPage #content, #theCategoryPage .content {
115        width: 750px;
116        margin: 0 auto;
117}
118
119/*=========================================================================================*/
120
121.row1 { background-color: #999;}
122.throw { background-color: #999;}
123
124/*      Page Catégories
125-----------------------------------------------------------------------------------------------*/
126#content div.thumbnailCategory { 
127        padding: 2px; 
128        text-align: center;
129}
130#content div.thumbnailCategory:hover {
131        border:1px solid #0066cc;
132        background-color: #eee;
133}
134#content ul.thumbnailCategories li { width:49.9%; }
135
136/*      Page Image
137-----------------------------------------------------------------------------------------------*/
138#linkNext {
139    float: right;
140    margin-left: 10px;
141    margin-right: 15px;
142}
143#linkPrev {
144    float: left;
145    margin-left: 15px;
146    margin-right: 10px;
147}
148#imageToolBar, #imageHeaderBar {
149        width: 740px;
150        margin: 10px auto;
151}
152#imageToolBar .imageNumber {
153    float: right;
154    margin: -30px 9px 0 0;
155}
156#imageHeaderBar{
157        background: #F5F5F5;
158        border: 1px solid #CDCDCD;
159        border-width: 1px 0;
160        padding: 5px 8px;
161}
162
163#theImage IMG {
164  padding: 5px;
165  border: 1px solid #aaa;
166}
167
168#imageHeaderBar H2 { 
169        border: none;
170        clear: both;
171        padding: 0;
172        text-align: center;
173        padding: 0.5em 0 0 0;
174}
175#imageHeaderBar .browsePath a { color:#0066CC; text-decoration: none; }
176#imageHeaderBar .browsePath a:hover { color:#333333; }
177#theMainImage {max-width:730px}
178/*#imageToolBar A:hover { background-color: #a0a0a0; }*/
179
180.infoTable{ margin: 20px auto; }
181#thumbPrev{ margin: 20px 0 0 20px; }
182#thumbNext{ margin: 20px 20px 0 0;}
183a#thumbPrev, a#thumbNext { text-decoration: none; border:0; }
184
185/*      commentaires
186-----------------------------------------------------------------------------------------------*/
187
188#comments{ width: 760px; margin: 20px auto; }
189#comments DIV.comment BLOCKQUOTE { border: 1px solid #5f5f5f; border-left: 2px solid #696969; }
190
191FIELDSET, INPUT, SELECT, TEXTAREA, TABLE.table2, #infos,
192#content DIV.comment  A.illustration IMG, #content DIV.thumbnailCategory { border: 1px solid gray; }
193
194textarea { width:80%; }
195
196/*      miniatures
197-----------------------------------------------------------------------------------------------*/
198.thumbnails SPAN, .thumbnails .wrap2 A, .thumbnails LABEL, .thumbnailCategory DIV.illustration {width:auto;}
199#content DIV.thumbnailCategory DIV.description  p { text-align: left; }
200
201/*#content ul.thumbnails span.wrap1 { margin: 0 10px; }*/
202#content UL.thumbnails SPAN.wrap2 img { padding: 5px; border: 1px solid #ccc; }
203#content UL.thumbnails SPAN.wrap2 img:hover { border-color: #06c; }
204
205#content UL.thumbnails LI.thumbCat SPAN.wrap2 { border-style: hidden; background-color: #ccccaa; }
206#content UL.thumbnails LI.thumbCat SPAN.wrap2:hover { border-style: solid; }
207
208#content ul.thumbnails span.thumbLegend {
209    margin: 0 auto;
210    padding: 0.5em 0;
211}
212.zero { display: none }
213.nb-hits { color: #69c; }
214.nb-comments { color: #f92; }
215
216
217/* links */
218/*.rateButton, A { color: #FFFFFF; }
219.rateButton:hover, A:hover { color: #FFF48E; }*/
220
221/*      Menu
222-----------------------------------------------------------------------------------------------*/
223
224.pwg-icon-filter {
225left:95%;
226position:absolute;
227}
228
229#menubar { position: relative; }
230#theHeader { position: relative; }
231#content div.thumbnailCategory div.description {
232        overflow: hidden; /* bug in FF 1.0 (not 1.5) */
233}
234/*#content div.thumbnailCategory>div.description:hover {
235  overflow: visible;
236}*/
237
238/* horizontal menubar */
239#menubar, BODY#theAdminPage #menubar {
240        float: none;
241        width: 750px;
242        margin: 5px auto;
243        border: none;
244        /*overflow: hidden;*/   /* bothers FF so we rather set height below */
245        display: block;
246}
247
248/* set menubar height (not for IE) */
249#the_page > #menubar, BODY#theAdminPage #the_page > #menubar {
250  height: 2.1em;
251  padding: 0;
252}
253#menubar DL > DT {
254    padding: 0.2em 0.4em 0;
255}
256
257/* general UL formating */
258#menubar UL, #menubar DL, #menubar UL#menuTagCloud {
259  list-style: none;
260  margin: 0;
261  padding: 0;
262  float: left;
263}
264#menubar DL { display: inline; padding: 0 2.1em; }
265BODY#theAdminPage #the_page > #menubar DL { padding: 0 0.5em;}
266
267#menubar UL {  width: 20em; }
268#menubar ul li a {  padding-right: 3em; }
269
270#menubar P, #menubar P.totalImages, FORM#quickconnect {
271  clear: both;
272  margin: 0;
273  text-align: center;
274  padding: 0.2em;
275}
276
277/* titles and links */
278#menubar A, #menubar DT { display: block; }
279
280/* positioning */
281#menubar LI { position: relative;}
282#menubar DD { position: absolute; z-index: 500;}
283#menubar DD UL UL {
284  position: absolute;
285  top: 0px;
286  left: 100%;
287  z-index: 500;
288}
289#menubar LI SPAN,#menubar LI IMG { position: absolute; top: 0;}
290#menubar LI SPAN { right: 7px;}
291#menubar LI IMG { right: 3em;}
292
293/* hiding and revealing up to 6 menu levels */
294DIV#menubar DD,
295DIV#menubar UL UL,
296DIV#menubar UL LI:hover UL UL,
297DIV#menubar UL UL LI:hover UL UL,
298DIV#menubar UL UL UL LI:hover UL UL,
299DIV#menubar UL UL UL UL LI:hover UL UL { display: none; }
300
301DIV#menubar DL:hover DD,
302DIV#menubar UL LI:hover UL,
303DIV#menubar UL UL LI:hover UL,
304DIV#menubar UL UL UL LI:hover UL,
305DIV#menubar UL UL UL UL LI:hover UL,
306DIV#menubar UL UL UL UL UL LI:hover UL { display: block; }
307
308/* styles */
309#menubar, #menubar DT {
310background-image: url(img/fondMenu2.gif);
311background-repeat:repeat-x;
312background-color:#000000;
313        color: #FFF;
314        border: 0;
315}
316#menubar a, #menubar DT a { 
317        color: #fff; 
318        display: block; 
319        text-decoration: none; 
320        border: 0;
321
322}
323#menubar DD, #menubar UL {
324        color: #000000;
325        border: 0;
326        background-image: url(img/back_menu.png);
327}
328#menubar DD {
329    border-right: 2px solid #777;
330    border-bottom: 2px solid #777;
331   -moz-border-radius: 4px;   
332    border-radius: 4px 4px;   
333    }
334#menubar DD A { padding: 0.5em; }
335#menubar DD a {
336        color: #000000;
337        display: block;
338        text-decoration: none;
339        border: 0;
340}
341
342
343/********************/
344#menubar A:hover, #menubar dt:hover {
345color: #fff; 
346background-image: url(img/fondMenuSurvol.gif);
347background-repeat:repeat-x;
348background-position:center;
349background-color:#CCCCCC,
350}
351/********************/
352#menubar A:hover { color: #fff; }
353#menubar DD A { padding: 0.5em; }
354#menubar DD A:hover { background-color: #999; }
355
356/*      quickconnect (still to be fixed for IE)
357-----------------------------------------------------------------------------------------------*/
358FORM#quickconnect FIELDSET { width: 220px; }
359FORM#quickconnect LABEL { clear: left; /*margin: 0;*/ text-align: left; }
360FORM#quickconnect LABEL INPUT { font-size: 1em; /*width: 15em;*/ }
361FORM#quickconnect P, FORM#quickconnect A { border: none; padding: 0; }
362/*FORM#quickconnect A { display: inline; }*/
363FORM#quickconnect ul.actions { width: auto; }
364/*FORM#quickconnect ul.actions img { position: static; }*/
365FORM#quickconnect ul.actions li { display: inline; float: right; }
366
367
368
369/*      menuTagCloud
370-----------------------------------------------------------------------------------------------*/
371
372#menubar UL#menuTagCloud A { padding-left: 2px; }
373#menubar UL#menuTagCloud LI { display: block; }
374
375UL#menuTagCloud A IMG { position: static; }
376UL#menuTagCloud A {
377  position: absolute;
378  left: 7px;
379  top: 0.2em;
380  padding-right: 0;
381  display: inline;
382  border-width: 0;
383}
384
385#menubar UL#menuTagCloud A.tagLevel1,
386#menubar UL#menuTagCloud A.tagLevel2,
387#menubar UL#menuTagCloud A.tagLevel3,
388#menubar UL#menuTagCloud A.tagLevel4,
389#menubar UL#menuTagCloud A.tagLevel5,
390#menubar UL#menuTagCloud A.tagLevel6,
391#menubar UL#menuTagCloud A.tagLevel7,
392#menubar UL#menuTagCloud A.tagLevel8,
393#menubar UL#menuTagCloud A.tagLevel9,
394#menubar UL#menuTagCloud A.tagLevel10 {
395  /*font-size: 100%;*/
396  /*padding-left: 1.5em;*/
397  padding-left: 18px;
398  position: static;
399  display: block;
400}
401
402/* Tags - Page des tags
403-------------------------------------------------------- */
404
405ul#fullTagCloud {
406        position: relative;
407        border: 1px solid #E8E8E8;
408        border-width: 1px 0;
409        background: #FBFBFB;
410        padding: 5px;
411        margin: 8px 0 20px 0;
412        overflow: hidden;
413        height: 100%;
414        font-size: 120%;
415}
416        ul#fullTagCloud li {
417                /* display: inline; */
418                display: block;
419                float: left;
420                margin: 4px;
421                padding: 1px 5px;
422                height: 18px;
423                line-height: 18px;
424                background: none;
425        }
426        ul#fullTagCloud li a:link, ul#fullTagCloud li a:visited {
427                color: #005D99;
428                text-decoration: none;
429                white-space: nowrap;
430        }
431        ul#fullTagCloud li a:hover { text-decoration: underline; border: 0; }
432        ul#fullTagCloud li a:focus, ul#fullTagCloud li a:active { background: #005D99; color: #FFF; }
433
434.tagLevel5 { font-size:160%; }
435.tagLevel4 { font-size:140%; }
436.tagLevel3 { font-size:120%; }
437.tagLevel2 { font-size:100%; }
438.tagLevel1 { font-size:80%; }
439
440/*.tagLevel1 { font-size: 80%; }
441.tagLevel2 { font-size: 90%; }
442.tagLevel3 { font-size: 100%; }
443.tagLevel4 { font-size: 110%; }
444.tagLevel5 { font-size: 120%; }
445.tagLevel6 { font-size: 130%; }
446.tagLevel7 { font-size: 140%; }
447.tagLevel8 { font-size: 150%; }
448.tagLevel9 { font-size: 160%; }
449.tagLevel10 { font-size: 170%; }*/
450
451/*====== */
452
453/* others */
454.pleaseNote {
455        margin: 20px auto;
456        width: 700px;
457    background: #eee;
458    color: #ff9b00;
459        border: 1px solid #ff9b00;
460    padding: 1ex;
461    font-weight: bold;
462}
463
464.header_notes { background-position:left center; padding: 5px 0px; }
465
466li.categoryLi {
467        float:left;
468        margin:2px;
469        width:46%;
470}
471
472input.rateButton { color: #369; }
473input.rateButtonSelected { color:#696969; }
474INPUT.rateButton:hover { color: #858460;}
475
476/*      calendar
477-----------------------------------------------------------------------------------------------*/
478
479DIV.calendarViews {
480  padding-top: 5px;
481  padding-right: 6px;
482}
483
484/*calendar elements*/
485SPAN.calItemEmpty { color: silver; }
486
487SPAN.calItem, SPAN.calItemEmpty { border: 1px solid gray; }
488
489/* nice looking month calendar*/
490TD.calDayCellEmpty, TD.calDayCellFull { border: 1px solid gray;}
491
492TD.calDayCellEmpty { color: silver; }
493
494.calBackDate { color: #000; }
495.calForeDate { color: #fff; }
496
497/* Footer
498-------------------------------------------------------- */
499#copyright {
500        background: /*transparent*/ url(img/footer.jpg) no-repeat center bottom;
501        clear: both;
502        margin: 0 auto;
503        padding: 10px 0;
504        text-align: center;
505        font-weight: bold;
506        height:40px;
507}
508#copyright a:link, #copyright a:visited { text-decoration: underline; color: #000; }
509#copyright a:hover { text-decoration: none; color: #000; border: 0; }
Note: See TracBrowser for help on using the repository browser.