|
1 /******************************************************************************* |
|
2 * Copyright (c) 2006 IBM Corporation and others. |
|
3 * All rights reserved. This program and the accompanying materials |
|
4 * are made available under the terms of the Eclipse Public License v1.0 |
|
5 * which accompanies this distribution, and is available at |
|
6 * http://www.eclipse.org/legal/epl-v10.html |
|
7 * |
|
8 * Contributors: |
|
9 * IBM Corporation - initial API and implementation |
|
10 *******************************************************************************/ |
|
11 |
|
12 /* |
|
13 * Set up general font colours, sizes, etc. Some of these will override |
|
14 * settings from the shared CSS |
|
15 */ |
|
16 .intro-header H1 { |
|
17 font-size : 18pt; |
|
18 } |
|
19 |
|
20 /* Hide the extra div for links in the normal state. */ |
|
21 a .link-extra-div { |
|
22 display: none; |
|
23 } |
|
24 |
|
25 /* Link label properties */ |
|
26 #page-links a .link-label { |
|
27 margin-left: 7px; |
|
28 position: relative; |
|
29 top: -1.2em; |
|
30 font-size : 12.5pt; |
|
31 font-weight : 600; |
|
32 padding-left: 15px; |
|
33 padding-right: 10px; |
|
34 margin-bottom: -1.2pm; |
|
35 } |
|
36 |
|
37 #page-links a#overview .link-label { |
|
38 margin-left: 8px; |
|
39 } |
|
40 |
|
41 #page-links a#workbench .link-label { |
|
42 padding-left: 5px; |
|
43 margin-left: 5px; |
|
44 } |
|
45 |
|
46 /* Link description properties */ |
|
47 #page-links a p .text { |
|
48 margin-left: 3px; |
|
49 position: relative; |
|
50 top: -1.6em; |
|
51 padding-top: 5px; |
|
52 padding-left: 9px; |
|
53 padding-right: 10px; |
|
54 margin-bottom: -1.6em; |
|
55 font-size : 11pt; |
|
56 font-weight : 500; |
|
57 padding-bottom: 5px; |
|
58 background-image: url("../graphics/icons/ctool/root_midhov2.gif"); |
|
59 background-repeat: repeat-y; |
|
60 } |
|
61 |
|
62 #page-links a#overview p .text { |
|
63 margin-left: 5px; |
|
64 } |
|
65 |
|
66 #page-links a#workbench p .text { |
|
67 margin-left: -10px; |
|
68 } |
|
69 |
|
70 /* Some differences between Mozilla and IE here */ |
|
71 |
|
72 #page-links a#workbench > p .text { |
|
73 margin-left: -10px; |
|
74 } |
|
75 |
|
76 |
|
77 /* |
|
78 * Set up the content for the root page. |
|
79 */ |
|
80 html, body { |
|
81 |
|
82 |
|
83 background-image : url("../graphics/rootpage/welcomebckgrd.jpg"); |
|
84 background-repeat : no-repeat; |
|
85 background-position : center center; |
|
86 background-attachment : fixed; |
|
87 overflow : auto; |
|
88 overflow-clip: rect(0, auto, auto, 0); |
|
89 background-color : #345365; |
|
90 } |
|
91 #root { |
|
92 min-height : 450px; |
|
93 height : expression(document.body.clientHeight < 450? "450px": "100%" ); |
|
94 |
|
95 min-width : 940px; |
|
96 width:expression(document.body.clientWidth < 940? "940px": "auto" ); |
|
97 |
|
98 overflow: hidden; |
|
99 } |
|
100 |
|
101 #branding { |
|
102 position: absolute; |
|
103 bottom : 20px; |
|
104 left : 20px; |
|
105 } |
|
106 |
|
107 /* |
|
108 * Set up the navigation bar. It should be centered in the middle |
|
109 * of the page |
|
110 */ |
|
111 #links-background { |
|
112 /* |
|
113 width : 100%; |
|
114 */ |
|
115 position: absolute; |
|
116 top: 50%; |
|
117 left: 50%; |
|
118 text-align : center; |
|
119 } |
|
120 |
|
121 #page-links { |
|
122 position : relative; |
|
123 left : 0px; |
|
124 top : 0x; |
|
125 } |
|
126 |
|
127 #page-links a { |
|
128 position : absolute; |
|
129 text-align : left; |
|
130 padding-bottom: 2px; |
|
131 } |
|
132 |
|
133 /* Position root links using absolute coordinates */ |
|
134 #page-links a img { |
|
135 height : 103px; |
|
136 width : 103px; |
|
137 } |
|
138 |
|
139 #page-links a:hover img { |
|
140 width : 215px; |
|
141 height : 84px; |
|
142 } |
|
143 |
|
144 #page-links a#overview { |
|
145 left: -443px; |
|
146 top: -188px; |
|
147 } |
|
148 |
|
149 #page-links a#overview:hover { |
|
150 left: -444px; |
|
151 } |
|
152 |
|
153 #page-links a#overview img { |
|
154 width : 141px; |
|
155 height : 154px; |
|
156 } |
|
157 |
|
158 #page-links a#overview:hover img { |
|
159 width : 217px; |
|
160 height : 99px; |
|
161 } |
|
162 |
|
163 #page-links a#workbench img { |
|
164 width : 107px; |
|
165 height : 103px; |
|
166 } |
|
167 |
|
168 #page-links a#workbench:hover img { |
|
169 width : 202px; |
|
170 height : 84px; |
|
171 } |
|
172 |
|
173 /* Absolute positions of root links */ |
|
174 |
|
175 #page-links a#whatsnew { |
|
176 left: -292px; |
|
177 top: -82px; |
|
178 } |
|
179 |
|
180 #page-links a#tutorials { |
|
181 left: -11px; |
|
182 top: 104px; |
|
183 } |
|
184 |
|
185 #page-links a#samples { |
|
186 left: -199px; |
|
187 top: 104px; |
|
188 } |
|
189 |
|
190 #page-links a#firststeps { |
|
191 left: -105px; |
|
192 top: -82px; |
|
193 } |
|
194 |
|
195 #page-links a#webresources { |
|
196 left: 82px; |
|
197 top: 11px; |
|
198 } |
|
199 |
|
200 #page-links a#migrate { |
|
201 left: 269px; |
|
202 top: 104px; |
|
203 } |
|
204 |
|
205 #page-links a#workbench { |
|
206 left: 366px; |
|
207 top: -82px; |
|
208 } |
|
209 |
|
210 #page-links a:hover#workbench, |
|
211 #page-links a:focus#workbench, |
|
212 #page-links a:active#workbench { |
|
213 left: 271px; |
|
214 } |
|
215 |
|
216 /* Paint bottom edge of the text box as a background image */ |
|
217 |
|
218 #page-links a:hover, |
|
219 #page-links a:focus, |
|
220 #page-links a:active { |
|
221 background-image: url("../graphics/icons/ctool/root_bottomhov.gif"); |
|
222 background-repeat: no-repeat; |
|
223 background-position: bottom left; |
|
224 z-index: 20; |
|
225 } |
|
226 |
|
227 #page-links a#overview:hover, |
|
228 #page-links a#overview:focus, |
|
229 #page-links a#overview:active { |
|
230 background-image: url("../graphics/icons/ctool/overview_bottomhov.gif"); |
|
231 } |
|
232 |
|
233 #page-links a#workbench:hover, |
|
234 #page-links a#workbench:focus, |
|
235 #page-links a#workbench:active { |
|
236 background-image: url("../graphics/icons/ctool/workbench_bottomhov.gif"); |
|
237 background-position: bottom left; |
|
238 } |
|
239 |
|
240 #page-links > a#workbench:hover, |
|
241 #page-links > a#workbench:focus, |
|
242 #page-links > a#workbench:active { |
|
243 background-position: bottom 2px; |
|
244 } |
|
245 |
|
246 |
|
247 /* Hide the link label in the normal state */ |
|
248 #page-links a .link-label, |
|
249 #page-links a .text { |
|
250 display : none; |
|
251 } |
|
252 |
|
253 /* Show the link label and link text as block on hover */ |
|
254 |
|
255 #page-links a:hover .link-label, |
|
256 #page-links a:focus .link-label, |
|
257 #page-links a:active .link-label { |
|
258 display : block; |
|
259 z-index: 40; |
|
260 } |
|
261 |
|
262 #page-links a:hover p .text, |
|
263 #page-links a:focus p .text, |
|
264 #page-links a:active p .text { |
|
265 display : block; |
|
266 z-index: 35; |
|
267 } |
|
268 |
|
269 #page-links a:hover .link-label, |
|
270 #page-links a:focus .link-label, |
|
271 #page-links a:active .link-label { |
|
272 width: 202px; |
|
273 } |
|
274 |
|
275 #page-links a:hover p .text, |
|
276 #page-links a:focus p .text, |
|
277 #page-links a:active p .text { |
|
278 width: 202px; |
|
279 } |
|
280 |
|
281 #page-links a:hover > .link-label, |
|
282 #page-links a:focus > .link-label, |
|
283 #page-links a:active > .link-label { |
|
284 width: 192px; |
|
285 } |
|
286 |
|
287 #page-links a:hover > p .text, |
|
288 #page-links a:focus > p .text, |
|
289 #page-links a:active > p .text { |
|
290 width: 192px; |
|
291 } |
|
292 |
|
293 #page-links a#workbench:hover .link-label, |
|
294 #page-links a#workbench:focus .link-label, |
|
295 #page-links a#workbench:active .link-label { |
|
296 width: 202px; |
|
297 } |
|
298 |
|
299 #page-links a#workbench:hover p .text, |
|
300 #page-links a#workbench:focus p .text, |
|
301 #page-links a#workbench:active p .text { |
|
302 width: 202px; |
|
303 } |
|
304 |
|
305 #page-links a#workbench:hover > .link-label, |
|
306 #page-links a#workbench:focus > .link-label, |
|
307 #page-links a#workbench:active > .link-label { |
|
308 width: 182px; |
|
309 } |
|
310 |
|
311 #page-links a#workbench:hover p > .text, |
|
312 #page-links a#workbench:focus p > .text, |
|
313 #page-links a#workbench:active p > .text { |
|
314 width: 193px; |
|
315 } |
|
316 |
|
317 #page-links a .background-image { |
|
318 display: none; |
|
319 } |
|
320 |
|
321 #page-links a .link-extra-div { |
|
322 display :none; |
|
323 } |
|
324 |
|
325 #page-links a:hover .link-extra-div { |
|
326 z-index: -100; |
|
327 display: block; |
|
328 font-size : 13pt; |
|
329 font-weight : 600; |
|
330 position: absolute; |
|
331 left: 13px; |
|
332 width: 201px; |
|
333 height: 1em; |
|
334 top: 84px; |
|
335 background-image: url("../graphics/icons/ctool/root_midhov2.gif"); |
|
336 background-repeat: repeat-y; |
|
337 } |
|
338 |
|
339 #page-links a:hover#overview .link-extra-div { |
|
340 top: 99px; |
|
341 left: 15px; |
|
342 } |
|
343 |
|
344 #page-links a:hover#workbench .link-extra-div { |
|
345 left: 0px; |
|
346 } |
|
347 |
|
348 /* Link images */ |
|
349 #page-links a#overview .content-img { background-image : url("../graphics/icons/ctool/overview.gif"); } |
|
350 #page-links a:hover#overview .content-img { background-image : url("../graphics/icons/ctool/overview_tophov.gif"); } |
|
351 |
|
352 #page-links a#tutorials .content-img { background-image : url("../graphics/icons/ctool/tutorials.gif"); } |
|
353 #page-links a:hover#tutorials .content-img { background-image : url("../graphics/icons/ctool/tutorials_tophov.gif"); } |
|
354 |
|
355 #page-links a#samples .content-img { background-image : url("../graphics/icons/ctool/samples.gif"); } |
|
356 #page-links a:hover#samples .content-img { background-image : url("../graphics/icons/ctool/samples_tophov.gif"); } |
|
357 |
|
358 #page-links a#whatsnew .content-img { background-image : url("../graphics/icons/ctool/whatsnew.gif"); } |
|
359 #page-links a:hover#whatsnew .content-img { background-image : url("../graphics/icons/ctool/whatsnew_tophov.gif"); } |
|
360 |
|
361 #page-links a#firststeps .content-img { background-image : url("../graphics/icons/ctool/firststeps.gif"); } |
|
362 #page-links a:hover#firststeps .content-img { background-image : url("../graphics/icons/ctool/firststeps_tophov.gif"); } |
|
363 |
|
364 #page-links a#migrate .content-img { background-image : url("../graphics/icons/ctool/migrate.gif"); } |
|
365 #page-links a:hover#migrate .content-img { background-image : url("../graphics/icons/ctool/migrate_tophov.gif"); } |
|
366 |
|
367 #page-links a#webresources .content-img { background-image : url("../graphics/icons/ctool/webresources.gif"); } |
|
368 #page-links a:hover#webresources .content-img { background-image : url("../graphics/icons/ctool/webresources_tophov.gif"); } |
|
369 |
|
370 #page-links a#workbench .content-img { background-image : url("../graphics/icons/ctool/workbench.gif"); } |
|
371 #page-links a:hover#workbench .content-img { background-image : url("../graphics/icons/ctool/workbench_tophov.gif"); } |
|
372 |
|
373 /* |
|
374 * Not using action links. |
|
375 */ |
|
376 #action-links { |
|
377 display: none; |
|
378 } |