source: main/trunk/greenstone3/web/interfaces/oran/style/core.css@ 23813

Last change on this file since 23813 was 23813, checked in by sjm84, 13 years ago

Lots of upgrades to the oran skin, getting it ready to be the default skin for Greenstone3

File size: 11.7 KB
Line 
1html {
2 height: 100%;
3 margin-bottom: 1px;
4}
5body {
6 font-family: sans-serif;
7 padding: 20px;
8 margin: 0;
9 color: #444;
10 background-color: #eae4d9;
11}
12
13#container {
14 position: relative;
15 margin: 0 auto 20px auto;
16 max-width: 1000px;
17 padding: 0;
18 line-height: 160%;
19 background-color: #fff;
20 border: 1px solid #c8c3b9;
21}
22
23#gs_banner {
24 /*background: transparent url('../images/gsdlhead.gif') scroll no-repeat left top;*/
25 background-color: #008800;
26 padding: 10px 20px 30px 20px;
27 min-height: 80px;
28 position: relative;
29}
30
31#gs_content {
32 padding: 1em;
33 min-height: 300px;
34 /* background-color: #ff0; */
35}
36
37#rightSidebar {
38 border: 1px solid #cdc;
39 padding: 10px;
40 width: 25%;
41 min-width: 180px;
42 float: right;
43 margin: 0 0 10px 20px;
44 /* background-color: #f0f; */
45}
46
47#quickSearch {
48}
49
50
51#collectionLinks {
52 position: relative;
53}
54
55.collectionLink {
56 display: block;
57 width: 140px;
58 height: 100px;
59 float: left;
60 border: 1px solid #888;
61 margin: 0 20px 20px 0;
62 font-size: 150%;
63 color: #444;
64 text-decoration: none;
65 background: url(../images/collectionIconStripe.gif) scroll no-repeat 0 0;
66 padding: 20px;
67}
68collectionLinkImage {
69 float: left;
70}
71
72#gs_footer {
73 position: relative;
74 display: block;
75 height: 30px;
76 background: transparent url('../images/gsdlhead.gif') scroll no-repeat left top;
77 margin: 0 auto;
78 text-align: center;
79 vertical-align: middle;
80 font-size: 70%;
81 color: #fff;
82}
83
84
85
86/* some text should not be rendered as it is just there for search engines */
87#collectionLinks a b {
88 display: none;
89}
90
91/* make sure h1s and h2s are readable on the green banner */
92#breadcrumbs, #gs_banner h2, #breadcrumbs a, #gs_banner h2 a {
93 color: #fff;
94}
95body.dAction #gs_banner h2 {
96 max-width: 600px;
97 font-size: 100;
98}
99
100#titlearea {
101 padding-left: 1em;
102 padding-right: 1em;
103 height:60px;
104 background-color: #007200;
105 width:40%;
106}
107
108#titlesearchcontainer {
109 width:100%;
110 margin: 5px 0 5px;
111}
112
113#quicksearcharea {
114 width:60%;
115 text-align:right;
116 padding: 5px;
117 color:white;
118 background-color:#007200;
119}
120
121#quicksearcharea table{
122 font-size:10px;
123 margin:0;
124 float: right;
125}
126
127#quicksearcharea a{
128 font-size: 11px;
129 color:white;
130 text-transform:lowercase;
131 padding-left:10px;
132}
133
134#expandqueryboxbutton {
135 color:white;
136 text-decoration:none;
137}
138
139#breadcrumbs {
140 /*margin: 0 0 10px 0;*/
141 height: 25px;
142 line-height: 15px;
143}
144
145/* css to make the tabs work */
146#nav {
147 position:absolute;
148 width: auto;
149 bottom: 0;
150 left: 0;
151 list-style: none;
152 margin:0;
153 padding: 0 0 0 20px;
154 font-size: 14px;
155}
156
157#nav li {
158 float: left;
159 color: #fff;
160 background: transparent url('../images/tab-right.png') scroll no-repeat 100% -100px;
161 margin: 0 5px 0 0;
162 padding: 0 8px 0 0;
163 text-transform: capitalize;
164}
165
166#nav a {
167
168 display: block;
169 float:left;
170 background: transparent url('../images/tab-left.png') no-repeat scroll 0 -100px;
171 margin:0;
172 padding: 5px 4px 3px 10px;
173 font-weight: bold;
174 color: #fff;
175 text-decoration: none;
176 line-height: 1;
177}
178
179#nav li:hover, #nav li.current { background-position: 100% 0; }
180#nav li:hover a, #nav li.current a { background-position: 0 0; cursor:default; }
181
182
183/* css to make the page links work (home, help, preference) */
184#bannerLinks {
185 width: auto;
186 position: absolute;
187 list-style: none;
188 margin:0;
189 top: 7px;
190 right: 0;
191 padding: 0 15px 0 0;
192 text-transform: lowercase;
193}
194
195#bannerLinks li {
196 float: right;
197 margin: 0;
198 background: transparent url('../images/tab-right.gif') no-repeat scroll 100% -50px;
199 padding: 0 2px 0 0;
200}
201
202#bannerLinks a {
203 display: block;
204 float: left;
205 display: table-cell;
206 min-width: 1em;
207 margin:0;
208 padding: 5px 5px 3px 10px;
209 font-weight: normal;
210 text-align: center;
211 color: #fff;
212 text-decoration: none;
213 line-height: 1;
214}
215
216#bannerLinks li.current a {
217 cursor: default;
218}
219
220#bannerLinks li:hover, #bannerLinks li.current { background-position: 100% 0; }
221
222#bannerLinks li.current a { text-decoration: underline; background-position: 0 0;}
223#bannerLinks img.spacer { display: table-cell; }
224
225
226/* css to make the classifier list pretty */
227.navList {
228 margin: 0 0 10px 0;
229 padding: 0;
230 background-color: #0a0;
231}
232
233.navList ul {
234 margin: 0;
235 padding: 0;
236 list-style: none;
237}
238
239.navList li {
240 float: left;
241 margin: 0 0 0 20px;
242 cursor: pointer;
243 color: #fff;
244}
245.navList li a, .navList li span {
246 padding: 0 1em;
247 display: block;
248 text-decoration: none;
249 color: #fff;
250}
251
252.navList li.current {
253 background-color: #efea6e;
254 color: #444;
255 cursor: default;
256}
257
258.navList li.current a, .navList li.current span {
259 color: #444;
260 cursor: default;
261}
262
263/* style the search and classifier results */
264#results {
265 margin: 0;
266 padding: 0;
267 /* border: 1px solid #f00; */
268}
269
270#results ul {
271 margin: 0 0 0 20px;
272 padding: 0;
273}
274
275#results li {
276 list-style: none;
277 margin: 0 0 .2em 0;
278 /* border: 1px solid #00f; */
279}
280
281#results li a {
282 padding: 3px 3px 3px 28px;
283 background-repeat: no-repeat;
284 background-position: 0 .1em;
285}
286
287
288#results .document a { background-image: url('../images/book.png'); }
289#results .document a:visited { background-image: url('../images/book-visited.png'); color: #999; }
290
291#results .shelf>a { background-image: url('../images/bookshelf.png'); }
292
293/* corners of the banner */
294/*
295.corner {
296 position: absolute;
297 background-image: url('../images/layout/corners.png');
298 background-repeat: no-repeat;
299 width: 20px;
300 height: 20px;
301}
302
303#cornerTopLeft {
304 left: 0; top: 0;
305 background-position: 0 0;
306}
307#cornerTopRight {
308 right: 0; top: 0;
309 background-position: -20px 0;
310}
311#cornerBottomLeft {
312 left: 0; bottom: 0;
313 background-position: 0 -20px;
314}
315#cornerBottomRight {
316 right: 0; bottom: 0;
317 background-position: -20px -20px;
318}
319*/
320.clear {
321 clear: both;
322}
323
324
325a:link, a:hover, a:active, a:visited { color: #050; }
326
327/*
328
329ul li>select, ul li>input {
330 padding: 0;
331 margin-left:5px;
332}
333
334
335
336div#banner ul, ul#resultlist, ul#tocnodes, ul#docbuttons, ul.tocnode, ul#bannerlist, ul#navbarlist, ul#collectionlist, ul#servicelist, ul#classifierlist, ul#classifiernodelist, ul#queryitemlist{
337 list-style-type:none;
338 margin:0;
339 padding:0;
340}
341
342div#banner ul li, ul#bannerlist li, ul#navbarlist li {
343 display: inline;
344 margin:0;
345 padding:0;
346}
347
348
349
350div#banner p {
351 margin:0;
352 padding: 0;
353 float:left;
354 font-size: 16px;
355 text-align: left;
356 overflow:hidden
357}
358
359div#banner p a {
360 background-image: url('../images/banner_bg.png');
361 background-repeat: repeat-y;
362}
363
364
365div#banner ul{
366 margin:0;
367 padding:0;
368 float:right;
369 font-size: 12px;
370}
371
372div#banner a{
373 text-decoration: none;
374 color:#000000;
375}
376
377
378
379ul#bannerlist li a {
380 padding: 0 10px 0 10px;
381 text-decoration: none;
382}
383
384ul#bannerlist li a:link, ul#bannerlist li a:visited
385{
386 background-color: #DEE79C;
387 background-image: url('../images/bg_off.png');
388 text-decoration: none
389}
390
391ul#bannerlist li a:hover{
392 background-color: #FFFF66;
393 background-image: url('../images/bg_on.png') ;
394 text-decoration: none
395}
396
397
398div#navbar{
399 clear:both;
400}
401
402ul#navbarlist{
403 margin:0;
404 padding:0;
405 list-style-type: none;
406 text-align:center;
407 width: 100%;
408 font-size: 80%;
409 background-image: url('../images/bg_green.png');
410 background-color: #99CC99
411 }
412
413ul#navbarlist li a {
414 padding: 0 20px 0 20px;
415 margin: 0;
416 color: #000000;
417 text-decoration: none;
418}
419
420ul#navbarlist li a:link, ul#navbarlist li a:visited{
421 background-image: url('../images/bg_off.png') ;
422 }
423
424ul#navbarlist li a:hover{
425 background-image: url('../images/bg_on.png') ;
426}
427
428
429ul#collectionlist li, ul#servicelist li{
430 display:block;
431 padding:0;
432 margin: .2em 0 0 0;
433 overflow:hidden;
434}
435
436
437ul#collectionlist img{
438 margin:0;
439 padding:0;
440 width: 150px;
441 height: 45px;
442 border: 1px solid black;
443 background-image: url('../images/collectimg_bg.png');
444 background-repeat: repeat-y;
445 overflow:hidden
446}
447
448ul#collectionlist li a.noimage{
449 display: block;
450 margin:0;
451 width: 145px;
452 height: 40px;
453 border: 1px solid black;
454 background-image: url('../images/collectimg_bg.png');
455 background-repeat: repeat-y;
456 overflow:hidden; padding-left:5px; padding-right:0; padding-top:5px; padding-bottom:0
457
458}
459
460ul#collectionlist li a{
461 font-size: 16px;
462 color: #000000;
463 text-decoration: none;
464 font-weight: bold;
465}
466
467ul#servicelist li a{
468 margin:0 .5em 0 0;
469}
470
471ul#queryitemlist li{
472 display:block;
473 margin: .2em 0 .2em 0;
474}
475
476ul#classifierlist li{
477 list-style: none;
478 margin: 0 0 5px 0;
479 padding: 0;
480 display: block;
481 color:#000;
482}
483
484ul#classifierlist li#activeclassifier{
485 font-weight:bold;
486 padding: 0 0 0 5px;
487 margin:0 0 5px 0;
488}
489
490 ul#classifierlist li a:link, ul#classifierlist li a:visited
491{
492 display:block;
493 margin:0;
494 background-image: url('../images/bg_off.png');
495 text-decoration: none;
496 color:#000;
497 width:100%; padding-left:5px; padding-right:0; padding-top:2px; padding-bottom:2px
498 }
499
500ul#classifierlist li a:hover, ul#classifierlist li a:active
501{
502 display:block;
503 margin:0;
504 background-image: url('../images/bg_on.png');
505 text-decoration: none; padding-left:5px; padding-right:0; padding-top:2px; padding-bottom:2px
506
507}
508
509ul#classifierlist{
510 float:left;
511 font-size: 14px;
512 text-align: left;
513 width: 15%;
514 margin:0;
515 padding:0;
516}
517
518div#classifiers{
519 float:left;
520 width: 75%;
521 margin:0;
522 padding:0 0 0 10px;
523 }
524
525ul#classifiernodelist li{
526 list-style: none;
527 margin: 0;
528 padding: 5px 0 0 0;
529 display: block;
530 }
531
532ul.childrenlist{
533 margin: 0 0 0 0;
534 padding: 0 0 0 20px;
535 display: block;
536 width: 100%;
537}
538
539div#content{
540 clear: both;
541 overflow: hidden;
542 margin: .2em 0 0 0;
543}
544
545/* bg image set in style macro */
546div.divbar {
547 clear: both;
548 background-image: url('../images/bg_green.png');
549 width: 100%;
550 text-align: center;
551 font-size:80%
552}
553
554
555/** query form style**/
556div#queryform{
557
558}
559
560/** search result style */
561div#terminfo{
562
563}
564
565div#matchdocs{
566
567}
568
569div.resultnavigation{
570 margin: 0;
571 padding:0;
572}
573
574ul#resultlist li{
575 display:block;
576}
577
578
579
580div#documentheading{
581 font-size: 16pt;
582 font-weight: bold;
583}
584
585div#documentinfo {
586 float:left;
587 padding:0;
588 margin:0;
589 width:24%;
590}
591
592div#toc{
593 float:left;
594 text-align:left;
595 width:60%;
596 padding:0;
597 margin:0;
598}
599
600ul#docbuttons li {
601 display: block;
602 font-size: 11px;
603 font-weight: bold;
604 background: #f7e7c5;
605 margin: 1px;
606 border: 1px solid #eeddbb;
607 text-align: center;
608 vertical-align: middle;
609 height: 30px; /* IE6 and NS4 treat width/height as min-width/min-height */
610 width: 110px;
611}
612
613
614ul#tocnodes li{
615 margin: 0;
616 padding: 5px 0 0 0;
617 display:block;
618}
619
620ul.tocnode {
621 margin:0;
622 padding:5px 0 0 20px;
623}
624
625ul.tocnode a{
626 margin: 0;
627 padding:0 5px 0 0;
628 }
629
630span.bold{
631 font-weight: bold;
632}
633
634div.documentarrows{
635 margin: 0 0 0 0;
636 padding: 1em 0 0 0;
637}
638
639img.lessarrow{
640 float:left;
641 border: none;
642}
643
644img.morearrow{
645 float:right;
646 border:none;
647}
648
649div.formheading{
650 font-size: 16pt;
651 font-weight: bold;
652 margin: .5em 0 0;
653 padding:0;
654}
655
656ul#presprefs li, ul#berrybasketprefs li, ul#searchprefs li{
657 display: block;
658}
659
660
661div.phrasebrowse{
662 text-align:center;
663 padding:0;
664 margin: .5em 0 .5em 0;
665}
666
667div.QuickSearch {
668 float: right;
669}
670
671#coverImage {
672 text-align: center;
673}
674
675/* ----- TABLE OF CONTENTS ------ */
676#tableOfContents {
677 margin: 0;
678 padding: 0;
679 font-size: 80%;
680}
681
682#tableOfContents li {
683 list-style: none;
684 margin: 0;
685 padding: 2px;
686 background-color: #fff;
687}
688
689#tableOfContents li a {
690 color: #444;
691}
692
693#tableOfContents li.current {
694 background-color: #090;
695}
696#tableOfContents li.current a {
697 color: #fff;
698}
699
700#tableOfContents li.current li {
701 background-color: #fff;
702}
703
704#tableOfContents li.current li a {
705 color: #444;
706}
707
708#tableOfContents ul {
709 padding: 0 0 0 20px;
710}
711
712/* -------- SEARCH ------- */
713.paramLabel {
714 float: left;
715 min-width: 250px;
716}
717.paramValue {
718 float: left;
719}
720
721
722table{
723 border-collapse:collapse;border-spacing:0;
724}
725
Note: See TracBrowser for help on using the repository browser.