|
52
|
1 /* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */
|
|
|
2
|
|
|
3 /*--------------------------------------------------
|
|
|
4 REQUIRED to hide the non-active tab content.
|
|
|
5 But do not hide them in the print stylesheet!
|
|
|
6 --------------------------------------------------*/
|
|
|
7 .tabberlive .tabbertabhide {
|
|
|
8 display:none;
|
|
|
9 }
|
|
|
10
|
|
|
11 /*--------------------------------------------------
|
|
|
12 .tabber = before the tabber interface is set up
|
|
|
13 .tabberlive = after the tabber interface is set up
|
|
|
14 --------------------------------------------------*/
|
|
|
15 .tabber {
|
|
|
16 }
|
|
|
17 .tabberlive {
|
|
|
18 margin-top:1em;
|
|
|
19 }
|
|
|
20
|
|
|
21 /*--------------------------------------------------
|
|
|
22 ul.tabbernav = the tab navigation list
|
|
|
23 li.tabberactive = the active tab
|
|
|
24 --------------------------------------------------*/
|
|
|
25 ul.tabbernav
|
|
|
26 {
|
|
|
27 margin:0;
|
|
|
28 padding: 3px 0;
|
|
|
29 border-bottom: 1px solid #778;
|
|
|
30 font: bold 12px Verdana, sans-serif;
|
|
|
31 }
|
|
|
32
|
|
|
33 ul.tabbernav li
|
|
|
34 {
|
|
|
35 list-style: none;
|
|
|
36 margin: 0;
|
|
|
37 display: inline;
|
|
|
38 }
|
|
|
39
|
|
|
40 ul.tabbernav li a
|
|
|
41 {
|
|
|
42 padding: 3px 0.5em;
|
|
|
43 margin-left: 3px;
|
|
|
44 border: 1px solid #778;
|
|
|
45 border-bottom: none;
|
|
|
46 background: #DDE;
|
|
|
47 text-decoration: none;
|
|
|
48 }
|
|
|
49
|
|
|
50 ul.tabbernav li a:link { color: #448; }
|
|
|
51 ul.tabbernav li a:visited { color: #667; }
|
|
|
52
|
|
|
53 ul.tabbernav li a:hover
|
|
|
54 {
|
|
|
55 color: #000;
|
|
|
56 background: #AAE;
|
|
|
57 border-color: #227;
|
|
|
58 }
|
|
|
59
|
|
|
60 ul.tabbernav li.tabberactive a
|
|
|
61 {
|
|
|
62 background-color: #fff;
|
|
|
63 border-bottom: 1px solid #fff;
|
|
|
64 }
|
|
|
65
|
|
|
66 ul.tabbernav li.tabberactive a:hover
|
|
|
67 {
|
|
|
68 color: #000;
|
|
|
69 background: white;
|
|
|
70 border-bottom: 1px solid white;
|
|
|
71 }
|
|
|
72
|
|
|
73 /*--------------------------------------------------
|
|
|
74 .tabbertab = the tab content
|
|
|
75 Add style only after the tabber interface is set up (.tabberlive)
|
|
|
76 --------------------------------------------------*/
|
|
|
77 .tabberlive .tabbertab {
|
|
|
78 padding:5px;
|
|
|
79 border:1px solid #aaa;
|
|
|
80 border-top:0;
|
|
|
81
|
|
|
82 /* If you don't want the tab size changing whenever a tab is changed
|
|
|
83 you can set a fixed height */
|
|
|
84
|
|
|
85 /* height:200px; */
|
|
|
86
|
|
|
87 /* If you set a fix height set overflow to auto and you will get a
|
|
|
88 scrollbar when necessary */
|
|
|
89
|
|
|
90 /* overflow:auto; */
|
|
|
91 }
|
|
|
92
|
|
|
93 /* If desired, hide the heading since a heading is provided by the tab */
|
|
|
94 .tabberlive .tabbertab h2 {
|
|
|
95 display:none;
|
|
|
96 }
|
|
|
97 .tabberlive .tabbertab h3 {
|
|
|
98 display:none;
|
|
|
99 }
|
|
|
100
|
|
|
101 /* Example of using an ID to set different styles for the tabs on the page */
|
|
|
102 .tabberlive#tab1 {
|
|
|
103 }
|
|
|
104 .tabberlive#tab2 {
|
|
|
105 }
|
|
|
106 .tabberlive#tab2 .tabbertab {
|
|
|
107 height:200px;
|
|
|
108 overflow:auto;
|
|
|
109 }
|
