|
1 /* Caution! Ensure accessibility in print and other media types... */ |
|
2 @media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */ |
|
3 .ui-tabs-hide { |
|
4 display: none; |
|
5 } |
|
6 } |
|
7 |
|
8 /* Hide useless elements in print layouts... */ |
|
9 @media print { |
|
10 .ui-tabs-nav { |
|
11 display: none; |
|
12 } |
|
13 } |
|
14 |
|
15 /* Skin */ /*font-size: 12px;*/ |
|
16 .ui-tabs-nav, .ui-tabs-panel { |
|
17 |
|
18 } |
|
19 .ui-tabs-nav { |
|
20 list-style: none; |
|
21 margin: 0; |
|
22 padding: 0 0 0 4px; |
|
23 } |
|
24 .ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */ |
|
25 display: block; |
|
26 clear: both; |
|
27 content: " "; |
|
28 } |
|
29 .ui-tabs-nav li { |
|
30 float: left; |
|
31 margin: 0 0 0 1px; |
|
32 min-width: 84px; /* be nice to Opera */ |
|
33 } |
|
34 .ui-tabs-nav a, .ui-tabs-nav a span { |
|
35 display: block; |
|
36 padding: 0 10px; |
|
37 background: url(../img/bg_tab.png) no-repeat; |
|
38 /* border: 1px ; */ |
|
39 } |
|
40 .ui-tabs-nav a { |
|
41 margin: 1px 0 0; /* position: relative makes opacity fail for disabled tab in IE */ |
|
42 padding-left: 0; |
|
43 color: #000; |
|
44 font-weight: bold; |
|
45 line-height: 1.2; |
|
46 text-align: center; |
|
47 text-decoration: none; |
|
48 white-space: nowrap; /* required in IE 6 */ |
|
49 outline: 0; /* prevent dotted border in Firefox */ |
|
50 } |
|
51 .ui-tabs-nav .ui-tabs-selected a { |
|
52 position: relative; |
|
53 top: 1px; |
|
54 z-index: 2; |
|
55 margin-top: 0; |
|
56 color: #000; |
|
57 } |
|
58 .ui-tabs-nav a span { |
|
59 width: 64px; /* IE 6 treats width as min-width */ |
|
60 min-width: 64px; |
|
61 height: 18px; /* IE 6 treats height as min-height */ |
|
62 min-height: 18px; |
|
63 padding-top: 6px; |
|
64 padding-right: 0; |
|
65 } |
|
66 *>.ui-tabs-nav a span { /* hide from IE 6 */ |
|
67 width: auto; |
|
68 height: auto; |
|
69 } |
|
70 .ui-tabs-nav .ui-tabs-selected a span { |
|
71 padding-bottom: 1px; |
|
72 } |
|
73 .ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active { |
|
74 background-position: 100% -150px; |
|
75 } |
|
76 .ui-tabs-nav a, .ui-tabs-nav .ui-tabs-disabled a:hover, .ui-tabs-nav .ui-tabs-disabled a:focus, .ui-tabs-nav .ui-tabs-disabled a:active { |
|
77 background-position: 100% -100px; |
|
78 } |
|
79 .ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:hover span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span { |
|
80 background-position: 0 -50px; |
|
81 } |
|
82 .ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span { |
|
83 background-position: 0 0; |
|
84 } |
|
85 .ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ |
|
86 cursor: text; |
|
87 } |
|
88 .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active, |
|
89 .ui-tabs-nav .ui-tabs-deselectable a:hover, .ui-tabs-nav .ui-tabs-deselectable a:focus, .ui-tabs-nav .ui-tabs-deselectable a:active { /* @ Opera, we need to be explicit again here now... */ |
|
90 cursor: pointer; |
|
91 } |
|
92 .ui-tabs-disabled { |
|
93 opacity: .4; |
|
94 filter: alpha(opacity=40); |
|
95 } |
|
96 .ui-tabs-panel { |
|
97 border: 1px solid #ccc; |
|
98 padding: 1em 8px; |
|
99 background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */ |
|
100 } |
|
101 .ui-tabs-loading em { |
|
102 padding: 0 0 0 20px; |
|
103 background: url(../img/loading.gif) no-repeat 0 50%; |
|
104 } |
|
105 |
|
106 /* Additional IE specific bug fixes... */ |
|
107 * html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */ |
|
108 display: inline-block; |
|
109 } |
|
110 *:first-child+html .ui-tabs-nav { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */ |
|
111 display: inline-block; |
|
112 } |
|
113 |
|
114 .hptab_container .ui-tabs-panel {height:210px;} |