|
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-bottom: 15px; |
|
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 #ccc; |
|
30 font: 400 14px georgia,serif; |
|
31 font-variant: small-caps; |
|
32 } |
|
33 |
|
34 ul.tabbernav li |
|
35 { |
|
36 list-style: none; |
|
37 margin: 0; |
|
38 display: inline; |
|
39 } |
|
40 |
|
41 ul.tabbernav li a |
|
42 { |
|
43 padding: 3px 0.5em; |
|
44 border: 1px solid #ccc; |
|
45 border-bottom: none; |
|
46 background: #F0F0F0; |
|
47 text-decoration: none; |
|
48 } |
|
49 |
|
50 ul.tabbernav li a:link { color: #333; } |
|
51 ul.tabbernav li a:visited { color: #666; } |
|
52 |
|
53 ul.tabbernav li a:hover |
|
54 { |
|
55 color: #000; |
|
56 background: #FFF; |
|
57 border-color: #CCC; |
|
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:7px; |
|
79 border:1px solid #CCC; |
|
80 border-top:0; |
|
81 background: #FFF |
|
82 |
|
83 /* If you don't want the tab size changing whenever a tab is changed |
|
84 you can set a fixed height */ |
|
85 |
|
86 /* height:200px; */ |
|
87 |
|
88 /* If you set a fix height set overflow to auto and you will get a |
|
89 scrollbar when necessary */ |
|
90 |
|
91 /* overflow:auto; */ |
|
92 } |
|
93 |
|
94 /* If desired, hide the heading since a heading is provided by the tab */ |
|
95 .tabberlive .tabbertab h2 { |
|
96 display:none; |
|
97 } |
|
98 |
|
99 /* Example of using an ID to set different styles for the tabs on the page */ |
|
100 .tabberlive#tab1 { |
|
101 } |
|
102 .tabberlive#tab2 { |
|
103 } |
|
104 .tabberlive#tab2 .tabbertab { |
|
105 height:200px; |
|
106 overflow:auto; |
|
107 } |
|
108 |
|
109 .tabberlive strong{ |
|
110 font-weight: 600; |
|
111 font-size: 1.2em; |
|
112 } |
|
113 |
|
114 .tabberlive p { |
|
115 font-size:0.9em; |
|
116 } |