|
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 fonts, sizes and colors |
|
14 */ |
|
15 body { font-family : Arial, sans-serif; } |
|
16 |
|
17 H1, H2, H3, H4, p, a { color : #4D4D4D; } |
|
18 |
|
19 /* |
|
20 * We are not using titles in this theme. |
|
21 */ |
|
22 .intro-header { |
|
23 display : none; |
|
24 } |
|
25 |
|
26 h2 { |
|
27 font-size : 13pt; |
|
28 font-weight : normal; |
|
29 color : #7B8694; |
|
30 } |
|
31 |
|
32 /* For regular div labels */ |
|
33 H4 .div-label { |
|
34 font-family: Verdana, Arial, Helvetica; |
|
35 font-size: 10pt; |
|
36 font-weight: bold; |
|
37 color: #4A4D4A; |
|
38 line-height:1.3; |
|
39 } |
|
40 |
|
41 /* For the main page content's title */ |
|
42 #content-header H4 .div-label { |
|
43 font-family: Verdana, Arial, Helvetica; |
|
44 color:#333333; |
|
45 font-size: 23pt; |
|
46 font-weight: normal; |
|
47 letter-spacing:-0.03em; |
|
48 margin-left: 68px; |
|
49 float : none; |
|
50 clear : both; |
|
51 } |
|
52 |
|
53 /* For separators */ |
|
54 HR { |
|
55 width: 90%; |
|
56 align: left; |
|
57 height : 1px; |
|
58 color : #dfdfe4; |
|
59 } |
|
60 |
|
61 /* Page description if the page has it. */ |
|
62 .page-description { |
|
63 display: block; |
|
64 font-family: Verdana, Arial, Helvetica; |
|
65 font-size: 10pt; |
|
66 line-height:1.3; |
|
67 float : none; |
|
68 clear : both; |
|
69 margin-left: 70px; |
|
70 } |
|
71 |
|
72 a { |
|
73 font-weight : bold; |
|
74 text-decoration : none; |
|
75 color : #4D4D4D; |
|
76 } |
|
77 |
|
78 /* General link labels */ |
|
79 a .link-label { |
|
80 font-size : 10pt; |
|
81 font-weight : normal; |
|
82 } |
|
83 |
|
84 /* Floating link labels for navigation links */ |
|
85 #navigation-links a .link-label { |
|
86 font-size : 8pt; |
|
87 font-weight : bold; |
|
88 } |
|
89 |
|
90 #navigation-links a.high-contrast .link-label { |
|
91 display : none !important; |
|
92 } |
|
93 |
|
94 /* Text in links. */ |
|
95 a .text { |
|
96 font-size : 8pt; |
|
97 font-weight : normal; |
|
98 } |
|
99 |
|
100 p .group-description { |
|
101 font-size : 10pt; |
|
102 font-family: Verdana, Arial, Helvetica; |
|
103 font-weight : normal; |
|
104 } |
|
105 |
|
106 /* Hide the extra div in links by default. */ |
|
107 .link-extra-div { |
|
108 display : none; |
|
109 } |
|
110 |
|
111 /* |
|
112 * Set up other general properties like padding/margins |
|
113 */ |
|
114 html, body { width : 100%; height : 100%; } |
|
115 |
|
116 html, body, div, h1, h4, p, a { margin : 0px; padding : 0px; } |
|
117 |
|
118 /* |
|
119 * Page header - adding extra padding at the bottom to compensate |
|
120 * for navigation background/header overlap. |
|
121 */ |
|
122 #page-content #content-header { |
|
123 padding-bottom : 22px; |
|
124 } |
|
125 |
|
126 /* For regular div labels */ |
|
127 #page-content div H4 { |
|
128 padding : 10px; |
|
129 padding-bottom : 0px; |
|
130 } |
|
131 |
|
132 /* For the main page content's div label */ |
|
133 #page-content #content-header H4 { |
|
134 padding-bottom : 10px; |
|
135 padding-top : 0px; |
|
136 } |
|
137 |
|
138 /* special case for Mozilla's main content-header label. |
|
139 Mozilla 1.4 needs more room at the top */ |
|
140 #page-content > #content-header H4 { padding-top : 10px; } |
|
141 |
|
142 /* Needed in IE to get shift+tab to show the active image properly */ |
|
143 a:active { |
|
144 border : solid 0px; |
|
145 } |
|
146 |
|
147 a img { |
|
148 border-width : 0; |
|
149 background-repeat : no-repeat; |
|
150 } |
|
151 |
|
152 /* |
|
153 * to get scrollbars working in both IE and Mozilla |
|
154 */ |
|
155 |
|
156 /* |
|
157 * to get scrollbars working in both IE and Mozilla |
|
158 */ |
|
159 html,body { overflow: auto; } |
|
160 html>body { overflow: visible; } |
|
161 |
|
162 /* |
|
163 * Set up the body, decorative background, and navigation for the content |
|
164 * pages. |
|
165 * Note: the root page handles its own background and navigation; these |
|
166 * settings primarily apply to the content pages |
|
167 */ |
|
168 body { |
|
169 background-color : #FFFFFF; |
|
170 background-repeat : no-repeat; |
|
171 background-position : bottom right; |
|
172 } |
|
173 |
|
174 /* |
|
175 * Hide the general-purpose groups - not using them in this theme. |
|
176 */ |
|
177 #extra-group1, |
|
178 #extra-group2, |
|
179 #extra-group3, |
|
180 #extra-group4, |
|
181 #extra-group5 { |
|
182 display : none; |
|
183 } |
|
184 |
|
185 /* |
|
186 * Dimensions. |
|
187 */ |
|
188 body, .page { |
|
189 /* since IE doesn't support min-width, try expression */ |
|
190 height : 100%; |
|
191 } |
|
192 |
|
193 .page { |
|
194 background-image : url(../graphics/contentpage/background.jpg); |
|
195 background-repeat : repeat-x; |
|
196 background-position : top left; |
|
197 |
|
198 min-width : 770px; |
|
199 width:expression(document.body.clientWidth < 770? "770px": "auto" ); |
|
200 min-height : 425px; |
|
201 height : expression(document.body.clientHeight < 425? "425px": "100%" ); |
|
202 } |
|
203 |
|
204 #page-content { |
|
205 background-repeat : no-repeat; |
|
206 background-position : bottom right; |
|
207 height : 65%; |
|
208 } |
|
209 |
|
210 /* |
|
211 * Lay out the navigation links |
|
212 * (Root page does something similar for its navigation) |
|
213 */ |
|
214 #navigation-links { |
|
215 position : relative; |
|
216 left : 0px; |
|
217 top : 0px; |
|
218 padding-left: 12px; |
|
219 height : 118px; |
|
220 width : 100%; |
|
221 } |
|
222 |
|
223 .page > #navigation-links { |
|
224 width: 98.1%; |
|
225 } |
|
226 |
|
227 #navigation-links a { |
|
228 text-align : left; |
|
229 width : auto; |
|
230 height : 64px; |
|
231 } |
|
232 |
|
233 /* |
|
234 * Navigation links have a mixin style 'nav_link<n>' where <n> goes from |
|
235 * 1 to N. This allows us to position these fixed link slots while |
|
236 * not hand-coding the actual link IDs because they can be turned off |
|
237 * by users or products via preferences. |
|
238 */ |
|
239 |
|
240 #navigation-links a.nav_link1 { |
|
241 position: absolute; |
|
242 left : 12px; |
|
243 } |
|
244 |
|
245 #navigation-links a.nav_link2 { |
|
246 position : absolute; |
|
247 left : 76px; |
|
248 } |
|
249 |
|
250 #navigation-links a.nav_link3 { |
|
251 position : absolute; |
|
252 left : 140px; |
|
253 } |
|
254 |
|
255 #navigation-links a.nav_link4 { |
|
256 position : absolute; |
|
257 left : 204px; |
|
258 } |
|
259 |
|
260 #navigation-links a.nav_link5 { |
|
261 position : absolute; |
|
262 left : 268px; |
|
263 } |
|
264 |
|
265 #navigation-links a.nav_link6 { |
|
266 position : absolute; |
|
267 left : 332px; |
|
268 } |
|
269 |
|
270 #navigation-links a.nav_link7 { |
|
271 position: absolute; |
|
272 left : 396px; |
|
273 } |
|
274 |
|
275 #navigation-links a img { |
|
276 position : relative; |
|
277 height : 64px; |
|
278 width : 64px; |
|
279 vertical-align : center; |
|
280 horizontal-align : center; |
|
281 top : 10px; |
|
282 left : 9px; |
|
283 } |
|
284 |
|
285 #navigation-links a.high-contrast img { |
|
286 height: 32px; |
|
287 width: 32px; |
|
288 top: 5px; |
|
289 left: 0px; |
|
290 } |
|
291 |
|
292 /* |
|
293 * Adjust image position for hover version. |
|
294 */ |
|
295 |
|
296 #navigation-links a:hover img, |
|
297 #navigation-links a:focus img, |
|
298 #navigation-links a:active img { |
|
299 top : 2px; |
|
300 left : 0px; |
|
301 } |
|
302 |
|
303 /* |
|
304 * Navigation link label text is normally hidden. Workaround to produce the |
|
305 * same effect as display: none while still allowing screenreaders to |
|
306 * speak it. |
|
307 */ |
|
308 #navigation-links a .link-label { |
|
309 position: absolute; |
|
310 left: -999px; |
|
311 width: 990px; |
|
312 } |
|
313 |
|
314 /* |
|
315 * Not showing description for navigation links. |
|
316 */ |
|
317 #navigation-links a .text { display : none; } |
|
318 |
|
319 #navigation-links a:hover, |
|
320 #navigation-links a:focus, |
|
321 #navigation-links a:active { |
|
322 border-right : 0px; |
|
323 background-image: url(../graphics/icons/ctool/nav_midhov.gif); |
|
324 background-repeat: repeat-x; |
|
325 background-position: 0px 2px; |
|
326 z-index: 20; |
|
327 } |
|
328 |
|
329 #navigation-links a:hover .link-label, |
|
330 #navigation-links a:focus .link-label, |
|
331 #navigation-links a:active .link-label { |
|
332 display : inline; |
|
333 clear : both; |
|
334 float : left; |
|
335 text-align: right; |
|
336 position : relative; |
|
337 padding-left: 7px; |
|
338 padding-top: 7px; |
|
339 padding-right: 7px; |
|
340 margin-right: auto; |
|
341 top : -35px; |
|
342 white-space: nowrap; |
|
343 height : 32px; |
|
344 left: auto; |
|
345 width: auto; |
|
346 } |
|
347 |
|
348 /* |
|
349 * Add the right edge by using the extra div generated for links |
|
350 * and set the right edge image as the background. |
|
351 */ |
|
352 |
|
353 #navigation-links a:hover .link-extra-div, |
|
354 #navigation-links a:focus .link-extra-div, |
|
355 #navigation-links a:active .link-extra-div { |
|
356 display: block; |
|
357 position: absolute; |
|
358 right : -2px; |
|
359 top : 2px; |
|
360 width : 2px; |
|
361 height : 64px; |
|
362 background-image: url(../graphics/icons/ctool/nav_rightedgehov.gif); |
|
363 background-repeat: no-repeat; |
|
364 } |
|
365 |
|
366 /* properties for each of the navigation-links */ |
|
367 #navigation-links a#overview img { |
|
368 background-image : url(../graphics/icons/ctool/ov_nav_32.gif); |
|
369 } |
|
370 #navigation-links a#overview:hover img, |
|
371 #navigation-links a#overview:focus img, |
|
372 #navigation-links a#overview:active img { |
|
373 background-image : url(../graphics/icons/ctool/ov_nav_hover.gif); |
|
374 } |
|
375 |
|
376 #navigation-links a#firststeps img { |
|
377 background-image : url(../graphics/icons/ctool/fs_nav_32.gif); |
|
378 } |
|
379 #navigation-links a#firststeps:hover img, |
|
380 #navigation-links a#firststeps:focus img, |
|
381 #navigation-links a#firststeps:active img { |
|
382 background-image : url(../graphics/icons/ctool/fs_nav_hover.gif); } |
|
383 |
|
384 #navigation-links a#tutorials img { |
|
385 background-image : url(../graphics/icons/ctool/tu_nav_32.gif); |
|
386 } |
|
387 #navigation-links a#tutorials:hover img, |
|
388 #navigation-links a#tutorials:active img, |
|
389 #navigation-links a#tutorials:focus img { |
|
390 background-image : url(../graphics/icons/ctool/tu_nav_hover.gif); |
|
391 } |
|
392 |
|
393 #navigation-links a#samples img { |
|
394 background-image : url(../graphics/icons/ctool/sa_nav_32.gif); |
|
395 } |
|
396 #navigation-links a#samples:hover img, |
|
397 #navigation-links a#samples:active img, |
|
398 #navigation-links a#samples:focus img { |
|
399 background-image : url(../graphics/icons/ctool/sa_nav_hover.gif); |
|
400 } |
|
401 |
|
402 #navigation-links a#whatsnew img { |
|
403 background-image : url(../graphics/icons/ctool/wn_nav_32.gif); |
|
404 } |
|
405 #navigation-links a#whatsnew:hover img, |
|
406 #navigation-links a#whatsnew:focus img, |
|
407 #navigation-links a#whatsnew:active img { |
|
408 background-image : url(../graphics/icons/ctool/wn_nav_hover.gif); |
|
409 } |
|
410 |
|
411 #navigation-links a#migrate img { |
|
412 background-image : url(../graphics/icons/ctool/mi_nav_32.gif); |
|
413 } |
|
414 #navigation-links a#migrate:hover img, |
|
415 #navigation-links a#migrate:focus img, |
|
416 #navigation-links a#migrate:active img { |
|
417 background-image : url(../graphics/icons/ctool/mi_nav_hover.gif); |
|
418 } |
|
419 |
|
420 #navigation-links a#webresources img { |
|
421 background-image : url(../graphics/icons/ctool/wr_nav_32.gif); |
|
422 } |
|
423 #navigation-links a#webresources:hover img, |
|
424 #navigation-links a#webresources:focus img, |
|
425 #navigation-links a#webresources:active img { |
|
426 background-image : url(../graphics/icons/ctool/wr_nav_hover.gif); |
|
427 } |
|
428 |
|
429 #navigation-links a#workbench { |
|
430 position : absolute; |
|
431 left : 494px; |
|
432 text-align : left; |
|
433 } |
|
434 #navigation-links a#workbench .text { display : none; } |
|
435 #navigation-links a#workbench img { |
|
436 background-image : url(../graphics/icons/ctool/wb_nav_32.gif); |
|
437 width : 32px; |
|
438 height : 32px; |
|
439 } |
|
440 |
|
441 #navigation-links a#workbench:hover img, |
|
442 #navigation-links a#workbench:focus img, |
|
443 #navigation-links a#workbench:active img { |
|
444 background-image : url(../graphics/icons/ctool/wb_nav_hover.gif); |
|
445 width : 51px; |
|
446 height : 64px; |
|
447 } |
|
448 |
|
449 #action-links a.high-contrast img, |
|
450 #action-links a.high-contrast:hover img, |
|
451 #action-links a.high-contrast:focus img, |
|
452 #action-links a.high-contrast:active img { |
|
453 display: none !important; |
|
454 } |
|
455 |
|
456 #action-links a.high-contrast .link-label, |
|
457 #action-links a.high-contrast:hover .link-label, |
|
458 #action-links a.high-contrast:focus .link-label, |
|
459 #action-links a.high-contrast:active .link-label { |
|
460 display: block !important; |
|
461 text-decoration: underline; |
|
462 top : 5px; |
|
463 } |
|
464 |
|
465 /* |
|
466 * Lay out the page title and description |
|
467 */ |
|
468 h1, p { margin-left : 10px; } /* required in mozilla so the page description is properly indented */ |
|
469 |
|
470 /* position the page content so that the page title overlays the bottom |
|
471 * of the background image, but make sure the content is always on top |
|
472 * (using z-index) */ |
|
473 |
|
474 #page-content { |
|
475 float : none; |
|
476 clear : both; |
|
477 text-align : center; |
|
478 position : relative; |
|
479 top : -50px; |
|
480 margin-bottom: -50px; |
|
481 z-index : 10; |
|
482 } |
|
483 |
|
484 #page-content p { |
|
485 padding-bottom : 15px; |
|
486 text-align : left; |
|
487 float : none; |
|
488 clear : both; |
|
489 } |
|
490 |
|
491 /* Page content quadrants. Page content is placed in four quadrants. |
|
492 * Upper pair is separated from the bottom pair with a divider |
|
493 * to ensure bottom pair is aligned even with the uneven content |
|
494 * in the upper pair. |
|
495 */ |
|
496 |
|
497 #page-content #top-left { |
|
498 border: none; float: left; margin: 0px; padding: 0px; width: 49%; |
|
499 clear: left; |
|
500 } |
|
501 #page-content #top-right { |
|
502 border: none; float: right; margin: 0px; padding: 0px; width: 49%; |
|
503 clear: right; |
|
504 } |
|
505 /* top-bottom divider - runs the entire width to ensure |
|
506 * bottom boxes start at the same y |
|
507 */ |
|
508 #page-content #content-divider { |
|
509 border: none; float: none; margin: 0; padding: 0px; width: 100%; |
|
510 clear: both; |
|
511 } |
|
512 |
|
513 #page-content #bottom-left { |
|
514 border: none; float: left; margin: 0px; padding: 0px; width: 49%; |
|
515 clear: left; |
|
516 } |
|
517 #page-content #bottom-right { |
|
518 border: none; float: right; margin: 0px; padding: 0px; width: 49%; |
|
519 clear: right; |
|
520 } |
|
521 |
|
522 #page-content #content-header H4, .page-description { |
|
523 text-align : left; |
|
524 margin-right : 10px; |
|
525 float : none; |
|
526 clear : both; |
|
527 } |
|
528 |
|
529 #page-content * > a { |
|
530 vertical-align : middle; |
|
531 } |
|
532 |
|
533 #page-content * a img { |
|
534 height : 57px; |
|
535 width : 57px; |
|
536 vertical-align : middle; |
|
537 } |
|
538 |
|
539 #page-content * a .link-label { |
|
540 display : block; |
|
541 position : relative; |
|
542 top : -50px; |
|
543 left : 60px; |
|
544 margin-right: 60px; |
|
545 } |
|
546 |
|
547 #page-content * a > .link-label { left: 65px; } |
|
548 |
|
549 #page-content * a p .text { |
|
550 display : block; |
|
551 position : relative; |
|
552 top : -45px; |
|
553 margin-bottom: -25px; |
|
554 left : 53px; |
|
555 margin-right: 53px; |
|
556 } |
|
557 |
|
558 #page-content * a p > .text { left: 58px; } |
|
559 |
|
560 #page-content * a:hover { border-right : 5px; } |
|
561 |
|
562 /* The following rules are for extensions in all pages. Extensions should be placed in |
|
563 * groups with the style 'content-group' and contain links with the style 'content-link'. |
|
564 * Group is important so that importance mixin style can be applied to the group that |
|
565 * uses block display. We need to see a solid rectangle around the extension, not |
|
566 * a tight polygon around the link perimeter. |
|
567 */ |
|
568 |
|
569 .content-group { |
|
570 margin-left: 10px; |
|
571 margin-right: 10px; |
|
572 padding-left: 10px; |
|
573 padding-right: 10px; |
|
574 float : none; |
|
575 clear : both; |
|
576 text-align: left; |
|
577 } |
|
578 |
|
579 .content-link .link-label { |
|
580 font-family: Verdana, Arial, Helvetica; |
|
581 font-size: 11pt; |
|
582 font-weight: bold; |
|
583 line-height:1.5; |
|
584 color: #00507C; |
|
585 } |
|
586 |
|
587 .content-link:hover .link-label { |
|
588 color: #69c; |
|
589 text-decoration : underline; |
|
590 } |
|
591 |
|
592 .content-link .text { |
|
593 font-family: Verdana, Arial, Helvetica; |
|
594 font-size: 10pt; |
|
595 line-height: 1.3; |
|
596 } |
|
597 |
|
598 .categoryContentnav { |
|
599 font-family: Verdana, Arial, Helvetica; |
|
600 font-size:10pt; |
|
601 font-weight: bold; |
|
602 color: #4A4D4A; |
|
603 line-height:1.3; |
|
604 } |
|
605 |
|
606 .contentpgNavhover { |
|
607 font-family: Verdana, Arial, Helvetica; |
|
608 font-size: 8pt; |
|
609 font-weight: bold; |
|
610 color: #000; |
|
611 } |
|
612 |
|
613 .topicList { |
|
614 font-family: Verdana, Arial, Helvetica; |
|
615 font-size:8pt; |
|
616 line-height:1.75; |
|
617 color: #00507C; |
|
618 } |
|
619 |
|
620 .topicList:hover { |
|
621 color: #69c; |
|
622 } |
|
623 |
|
624 /* |
|
625 * This part is for hosting embedded document inside |
|
626 * the content area. |
|
627 */ |
|
628 |
|
629 iframe { |
|
630 position:relative; |
|
631 top:16px; |
|
632 width:100%; |
|
633 height:100%; |
|
634 padding-left:10px; |
|
635 } |
|
636 |
|
637 /* mozilla scrollbar appearing off page fix */ |
|
638 #page-content > iframe { |
|
639 width: 98%; |
|
640 padding-left: 2%; |
|
641 } |